adding line

guiEditor/src/blockTools.ts

@@ -11,6 +11,15 @@ export class BlockTools {
                 return new BABYLON.GUI.Ellipse("Ellipse");
             case "Rectangle":
                 return new BABYLON.GUI.Rectangle("Rectangle");
+            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;
 
         }
 

guiEditor/src/diagram/properties/lineGuiPropertyComponent.tsx

@@ -0,0 +1,40 @@
+
+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';
+import { RSA_X931_PADDING } from 'constants';
+
+export class LinePropertyTabComponent 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/propertyLedger.ts

@@ -11,6 +11,7 @@ import { ButtonPropertyTabComponent } from './properties/buttonGuiPropertyCompon
 import { SliderPropertyTabComponent } from './properties/sliderGuiPropertyComponent';
 import { CheckboxPropertyTabComponent } from './properties/checkboxGuiPropertyComponent';
 import { ShapePropertyTabComponent } from './properties/shapeGuiPropertyComponent';
+import { LinePropertyTabComponent } from './properties/lineGuiPropertyComponent';
 
 export class PropertyLedger {
     public static RegisteredControls: {[key: string] : ComponentClass<IPropertyComponentProps>} = {};
@@ -38,4 +39,5 @@ PropertyGuiLedger.RegisteredControls["Button"] = ButtonPropertyTabComponent;
 PropertyGuiLedger.RegisteredControls["Slider"] = SliderPropertyTabComponent;
 PropertyGuiLedger.RegisteredControls["Checkbox"] = CheckboxPropertyTabComponent;
 PropertyGuiLedger.RegisteredControls["Rectangle"] = ShapePropertyTabComponent;
-PropertyGuiLedger.RegisteredControls["Ellipse"] = ShapePropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Ellipse"] = ShapePropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Line"] = LinePropertyTabComponent;