hooking up clicking the ui element

guiEditor/src/diagram/graphCanvas.tsx

@@ -50,6 +50,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _svgCanvas: HTMLElement;
     private _rootContainer: HTMLDivElement;
     private _nodes: GraphNode[] = [];
+    private _guiNodes: GraphNode[] = [];
     private _links: NodeLink[] = [];
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null
@@ -62,7 +63,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _y = 0;
     private _zoom = 1;
     private _selectedNodes: GraphNode[] = [];
-    private _selectedGuiNodes: GuiNode[] = [];
+    private _selectedGuiNodes: GraphNode[] = [];
     private _selectedLink: Nullable<NodeLink> = null;
     private _selectedPort: Nullable<NodePort> = null;
     private _candidateLink: Nullable<NodeLink> = null;
@@ -179,29 +180,26 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         return this._frameContainer;
     }
 
-
-    
-
-
-    
-
     constructor(props: IGraphCanvasComponentProps) {
         super(props);
 
         props.globalState.onSelectionChangedObservable.add(selection => {            
             if (!selection) {
                 this._selectedNodes = [];
+                this._selectedGuiNodes = [];
                 this._selectedLink = null;
                 this._selectedFrame = null;
                 this._selectedPort = null;
             } else {
                 if (selection instanceof NodeLink) {
                     this._selectedNodes = [];
+                    this._selectedGuiNodes = [];
                     this._selectedFrame = null;
                     this._selectedLink = selection;
                     this._selectedPort = null;
                 } else if (selection instanceof GraphFrame) {
                     this._selectedNodes = [];
+                    this._selectedGuiNodes = [];
                     this._selectedFrame = selection;
                     this._selectedLink = null;
                     this._selectedPort = null;
@@ -209,17 +207,21 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                     if (this._ctrlKeyIsPressed) {
                         if (this._selectedNodes.indexOf(selection) === -1) {
                             this._selectedNodes.push(selection);
+                            this._selectedGuiNodes.push(selection);
                         }
                     } else {                    
                         this._selectedNodes = [selection];
+                        this._selectedGuiNodes = [selection];
                     }
                 } else if(selection instanceof NodePort){
                     this._selectedNodes = [];
+                    this._selectedGuiNodes = [];
                     this._selectedFrame = null;
                     this._selectedLink = null;
                     this._selectedPort = selection;
                 } else {
                     this._selectedNodes = [];
+                    this._selectedGuiNodes = [];
                     this._selectedFrame = null;
                     this._selectedLink = null;
                     this._selectedPort = selection.port;
@@ -361,7 +363,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     }
 
     appendBlock(block: NodeMaterialBlock) {
-        let newNode = new GraphNode(block, this.props.globalState);
+        let newNode = new GraphNode(block, this.props.globalState, null);
 
         newNode.appendVisual(this._graphCanvas, this);
 
@@ -978,6 +980,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         button1.onPointerUpObservable.add(function() {
         });
         this._guis.push(button1);
+        var fakeNodeMaterialBlock = new NodeMaterialBlock("Button");
+        this._guiNodes.push(new GraphNode(fakeNodeMaterialBlock, this.globalState, button1));
         this._advancedTexture.addControl(button1);    
     }
 
@@ -985,8 +989,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _advancedTexture: BABYLON.GUI.AdvancedDynamicTexture;
     updateGUIs()
     {
-        this._guis.forEach(element => {
-            element.paddingLeft == 1;
+        this._guiNodes.forEach(element => {
+            element.guiNode?.paddingLeft == 1;
             //should create a new component type that has the contrainer ias a property.
             //with then have the update information.
             

guiEditor/src/diagram/graphNode.ts

@@ -172,9 +172,13 @@ export class GraphNode {
         }
     }
 
-    public constructor(public block: NodeMaterialBlock, globalState: GlobalState) {
+    public constructor(public block: NodeMaterialBlock, globalState: GlobalState, public guiNode: BABYLON.GUI.Container | null | undefined) {
         this._globalState = globalState;
 
+        guiNode?.onPointerUpObservable.add(() => {
+            this.isSelected = true;
+        });
+
         this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add(node => {
             if (node === this) {
                 this._visual.classList.add("selected");

guiEditor/src/diagram/guiNode.ts

@@ -41,6 +41,10 @@ export class GuiNode {
     private _isVisible = true;
     private _enclosingFrameId = -1;
 
+
+    private _guiElement: BABYLON.GUI.Container;
+
+
     public get isVisible() {
         return this._isVisible;
     }
@@ -133,11 +137,11 @@ export class GuiNode {
     }
 
     public get id() {
-        return this.block.uniqueId;
+        return this._guiElement.uniqueId;
     }
 
     public get name() {
-        return this.block.name;
+        return this._guiElement.name;
     }
 
     public get isSelected() {
@@ -171,8 +175,9 @@ export class GuiNode {
         }
     }
 
-    public constructor(public block: NodeMaterialBlock, globalState: GlobalState) {
+    public constructor(public guiElement: BABYLON.GUI.Container, globalState: GlobalState) {
         this._globalState = globalState;
+        this._guiElement = guiElement;
 
         //this is where the clicking needs to happen?
         /*this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add(node => {
@@ -256,39 +261,13 @@ export class GuiNode {
     }
 
     public refresh() {
-        if (this._displayManager) {
-            this._header.innerHTML = this._displayManager.getHeaderText(this.block);
-            this._displayManager.updatePreviewContent(this.block, this._content);
-            this._visual.style.background = this._displayManager.getBackgroundColor(this.block);
-            let additionalClass = this._displayManager.getHeaderClass(this.block);
-            this._header.classList.value = "header";
-            if (additionalClass) {
-                this._header.classList.add(additionalClass);
-            }
-        } else {
-            this._header.innerHTML = this.block.name;
-        }
 
-        for (var port of this._inputPorts) {
-            port.refresh();
-        }
-
-        for (var port of this._outputPorts) {
-            port.refresh();
-        }
-
-        if(this.enclosingFrameId !== -1) {   
-            let index = this._ownerCanvas.frames.findIndex(frame => frame.id === this.enclosingFrameId);
-            if(index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
-                this._ownerCanvas.frames[index].redrawFramePorts();
-            }
-        }   
-        this._comments.innerHTML = this.block.comments || "";
-        this._comments.title = this.block.comments || "";
 
     }
 
     private _onDown(evt: PointerEvent) {
+
+        //i think this is where them movement code goes?
         // Check if this is coming from the port
         if (evt.srcElement && (evt.srcElement as HTMLElement).nodeName === "IMG") {
             return;
@@ -349,8 +328,8 @@ export class GuiNode {
         evt.stopPropagation();
     }
 
-    public renderProperties(): Nullable<JSX.Element> {
-        let control = PropertyLedger.RegisteredControls[this.block.getClassName()];
+    /*public renderProperties(): Nullable<JSX.Element> {
+        let control = PropertyLedger.RegisteredControls[this._guiElement.getClassName()];
 
         if (!control) {
             control = GenericPropertyComponent;
@@ -358,15 +337,15 @@ export class GuiNode {
 
         return React.createElement(control, {
             globalState: this._globalState,
-            block: this.block
+            guiElement: this._guiElement
         });
-    }
+    }*/
 
     public appendVisual(root: HTMLDivElement, owner: GraphCanvasComponent) {
         this._ownerCanvas = owner;
 
         // Display manager
-        let displayManagerClass = DisplayLedger.RegisteredControls[this.block.getClassName()];
+        let displayManagerClass = DisplayLedger.RegisteredControls[this._guiElement.getClassName()];
         
 
         if (displayManagerClass) {