@babylonjs/gui-editor 5.0.0-alpha.59 → 5.0.0-alpha.63

package/babylon.guiEditor.module.d.ts

@@ -31,6 +31,641 @@ declare module "@babylonjs/gui-editor/tools" {
         static reorderGrid(grid: Grid, index: number, control: Control, cell: Vector2): void;
     }
 }
+declare module "@babylonjs/gui-editor/diagram/GUIEditorNodeMaterial" {
+    export const GUIEditorNodeMaterial: {
+        tags: null;
+        ignoreAlpha: boolean;
+        maxSimultaneousLights: number;
+        mode: number;
+        id: string;
+        name: string;
+        checkReadyOnEveryCall: boolean;
+        checkReadyOnlyOnce: boolean;
+        state: string;
+        alpha: number;
+        backFaceCulling: boolean;
+        cullBackFaces: boolean;
+        sideOrientation: number;
+        alphaMode: number;
+        _needDepthPrePass: boolean;
+        disableDepthWrite: boolean;
+        disableColorWrite: boolean;
+        forceDepthWrite: boolean;
+        depthFunction: number;
+        separateCullingPass: boolean;
+        fogEnabled: boolean;
+        pointSize: number;
+        zOffset: number;
+        zOffsetUnits: number;
+        pointsCloud: boolean;
+        fillMode: number;
+        editorData: {
+            locations: {
+                blockId: number;
+                x: number;
+                y: number;
+            }[];
+            frames: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                color: number[];
+                name: string;
+                isCollapsed: boolean;
+                blocks: number[];
+            }[];
+            x: number;
+            y: number;
+            zoom: number;
+        };
+        customType: string;
+        outputNodes: number[];
+        blocks: ({
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            }[];
+            outputs: {
+                name: string;
+            }[];
+            complementZ: number;
+            complementW: number;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            systemValue: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: never[];
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                displayName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            rSwizzle: string;
+            gSwizzle: string;
+            bSwizzle: string;
+            aSwizzle: string;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            }[];
+            outputs: {
+                name: string;
+            }[];
+            operation: number;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: {
+                name: string;
+            }[];
+            xSwizzle: string;
+            ySwizzle: string;
+            zSwizzle: string;
+            wSwizzle: string;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+            } | {
+                name: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            })[];
+            outputs: {
+                name: string;
+            }[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            valueType: string;
+            value: number[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            valueType: string;
+            value: number;
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            fragmentOnly: boolean;
+            disableLevelMultiplication: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+        })[];
+    };
+}
 declare module "@babylonjs/gui-editor/diagram/workbench" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -81,6 +716,8 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _cameraMaxRadiasFactor;
         private _pasted;
         private _engine;
+        private _liveRenderObserver;
+        private _guiRenderObserver;
         get globalState(): GlobalState;
         get nodes(): Control[];
         get selectedGuiNodes(): Control[];
@@ -96,13 +733,12 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         blurEvent: () => void;
         componentWillUnmount(): void;
         loadFromJson(serializationObject: any): void;
-        loadFromSnippet(snippedId: string): Promise<void>;
+        loadFromSnippet(snippetId: string): Promise<void>;
         loadToEditor(): void;
         changeSelectionHighlight(value: boolean): void;
         resizeGuiTexture(newvalue: Vector2): void;
         findNodeFromGuiElement(guiControl: Control): Control;
         appendBlock(guiElement: Control): Control;
-        isContainer(guiControl: Control): boolean;
         createNewGuiNode(guiControl: Control): Control;
         private parent;
         private _convertToPixels;
@@ -112,13 +748,13 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         isSelected(value: boolean, guiNode: Control): void;
         clicked: boolean;
         _onMove(guiControl: Control, evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
-        componentDidMount(): void;
         onMove(evt: React.PointerEvent): void;
         getGroundPosition(): Nullable<Vector3>;
         onDown(evt: React.PointerEvent<HTMLElement>): void;
         isUp: boolean;
         onUp(evt: React.PointerEvent): void;
         createGUICanvas(): void;
+        synchronizeLiveGUI(): void;
         addControls(scene: Scene, camera: ArcRotateCamera): void;
         getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane): Vector3;
         panning(newPos: Vector3, initialPos: Vector3, inertia: number, ref: Vector3): Vector3;
@@ -168,6 +804,7 @@ declare module "@babylonjs/gui-editor/globalState" {
     }
     export class GlobalState {
         [x: string]: any;
+        liveGuiTexture: Nullable<AdvancedDynamicTexture>;
         guiTexture: AdvancedDynamicTexture;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
@@ -183,6 +820,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
         onNewSceneObservable: Observable<Nullable<Scene>>;
         onGuiNodeRemovalObservable: Observable<Control>;
+        onPopupClosedObservable: Observable<void>;
         backgroundColor: Color4;
         blockKeyboardEvents: boolean;
         controlCamera: boolean;
@@ -436,148 +1074,14 @@ declare module "@babylonjs/gui-editor/components/commandButtonComponent" {
         iconLabel?: string;
         isActive: boolean;
         onClick: () => void;
+        altStyle?: boolean;
+        disabled?: boolean;
     }
     export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> {
         constructor(props: ICommandButtonComponentProps);
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { Control } from "@babylonjs/gui/2D/controls/control";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    interface ICommonControlPropertyGridComponentProps {
-        control: Control;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
-        private _width;
-        private _height;
-        private _responsive;
-        constructor(props: ICommonControlPropertyGridComponentProps);
-        private _updateAlignment;
-        private _checkAndUpdateValues;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/sliderPropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
-    interface ISliderPropertyGridComponentProps {
-        slider: Slider;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
-        constructor(props: ISliderPropertyGridComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/linePropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { Line } from "@babylonjs/gui/2D/controls/line";
-    interface ILinePropertyGridComponentProps {
-        line: Line;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
-        constructor(props: ILinePropertyGridComponentProps);
-        onDashChange(value: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/radioButtonPropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
-    interface IRadioButtonPropertyGridComponentProps {
-        radioButton: RadioButton;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
-        constructor(props: IRadioButtonPropertyGridComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
-    export const Null_Value: number;
-    export interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: IInspectableOptions[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        extractValue?: () => number;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-        allowNullValue?: boolean;
-        icon?: string;
-        iconLabel?: string;
-    }
-    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-        value: number;
-    }> {
-        private _localChange;
-        private remapValueIn;
-        private remapValueOut;
-        constructor(props: IOptionsLineComponentProps);
-        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-            value: number;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/textBlockPropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    interface ITextBlockPropertyGridComponentProps {
-        textBlock: TextBlock;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
-        constructor(props: ITextBlockPropertyGridComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/inputTextPropertyGridComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { InputText } from "@babylonjs/gui/2D/controls/inputText";
-    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    interface IInputTextPropertyGridComponentProps {
-        inputText: InputText;
-        lockObject: LockObject;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
-        constructor(props: IInputTextPropertyGridComponentProps);
-        render(): JSX.Element;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/numericInputComponent" {
     import * as React from "react";
     interface INumericInputComponentProps {
@@ -682,7 +1186,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/colorPicker/colorPicker
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
         linearHint?: boolean;
@@ -711,7 +1215,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color3LineCompone
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     export interface IColor3LineComponentProps {
         label: string;
@@ -722,29 +1226,188 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color3LineCompone
         icon?: string;
         lockObject?: LockObject;
         iconLabel?: string;
+        onValueChange?: (value: string) => void;
     }
     export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
         isExpanded: boolean;
-        color: Color3;
+        color: Color3 | Color4;
+        colorText: string;
     }> {
         private _localChange;
         constructor(props: IColor3LineComponentProps);
+        private convertToColor3;
         shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3;
+            color: Color3 | Color4;
+            colorText: string;
         }): boolean;
-        setPropertyValue(newColor: Color3): void;
+        setPropertyValue(newColor: Color3 | Color4, newColorText: string): void;
         onChange(newValue: string): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3): void;
+        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
         copyToClipboard(): void;
         convert(colorString: string): void;
+        private _colorStringSaved;
+        private _colorPickerOpen;
         private _colorString;
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface ICommonControlPropertyGridComponentProps {
+        control: Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+        private _width;
+        private _height;
+        private _responsive;
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        private _updateAlignment;
+        private _checkAndUpdateValues;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/sliderPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
+    import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
+    interface ISliderPropertyGridComponentProps {
+        slider: Slider | ImageBasedSlider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
+        constructor(props: ISliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/sliderGenericPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
+    interface ISliderGenericPropertyGridComponentProps {
+        slider: Slider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class SliderGenericPropertyGridComponent extends React.Component<ISliderGenericPropertyGridComponentProps> {
+        constructor(props: ISliderGenericPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/linePropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { Line } from "@babylonjs/gui/2D/controls/line";
+    interface ILinePropertyGridComponentProps {
+        line: Line;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
+        constructor(props: ILinePropertyGridComponentProps);
+        onDashChange(value: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/radioButtonPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
+    interface IRadioButtonPropertyGridComponentProps {
+        radioButton: RadioButton;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
+        constructor(props: IRadioButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
+    export const Null_Value: number;
+    export interface IOptionsLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        options: IInspectableOptions[];
+        noDirectUpdate?: boolean;
+        onSelect?: (value: number) => void;
+        extractValue?: () => number;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        allowNullValue?: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
+        value: number;
+    }> {
+        private _localChange;
+        private remapValueIn;
+        private remapValueOut;
+        constructor(props: IOptionsLineComponentProps);
+        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+            value: number;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        updateValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/textBlockPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface ITextBlockPropertyGridComponentProps {
+        textBlock: TextBlock;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
+        constructor(props: ITextBlockPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/inputTextPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { InputText } from "@babylonjs/gui/2D/controls/inputText";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface IInputTextPropertyGridComponentProps {
+        inputText: InputText;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
+        constructor(props: IInputTextPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/colorPickerPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -847,6 +1510,8 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/g
         private _columnDefinitions;
         private _editedRow;
         private _editedColumn;
+        private _rowChild;
+        private _columnChild;
         renderRows(): JSX.Element[];
         setRowValues(): void;
         setColumnValues(): void;
@@ -855,6 +1520,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/g
         resizeColumn(): void;
         checkValue(value: string, percent: boolean): string;
         checkPercentage(value: string): boolean;
+        resetValues(): void;
         render(): JSX.Element;
     }
 }
@@ -959,6 +1625,43 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/d
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/buttonPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
+    interface IButtonPropertyGridComponentProps {
+        rectangle: Rectangle;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        onAddComponent: (newComponent: string) => void;
+    }
+    export class ButtonPropertyGridComponent extends React.Component<IButtonPropertyGridComponentProps> {
+        constructor(props: IButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/guiNodeTools" {
+    import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
+    import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
+    import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
+    import { Line } from "@babylonjs/gui/2D/controls/line";
+    import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
+    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
+    import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
+    import { Image } from "@babylonjs/gui/2D/controls/image";
+    import { InputText } from "@babylonjs/gui/2D/controls/inputText";
+    import { Grid } from "@babylonjs/gui/2D/controls/grid";
+    import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid";
+    import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
+    import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
+    import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
+    export class GUINodeTools {
+        static ImageControlDefaultUrl: string;
+        static CreateControlFromString(data: string): Grid | Rectangle | Line | TextBlock | Image | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
+    }
+}
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -1000,25 +1703,6 @@ declare module "@babylonjs/gui-editor/portal" {
         render(): React.ReactPortal;
     }
 }
-declare module "@babylonjs/gui-editor/guiNodeTools" {
-    import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
-    import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
-    import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
-    import { Line } from "@babylonjs/gui/2D/controls/line";
-    import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
-    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
-    import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
-    import { Image } from "@babylonjs/gui/2D/controls/image";
-    import { InputText } from "@babylonjs/gui/2D/controls/inputText";
-    import { Grid } from "@babylonjs/gui/2D/controls/grid";
-    import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid";
-    import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
-    import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
-    import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
-    export class GUINodeTools {
-        static CreateControlFromString(data: string): Grid | Rectangle | Line | TextBlock | Image | Slider | RadioButton | InputText | ColorPicker | ImageBasedSlider | StackPanel | Ellipse | Checkbox | DisplayGrid;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedComponents/messageDialog" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -1068,7 +1752,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/extensionsCompone
 declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/controlTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { Control } from "@babylonjs/gui/2D/controls/control";
-    import * as React from 'react';
+    import * as React from "react";
     import { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
     interface IControlTreeItemComponentProps {
         control: Control;
@@ -1266,16 +1950,13 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         showPreviewPopUp: boolean;
     }
     export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
-        private _workbenchCanvas;
         private _startX;
         private _moveInProgress;
         private _leftWidth;
         private _rightWidth;
         private _toolBarIconSize;
-        private _onWidgetKeyUpPointer;
         private _popUpWindow;
         componentDidMount(): void;
-        componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
         showWaitScreen(): void;
         hideWaitScreen(): void;
@@ -1283,7 +1964,6 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
         buildColumnLayout(): string;
-        emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
         handlePopUp: () => void;
         handleClosingPopUp: () => void;
         createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
@@ -1313,10 +1993,12 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/popup" {
 }
 declare module "@babylonjs/gui-editor/guiEditor" {
     import { Observable } from "@babylonjs/core/Misc/observable";
+    import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
     /**
      * Interface used to specify creation options for the gui editor
      */
     export interface IGUIEditorOptions {
+        liveGuiTexture?: AdvancedDynamicTexture;
         customLoad: {
             label: string;
             action: (data: string) => Promise<string>;
@@ -1338,7 +2020,7 @@ declare module "@babylonjs/gui-editor/guiEditor" {
          * Show the gui editor
          * @param options defines the options to use to configure the gui editor
          */
-        static Show(options: IGUIEditorOptions): void;
+        static Show(options: IGUIEditorOptions): Promise<void>;
     }
 }
 declare module "@babylonjs/gui-editor/index" {
@@ -1692,7 +2374,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/hexLineComponent"
     }
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/iconButtonLineComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     export interface IIconButtonLineComponentProps {
         icon: string;
         onClick: () => void;