Merge pull request #9812 from msDestiny14/msDestiny14/gui

[GUI Editor] Tweaks and Fixes for Demo

dist/preview release/what's new.md

@@ -61,6 +61,7 @@
 - Added GUI Editor project to master. ([msDestiny14](https://github.com/msDestiny14))
 - Moving GUI property tab components into GUIEditor. ([msDestiny14](https://github.com/msDestiny14))
 - Adding basic saving and loading funtionality. ([msDestiny14](https://github.com/msDestiny14))
+- Adding more GUI controls. ([msDestiny14](https://github.com/msDestiny14))
 
 ### GUI
 

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/components/propertyTab/propertyTabComponent.tsx

@@ -242,11 +242,15 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         if (this.state.currentNode) {
             return (
                 <div id="propertyTab">
-                    <div id="header">
+                    <div id="header" >
                         <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
                         <div id="title">GUI EDITOR</div>
                     </div>
                     {this.renderProperties()}
+                        <ButtonLineComponent label="DELETE GUI" onClick={() => {
+                           this.state.currentNode?.dispose();
+                           this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+                        }} />
                 </div>
             );
         }

guiEditor/src/diagram/guiNode.ts

@@ -129,7 +129,6 @@ export class GUINode {
             console.log("out");
         });
 
-        //TODO: Implement
         this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add((rect1) => {});
     }
 
@@ -143,9 +142,8 @@ export class GUINode {
         if (!this.clicked && !ignorClick) 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;
+        let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
+        let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
 
         this.x += newX;
         this.y += newY;

guiEditor/src/diagram/workbench.tsx

@@ -400,8 +400,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");
@@ -516,7 +514,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         
         // Create our first scene.
         var scene = new Scene(engine);
-        scene.clearColor = new Color4(0.2, 0.2, 0.3, 0.1);
+        scene.clearColor = new Color4(0.2, 0.2, 0.3, 1.0);
 
         // This creates and positions a free camera (non-mesh)
         var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

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", "https://playground.babylonjs.com/textures/grass.png");
+                break;
+            case "VirtualKeyboard":
+                element = new VirtualKeyboard();
+                element.addKeysRow(["1","2", "3","\u2190"]);
+                break;
+            case "Image": 
+                element = new Image("Image", "https://playground.babylonjs.com/textures/grass.png");
+                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,31 +32,13 @@ 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) {
-            this._workbenchCanvas = this.refs["graphCanvas"] as WorkbenchComponent;
+            this._workbenchCanvas = this.refs["workbenchCanvas"] as WorkbenchComponent;
         }
 
         if (navigator.userAgent.indexOf("Mobile") !== -1) {
@@ -84,14 +64,6 @@ 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;
-
-                    for (var selectedItem of selectedItems) {
-                        selectedItem.dispose();
-                    }
-
-                    this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                    return;
                 }
 
                 if (!evt.ctrlKey || this.props.globalState.blockKeyboardEvents) {
@@ -113,7 +85,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                     }
                 } else if (evt.key === "v") {
                     // Paste
-                    //TODO: Implement
                 }
             },
             false
@@ -200,7 +171,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
         }
 
         const deltaX = evt.clientX - this._startX;
-        const rootElement = evt.currentTarget.ownerDocument!.getElementById("workbench-editor-workbench-root") as HTMLDivElement;
+        const rootElement = evt.currentTarget.ownerDocument!.getElementById("gui-editor-workbench-root") as HTMLDivElement;
 
         if (forLeft) {
             this._leftWidth += deltaX;
@@ -210,7 +181,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             this._rightWidth -= deltaX;
             this._rightWidth = Math.max(250, Math.min(500, this._rightWidth));
             DataStorage.WriteNumber("RightWidth", this._rightWidth);
-            rootElement.ownerDocument!.getElementById("preview")!.style.height = this._rightWidth + "px";
         }
 
         rootElement.style.gridTemplateColumns = this.buildColumnLayout();
@@ -229,8 +199,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; 
 
@@ -385,7 +353,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                             event.preventDefault();
                         }}
                     >
-                        <WorkbenchComponent ref={"graphCanvas"} globalState={this.props.globalState} />
+                        <WorkbenchComponent ref={"workbenchCanvas"} globalState={this.props.globalState} />
                     </div>
 
                     <div id="rightGrab" onPointerDown={(evt) => this.onPointerDown(evt)} onPointerUp={(evt) => this.onPointerUp(evt)} onPointerMove={(evt) => this.resizeColumns(evt, false)}></div>