adding new gui elements

guiEditor/src/blockTools.ts

@@ -3,6 +3,15 @@ export class BlockTools {
         switch (data) {
             case "Slider":
                 return new BABYLON.GUI.Slider("Slider");
+            case "Checkbox":
+                return new BABYLON.GUI.Checkbox("Checkbox");
+            case "ColorPicker":
+                return new BABYLON.GUI.ColorPicker("ColorPicker");
+            case "Ellipse":
+                return new BABYLON.GUI.Ellipse("Ellipse");
+            case "Rectangle":
+                return new BABYLON.GUI.Rectangle("Rectangle");
+
         }
 
         return BABYLON.GUI.Button.CreateSimpleButton("Button", "Click Me");

guiEditor/src/components/nodeList/nodeListComponent.tsx

@@ -20,7 +20,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
     private _onResetRequiredObserver: Nullable<Observer<void>>;
 
     private static _Tooltips: {[key: string]: string} = {
-        "BonesBlock": "Provides a world matrix for each vertex, based on skeletal (bone/joint) animation",
+        "Buttons": "Provides a world matrix for each vertex, based on skeletal (bone/joint) animation",
     };
 
     constructor(props: INodeListComponentProps) {

guiEditor/src/diagram/graphNode.ts

@@ -132,12 +132,12 @@ export class GUINode {
     public constructor(globalState: GlobalState, public guiNode: BABYLON.GUI.Container | BABYLON.GUI.Control) {
         this._globalState = globalState;
 
-        guiNode?.onPointerUpObservable.add(evt => {
+        guiNode.onPointerUpObservable.add(evt => {
             this.isSelected = true;
             this.clicked = false;
         });
 
-        guiNode?.onPointerDownObservable.add( evt => {this.clicked = true; this._onDown(evt);}
+        guiNode.onPointerDownObservable.add( evt => {this.clicked = true; this._onDown(evt);}
         );
 
         //guiNode?.onPointerMoveObservable.add( evt => {this._onMove(evt);} );
@@ -199,12 +199,14 @@ export class GUINode {
         this.y = this._ownerCanvas.getGridPosition(this.y, useCeil);
     }
 
-    private _onUp(evt: BABYLON.GUI.Vector2WithInfo) {
+    private _onUp(evt: BABYLON.Vector2) {
         //evt.stopPropagation();
 
        //for (var selectedNode of this._ownerCanvas.selectedNodes) {
         //this.cleanAccumulation();
         //}
+
+        this.clicked = false;
         
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
@@ -231,14 +233,13 @@ export class GUINode {
     }
 
     public renderProperties(): Nullable<JSX.Element> {
-        let className = this.guiNode ? this.guiNode.getClassName() : "";
+        let className = this.guiNode.getClassName();
         let control = PropertyGuiLedger.RegisteredControls[className];
         
         if (!control) {
             control = GenericPropertyComponent;
         }
 
-        
         return React.createElement(control, {
         globalState: this._globalState,
         guiBlock: this.guiNode
@@ -266,7 +267,7 @@ export class GUINode {
         this._visual.classList.add("visual");
 
         //this._visual.addEventListener("pointerdown", evt => this._onDown(evt));
-        //this._visual.addEventListener("pointerup", evt => this._onUp(evt));
+        //this._visual.addEventListener("pointerup", evt => this._onUp(new BABYLON.Vector2(evt.x, evt.y)));
         //this._visual.addEventListener("pointermove", evt => this._onMove(evt));
 
         this._header = root.ownerDocument!.createElement("div");

guiEditor/src/diagram/properties/checkboxGuiPropertyComponent.tsx

@@ -0,0 +1,28 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { IPropertyComponentProps } from './propertyComponentProps';
+import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
+import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
+import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
+
+export class CheckboxPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps) {
+        super(props);
+        this.checkbox = this.props.guiBlock as BABYLON.GUI.Checkbox;
+    }
+
+    private checkbox : BABYLON.GUI.Checkbox;
+
+    render() {
+        return (
+            <>                
+                <GeneralPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
+                <LineContainerComponent title="PROPERTIES">
+                <FloatLineComponent globalState={this.props.globalState} label="check size ratio" target={this.checkbox} propertyName="checkSizeRatio"/>
+                <CheckBoxLineComponent label="is checked" target={this.checkbox} propertyName="isChecked" disabled={this.checkbox.isChecked}/>
+                </LineContainerComponent>            
+            </>
+        );
+    }
+}

guiEditor/src/diagram/properties/shapeGuiPropertyComponent.tsx

@@ -0,0 +1,41 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { IPropertyComponentProps } from './propertyComponentProps';
+import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
+import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
+
+export class ShapePropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps) {
+        super(props);
+        
+        this.mode = this.props.guiBlock.getClassName();
+    }
+
+    getAsType()
+    {
+        switch (this.mode) {
+            case "Rectangle":
+                return this.props.guiBlock as BABYLON.GUI.Rectangle;
+            case "Ellipse":
+                return this.props.guiBlock as BABYLON.GUI.Ellipse;       
+            default:
+                return null;
+        }
+    }
+
+    private mode : string;
+
+    render() {
+        return (
+            <>                
+                <GeneralPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
+                <LineContainerComponent title="PROPERTIES">
+                <FloatLineComponent globalState={this.props.globalState} label="Thinkness" target={this.getAsType()} propertyName="thickness"/>
+                {this.mode === "Rectangle" &&
+                 <FloatLineComponent globalState={this.props.globalState} label="Corner Radius" target={this.getAsType()} propertyName="cornerRadius"/>}
+                </LineContainerComponent>            
+            </>
+        );
+    }
+}

guiEditor/src/diagram/properties/sliderGuiPropertyComponent.tsx

@@ -24,7 +24,7 @@ export class SliderPropertyTabComponent extends React.Component<IPropertyCompone
     render() {
         return (
             <>                
-                <GeneralPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
+                <GeneralPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
                 <LineContainerComponent title="PROPERTIES"> 
                 <NumericInputComponent globalState={this.props.globalState} label="Minimum Value" value={this.slider.minimum}
                 onChange={evt =>{

guiEditor/src/diagram/propertyLedger.ts

@@ -9,6 +9,8 @@ import { TexturePropertyTabComponent } from './properties/texturePropertyTabComp
 import { TrigonometryPropertyTabComponent } from './properties/trigonometryNodePropertyComponent';
 import { ButtonPropertyTabComponent } from './properties/buttonGuiPropertyComponent copy';
 import { SliderPropertyTabComponent } from './properties/sliderGuiPropertyComponent';
+import { CheckboxPropertyTabComponent } from './properties/checkboxGuiPropertyComponent';
+import { ShapePropertyTabComponent } from './properties/shapeGuiPropertyComponent';
 
 export class PropertyLedger {
     public static RegisteredControls: {[key: string] : ComponentClass<IPropertyComponentProps>} = {};
@@ -33,4 +35,7 @@ PropertyLedger.RegisteredControls["TrigonometryBlock"] = TrigonometryPropertyTab
 
 
 PropertyGuiLedger.RegisteredControls["Button"] = ButtonPropertyTabComponent;
-PropertyGuiLedger.RegisteredControls["Slider"] = SliderPropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Slider"] = SliderPropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Checkbox"] = CheckboxPropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Rectangle"] = ShapePropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Ellipse"] = ShapePropertyTabComponent;

guiEditor/src/diagram/workbench.tsx

@@ -413,27 +413,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             return;
         }
 
-        // Frame?
-        if (evt.currentTarget === this._hostCanvas && evt.shiftKey) {
-            this._frameCandidate = this.props.globalState.hostDocument.createElement("div");
-            this._frameCandidate.classList.add("frame-box");
-            this._frameContainer.appendChild(this._frameCandidate);
-
-            const rootRect = this.canvasContainer.getBoundingClientRect();      
-            this._selectionStartX = (evt.pageX - rootRect.left);
-            this._selectionStartY = (evt.pageY - rootRect.top);
-            this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
-            this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
-            this._frameCandidate.style.width = "0px";
-            this._frameCandidate.style.height = "0px";
-            return;
-        }
-
-        // Port dragging
-        if (evt.nativeEvent.srcElement && (evt.nativeEvent.srcElement as HTMLElement).nodeName === "IMG") {
-            return;
-        }
-
         this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
         this._mouseStartPointX = evt.clientX;
         this._mouseStartPointY = evt.clientY;        
@@ -510,6 +489,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         const yFactor = this._rootContainer.clientHeight / this._rootContainer.scrollHeight;
         const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
         
+
         this.zoom = zoomFactor;
         this.x = 0;
         this.y = 0;
@@ -545,6 +525,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         // GUI
         this.globalState.guiTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
         
+        // Watch for browser/canvas resize events
+        window.addEventListener("resize", function () {
+        engine.resize();
+        });
+
         engine.runRenderLoop(() => {this.updateGUIs(); scene.render()});
     }