adding more controls

guiEditor/src/blockTools.ts

@@ -1,28 +1,44 @@
 export class BlockTools {
     public static GetGuiFromString(data: string) {
+
+        let element;
         switch (data) {
             case "Slider":
-                return new BABYLON.GUI.Slider("Slider");
+                element = new BABYLON.GUI.Slider("Slider");
+                break;
             case "Checkbox":
-                return new BABYLON.GUI.Checkbox("Checkbox");
+                element = new BABYLON.GUI.Checkbox("Checkbox");
+                break;
             case "ColorPicker":
-                return new BABYLON.GUI.ColorPicker("ColorPicker");
+                element = new BABYLON.GUI.ColorPicker("ColorPicker");
+                break;
             case "Ellipse":
-                return new BABYLON.GUI.Ellipse("Ellipse");
+                element = new BABYLON.GUI.Ellipse("Ellipse");
+                break;
             case "Rectangle":
-                return new BABYLON.GUI.Rectangle("Rectangle");
+                element = new BABYLON.GUI.Rectangle("Rectangle");
+                break;
             case "Line":
-                var line = new BABYLON.GUI.Line();
-                line.x1 = 10;
-                line.y1 = 10;
-                line.x2 = 100;
-                line.y2 = 100;
-                line.lineWidth = 5;
-                line.dash = [50, 10];
-                return line;
-
-        }
-
-        return BABYLON.GUI.Button.CreateSimpleButton("Button", "Click Me");
+                element = new BABYLON.GUI.Line();
+                element.x1 = 10;
+                element.y1 = 10;
+                element.x2 = 100;
+                element.y2 = 100;
+                element.lineWidth = 5;
+                element.dash = [50, 10];
+                return element;
+            case "Text":
+                element = new BABYLON.GUI.TextBlock("Textblock");
+                element.text = "My Text";
+                return element;
+            default:
+                element = BABYLON.GUI.Button.CreateSimpleButton("Button", "Click Me");
+                break;
+            }
+        
+        element.width = "150px"
+        element.height = "40px";
+        element.color = "#FFFFFFFF";
+        return element;
     }
 }

guiEditor/src/components/nodeList/nodeListComponent.tsx

@@ -44,11 +44,11 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
     render() {    
         // Block types used to create the menu from
         const allBlocks: any = {
-            Buttons: ["Text", "ImageButton"],
+            Buttons: ["TextButton", "ImageButton"],
             Controls: ["Slider", "Checkbox", "ColorPicker", "VisualKeyboard"],
             Containers: ["DisplayGrid", "Grid", "StackPanel"],
             Shapes: ["Ellipse","Image", "Line","Rectangle" ],
-            Inputs: ["textBlock", "intputText", "inputPassword"]
+            Inputs: ["Text", "IntputText", "InputPassword"]
         };
 
         // Create node menu

guiEditor/src/diagram/properties/TextGuiPropertyComponent.tsx

@@ -0,0 +1,39 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { IPropertyComponentProps } from './propertyComponentProps';
+import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
+import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
+import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
+
+export class TextPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps) {
+        super(props);
+        this.line = this.props.guiBlock as BABYLON.GUI.Line;
+        this.point1 = new BABYLON.Vector2(parseInt(this.line.x1.toString()), parseInt(this.line.y1.toString()));
+        this.point2 = new BABYLON.Vector2(parseInt(this.line.x2.toString()), parseInt(this.line.y2.toString()));
+    }
+
+    private line : BABYLON.GUI.Line;
+    public point1: BABYLON.Vector2;
+    public point2: BABYLON.Vector2;
+
+    render() {
+
+        //need to add array for dash.
+        return (
+            <>                
+                <GeneralPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
+                <LineContainerComponent title="PROPERTIES">
+                <FloatLineComponent isInteger={true} globalState={this.props.globalState} label="Line Width" target={this.line} propertyName="lineWidth"/>
+                <Vector2LineComponent label="Point1 (x,y)" target={this} propertyName="point1" globalState={this.props.globalState} onChange={evt => {
+                    this.line.x1 = evt.x;
+                    this.line.y1 = evt.y; }}/>
+                <Vector2LineComponent label="Point2 (x,y)" target={this} propertyName="point2" globalState={this.props.globalState} onChange={evt => {
+                    this.line.x2 = evt.x;
+                    this.line.y2 = evt.y; }}/>
+                </LineContainerComponent>            
+            </>
+        );
+    }
+}

guiEditor/src/diagram/properties/lineGuiPropertyComponent.tsx

@@ -5,7 +5,6 @@ import { IPropertyComponentProps } from './propertyComponentProps';
 import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
 import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
 import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
-import { RSA_X931_PADDING } from 'constants';
 
 export class LinePropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {

guiEditor/src/graphEditor.tsx

@@ -392,10 +392,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
 
         let guiElement = BlockTools.GetGuiFromString(data);
 
-        guiElement.width = "150px"
-        guiElement.height = "40px";
-        guiElement.color = "#FFFFFFFF";
-        guiElement.background = "#138016FF";
+        //guiElement.background = "#138016FF";
 
         let newGuiNode = this._graphCanvas.appendBlock(guiElement);