parenting system beginning work

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -165,6 +165,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                     </div>
                     {//myScene && <SceneExplorerComponent globalState={this.props.globalState} scene={myScene}></SceneExplorerComponent>
                     }
+                    {this.state.currentNode?.renderContainer()}
                     {this.state.currentNode?.renderProperties()}
                 </div>
             );

guiEditor/src/diagram/guiNode.ts

@@ -9,8 +9,10 @@ import { Control } from 'babylonjs-gui/2D/controls/control';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { Container } from 'babylonjs-gui/2D/controls/container';
 import { _ThinInstanceDataStorage } from 'babylonjs';
+import { ContainerPropertyTabComponent } from './properties/containterPropertyComponent';
 
 export class GUINode {
+
     private _x = 0;
     private _y = 0;
     private _gridAlignedX = 0;
@@ -24,6 +26,9 @@ export class GUINode {
     private _isVisible = true;
     private _enclosingFrameId = -1;
     private _isContainer = false;
+    
+    public children: GUINode[] = [];
+
     public get isVisible() {
         return this._isVisible;
     }
@@ -108,19 +113,21 @@ export class GUINode {
         this._ownerCanvas = this._globalState.workbench;
         this.x = guiNode.leftInPixels;
         this.y = guiNode.topInPixels;
-        
         guiNode.onPointerUpObservable.add(evt => {
             this.clicked = false;
             console.log("up");
         });
 
         guiNode.onPointerDownObservable.add( evt => {
+            if(!this._ownerCanvas.isUp) return;
             this.clicked = true;
             this.isSelected = true;
             console.log("down");
+            this._ownerCanvas.isUp = false;
         }
         );
 
+        
         guiNode.onPointerEnterObservable.add( evt => {
             this._ownerCanvas.isOverGUINode = true;
             console.log("in");
@@ -147,9 +154,9 @@ export class GUINode {
     }
 
     public clicked: boolean;
-    public _onMove(evt: Vector2, startPos: Vector2) {
+    public _onMove(evt: Vector2, startPos: Vector2, ignorClick: boolean = false) {
        
-        if(!this.clicked) return false;
+        if(!this.clicked && !ignorClick) return false;
         console.log("moving");
 
         //TODO: Implement move with zoom factor.
@@ -159,6 +166,10 @@ export class GUINode {
         this.x += newX;
         this.y += newY;  
 
+        this.children.forEach(child => {
+           child._onMove(evt, startPos, true);
+        });
+
         return true;
         //evt.stopPropagation();
     }
@@ -177,6 +188,15 @@ export class GUINode {
         });
     }
 
+    renderContainer(): React.ReactNode {
+        if(!this._isContainer) return null;
+
+        return React.createElement(ContainerPropertyTabComponent, {
+        globalState: this._globalState,
+        guiNode: this
+        });
+    }
+
     public updateVisual()
     {
         this.guiNode.leftInPixels = this.x;
@@ -188,6 +208,7 @@ export class GUINode {
             case "Button":
             case "StackPanel":
             case "Rectangle":
+            case "Ellipse":
                 return true;
             default:
                 return false;
@@ -198,12 +219,12 @@ export class GUINode {
     public addGui(childNode: GUINode)
     {
         if(!this._isContainer) return;
-        
+        this.children.push(childNode);
         (this.guiNode as Container).addControl(childNode.guiNode);
         
         //adjust the position to be relative
-        childNode.x = this.x - childNode.x;
-        childNode.y = this.y - childNode.y;
+        //childNode.x = this.x - childNode.x;
+        //childNode.y = this.y - childNode.y;
     }
 
     public dispose() {

guiEditor/src/diagram/properties/containterPropertyComponent.tsx

@@ -0,0 +1,48 @@
+
+import { Container } from "babylonjs-gui";
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { ButtonLineComponent } from "../../sharedUiComponents/lines/buttonLineComponent";
+import { TextLineComponent } from "../../sharedUiComponents/lines/textLineComponent";
+import { IContainerComponentProps} from './propertyComponentProps';
+
+export class ContainerPropertyTabComponent extends React.Component<IContainerComponentProps> {
+    constructor(props: IContainerComponentProps) {
+        super(props);
+    }
+
+    AddElement()
+    {
+        let newElementName = window.prompt("Please enter name of the element");
+
+        if (!newElementName) {
+            return;
+        }
+
+        var childGuiNode = this.props.globalState.workbench.findNodeFromGuiElementName(newElementName);
+        this.props.guiNode.addGui(childGuiNode);
+    }
+
+    
+    render() {
+
+        var guiElementMenu: JSX.Element[] = [];
+        var guiNode = this.props.guiNode.guiNode as Container;
+        guiNode.children.forEach(child => {
+            guiElementMenu.push(<TextLineComponent label={child.name}></TextLineComponent>);           
+        });
+
+        
+
+        return (
+            <>                
+                <LineContainerComponent title="CONTAINER PROPERTIES"> 
+                {guiElementMenu}               
+                <ButtonLineComponent label="Add element" onClick={() => {
+                    this.AddElement();
+                }} />
+                </LineContainerComponent>            
+            </>
+        );
+    }
+}

guiEditor/src/diagram/properties/propertyComponentProps.ts

@@ -1,7 +1,13 @@
 import { Control } from "babylonjs-gui/2D/controls/control";
 import { GlobalState } from "../../globalState";
+import { GUINode } from "../guiNode";
 
 export interface IPropertyComponentProps {
     globalState: GlobalState;
     guiBlock: Control;
+}
+
+export interface IContainerComponentProps {
+    globalState: GlobalState;
+    guiNode: GUINode;
 }

guiEditor/src/diagram/workbench.tsx

@@ -150,7 +150,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                 this._selectedGuiNodes = [];
             } 
             else {
-                if (selection instanceof GUINode){
+                if (selection instanceof GUINode ) {
                     if (this._ctrlKeyIsPressed) {
                         if (this._selectedGuiNodes.indexOf(selection) === -1) {
                             this._selectedGuiNodes.push(selection);
@@ -159,6 +159,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                     else {              
                         this._selectedGuiNodes = [selection];
                     }
+                    
                 
                 } 
             }
@@ -241,8 +242,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         this._oldY = -1;
     }
 
-    findNodeFromGuiElement(guiElement: Control) {
-       return this._guiNodes.filter(n => n.guiNode === guiElement)[0];
+    findNodeFromGuiElementName(guiElement: string) {
+       return this._guiNodes.filter(n => n.guiNode.name === guiElement)[0];
     }
 
     reset() {
@@ -420,9 +421,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         }
         
         this._mouseStartPointX = evt.clientX;
-        this._mouseStartPointY = evt.clientY;        
+        this._mouseStartPointY = evt.clientY;   
+             
     }
 
+    public isUp : boolean = true;
     onUp(evt: React.PointerEvent) {
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
@@ -441,6 +444,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             this._frameCandidate = null;
 
         }
+        this.isUp = true;
+        
     }
 
     onWheel(evt: React.WheelEvent) {