Merge pull request #2 from nadaOuf/msDestiny14/gui

Create properties for slider and add slider entry in the left panel

guiEditor/src/components/nodeList/nodeListComponent.tsx

@@ -226,6 +226,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         const allBlocks: any = {
             Custom_Gui: customFrameNames,
             Buttons: ["Text", "Image"],
+            Controls: ["Slider"],
         };
 
         switch (this.props.globalState.mode) {

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

@@ -2,10 +2,7 @@
 import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
-import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
-import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
 import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
-import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';

guiEditor/src/diagram/properties/propertyComponentProps.ts

@@ -1,8 +1,9 @@
 import { GlobalState } from "../../globalState";
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+import { BabylonFileLoaderConfiguration } from 'babylonjs';
 
 export interface IPropertyComponentProps {
     globalState: GlobalState;
     block: NodeMaterialBlock;
-    guiBlock?: BABYLON.GUI.Container;
+    guiBlock?: BABYLON.GUI.Container | BABYLON.GUI.Control;
 }

guiEditor/src/diagram/properties/sliderGuiPropertyComponent.tsx

@@ -0,0 +1,59 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { IPropertyComponentProps } from './propertyComponentProps';
+import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
+import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
+import { SketchPicker } from 'react-color';
+
+export class SliderPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps) {
+        super(props);
+        this.slider = this.props.guiBlock as BABYLON.GUI.Slider;
+    }
+
+    private slider : BABYLON.GUI.Slider;
+
+    render() {
+        return (
+            <>                
+                <GeneralPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
+                <LineContainerComponent title="PROPERTIES"> 
+                <NumericInputComponent globalState={this.props.globalState} label="Minimum Value" value={this.slider.minimum}
+                onChange={evt =>{
+                    this.slider.minimum = evt;
+                }}>
+                </NumericInputComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Maximum Value" value={this.slider.maximum} 
+                onChange={evt =>{
+                   this.slider.maximum = evt;
+                }}>
+
+                </NumericInputComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Value" value={this.slider.value} 
+                onChange={evt =>{
+                   this.slider.value = evt;
+                }}>
+                </NumericInputComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Height" value={this.slider.height} 
+                onChange={evt =>{
+                   this.slider.height = evt;
+                }}>
+                </NumericInputComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Width" value={this.slider.width} 
+                onChange={evt =>{
+                   this.slider.width = evt;
+                }}>
+                </NumericInputComponent>
+                <TextLineComponent label="Color" value={this.slider.color} />
+                <SketchPicker 
+                    color={ this.slider.color }
+                    onChangeComplete={evt =>{
+                        this.slider.color = evt.hex;
+                }}/>
+                </LineContainerComponent>            
+            </>
+        );
+    }
+}

guiEditor/src/diagram/propertyLedger.ts

@@ -8,6 +8,7 @@ import { LightInformationPropertyTabComponent } from './properties/lightInformat
 import { TexturePropertyTabComponent } from './properties/texturePropertyTabComponent';
 import { TrigonometryPropertyTabComponent } from './properties/trigonometryNodePropertyComponent';
 import { ButtonPropertyTabComponent } from './properties/buttonGuiPropertyComponent copy';
+import { SliderPropertyTabComponent } from './properties/sliderGuiPropertyComponent';
 
 export class PropertyLedger {
     public static RegisteredControls: {[key: string] : ComponentClass<IPropertyComponentProps>} = {};
@@ -31,4 +32,5 @@ PropertyLedger.RegisteredControls["ParticleTextureBlock"] = TexturePropertyTabCo
 PropertyLedger.RegisteredControls["TrigonometryBlock"] = TrigonometryPropertyTabComponent;
 
 
-PropertyGuiLedger.RegisteredControls["Button"] = ButtonPropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Button"] = ButtonPropertyTabComponent;
+PropertyGuiLedger.RegisteredControls["Slider"] = SliderPropertyTabComponent;