bug fixes and adding more gui elements

guiEditor/public/index.js

@@ -27,8 +27,7 @@ var checkHash = function () {
                 xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState == 4) {
                         if (xmlHttp.status == 200) {
-                            
-                            //TODO: Implement
+
                             //var snippet = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload);
                             showEditor();
                         }

guiEditor/src/components/guiList/guiListComponent.tsx

@@ -40,10 +40,10 @@ export class GuiListComponent extends React.Component<IGuiListComponentProps, {
         // Block types used to create the menu from
         const allBlocks: any = {
             Buttons: ["TextButton", "ImageButton"],
-            Controls: ["Slider", "Checkbox", "ColorPicker", "VisualKeyboard"],
-            Containers: ["DisplayGrid", "Grid", "StackPanel"],
+            Controls: ["Slider", "Checkbox", "ColorPicker", "VirtualKeyboard"],
+            Containers: ["DisplayGrid", "Grid"],
             Shapes: ["Ellipse", "Image", "Line", "Rectangle"],
-            Inputs: ["Text", "IntputText", "InputPassword"],
+            Inputs: ["Text", "InputText", "InputPassword"],
         };
 
         // Create node menu

guiEditor/src/diagram/guiNode.ts

@@ -127,7 +127,6 @@ export class GUINode {
         }
         );
 
-        //TODO: Implement
         this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add(rect1 => {
         });
 
@@ -144,7 +143,6 @@ export class GUINode {
         if(!this.clicked) return false;
         console.log("moving");
 
-        //TODO: Implement move with zoom factor.
         let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
         let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
 

guiEditor/src/diagram/workbench.tsx

@@ -376,8 +376,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     onDown(evt: React.PointerEvent<HTMLElement>) {
         this._rootContainer.setPointerCapture(evt.pointerId);
 
-        //TODO: Inplement group selection
-        // Selection?
         /*if (evt.currentTarget === this._hostCanvas && evt.ctrlKey) {
             this._selectionBox = this.props.globalState.hostDocument.createElement("div");
             this._selectionBox.classList.add("selection-box");

guiEditor/src/guiNodeTools.ts

@@ -6,6 +6,12 @@ import { Line } from "babylonjs-gui/2D/controls/line";
 import { Rectangle } from "babylonjs-gui/2D/controls/rectangle";
 import { Slider } from "babylonjs-gui/2D/controls/sliders/slider";
 import { TextBlock } from "babylonjs-gui/2D/controls/textBlock";
+import { VirtualKeyboard } from "babylonjs-gui/2D/controls/virtualKeyboard";
+import { Image } from "babylonjs-gui/2D/controls/image"
+import { InputText } from "babylonjs-gui/2D/controls/inputText";
+import { InputPassword } from "babylonjs-gui/2D/controls/inputPassword";
+import { Grid } from "babylonjs-gui/2D/controls/grid";
+import { DisplayGrid } from "babylonjs-gui/2D/controls/displayGrid";
 
 export class GUINodeTools {
     public static CreateControlFromString (data: string) {
@@ -40,11 +46,42 @@ export class GUINodeTools {
                 element = new TextBlock("Textblock");
                 element.text = "My Text";
                 return element;
+            case "ImageButton":
+                element = Button.CreateImageButton("Button", "Click Me", "textures/grass.png");
+                break;
+            case "VirtualKeyboard":
+                element = new VirtualKeyboard();
+                element.addKeysRow(["1","2", "3","\u2190"]);
+                break;
+            case "Image": 
+                element = new Image("Image", "https://i.imgur.com/ntIgFT6.jpg");
+                break;
+            case "InputText":
+                element = new InputText();
+                element.maxWidth = 0.6;
+                element.text = "Click Me";
+                break;
+            case "InputPassword":
+                element = new InputPassword();
+                break;
+            case "Grid":
+                element = new Grid();
+                element.addColumnDefinition(100, true);
+                element.addColumnDefinition(0.5);
+                element.addColumnDefinition(0.5);
+                element.addColumnDefinition(100, true);
+                element.addRowDefinition(0.5);
+                element.addRowDefinition(0.5);
+                return element;
+            case "DisplayGrid":
+                element = new DisplayGrid();
+                element.width = "200px";
+                element.height = "200px";
+                return element;
             default:
                 element = Button.CreateSimpleButton("Button", "Click Me");
                 break;
         }
-
         element.width = "150px";
         element.height = "40px";
         element.color = "#FFFFFFFF";

guiEditor/src/workbenchEditor.tsx

@@ -12,8 +12,6 @@ import { WorkbenchComponent } from "./diagram/workbench";
 import { GUINode } from "./diagram/guiNode";
 import { _TypeStore } from "babylonjs/Misc/typeStore";
 import { MessageDialogComponent } from "./sharedComponents/messageDialog";
-import { Control } from "babylonjs-gui/2D/controls/control";
-import { Container } from "babylonjs-gui/2D/controls/container";
 
 require("./main.scss");
 
@@ -34,27 +32,9 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     private _leftWidth = DataStorage.ReadNumber("LeftWidth", 200);
     private _rightWidth = DataStorage.ReadNumber("RightWidth", 300);
 
-    private _blocks = new Array<Container | Control>();
-
     private _onWidgetKeyUpPointer: any;
-
     private _popUpWindow: Window;
 
-    /**
-     * Creates a node and recursivly creates its parent nodes from it's input
-     * @param block
-     */
-    public createNodeFromObject(block: Control, recursion = true) {
-        if (this._blocks.indexOf(block) !== -1) {
-            return this._workbenchCanvas.nodes.filter((n) => n.guiControl === block)[0];
-        }
-
-        this._blocks.push(block);
-
-        //TODO: Implement
-        const node = null;
-        return node;
-    }
 
     componentDidMount() {
         if (this.props.globalState.hostDocument) {
@@ -84,13 +64,13 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             (evt) => {
                 if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.globalState.blockKeyboardEvents) {
                     // Delete
-                    let selectedItems = this._workbenchCanvas.selectedGuiNodes;
+                    /*let selectedItems = this._workbenchCanvas.selectedGuiNodes;
 
                     for (var selectedItem of selectedItems) {
                         selectedItem.dispose();
                     }
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                    return;
+                    return;*/
                 }
 
                 if (!evt.ctrlKey || this.props.globalState.blockKeyboardEvents) {
@@ -112,7 +92,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                     }
                 } else if (evt.key === "v") {
                     // Paste
-                    //TODO: Implement
                 }
             },
             false
@@ -227,8 +206,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
         let newGuiNode = this._workbenchCanvas.appendBlock(guiElement);
 
-        //TODO: Get correct positioning
-
         /*let x = event.clientX; // - event.currentTarget.offsetLeft - this._workbenchCanvas.x;
         let y = event.clientY;   // - event.currentTarget.offsetTop - this._workbenchCanvas.y - 20;