npm - @babylonjs/gui-editor - Versions diffs - 5.0.0-alpha.7 → 5.0.0-beta.2 - Mend

@babylonjs/gui-editor 5.0.0-alpha.7 → 5.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/babylon.guiEditor.max.js +34212 -40837
package/babylon.guiEditor.max.js.map +1 -1
package/babylon.guiEditor.module.d.ts +1806 -379
package/package.json +3 -3

package/babylon.guiEditor.module.d.ts CHANGED Viewed

@@ -19,128 +19,759 @@ declare module "@babylonjs/gui-editor/components/log/logComponent" {
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/tools" {
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Grid } from "@babylonjs/gui/2D/controls/grid";
+    import { Vector2 } from "@babylonjs/core/Maths/math";
+    export class Tools {
+        static LookForItem(item: any, selectedEntity: any, firstIteration?: boolean): boolean;
+        private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
+        static SortAndFilter(parent: any, items: any[]): any[];
+        static getCellInfo(grid: Grid, control: Control): Vector2;
+        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";
-    import { GUINode } from "@babylonjs/gui-editor/diagram/guiNode";
-    import { Control } from '@babylonjs/gui/2D/controls/control';
+    import { Nullable } from "@babylonjs/core/types";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
+    import { Scene } from "@babylonjs/core/scene";
+    import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+    import { Mesh } from "@babylonjs/core/Meshes/mesh";
+    import { Plane } from "@babylonjs/core/Maths/math.plane";
+    import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
+    import { EventState } from "@babylonjs/core/Misc/observable";
+    import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
     export interface IWorkbenchComponentProps {
         globalState: GlobalState;
     }
-    export type FramePortData = {};
-    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
+    export enum ConstraintDirection {
+        NONE = 0,
+        X = 2,
+        Y = 3
+    }
     export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
-        private readonly MinZoom;
-        private readonly MaxZoom;
-        private _hostCanvas;
-        private _gridCanvas;
-        private _selectionContainer;
-        private _frameContainer;
-        private _svgCanvas;
+        artBoardBackground: Rectangle;
         private _rootContainer;
-        private _guiNodes;
+        private _setConstraintDirection;
         private _mouseStartPointX;
         private _mouseStartPointY;
-        private _selectionStartX;
-        private _selectionStartY;
-        private _x;
-        private _y;
-        private _zoom;
+        _textureMesh: Mesh;
+        _scene: Scene;
         private _selectedGuiNodes;
-        private _gridSize;
-        private _selectionBox;
-        private _frameCandidate;
-        private _altKeyIsPressed;
         private _ctrlKeyIsPressed;
-        private _oldY;
-        _frameIsMoving: boolean;
-        _isLoading: boolean;
-        isOverGUINode: boolean;
-        get gridSize(): number;
-        set gridSize(value: number);
+        private _altKeyIsPressed;
+        private _constraintDirection;
+        private _forcePanning;
+        private _forceZooming;
+        private _forceSelecting;
+        private _outlines;
+        private _panning;
+        private _canvas;
+        private _responsive;
+        private _isOverGUINode;
+        private _clipboard;
+        private _selectAll;
+        _camera: ArcRotateCamera;
+        private _cameraRadias;
+        private _cameraMaxRadiasFactor;
+        private _pasted;
+        private _engine;
+        private _liveRenderObserver;
+        private _guiRenderObserver;
+        private _mainSelection;
+        private _selectionDepth;
+        private _doubleClick;
+        private _lockMainSelection;
+        _liveGuiTextureRerender: boolean;
         get globalState(): GlobalState;
-        get nodes(): GUINode[];
-        get zoom(): number;
-        set zoom(value: number);
-        get x(): number;
-        set x(value: number);
-        get y(): number;
-        set y(value: number);
-        get selectedGuiNodes(): GUINode[];
-        get canvasContainer(): HTMLDivElement;
-        get hostCanvas(): HTMLDivElement;
-        get svgCanvas(): HTMLElement;
-        get selectionContainer(): HTMLDivElement;
-        get frameContainer(): HTMLDivElement;
+        get nodes(): Control[];
+        get selectedGuiNodes(): Control[];
+        private _getParentWithDepth;
+        private _getMaxParent;
         constructor(props: IWorkbenchComponentProps);
-        getGridPosition(position: number, useCeil?: boolean): number;
-        getGridPositionCeil(position: number): number;
+        determineMouseSelection(selection: Nullable<Control>): void;
+        keyEvent: (evt: KeyboardEvent) => void;
+        private updateHitTest;
+        private updateHitTestForSelection;
+        private setCameraRadius;
+        copyToClipboard(): void;
+        pasteFromClipboard(): void;
+        CopyGUIControl(original: Control): void;
+        private selectAllGUI;
+        blurEvent: () => void;
+        componentWillUnmount(): void;
         loadFromJson(serializationObject: any): void;
-        loadFromSnippet(snippedID: string): Promise<void>;
-        loadFromGuiTexture(): void;
-        updateTransform(): void;
-        onKeyUp(): void;
-        findNodeFromGuiElement(guiControl: Control): GUINode;
-        reset(): void;
-        appendBlock(guiElement: Control): GUINode;
-        distributeGraph(): void;
-        componentDidMount(): void;
+        loadFromSnippet(snippetId: string): Promise<void>;
+        loadToEditor(): void;
+        changeSelectionHighlight(value: boolean): void;
+        resizeGuiTexture(newvalue: Vector2): void;
+        findNodeFromGuiElement(guiControl: Control): Control;
+        appendBlock(guiElement: Control): Control;
+        private _isMainSelectionParent;
+        createNewGuiNode(guiControl: Control): Control;
+        private parent;
+        private _convertToPixels;
+        private _reorderGrid;
+        private _isNotChildInsert;
+        private _adjustParentingIndex;
+        isSelected(value: boolean, guiNode: Control): void;
+        clicked: boolean;
+        _onMove(guiControl: Control, evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
+        convertToPercentage(guiControl: Control, includeScale: boolean): void;
         onMove(evt: React.PointerEvent): void;
+        getGroundPosition(): Nullable<Vector3>;
         onDown(evt: React.PointerEvent<HTMLElement>): void;
         isUp: boolean;
         onUp(evt: React.PointerEvent): void;
-        onWheel(evt: React.WheelEvent): void;
-        zoomToFit(): void;
         createGUICanvas(): void;
-        updateGUIs(): void;
+        synchronizeLiveGUI(): void;
+        addControls(scene: Scene, camera: ArcRotateCamera): void;
+        getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane, x?: number, y?: number): Vector3;
+        panning(newPos: Vector3, initialPos: Vector3, inertia: number, ref: Vector3): Vector3;
+        zoomWheel(p: PointerInfo, e: EventState, camera: ArcRotateCamera): number;
+        zooming(delta: number, scene: Scene, camera: ArcRotateCamera, plane: Plane, ref: Vector3): void;
+        zeroIfClose(vec: Vector3): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/diagram/guiNode" {
-    import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    import { Control } from "@babylonjs/gui/2D/controls/control";
-    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
-    export class GUINode {
-        guiControl: Control;
-        private _x;
-        private _y;
-        private _gridAlignedX;
-        private _gridAlignedY;
-        private _globalState;
-        private _onSelectionChangedObserver;
-        private _onSelectionBoxMovedObserver;
-        private _onUpdateRequiredObserver;
-        private _ownerCanvas;
-        private _isSelected;
-        private _isVisible;
-        private _enclosingFrameId;
-        children: GUINode[];
-        get isVisible(): boolean;
-        set isVisible(value: boolean);
-        get gridAlignedX(): number;
-        get gridAlignedY(): number;
-        get x(): number;
-        set x(value: number);
-        get y(): number;
-        set y(value: number);
-        get width(): number;
-        get height(): number;
-        get id(): number;
-        get name(): string | undefined;
-        get isSelected(): boolean;
-        get enclosingFrameId(): number;
-        set enclosingFrameId(value: number);
-        set isSelected(value: boolean);
-        constructor(globalState: GlobalState, guiControl: Control);
-        cleanAccumulation(useCeil?: boolean): void;
-        clicked: boolean;
-        _onMove(evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
-        updateVisual(): void;
-        private _isContainer;
-        addGui(childNode: GUINode): void;
-        dispose(): void;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent" {
     export class PropertyChangedEvent {
         object: any;
@@ -150,93 +781,178 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent" {
         allowNullValue?: boolean;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
+    /**
+     * Class used to provide lock mechanism
+     */
+    export class LockObject {
+        /**
+         * Gets or set if the lock is engaged
+         */
+        lock: boolean;
+    }
+}
+declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    export interface IGuiGizmoProps {
+        globalState: GlobalState;
+    }
+    export class GuiGizmoComponent extends React.Component<IGuiGizmoProps> {
+        scalePoints: HTMLDivElement[];
+        private _scalePointIndex;
+        private _pointerData;
+        private _htmlPoints;
+        private _matrixCache;
+        private _responsive;
+        constructor(props: IGuiGizmoProps);
+        componentDidMount(): void;
+        /**
+         * Update the gizmo's corners positions
+         * @param force should the update be forced. otherwise it will be updated only when the pointer is down
+         */
+        updateGizmo(force?: boolean): void;
+        private _resetMatrixArray;
+        /**
+         * This function calculates a local matrix for a node, including it's full transformation and pivot point
+         *
+         * @param node the node to calculate the matrix for
+         * @param useStoredValues should the stored (cached) values be used to calculate the matrix
+         * @returns a new matrix for the control
+         */
+        private _getNodeMatrix;
+        /**
+         * Using the node's tree, calculate its world matrix and return it
+         * @param node the node to calculate the matrix for
+         * @param useStoredValuesIfPossible used stored valued (cached when pointer down is clicked)
+         * @returns the world matrix for this node
+         */
+        private _nodeToRTTWorldMatrix;
+        private _nodeToRTTSpace;
+        private _rttToLocalNodeSpace;
+        private _rttToCanvasSpace;
+        private _plane;
+        private _mousePointerToRTTSpace;
+        /**
+         * Get the scaling of a specific GUI control
+         * @param node the node for which we are getting the scaling
+         * @param relative should we return only the relative scaling (relative to the parent)
+         * @returns an X,Y vector of the scaling
+         */
+        getScale(node: Control, relative?: boolean): Vector2;
+        getRotation(node: Control, relative?: boolean): number;
+        createBaseGizmo(): void;
+        onUp(evt?: React.PointerEvent): void;
+        private _onUp;
+        onMove(evt: React.PointerEvent): void;
+        private _initH;
+        private _initW;
+        private _initX;
+        private _initY;
+        private _onMove;
+        /**
+         * Calculate the 4 corners in node space
+         * @param node The node to use
+         */
+        private _nodeToCorners;
+        /**
+         * Computer the node's width, height, top and left, using the 4 corners
+         * @param node the node we use
+         */
+        private _updateNodeFromCorners;
+        private _rotate;
+        private _setNodeCorner;
+        private _setMousePosition;
+        render(): null;
+    }
+}
 declare module "@babylonjs/gui-editor/globalState" {
     import { Nullable } from "@babylonjs/core/types";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { LogEntry } from "@babylonjs/gui-editor/components/log/logComponent";
     import { Color4 } from "@babylonjs/core/Maths/math.color";
-    import { GUINode } from "@babylonjs/gui-editor/diagram/guiNode";
     import { WorkbenchComponent } from "@babylonjs/gui-editor/diagram/workbench";
     import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import { Scene } from "@babylonjs/core/scene";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { GuiGizmoComponent } from "@babylonjs/gui-editor/diagram/guiGizmo";
+    export enum DragOverLocation {
+        ABOVE = 0,
+        BELOW = 1,
+        CENTER = 2,
+        NONE = 3
+    }
     export class GlobalState {
+        [x: string]: any;
+        liveGuiTexture: Nullable<AdvancedDynamicTexture>;
         guiTexture: AdvancedDynamicTexture;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: Observable<Nullable<GUINode>>;
-        onRebuildRequiredObservable: Observable<void>;
+        onSelectionChangedObservable: Observable<Nullable<Control>>;
+        onResizeObservable: Observable<Vector2>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
         onUpdateRequiredObservable: Observable<void>;
-        onReOrganizedRequiredObservable: Observable<void>;
         onLogRequiredObservable: Observable<LogEntry>;
         onErrorMessageDialogRequiredObservable: Observable<string>;
         onIsLoadingChanged: Observable<boolean>;
-        onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
-        onGuiNodeRemovalObservable: Observable<GUINode>;
+        onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
+        onNewSceneObservable: Observable<Nullable<Scene>>;
+        onGuiNodeRemovalObservable: Observable<Control>;
+        onPopupClosedObservable: Observable<void>;
         backgroundColor: Color4;
         blockKeyboardEvents: boolean;
         controlCamera: boolean;
+        selectionLock: boolean;
         workbench: WorkbenchComponent;
+        guiGizmo: GuiGizmoComponent;
         onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+        onZoomObservable: Observable<void>;
+        onFitToWindowObservable: Observable<void>;
+        onPanObservable: Observable<void>;
+        onSelectionButtonObservable: Observable<void>;
+        onMoveObservable: Observable<void>;
+        onLoadObservable: Observable<File>;
+        onSaveObservable: Observable<void>;
+        onSnippetLoadObservable: Observable<void>;
+        onSnippetSaveObservable: Observable<void>;
+        onOutlinesObservable: Observable<void>;
+        onResponsiveChangeObservable: Observable<boolean>;
+        onParentingChangeObservable: Observable<Nullable<Control>>;
+        onPropertyGridUpdateRequiredObservable: Observable<void>;
+        onDraggingEndObservable: Observable<void>;
+        onDraggingStartObservable: Observable<void>;
+        onWindowResizeObservable: Observable<void>;
+        onGizmoUpdateRequireObservable: Observable<void>;
+        draggedControl: Nullable<Control>;
+        draggedControlDirection: DragOverLocation;
+        isSaving: boolean;
+        lockObject: LockObject;
         storeEditorData: (serializationObject: any) => void;
         customSave?: {
             label: string;
-            action: (data: string) => Promise<void>;
+            action: (data: string) => Promise<string>;
+        };
+        customLoad?: {
+            label: string;
+            action: (data: string) => Promise<string>;
         };
         constructor();
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/lineContainerComponent" {
-    import * as React from "react";
-    interface ILineContainerComponentProps {
-        title: string;
-        children: any[] | any;
-        closed?: boolean;
-    }
-    export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
-        isExpanded: boolean;
-    }> {
-        constructor(props: ILineContainerComponentProps);
-        switchExpandedState(): void;
-        renderHeader(): JSX.Element;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/draggableLineComponent" {
-    import * as React from "react";
-    export interface IButtonLineComponentProps {
-        data: string;
-        tooltip: string;
-    }
-    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-        constructor(props: IButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/components/guiList/guiListComponent" {
-    import * as React from "react";
-    import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    interface IGuiListComponentProps {
-        globalState: GlobalState;
-    }
-    export class GuiListComponent extends React.Component<IGuiListComponentProps, {
-        filter: string;
-    }> {
-        private _onResetRequiredObserver;
-        private static _Tooltips;
-        constructor(props: IGuiListComponentProps);
-        componentWillUnmount(): void;
-        filterContent(filter: string): void;
-        render(): JSX.Element;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
     import * as React from "react";
     export interface IButtonLineComponentProps {
         label: string;
         onClick: () => void;
+        icon?: string;
+        iconLabel?: string;
     }
     export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
@@ -249,6 +965,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineCom
         label: string;
         onClick: (file: File) => void;
         accept: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
         private static _IDGenerator;
@@ -264,7 +982,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
     export interface ICheckBoxLineComponentProps {
-        label: string;
+        label?: string;
         target?: any;
         propertyName?: string;
         isSelected?: () => boolean;
@@ -272,6 +990,10 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
         onValueChanged?: () => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         disabled?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        faIcons?: {
+        };
     }
     export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
         isSelected: boolean;
@@ -300,6 +1022,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textLineComponent
         url?: string;
         ignoreValue?: boolean;
         additionalClass?: string;
+        icon?: string;
+        iconLabel?: string;
+        tooltip?: string;
     }
     export class TextLineComponent extends React.Component<ITextLineComponentProps> {
         constructor(props: ITextLineComponentProps);
@@ -319,17 +1044,6 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/stringTools" {
         static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
-    /**
-     * Class used to provide lock mechanism
-     */
-    export class LockObject {
-        /**
-         * Gets or set if the lock is engaged
-         */
-        lock: boolean;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -351,6 +1065,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         max?: number;
         smallUI?: boolean;
         onEnter?: (newValue: number) => void;
+        icon?: string;
+        iconLabel?: string;
+        defaultValue?: number;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -373,6 +1090,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/sliderLineCompone
     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";
     interface ISliderLineComponentProps {
         label: string;
         target?: any;
@@ -387,6 +1105,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/sliderLineCompone
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         decimalCount?: number;
         margin?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
     }
     export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
         value: number;
@@ -415,6 +1136,11 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         value?: string;
         onChange?: (value: string) => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+        noUnderline?: boolean;
+        numbersOnly?: boolean;
+        delayInput?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -430,137 +1156,20 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         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";
-    export const Null_Value: number;
-    export class ListLineOption {
-        label: string;
-        value: number;
-        selected?: boolean;
-    }
-    export interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: ListLineOption[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        extractValue?: () => number;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-        allowNullValue?: boolean;
-    }
-    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/sharedUiComponents/tabs/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> {
-        constructor(props: ICommonControlPropertyGridComponentProps);
-        renderGridInformation(): JSX.Element | null;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/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/sharedUiComponents/tabs/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/sharedUiComponents/tabs/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/tabs/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/sharedUiComponents/tabs/propertyGrids/gui/inputTextPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/commandButtonComponent" {
     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>;
+    interface ICommandButtonComponentProps {
+        tooltip: string;
+        shortcut?: string;
+        icon: string;
+        iconLabel?: string;
+        isActive: boolean;
+        onClick: () => void;
+        altStyle?: boolean;
+        disabled?: boolean;
     }
-    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
-        constructor(props: IInputTextPropertyGridComponentProps);
+    export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> {
+        constructor(props: ICommandButtonComponentProps);
         render(): JSX.Element;
     }
 }
@@ -572,6 +1181,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/numericInputCompo
         step?: number;
         onChange: (value: number) => void;
         precision?: number;
+        icon?: string;
+        iconLabel?: string;
     }
     export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
         value: string;
@@ -630,6 +1241,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/colorPicker/colorPicker
      */
     export interface IColorPickerProps {
         color: Color3 | Color4;
+        linearhint?: boolean;
         debugMode?: boolean;
         onColorChanged?: (color: Color3 | Color4) => void;
     }
@@ -649,6 +1261,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/colorPicker/colorPicker
         private _isSaturationPointerDown;
         private _isHuePointerDown;
         constructor(props: IColorPickerProps);
+        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
         onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
@@ -664,10 +1277,14 @@ 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;
         onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
     }
     interface IColorPickerComponentState {
         pickerEnabled: boolean;
@@ -689,35 +1306,200 @@ 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;
         target: any;
         propertyName: string;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         isLinear?: boolean;
+        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/sharedUiComponents/tabs/propertyGrids/gui/colorPickerPropertyGridComponent" {
+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;
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        private _updateAlignment;
+        private _checkAndUpdateValues;
+        private _markChildrenAsDirty;
+        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";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -733,7 +1515,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/imagePropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/imagePropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -749,7 +1531,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/imageBasedSliderPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/imageBasedSliderPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -765,7 +1547,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/rectanglePropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/rectanglePropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -781,7 +1563,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/stackPanelPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/stackPanelPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -797,7 +1579,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/gridPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/gridPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -810,12 +1592,30 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
     }
     export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
         constructor(props: IGridPropertyGridComponentProps);
+        private _removingColumn;
+        private _removingRow;
+        private _previousGrid;
+        private _rowDefinitions;
+        private _rowEditFlags;
+        private _columnEditFlags;
+        private _columnDefinitions;
+        private _editedRow;
+        private _editedColumn;
+        private _rowChild;
+        private _columnChild;
         renderRows(): JSX.Element[];
+        setRowValues(): void;
+        setColumnValues(): void;
         renderColumns(): JSX.Element[];
+        resizeRow(): void;
+        resizeColumn(): void;
+        checkValue(value: string, percent: boolean): string;
+        checkPercentage(value: string): boolean;
+        resetValues(): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/scrollViewerPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/scrollViewerPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -831,7 +1631,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/ellipsePropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/ellipsePropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -847,7 +1647,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/checkboxPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/checkboxPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -863,7 +1663,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/controlPropertyGridComponent" {
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/controlPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
@@ -879,31 +1679,109 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/components/parentingPropertyGridComponent" {
+    import * as React from "react";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    interface IParentingPropertyGridComponentProps {
+        control: Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ParentingPropertyGridComponent extends React.Component<IParentingPropertyGridComponentProps> {
+        constructor(props: IParentingPropertyGridComponentProps);
+        private _columnNumber;
+        private _rowNumber;
+        updateGridPosition(): void;
+        getCellInfo(): void;
+        private _changeCell;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/displayGridPropertyGridComponent" {
+    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 { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid";
+    interface IDisplayGridPropertyGridComponentProps {
+        displayGrid: DisplayGrid;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class DisplayGridPropertyGridComponent extends React.Component<IDisplayGridPropertyGridComponentProps> {
+        constructor(props: IDisplayGridPropertyGridComponentProps);
+        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 | Image | TextBlock | 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";
     import { Nullable } from "@babylonjs/core/types";
-    import { GUINode } from "@babylonjs/gui-editor/diagram/guiNode";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
     interface IPropertyTabComponentState {
-        currentNode: Nullable<GUINode>;
+        currentNode: Nullable<Control>;
     }
     export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
         private _onBuiltObserver;
         private _timerIntervalId;
         private _lockObject;
+        private _sizeOption;
         constructor(props: IPropertyTabComponentProps);
-        timerRefresh(): void;
         componentDidMount(): void;
         componentWillUnmount(): void;
         load(file: File): void;
-        save(): void;
-        saveToSnippetServer(): void;
+        save(saveCallback: () => void): void;
+        saveLocally: () => void;
+        saveToSnippetServerHelper: (content: string, adt: AdvancedDynamicTexture) => Promise<string>;
+        saveToSnippetServer: () => Promise<void>;
         loadFromSnippet(): void;
         renderProperties(): JSX.Element | null;
-        render(): JSX.Element;
+        renderControlIcon(): string;
+        render(): JSX.Element | null;
     }
 }
 declare module "@babylonjs/gui-editor/portal" {
@@ -916,51 +1794,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 { VirtualKeyboard } from "@babylonjs/gui/2D/controls/virtualKeyboard";
-    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";
-    export class GUINodeTools {
-        static CreateControlFromString(data: string): Grid | Slider | Line | TextBlock | InputText | ColorPicker | Image | Rectangle | Ellipse | Checkbox | DisplayGrid | VirtualKeyboard;
-    }
-}
-declare module "@babylonjs/gui-editor/nodeLocationInfo" {
-    export interface INodeLocationInfo {
-        blockId: number;
-        x: number;
-        y: number;
-    }
-    export interface IFrameData {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        color: number[];
-        name: string;
-        isCollapsed: boolean;
-        blocks: number[];
-        comments: string;
-    }
-    export interface IEditorData {
-        locations: INodeLocationInfo[];
-        x: number;
-        y: number;
-        zoom: number;
-        frames?: IFrameData[];
-        map?: {
-            [key: number]: number;
-        };
-    }
-}
 declare module "@babylonjs/gui-editor/sharedComponents/messageDialog" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -975,45 +1808,272 @@ declare module "@babylonjs/gui-editor/sharedComponents/messageDialog" {
         render(): JSX.Element | null;
     }
 }
-declare module "@babylonjs/gui-editor/workbenchEditor" {
+declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemLabelComponent" {
     import * as React from "react";
-    import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    import { Nullable } from "@babylonjs/core/types";
-    import { IEditorData } from "@babylonjs/gui-editor/nodeLocationInfo";
-    import { GUINode } from "@babylonjs/gui-editor/diagram/guiNode";
-    interface IGraphEditorProps {
-        globalState: GlobalState;
+    interface ITreeItemLabelComponentProps {
+        label: string;
+        onClick?: () => void;
+        color: string;
     }
-    interface IGraphEditorState {
-        showPreviewPopUp: boolean;
+    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps> {
+        constructor(props: ITreeItemLabelComponentProps);
+        onClick(): void;
+        render(): JSX.Element;
     }
-    export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
-        private _workbenchCanvas;
+}
+declare module "@babylonjs/gui-editor/components/sceneExplorer/extensionsComponent" {
+    import * as React from "react";
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
+    interface IExtensionsComponentProps {
+        target: any;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+    }
+    export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, {
+        popupVisible: boolean;
+    }> {
+        private _popup;
+        private extensionRef;
+        constructor(props: IExtensionsComponentProps);
+        showPopup(): void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element | null;
+    }
+}
+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 { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface IControlTreeItemComponentProps {
+        control: Control;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+        onClick: () => void;
+        globalState: GlobalState;
+        isHovered: boolean;
+        dragOverHover: boolean;
+        dragOverLocation: DragOverLocation;
+    }
+    export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
+        isActive: boolean;
+        isVisible: boolean;
+    }> {
+        constructor(props: IControlTreeItemComponentProps);
+        highlight(): void;
+        switchVisibility(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectableComponent" {
+    import { Nullable } from "@babylonjs/core/types";
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
+    import * as React from "react";
+    import { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
+    export interface ITreeItemSelectableComponentProps {
+        entity: any;
+        selectedEntity?: any;
+        mustExpand?: boolean;
+        offset: number;
+        globalState: GlobalState;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+        filter: Nullable<string>;
+    }
+    export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, {
+        isSelected: boolean;
+        isHovered: boolean;
+        dragOverLocation: DragOverLocation;
+    }> {
+        dragOverHover: boolean;
+        private _onSelectionChangedObservable;
+        private _onDraggingEndObservable;
+        private _onDraggingStartObservable;
+        constructor(props: ITreeItemSelectableComponentProps);
+        switchExpandedState(): void;
+        shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
+            isSelected: boolean;
+        }): boolean;
+        scrollIntoView(): void;
+        componentWillUnmount(): void;
+        onSelect(): void;
+        renderChildren(isExpanded: boolean): (JSX.Element | null)[] | null;
+        render(): JSX.Element | null;
+        dragOver(event: React.DragEvent<HTMLDivElement>): void;
+        drop(): void;
+    }
+}
+declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemComponent" {
+    import * as React from "react";
+    import { Nullable } from "@babylonjs/core/types";
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    export interface ITreeItemComponentProps {
+        items?: Nullable<any[]>;
+        label: string;
+        offset: number;
+        filter: Nullable<string>;
+        forceSubitems?: boolean;
+        globalState: GlobalState;
+        entity?: any;
+        selectedEntity: any;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+        contextMenuItems?: {
+            label: string;
+            action: () => void;
+        }[];
+    }
+    export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
+        isExpanded: boolean;
+        mustExpand: boolean;
+    }> {
+        static _ContextMenuUniqueIdGenerator: number;
+        constructor(props: ITreeItemComponentProps);
+        switchExpandedState(): void;
+        shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
+            isExpanded: boolean;
+        }): boolean;
+        expandAll(expand: boolean): void;
+        renderContextMenu(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/sceneExplorer/sceneExplorerComponent" {
+    import * as React from "react";
+    import { Nullable } from "@babylonjs/core/types";
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
+    import { Scene } from "@babylonjs/core/scene";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface ISceneExplorerFilterComponentProps {
+        onFilter: (filter: string) => void;
+    }
+    export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
+        constructor(props: ISceneExplorerFilterComponentProps);
+        render(): JSX.Element;
+    }
+    interface ISceneExplorerComponentProps {
+        scene?: Scene;
+        noCommands?: boolean;
+        noHeader?: boolean;
+        noExpand?: boolean;
+        noClose?: boolean;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+        globalState: GlobalState;
+        popupMode?: boolean;
+        onPopup?: () => void;
+        onClose?: () => void;
+    }
+    export class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
+        filter: Nullable<string>;
+        selectedEntity: any;
+        scene: Nullable<Scene>;
+    }> {
+        private _onSelectionChangeObserver;
+        private _onParrentingChangeObserver;
+        private _onNewSceneObserver;
+        private _onPropertyChangedObservable;
+        constructor(props: ISceneExplorerComponentProps);
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        filterContent(filter: string): void;
+        findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
+            previousOne?: any;
+            found?: boolean;
+        }): boolean;
+        processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
+        renderContent(): JSX.Element | null;
+        onClose(): void;
+        onPopup(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/commandDropdownComponent" {
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface ICommandDropdownComponentProps {
+        globalState: GlobalState;
+        icon?: string;
+        tooltip: string;
+        defaultValue?: string;
+        items: {
+            label: string;
+            icon?: string;
+            fileButton?: boolean;
+            onClick?: () => void;
+            onCheck?: (value: boolean) => void;
+            storeKey?: string;
+            isActive?: boolean;
+            defaultValue?: boolean | string;
+            subItems?: string[];
+        }[];
+        toRight?: boolean;
+    }
+    export class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {
+        isExpanded: boolean;
+        activeState: string;
+    }> {
+        constructor(props: ICommandDropdownComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/commandBarComponent" {
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface ICommandBarComponentProps {
+        globalState: GlobalState;
+    }
+    export class CommandBarComponent extends React.Component<ICommandBarComponentProps> {
+        private _panning;
+        private _zooming;
+        private _selecting;
+        private _outlines;
+        constructor(props: ICommandBarComponentProps);
+        private updateNodeOutline;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/workbenchEditor" {
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    interface IGraphEditorState {
+        showPreviewPopUp: boolean;
+    }
+    export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
         private _startX;
         private _moveInProgress;
         private _leftWidth;
         private _rightWidth;
-        private _onWidgetKeyUpPointer;
+        private _toolBarIconSize;
         private _popUpWindow;
+        private _draggedItem;
         componentDidMount(): void;
-        componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
-        pasteSelection(copiedNodes: GUINode[], currentX: number, currentY: number, selectNew?: boolean): GUINode[];
-        zoomToFit(): void;
         showWaitScreen(): void;
         hideWaitScreen(): void;
-        reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
         onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         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;
         copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
-        fixPopUpStyles: (document: Document) => void;
         render(): JSX.Element;
+        _items: {
+            label: string;
+            icon?: string;
+            fileButton?: boolean;
+            onClick?: () => void;
+            onCheck?: (value: boolean) => void;
+            storeKey?: string;
+            isActive?: boolean;
+            defaultValue?: boolean | string;
+            subItems?: string[];
+        }[];
+        createItems(): void;
+        onCreate(value: string): void;
+        createToolbar(): JSX.Element;
     }
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/popup" {
@@ -1024,15 +2084,22 @@ 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>;
+        } | undefined;
         hostElement?: HTMLElement;
         customSave?: {
             label: string;
-            action: (data: string) => Promise<void>;
+            action: (data: string) => Promise<string>;
         };
+        currentSnippetToken?: string;
         customLoadObservable?: Observable<any>;
     }
     /**
@@ -1044,12 +2111,94 @@ 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" {
     export * from "@babylonjs/gui-editor/guiEditor";
 }
+declare module "@babylonjs/gui-editor/nodeLocationInfo" {
+    export interface INodeLocationInfo {
+        blockId: number;
+        x: number;
+        y: number;
+    }
+    export interface IFrameData {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        color: number[];
+        name: string;
+        isCollapsed: boolean;
+        blocks: number[];
+        comments: string;
+    }
+    export interface IEditorData {
+        locations: INodeLocationInfo[];
+        x: number;
+        y: number;
+        zoom: number;
+        frames?: IFrameData[];
+        map?: {
+            [key: number]: number;
+        };
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/iSelectedLineContainer" {
+    export interface ISelectedLineContainer {
+        selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/lineContainerComponent" {
+    import * as React from "react";
+    import { ISelectedLineContainer } from "@babylonjs/gui-editor/sharedUiComponents/lines/iSelectedLineContainer";
+    interface ILineContainerComponentProps {
+        selection?: ISelectedLineContainer;
+        title: string;
+        children: any[] | any;
+        closed?: boolean;
+    }
+    export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+        isExpanded: boolean;
+        isHighlighted: boolean;
+    }> {
+        constructor(props: ILineContainerComponentProps);
+        switchExpandedState(): void;
+        renderHeader(): JSX.Element;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/draggableLineComponent" {
+    import * as React from "react";
+    export interface IButtonLineComponentProps {
+        data: string;
+        tooltip: string;
+    }
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/components/guiList/guiListComponent" {
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    interface IGuiListComponentProps {
+        globalState: GlobalState;
+    }
+    export class GuiListComponent extends React.Component<IGuiListComponentProps, {
+        filter: string;
+    }> {
+        private _onResetRequiredObserver;
+        private static _Tooltips;
+        constructor(props: IGuiListComponentProps);
+        componentWillUnmount(): void;
+        filterContent(filter: string): void;
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/legacy/legacy" {
     export * from "@babylonjs/gui-editor/index";
 }
@@ -1212,6 +2361,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/booleanLineCompon
     export interface IBooleanLineComponentProps {
         label: string;
         value: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
         constructor(props: IBooleanLineComponentProps);
@@ -1230,6 +2381,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color4LineCompone
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         onChange?: () => void;
         isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
         isExpanded: boolean;
@@ -1258,6 +2411,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileMultipleButto
         label: string;
         onClick: (event: any) => void;
         accept: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
         private static _IDGenerator;
@@ -1287,6 +2442,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/hexLineComponent"
         digits?: number;
         useEuler?: boolean;
         min?: number;
+        icon?: string;
+        iconLabel?: string;
     }
     export class HexLineComponent extends React.Component<IHexLineComponentProps, {
         value: string;
@@ -1308,7 +2465,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;
@@ -1371,6 +2528,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/radioLineComponen
         label: string;
         isSelected: () => boolean;
         onSelect: () => void;
+        icon?: string;
+        iconLabel?: string;
     }
     export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
         isSelected: boolean;
@@ -1391,6 +2550,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/valueLineComponen
         color?: string;
         fractionDigits?: number;
         units?: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
         constructor(props: IValueLineComponentProps);
@@ -1409,6 +2570,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/vector2LineCompon
         step?: number;
         onChange?: (newvalue: Vector2) => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
         isExpanded: boolean;
@@ -1444,6 +2607,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/vector3LineCompon
         useEuler?: boolean;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         noSlider?: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
         isExpanded: boolean;
@@ -1481,6 +2646,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/vector4LineCompon
         onChange?: (newvalue: Vector4) => void;
         useEuler?: boolean;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
         isExpanded: boolean;
@@ -1506,6 +2673,266 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/vector4LineCompon
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/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> {
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        renderGridInformation(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/checkboxPropertyGridComponent" {
+    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 { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
+    interface ICheckboxPropertyGridComponentProps {
+        checkbox: Checkbox;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
+        constructor(props: ICheckboxPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/colorPickerPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface IColorPickerPropertyGridComponentProps {
+        colorPicker: ColorPicker;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
+        constructor(props: IColorPickerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/controlPropertyGridComponent" {
+    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 IControlPropertyGridComponentProps {
+        control: Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
+        constructor(props: IControlPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/ellipsePropertyGridComponent" {
+    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 { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
+    interface IEllipsePropertyGridComponentProps {
+        ellipse: Ellipse;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
+        constructor(props: IEllipsePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/gridPropertyGridComponent" {
+    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 { Grid } from "@babylonjs/gui/2D/controls/grid";
+    interface IGridPropertyGridComponentProps {
+        grid: Grid;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
+        constructor(props: IGridPropertyGridComponentProps);
+        renderRows(): JSX.Element[];
+        renderColumns(): JSX.Element[];
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/imageBasedSliderPropertyGridComponent" {
+    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 { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
+    interface IImageBasedSliderPropertyGridComponentProps {
+        imageBasedSlider: ImageBasedSlider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
+        constructor(props: IImageBasedSliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/imagePropertyGridComponent" {
+    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 { Image } from "@babylonjs/gui/2D/controls/image";
+    interface IImagePropertyGridComponentProps {
+        image: Image;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
+        constructor(props: IImagePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/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/tabs/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/sharedUiComponents/tabs/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/tabs/propertyGrids/gui/rectanglePropertyGridComponent" {
+    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 IRectanglePropertyGridComponentProps {
+        rectangle: Rectangle;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
+        constructor(props: IRectanglePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/scrollViewerPropertyGridComponent" {
+    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 { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
+    interface IScrollViewerPropertyGridComponentProps {
+        scrollViewer: ScrollViewer;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
+        constructor(props: IScrollViewerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/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/sharedUiComponents/tabs/propertyGrids/gui/stackPanelPropertyGridComponent" {
+    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 { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
+    interface IStackPanelPropertyGridComponentProps {
+        stackPanel: StackPanel;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
+        constructor(props: IStackPanelPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/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" {
     export * from "@babylonjs/gui-editor/legacy/legacy";
 }