working on exporting

gui/src/2D/advancedDynamicTexture.ts

@@ -878,8 +878,9 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             }
             delete this._lastControlOver[pointerEvent.pointerId];
             if (this._lastControlDown[pointerEvent.pointerId] && this._lastControlDown[pointerEvent.pointerId] !== this._capturingControl[pointerEvent.pointerId]) {
-               // this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
-              //  delete this._lastControlDown[pointerEvent.pointerId];
+              // this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
+              // delete this._lastControlDown[pointerEvent.pointerId];
+              //needs to be uncommented.
             }
         });
     }

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -315,6 +315,19 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         return true;
     }
 
+    generateCode(guiTexture : BABYLON.GUI.AdvancedDynamicTexture)
+    {
+        let codeString = "";
+        let children = guiTexture.getChildren()[0].children;
+        let guiCount = 0;
+        children.forEach(element => {
+            codeString += `var guiObject${guiCount.toString()} = new BABYLON.GUI.${element.typeName || "button"}("${element.name }");\r\n`;
+
+            ++guiCount;
+        });
+        return codeString;
+    }
+
     render() {
         if (this.state.currentNode) {
             return (
@@ -399,7 +412,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                     </LineContainerComponent>
                     <LineContainerComponent title="FILE">
                         <ButtonLineComponent label="Generate code" onClick={() => {
-                            StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.generateCode(), "code.txt");
+                            StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.generateCode(this.props.globalState.guiTexture), "guiCode.txt");
                         }} />
                     </LineContainerComponent>
                 </div>

guiEditor/src/diagram/graphCanvas.tsx

@@ -971,7 +971,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         camera.attachControl(true);
         
         // GUI
-        this._advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+        this.globalState.guiTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
         
         engine.runRenderLoop(() => {this.updateGUIs(); scene.render()});
     }
@@ -979,7 +979,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
     public addNewButton()
     {
-        if(!this._advancedTexture)
+        if(!this.globalState.guiTexture)
         {
             this.createGUICanvas();
         }
@@ -992,17 +992,39 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         button1.background = "#008000";
         button1.onPointerUpObservable.add(function() {
         });
-        this._guis.push(button1);
+
         var fakeNodeMaterialBlock = new NodeMaterialBlock("Button");
         var newGuiNode = new GraphNode(fakeNodeMaterialBlock, this.globalState, button1);
         newGuiNode.appendVisual(this._graphCanvas, this);
         this._guiNodes.push(newGuiNode);
 
-        this._advancedTexture.addControl(button1);    
+        this.globalState.guiTexture.addControl(button1);    
     }
 
-    private _guis: BABYLON.GUI.Container[] = [];
-    private _advancedTexture: BABYLON.GUI.AdvancedDynamicTexture;
+    public addNewSlider()
+    {
+        if(!this.globalState.guiTexture)
+        {
+            this.createGUICanvas();
+        }
+
+        var slider1 = new BABYLON.GUI.Slider("Slider");
+        slider1.width = "150px"
+        slider1.height = "40px";
+        slider1.color = "#FFFFFF";
+        slider1.background = "#008000";
+        slider1.onPointerUpObservable.add(function() {
+        });
+        var fakeNodeMaterialBlock = new NodeMaterialBlock("Slider");
+        var newGuiNode = new GraphNode(fakeNodeMaterialBlock, this.globalState, slider1);
+        newGuiNode.appendVisual(this._graphCanvas, this);
+        this._guiNodes.push(newGuiNode);
+
+        this.globalState.guiTexture.addControl(slider1);    
+    }
+
+
+    //private _advancedTexture: BABYLON.GUI.AdvancedDynamicTexture;
     updateGUIs()
     {
         this._guiNodes.forEach(element => {

guiEditor/src/diagram/graphNode.ts

@@ -173,7 +173,7 @@ export class GraphNode {
         }
     }
 
-    public constructor(public block: NodeMaterialBlock, globalState: GlobalState, public guiNode: BABYLON.GUI.Container | null | undefined) {
+    public constructor(public block: NodeMaterialBlock, globalState: GlobalState, public guiNode: BABYLON.GUI.Container | BABYLON.GUI.Control | null | undefined) {
         this._globalState = globalState;
 
         guiNode?.onPointerUpObservable.add(evt => {

guiEditor/src/diagram/properties/sliderGuiPropertyComponent.tsx

@@ -36,12 +36,12 @@ export class SliderPropertyTabComponent extends React.Component<IPropertyCompone
                    this.slider.value = evt;
                 }}>
                 </NumericInputComponent>
-                <NumericInputComponent globalState={this.props.globalState} label="Height" value={this.slider.height} 
+                <NumericInputComponent globalState={this.props.globalState} label="Height" value={this.slider.heightInPixels} 
                 onChange={evt =>{
                    this.slider.height = evt;
                 }}>
                 </NumericInputComponent>
-                <NumericInputComponent globalState={this.props.globalState} label="Width" value={this.slider.width} 
+                <NumericInputComponent globalState={this.props.globalState} label="Width" value={this.slider.widthInPixels} 
                 onChange={evt =>{
                    this.slider.width = evt;
                 }}>

guiEditor/src/globalState.ts

@@ -17,6 +17,7 @@ import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialMo
 
 export class GlobalState {
     nodeMaterial: NodeMaterial;
+    guiTexture: BABYLON.GUI.AdvancedDynamicTexture;
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
     hostWindow: Window;

guiEditor/src/graphEditor.tsx

@@ -566,8 +566,14 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         let newNode: GraphNode;
         
         //new code for gui editor.
-        this._graphCanvas.addNewButton();
 
+        if(data === "Slider")
+        {
+            this._graphCanvas.addNewSlider();
+        }
+        else {
+            this._graphCanvas.addNewButton();
+        }
         if (data.indexOf("Block") === -1) {
             newNode = this.addValueNode(data);
         }