removing more files

guiEditor/src/components/propertyTab/properties/color3PropertyTabComponent.tsx

@@ -1,21 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { Color3LineComponent } from '../../../sharedComponents/color3LineComponent';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-
-interface IColor3PropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class Color3PropertyTabComponent extends React.Component<IColor3PropertyTabComponentProps> {
-
-    render() {
-        return (
-            <Color3LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}></Color3LineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/properties/color4PropertyTabComponent.tsx

@@ -1,21 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { Color4LineComponent } from '../../../sharedComponents/color4LineComponent';
-
-interface IColor4PropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class Color4PropertyTabComponent extends React.Component<IColor4PropertyTabComponentProps> {
-
-    render() {
-        return (
-            <Color4LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}></Color4LineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/properties/matrixPropertyTabComponent.tsx

@@ -1,26 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { MatrixLineComponent } from '../../../sharedComponents/matrixLineComponent';
-
-interface IMatrixPropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class MatrixPropertyTabComponent extends React.Component<IMatrixPropertyTabComponentProps> {
-
-    render() {
-        return (
-            <MatrixLineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}
-            mode={this.props.inputBlock.matrixMode}
-            onModeChange={mode => {
-                this.props.inputBlock.matrixMode = mode;
-            }}
-            ></MatrixLineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/properties/vector2PropertyTabComponent.tsx

@@ -1,21 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { Vector2LineComponent } from '../../../sharedComponents/vector2LineComponent';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-
-interface IVector2PropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
-
-    render() {
-        return (
-            <Vector2LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}></Vector2LineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/properties/vector3PropertyTabComponent.tsx

@@ -1,21 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { Vector3LineComponent } from '../../../sharedComponents/vector3LineComponent';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-
-interface IVector3PropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
-
-    render() {
-        return (
-            <Vector3LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}></Vector3LineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/properties/vector4PropertyTabComponent.tsx

@@ -1,21 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../../globalState';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { Vector4LineComponent } from '../../../sharedComponents/vector4LineComponent';
-
-interface IVector4PropertyTabComponentProps {
-    globalState: GlobalState;
-    inputBlock: InputBlock;
-}
-
-export class Vector4PropertyTabComponent extends React.Component<IVector4PropertyTabComponentProps> {
-
-    render() {
-        return (
-            <Vector4LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
-                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-            }}></Vector4LineComponent>
-        );
-    }
-}

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -11,18 +11,9 @@ import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineCompon
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { GUINode } from '../../diagram/guiNode';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
-
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
-
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
-import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
-import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
-import { Color4LineComponent } from '../../sharedComponents/color4LineComponent';
-import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
-import { Vector3LineComponent } from '../../sharedComponents/vector3LineComponent';
-import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponent';
 import { Observer } from 'babylonjs/Misc/observable';
 
 require("./propertyTab.scss");
@@ -70,65 +61,6 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         }
     }
 
-    renderInputBlock(block: InputBlock) {
-        switch (block.type) {
-            case NodeMaterialBlockConnectionPointTypes.Float:
-                    let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
-                    return (
-                        <div key={block.uniqueId} >
-                            {
-                                block.isBoolean &&
-                                <CheckBoxLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
-                                onValueChanged={() => {
-                                    this.processInputBlockUpdate(block);
-                                }}/>
-                            }
-                            {
-                                !block.isBoolean && cantDisplaySlider &&
-                                <FloatLineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
-                                onChange={() => this.processInputBlockUpdate(block)}/>
-                            }
-                            {
-                                !block.isBoolean && !cantDisplaySlider &&
-                                <SliderLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
-                                step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max} globalState={this.props.globalState}
-                                onChange={() => this.processInputBlockUpdate(block)}/>
-                            }
-                        </div>
-                    );
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-                return (
-                    <Color3LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
-                        propertyName="value"
-                        onChange={() => this.processInputBlockUpdate(block)}
-                    />
-                );
-            case NodeMaterialBlockConnectionPointTypes.Color4:
-                return (
-                    <Color4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
-                    onChange={() => this.processInputBlockUpdate(block)}/>
-                );
-            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                return (
-                        <Vector2LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
-                        propertyName="value"
-                        onChange={() => this.processInputBlockUpdate(block)}/>
-                );
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
-                return (
-                    <Vector3LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
-                    propertyName="value"
-                    onChange={() => this.processInputBlockUpdate(block)}/>
-                );
-            case NodeMaterialBlockConnectionPointTypes.Vector4:
-                return (
-                    <Vector4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
-                    propertyName="value"
-                    onChange={() => this.processInputBlockUpdate(block)}/>
-                );
-            }
-        return null;
-    }
 
     load(file: File) {
         Tools.ReadFile(file, (data) => {

guiEditor/src/diagram/properties/genericNodePropertyComponent.tsx

@@ -5,7 +5,6 @@ import { IPropertyComponentProps } from './propertyComponentProps';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
 import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
-import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { PropertyTypeForEdition, IPropertyDescriptionForEdition, IEditablePropertyListOption } from 'babylonjs/Materials/Node/nodeMaterialDecorator';
 
@@ -97,12 +96,6 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
                     }
                     break;
                 }
-                case PropertyTypeForEdition.Vector2: {
-                    components.push(
-                        <Vector2LineComponent globalState={this.props.globalState} label={displayName} propertyName={propertyName} target={this.props.guiBlock} onChange={() => this.forceRebuild(options.notifiers)} />
-                    );
-                    break;
-                }
                 case PropertyTypeForEdition.List: {
                     components.push(
                         <OptionsLineComponent label={displayName} options={options.options as IEditablePropertyListOption[]} target={this.props.guiBlock} propertyName={propertyName} onSelect={() => this.forceRebuild(options.notifiers)} />

guiEditor/src/sharedComponents/color3LineComponent.tsx

@@ -1,168 +0,0 @@
-import * as React from "react";
-import { Observable } from "babylonjs/Misc/observable";
-import { Color3, Color4 } from "babylonjs/Maths/math.color";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { NumericInputComponent } from "./numericInputComponent";
-import { GlobalState } from '../globalState';
-
-
-const copyIcon: string = require("./copy.svg");
-const plusIcon: string = require("./plus.svg");
-const minusIcon: string = require("./minus.svg");
-
-export interface IColor3LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    globalState: GlobalState;
-}
-
-export class Color3LineComponent extends React.Component<IColor3LineComponentProps, { isExpanded: boolean, color: Color3 }> {
-    private _localChange = false;
-    constructor(props: IColor3LineComponentProps) {
-        super(props);
-
-        this.state = { isExpanded: false, color: this.props.target[this.props.propertyName].clone() };
-    }
-
-    shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: { color: Color3 }) {
-        const currentState = nextProps.target[nextProps.propertyName];
-
-        if (!currentState.equals(nextState.color) || this._localChange) {
-            nextState.color = currentState.clone();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    onChange(newValue: string) {
-        this._localChange = true;
-        const newColor = Color3.FromHexString(newValue);
-
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: this.props.target,
-                property: this.props.propertyName,
-                value: newColor,
-                initialValue: this.state.color
-            });
-        }
-
-        if (this.props.target[this.props.propertyName].getClassName() === "Color4") {
-            this.props.target[this.props.propertyName] = new Color4(newColor.r, newColor.g, newColor.b, 1.0);
-        } else {
-            this.props.target[this.props.propertyName] = newColor;
-        }
-
-        this.setState({ color: newColor });
-
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-    }
-
-    switchExpandState() {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-
-    raiseOnPropertyChanged(previousValue: Color3) {
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.color,
-            initialValue: previousValue
-        });
-    }
-
-    updateStateR(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].x = value;
-        this.state.color.r = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateG(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].g = value;
-        this.state.color.g = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateB(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].b = value;
-        this.state.color.b = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    copyToClipboard() {
-        var element = document.createElement('div');
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-
-        if (window.getSelection) {
-            var range = document.createRange();
-            range.selectNode(element);
-            window.getSelection()!.removeAllRanges();
-            window.getSelection()!.addRange(range);
-        }
-
-        document.execCommand('copy');
-        element.remove();
-    }
-
-    render() {
-
-        const expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
-
-        return (
-            <div className="color3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                    <div className="copy hoverIcon" onClick={() => this.copyToClipboard()} title="Copy to clipboard">
-                        <img src={copyIcon} alt=""/>
-                    </div>
-                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        <img src={expandedIcon} alt=""/>
-                    </div>
-                </div>
-                {
-                    this.state.isExpanded &&
-                    <div className="secondLine">
-                        <NumericInputComponent globalState={this.props.globalState} label="r" value={this.state.color.r} onChange={(value) => this.updateStateR(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="g" value={this.state.color.g} onChange={(value) => this.updateStateG(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="b" value={this.state.color.b} onChange={(value) => this.updateStateB(value)} />
-                    </div>
-                }
-            </div>
-        );
-    }
-}

guiEditor/src/sharedComponents/color4LineComponent.tsx

@@ -1,179 +0,0 @@
-import * as React from "react";
-import { Observable } from "babylonjs/Misc/observable";
-import { Color4 } from "babylonjs/Maths/math.color";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { NumericInputComponent } from "./numericInputComponent";
-import { GlobalState } from '../globalState';
-
-const copyIcon: string = require("./copy.svg");
-const plusIcon: string = require("./plus.svg");
-const minusIcon: string = require("./minus.svg");
-
-export interface IColor4LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    globalState: GlobalState;
-}
-
-export class Color4LineComponent extends React.Component<IColor4LineComponentProps, { isExpanded: boolean, color: Color4 }> {
-    private _localChange = false;
-    constructor(props: IColor4LineComponentProps) {
-        super(props);
-
-        let value = this.props.target[this.props.propertyName];
-        let currentColor = value.getClassName() === "Color4" ? value.clone() : new Color4(value.r, value.g, value.b, 1.0);
-        this.state = { isExpanded: false, color: currentColor };
-    }
-
-    shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: { color: Color4 }) {
-        const currentState = nextProps.target[nextProps.propertyName];
-        let currentColor = currentState.getClassName() === "Color4" ? currentState : new Color4(currentState.r, currentState.g, currentState.b, 1.0);  
-
-        if (!currentColor.equals(nextState.color) || this._localChange) {
-            nextState.color = currentColor.clone();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    onChange(newValue: string) {
-        this._localChange = true;
-        const newColor = Color4.FromHexString(newValue);
-
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: this.props.target,
-                property: this.props.propertyName,
-                value: newColor,
-                initialValue: this.state.color
-            });
-        }
-
-        this.props.target[this.props.propertyName] = newColor;
-
-        this.setState({ color: this.props.target[this.props.propertyName] });
-
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-    }
-
-    switchExpandState() {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-
-    raiseOnPropertyChanged(previousValue: Color4) {
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.color,
-            initialValue: previousValue
-        });
-    }
-
-    updateStateR(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].x = value;
-        this.state.color.r = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateG(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].g = value;
-        this.state.color.g = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateB(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].b = value;
-        this.state.color.b = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateA(value: number) {
-        this._localChange = true;
-
-        const store = this.state.color.clone();
-        this.props.target[this.props.propertyName].a = value;
-        this.state.color.a = value;
-        this.props.target[this.props.propertyName] = this.state.color;
-        this.setState({ color: this.state.color });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    copyToClipboard() {
-        var element = document.createElement('div');
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-
-        if (window.getSelection) {
-            var range = document.createRange();
-            range.selectNode(element);
-            window.getSelection()!.removeAllRanges();
-            window.getSelection()!.addRange(range);
-        }
-
-        document.execCommand('copy');
-        element.remove();
-    }
-
-    render() {
-
-        const expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
-
-        return (
-            <div className="color3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                    <div className="copy hoverIcon" onClick={() => this.copyToClipboard()} title="Copy to clipboard">
-                        <img src={copyIcon} alt=""/>
-                    </div>
-                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        <img src={expandedIcon} alt=""/>
-                    </div>
-                </div>
-                {
-                    this.state.isExpanded &&
-                    <div className="secondLine">
-                        <NumericInputComponent globalState={this.props.globalState} label="r" value={this.state.color.r} onChange={(value) => this.updateStateR(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="g" value={this.state.color.g} onChange={(value) => this.updateStateG(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="b" value={this.state.color.b} onChange={(value) => this.updateStateB(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="a" value={this.state.color.a} onChange={(value) => this.updateStateA(value)} />
-                    </div>
-                }
-            </div>
-        );
-    }
-}

guiEditor/src/sharedComponents/matrixLineComponent.tsx

@@ -1,171 +0,0 @@
-import * as React from "react";
-import { Vector3, Matrix, Vector4, Quaternion } from "babylonjs/Maths/math.vector";
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { Vector4LineComponent } from './vector4LineComponent';
-import { OptionsLineComponent } from './optionsLineComponent';
-import { SliderLineComponent } from './sliderLineComponent';
-import { GlobalState } from '../globalState';
-
-interface IMatrixLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newValue: Matrix) => void;
-    onModeChange?: (mode: number) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    mode?: number;
-    globalState: GlobalState;
-}
-
-export class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, { value: Matrix, mode: number, angle: number}> {
-   private _localChange = false;
-
-    constructor(props: IMatrixLineComponentProps) {
-        super(props);
-
-        let matrix: Matrix = this.props.target[this.props.propertyName].clone();
-
-        let angle = 0;
-
-        if (this.props.mode) {
-            let quat = new Quaternion();
-            matrix.decompose(undefined, quat);
-
-            let euler = quat.toEulerAngles();
-
-            switch (this.props.mode) {
-                case 1:
-                    angle = euler.x;
-                    break;
-                case 2:
-                    angle = euler.y;
-                    break;
-                case 3:
-                    angle = euler.z;
-                    break;
-            }
-        }
-
-        this.state = { value:matrix, mode: this.props.mode || 0, angle: angle };
-    }
-
-    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: { value: Matrix, mode: number, angle: number }) {
-        const nextPropsValue = nextProps.target[nextProps.propertyName];
-
-        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
-            nextState.value = nextPropsValue.clone();
-            this._localChange = false;
-            return true;
-        }
-        return nextState.mode !== this.state.mode || nextState.angle !== this.state.angle;
-    }
-
-    raiseOnPropertyChanged(previousValue: Vector3) {
-        if (this.props.onChange) {
-            this.props.onChange(this.state.value);
-        }
-
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.value,
-            initialValue: previousValue
-        });
-    }
-
-    updateMatrix() {
-        const store = this.props.target[this.props.propertyName].clone();
-        this.props.target[this.props.propertyName] = this.state.value;
-
-        this.setState({ value: store });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateRow(value: Vector4, row: number) {
-        this._localChange = true;
-
-        this.state.value.setRow(row, value);
-        this.updateMatrix();
-    }
-
-    updateBasedOnMode(value: number) {
-
-        switch (this.state.mode) {
-            case 1: {
-                Matrix.RotationXToRef(this.state.angle, this.state.value);
-                break;
-            }
-            case 2: {
-                Matrix.RotationYToRef(this.state.angle, this.state.value);
-                break;
-            }
-            case 3: {
-                Matrix.RotationZToRef(this.state.angle, this.state.value);
-                break;
-            }
-        }
-        this.updateMatrix();
-
-        this.setState({angle: value});
-    }
-
-    render() {
-        var modeOptions = [
-            { label: "User-defined", value: 0 },
-            { label: "Rotation over X axis", value: 1 },
-            { label: "Rotation over Y axis", value: 2 },
-            { label: "Rotation over Z axis", value: 3 },
-        ];
-
-        return (
-            <div className="vector3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                </div>
-                <div className="secondLine">
-                    <OptionsLineComponent label="Mode"
-                        className="no-right-margin"
-                        options={modeOptions} target={this} 
-                        noDirectUpdate={true}
-                        getSelection={() => {
-                            return this.state.mode;
-                        }}
-                        onSelect={(value: any) => {
-                            this.props.target[this.props.propertyName] = Matrix.Identity();
-                            Matrix.IdentityToRef(this.state.value);
-                            this.setState({mode: value, angle: 0});
-                            
-                            this.updateMatrix();
-
-                            if (this.props.onModeChange) {
-                                this.props.onModeChange(value);
-                            }
-                        }} />                
-                    </div>
-                {
-                    this.state.mode === 0 &&
-                    <div className="secondLine">
-                        <Vector4LineComponent globalState={this.props.globalState} label="Row #0" value={this.state.value.getRow(0)!} onChange={value => this.updateRow(value, 0)}/>
-                        <Vector4LineComponent globalState={this.props.globalState} label="Row #1" value={this.state.value.getRow(1)!} onChange={value => this.updateRow(value, 1)}/>
-                        <Vector4LineComponent globalState={this.props.globalState} label="Row #2" value={this.state.value.getRow(2)!} onChange={value => this.updateRow(value, 2)}/>
-                        <Vector4LineComponent globalState={this.props.globalState} label="Row #3" value={this.state.value.getRow(3)!} onChange={value => this.updateRow(value, 3)}/>
-                    </div>
-                }
-                {
-                    this.state.mode !== 0 &&
-                    <div className="secondLine">
-                        <SliderLineComponent label="Angle" minimum={0} maximum={2 * Math.PI} useEuler={true} step={0.1} globalState={this.props.globalState} directValue={this.state.angle} onChange={value => this.updateBasedOnMode(value)}/>
-                    </div>
-                }
-            </div>
-        );
-    }
-}

guiEditor/src/sharedComponents/vector2LineComponent.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { Vector2 } from "babylonjs/Maths/math.vector";
-import { Observable } from "babylonjs/Misc/observable";
-
-import { NumericInputComponent } from "./numericInputComponent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { GlobalState } from '../globalState';
-
-interface IVector2LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector2) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
-}
-
-export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, { isExpanded: boolean, value: Vector2 }> {
-
-    static defaultProps = {
-        step: 0.001, // cm
-    };
-
-    private _localChange = false;
-
-    constructor(props: IVector2LineComponentProps) {
-        super(props);
-
-        this.state = { isExpanded: false, value: this.props.target[this.props.propertyName].clone() }
-    }
-
-    shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: { isExpanded: boolean, value: Vector2 }) {
-        const nextPropsValue = nextProps.target[nextProps.propertyName];
-
-        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
-            nextState.value = nextPropsValue.clone();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    switchExpandState() {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-
-    raiseOnPropertyChanged(previousValue: Vector2) {
-        if (this.props.onChange) {
-            this.props.onChange(this.state.value);
-        }
-
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.value,
-            initialValue: previousValue
-        });
-    }
-
-    updateStateX(value: number) {
-        this._localChange = true;
-
-        const store = this.state.value.clone();
-        this.props.target[this.props.propertyName].x = value;
-        this.state.value.x = value;
-        this.setState({ value: this.state.value });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    updateStateY(value: number) {
-        this._localChange = true;
-
-        const store = this.state.value.clone();
-        this.props.target[this.props.propertyName].y = value;
-        this.state.value.y = value;
-        this.setState({ value: this.state.value });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-    render() {
-        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
-
-        return (
-            <div className="vector3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                    <div className="vector">
-                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}`}
-
-                    </div>
-                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        {chevron}
-                    </div>
-                </div>
-                {
-                    this.state.isExpanded &&
-                    <div className="secondLine">
-                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                    </div>
-                }
-            </div>
-        );
-    }
-}

guiEditor/src/sharedComponents/vector3LineComponent.tsx

@@ -1,126 +0,0 @@
-import * as React from "react";
-import { Vector3 } from "babylonjs/Maths/math.vector";
-import { Observable } from "babylonjs/Misc/observable";
-
-import { NumericInputComponent } from "./numericInputComponent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { GlobalState } from '../globalState';
-
-interface IVector3LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector3) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
-}
-
-export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, { isExpanded: boolean, value: Vector3 }> {
-
-    static defaultProps = {
-        step: 0.001, // cm
-    };
-
-    private _localChange = false;
-
-    constructor(props: IVector3LineComponentProps) {
-        super(props);
-
-        this.state = { isExpanded: false, value: this.props.target[this.props.propertyName].clone() }
-    }
-
-    shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: { isExpanded: boolean, value: Vector3 }) {
-        const nextPropsValue = nextProps.target[nextProps.propertyName];
-
-        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
-            nextState.value = nextPropsValue.clone();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    switchExpandState() {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-
-    raiseOnPropertyChanged(previousValue: Vector3) {
-        if (this.props.onChange) {
-            this.props.onChange(this.state.value);
-        }
-
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.value,
-            initialValue: previousValue
-        });
-    }
-
-    updateVector3() {
-        const store = this.props.target[this.props.propertyName].clone();
-        this.props.target[this.props.propertyName] = this.state.value;
-
-        this.setState({ value: store });
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-
-    updateStateX(value: number) {
-        this._localChange = true;
-
-        this.state.value.x = value;
-        this.updateVector3();
-    }
-
-    updateStateY(value: number) {
-        this._localChange = true;
-
-        this.state.value.y = value;
-        this.updateVector3();
-    }
-
-    updateStateZ(value: number) {
-        this._localChange = true;
-
-        this.state.value.z = value;
-        this.updateVector3();
-    }
-
-    render() {
-        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
-
-        return (
-            <div className="vector3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                    <div className="vector">
-                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}`}
-
-                    </div>
-                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        {chevron}
-                    </div>
-                </div>
-                {
-                    this.state.isExpanded &&
-                    <div className="secondLine">
-                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
-                    </div>
-                }
-            </div>
-        );
-    }
-}

guiEditor/src/sharedComponents/vector4LineComponent.tsx

@@ -1,139 +0,0 @@
-import * as React from "react";
-import { Vector4 } from "babylonjs/Maths/math.vector";
-import { Observable } from "babylonjs/Misc/observable";
-
-import { NumericInputComponent } from "./numericInputComponent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { GlobalState } from '../globalState';
-
-interface IVector4LineComponentProps {
-    label: string;
-    target?: any;
-    propertyName?: string;
-    value?: Vector4;
-    step?: number;
-    onChange?: (newvalue: Vector4) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
-}
-
-export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, { isExpanded: boolean, value: Vector4 }> {
-
-    static defaultProps = {
-        step: 0.001, // cm
-    };
-
-    private _localChange = false;
-
-    constructor(props: IVector4LineComponentProps) {
-        super(props);
-
-        this.state = { isExpanded: false, value: (this.props.value || this.props.target[this.props.propertyName!]).clone() }
-    }
-
-    shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: { isExpanded: boolean, value: Vector4 }) {
-        const nextPropsValue = nextProps.value || nextProps.target[nextProps.propertyName!];
-
-        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
-            nextState.value = nextPropsValue.clone();
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    switchExpandState() {
-        this._localChange = true;
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-
-    raiseOnPropertyChanged(previousValue: Vector4) {
-        if (this.props.onChange) {
-            this.props.onChange(this.state.value);
-        }
-
-        if (!this.props.onPropertyChangedObservable || !this.props.propertyName) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: this.state.value,
-            initialValue: previousValue
-        });
-    }
-
-    updateVector4() {
-        const store = (this.props.value || this.props.target[this.props.propertyName!]).clone();
-        if (this.props.value) {
-            this.props.value.copyFrom(this.state.value);
-        } else {
-            this.props.target[this.props.propertyName!] = this.state.value;
-        }
-
-        this.forceUpdate();
-
-        this.raiseOnPropertyChanged(store);
-    }
-
-
-    updateStateX(value: number) {
-        this._localChange = true;
-
-        this.state.value.x = value;
-        this.updateVector4();
-    }
-
-    updateStateY(value: number) {
-        this._localChange = true;
-
-        this.state.value.y = value;
-        this.updateVector4();
-    }
-
-    updateStateZ(value: number) {
-        this._localChange = true;
-
-        this.state.value.z = value;
-        this.updateVector4();
-    }    
-    
-    updateStateW(value: number) {
-        this._localChange = true;
-
-        this.state.value.w = value;
-        this.updateVector4();
-    }
-
-    render() {
-        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
-
-        return (
-            <div className="vector3Line">
-                <div className="firstLine">
-                    <div className="label">
-                        {this.props.label}
-                    </div>
-                    <div className="vector">
-                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}`}
-
-                    </div>
-                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        {chevron}
-                    </div>
-                </div>
-                {
-                    this.state.isExpanded &&
-                    <div className="secondLine">
-                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
-                        <NumericInputComponent globalState={this.props.globalState} label="w" step={this.props.step} value={this.state.value.w} onChange={value => this.updateStateW(value)} />
-                    </div>
-                }
-            </div>
-        );
-    }
-}