more progress to exporting

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -320,9 +320,25 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         let codeString = "";
         let children = guiTexture.getChildren()[0].children;
         let guiCount = 0;
+
+        codeString += `var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");\r\n\r\n`;
         children.forEach(element => {
             codeString += `var guiObject${guiCount.toString()} = new BABYLON.GUI.${element.typeName || "button"}("${element.name }");\r\n`;
-
+            
+            //printing generic code
+            codeString += `guiObject${guiCount.toString()}.color = "${element.color}";\r\n`;
+            codeString += `guiObject${guiCount.toString()}.leftInPixels = ${element.leftInPixels};\r\n`;
+            codeString += `guiObject${guiCount.toString()}.topInPixels = ${element.topInPixels};\r\n`;
+            codeString += `guiObject${guiCount.toString()}.widthInPixels = ${element.widthInPixels};\r\n`;
+            codeString += `guiObject${guiCount.toString()}.heightInPixels = ${element.heightInPixels};\r\n`;
+            
+            //generate gui specific code
+
+            
+            //add gui element to the texture
+            codeString += `advancedTexture.addControl(guiObject${guiCount.toString()});\r\n`;
+
+            codeString += `\r\n`;
             ++guiCount;
         });
         return codeString;

guiEditor/src/diagram/graphCanvas.tsx

@@ -987,9 +987,9 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
         button1.width = "150px"
         button1.height = "40px";
-        button1.color = "#FFFFFF";
+        button1.color = "#FFFFFFFF";
         button1.cornerRadius = 20;
-        button1.background = "#008000";
+        button1.background = "#138016FF";
         button1.onPointerUpObservable.add(function() {
         });
 
@@ -1011,8 +1011,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         var slider1 = new BABYLON.GUI.Slider("Slider");
         slider1.width = "150px"
         slider1.height = "40px";
-        slider1.color = "#FFFFFF";
-        slider1.background = "#008000";
+        slider1.color = "#FFFFFFFF";
+        slider1.background = "#138016FF";
         slider1.onPointerUpObservable.add(function() {
         });
         var fakeNodeMaterialBlock = new NodeMaterialBlock("Slider");

guiEditor/src/diagram/properties/buttonGuiPropertyComponent copy.tsx

@@ -6,7 +6,8 @@ import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
-import { SketchPicker } from 'react-color';
+import { Color3, Color4 } from 'babylonjs';
+import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
 
 export class ButtonPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -15,6 +16,11 @@ export class ButtonPropertyTabComponent extends React.Component<IPropertyCompone
     }
 
     private button : BABYLON.GUI.Button;
+    
+    getColorString()
+    {
+        return Color4.FromHexString(this.button.background);
+    }
 
     render() {
         return (
@@ -38,11 +44,11 @@ export class ButtonPropertyTabComponent extends React.Component<IPropertyCompone
                 }}>
                 </NumericInputComponent>  
                 <TextLineComponent label="Background Color" value={this.button.background} />
-                <SketchPicker
-                    color={ this.button.background }
-                    onChangeComplete={evt =>{
-                        this.button.background = evt.hex;
-                }}/>
+                <ColorPickerLineComponent value={this.getColorString()} globalState={this.props.globalState} 
+                onColorChanged={evt => {
+                        this.button.background = evt; 
+                }}>
+                </ColorPickerLineComponent>
                 </LineContainerComponent>            
             </>
         );

guiEditor/src/diagram/properties/sliderGuiPropertyComponent.tsx

@@ -5,7 +5,8 @@ import { IPropertyComponentProps } from './propertyComponentProps';
 import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
-import { SketchPicker } from 'react-color';
+import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
+import { Color4 } from 'babylonjs';
 
 export class SliderPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -15,6 +16,11 @@ export class SliderPropertyTabComponent extends React.Component<IPropertyCompone
 
     private slider : BABYLON.GUI.Slider;
 
+    getColorString()
+    {
+        return Color4.FromHexString(this.slider.background);
+    }
+
     render() {
         return (
             <>                
@@ -46,12 +52,12 @@ export class SliderPropertyTabComponent extends React.Component<IPropertyCompone
                    this.slider.width = evt;
                 }}>
                 </NumericInputComponent>
-                <TextLineComponent label="Color" value={this.slider.color} />
-                <SketchPicker 
-                    color={ this.slider.color }
-                    onChangeComplete={evt =>{
-                        this.slider.color = evt.hex;
-                }}/>
+                <TextLineComponent label="Color" value={this.slider.background} />
+                <ColorPickerLineComponent value={this.getColorString()} globalState={this.props.globalState} 
+                onColorChanged={evt => {
+                        this.slider.background = evt;  
+                }}>
+                </ColorPickerLineComponent>
                 </LineContainerComponent>            
             </>
         );