Merge pull request #94 from BabylonJS/feature/graph-context-menu

Feature/graph context menu

Author: julien-moreau

babylonjs-editor.d.ts

@@ -818,6 +818,8 @@ declare module 'babylonjs-editor/editor/gui/tree' {
     }
     export default class Tree {
             name: string;
+            wholerow: boolean;
+            keyboard: boolean;
             element: JSTree;
             onClick: <T>(id: string, data: T) => void;
             onDblClick: <T>(id: string, data: T) => void;

src/editor/gui/edition.ts

@@ -146,14 +146,30 @@ export default class Edition {
         };
 
         const folder = parent.addFolder(name);
-        /*
-        TODO: Fix CSS Issue with color element
-        folder.addColor(target, 'color').name('Color').onChange((value: number[]) => {
-            this.getController('r', folder).setValue(value[0] / 255);
-            this.getController('g', folder).setValue(value[1] / 255);
-            this.getController('b', folder).setValue(value[2] / 255);
-        });
-        */
+        const picker = {
+            callback: () => {
+                const input = document.createElement('input');
+                input.type = 'color';
+                input.value = color.toHexString();
+                input.addEventListener('input', ev => {
+                    const result = Color3.FromHexString(input.value);
+                    color.r = result.r;
+                    color.g = result.g;
+                    color.b = result.b;
+                    this.updateDisplay();
+                });
+                input.addEventListener('change', ev => {
+                    const result = Color3.FromHexString(input.value);
+                    color.r = result.r;
+                    color.g = result.g;
+                    color.b = result.b;
+                    this.updateDisplay();
+                });
+                input.click();
+            }
+        };
+
+        folder.add(picker, 'callback').name('Color Picker');
         folder.add(color, 'r').min(0).max(1).step(0.01).onChange(() => callback && callback());
         folder.add(color, 'g').min(0).max(1).step(0.01).onChange(() => callback && callback());
         folder.add(color, 'b').min(0).max(1).step(0.01).onChange(() => callback && callback());

src/editor/gui/tree.ts

@@ -20,6 +20,8 @@ export interface ContextMenuItem {
 export default class Tree {
     // Public members
     public name: string;
+    public wholerow: boolean = false;
+    public keyboard: boolean = false;
     public element: JSTree = null;
 
     public onClick: <T>(id: string, data: T) => void;
@@ -166,6 +168,17 @@ export default class Tree {
      * @param parentId the parent id
      */
     public build (parentId: string): void {
+        const plugins = [
+            'contextmenu', 'dnd', 'search',
+            'state', 'types'
+        ];
+
+        if (this.wholerow)
+            plugins.push('wholerow')
+
+        if (this.keyboard)
+            plugins.push('hotkeys');
+
         this.element = $('#' + parentId).jstree({
             core: {
                 check_callback: true,
@@ -178,10 +191,7 @@ export default class Tree {
                     return this.onCanDrag && this.onCanDrag(node.id, node.data);
                 }
             },
-            plugins: [
-                'contextmenu', 'dnd', 'search',
-                'state', 'types'
-            ],
+            plugins: plugins,
             search: {
                 show_only_matches: true,
                 show_only_matches_children: true

src/extensions/behavior/graph-nodes/typings.ts

@@ -7,8 +7,12 @@ export abstract class LiteGraphNode {
     public mode: number;
     public color: string;
     public bgColor: string;
+    public readonly type: string;
+    
     public properties: { [index: string]: string | number | boolean };
+    public outputs: any[];
 
+    public pos: number[];
     public size: number[] = [60, 20];
     public shape: string = 'round';
 
@@ -83,6 +87,9 @@ export abstract class LiteGraphNode {
 
     public onDrawBackground? (ctx: CanvasRenderingContext2D): void;
 
+    public onGetOutputs? (): string[][];
+    public onGetInputs? (): string[][];
+
     /**
      * Returns the target node
      * @param name the name of the node