@babylonjs/gui-editor 5.0.0-alpha.61 → 5.0.0-alpha.65

package/babylon.guiEditor.module.d.ts

@@ -31,6 +31,641 @@ declare module "@babylonjs/gui-editor/tools" {
         static reorderGrid(grid: Grid, index: number, control: Control, cell: Vector2): void;
     }
 }
+declare module "@babylonjs/gui-editor/diagram/GUIEditorNodeMaterial" {
+    export const GUIEditorNodeMaterial: {
+        tags: null;
+        ignoreAlpha: boolean;
+        maxSimultaneousLights: number;
+        mode: number;
+        id: string;
+        name: string;
+        checkReadyOnEveryCall: boolean;
+        checkReadyOnlyOnce: boolean;
+        state: string;
+        alpha: number;
+        backFaceCulling: boolean;
+        cullBackFaces: boolean;
+        sideOrientation: number;
+        alphaMode: number;
+        _needDepthPrePass: boolean;
+        disableDepthWrite: boolean;
+        disableColorWrite: boolean;
+        forceDepthWrite: boolean;
+        depthFunction: number;
+        separateCullingPass: boolean;
+        fogEnabled: boolean;
+        pointSize: number;
+        zOffset: number;
+        zOffsetUnits: number;
+        pointsCloud: boolean;
+        fillMode: number;
+        editorData: {
+            locations: {
+                blockId: number;
+                x: number;
+                y: number;
+            }[];
+            frames: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                color: number[];
+                name: string;
+                isCollapsed: boolean;
+                blocks: number[];
+            }[];
+            x: number;
+            y: number;
+            zoom: number;
+        };
+        customType: string;
+        outputNodes: number[];
+        blocks: ({
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            }[];
+            outputs: {
+                name: string;
+            }[];
+            complementZ: number;
+            complementW: number;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            systemValue: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: never[];
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                displayName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            rSwizzle: string;
+            gSwizzle: string;
+            bSwizzle: string;
+            aSwizzle: string;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            }[];
+            outputs: {
+                name: string;
+            }[];
+            operation: number;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            } | {
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            })[];
+            outputs: {
+                name: string;
+            }[];
+            xSwizzle: string;
+            ySwizzle: string;
+            zSwizzle: string;
+            wSwizzle: string;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+            } | {
+                name: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            })[];
+            outputs: {
+                name: string;
+            }[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            convertToGammaSpace?: undefined;
+            convertToLinearSpace?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            valueType: string;
+            value: number[];
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: never[];
+            outputs: {
+                name: string;
+            }[];
+            type: number;
+            mode: number;
+            animationType: number;
+            min: number;
+            max: number;
+            isBoolean: boolean;
+            matrixMode: number;
+            isConstant: boolean;
+            groupInInspector: string;
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            valueType: string;
+            value: number;
+            complementZ?: undefined;
+            complementW?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            fragmentOnly?: undefined;
+            disableLevelMultiplication?: undefined;
+        } | {
+            customType: string;
+            id: number;
+            name: string;
+            comments: string;
+            visibleInInspector: boolean;
+            visibleOnFrame: boolean;
+            target: number;
+            inputs: ({
+                name: string;
+                displayName: string;
+                inputName: string;
+                targetBlockId: number;
+                targetConnectionName: string;
+                isExposedOnFrame: boolean;
+                exposedPortPosition: number;
+            } | {
+                name: string;
+                displayName: string;
+                inputName?: undefined;
+                targetBlockId?: undefined;
+                targetConnectionName?: undefined;
+                isExposedOnFrame?: undefined;
+                exposedPortPosition?: undefined;
+            })[];
+            outputs: {
+                name: string;
+                displayName: string;
+            }[];
+            convertToGammaSpace: boolean;
+            convertToLinearSpace: boolean;
+            fragmentOnly: boolean;
+            disableLevelMultiplication: boolean;
+            complementZ?: undefined;
+            complementW?: undefined;
+            type?: undefined;
+            mode?: undefined;
+            animationType?: undefined;
+            min?: undefined;
+            max?: undefined;
+            isBoolean?: undefined;
+            matrixMode?: undefined;
+            isConstant?: undefined;
+            groupInInspector?: undefined;
+            systemValue?: undefined;
+            rSwizzle?: undefined;
+            gSwizzle?: undefined;
+            bSwizzle?: undefined;
+            aSwizzle?: undefined;
+            operation?: undefined;
+            xSwizzle?: undefined;
+            ySwizzle?: undefined;
+            zSwizzle?: undefined;
+            wSwizzle?: undefined;
+            valueType?: undefined;
+            value?: undefined;
+        })[];
+    };
+}
 declare module "@babylonjs/gui-editor/diagram/workbench" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -39,6 +674,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
     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";
@@ -46,8 +682,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
     export interface IWorkbenchComponentProps {
         globalState: GlobalState;
     }
-    export type FramePortData = {};
-    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
     export enum ConstraintDirection {
         NONE = 0,
         X = 2,
@@ -59,7 +693,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _setConstraintDirection;
         private _mouseStartPointX;
         private _mouseStartPointY;
-        private _textureMesh;
+        _textureMesh: Mesh;
         _scene: Scene;
         private _selectedGuiNodes;
         private _ctrlKeyIsPressed;
@@ -67,7 +701,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _constraintDirection;
         private _forcePanning;
         private _forceZooming;
-        private _forceMoving;
         private _forceSelecting;
         private _outlines;
         private _panning;
@@ -76,33 +709,42 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _isOverGUINode;
         private _clipboard;
         private _selectAll;
-        private _camera;
+        _camera: ArcRotateCamera;
         private _cameraRadias;
         private _cameraMaxRadiasFactor;
         private _pasted;
         private _engine;
+        private _liveRenderObserver;
+        private _guiRenderObserver;
+        private _mainSelection;
+        private _selectionDepth;
+        private _doubleClick;
+        private _lockMainSelection;
         get globalState(): GlobalState;
         get nodes(): Control[];
         get selectedGuiNodes(): Control[];
+        private _getParentWithDepth;
+        private _getMaxParent;
         constructor(props: IWorkbenchComponentProps);
+        determineMouseSelection(selection: Nullable<Control>): void;
         keyEvent: (evt: KeyboardEvent) => void;
         private updateHitTest;
         private updateHitTestForSelection;
         private setCameraRadius;
-        private copyToClipboard;
-        private pasteFromClipboard;
+        copyToClipboard(): void;
+        pasteFromClipboard(): void;
         CopyGUIControl(original: Control): void;
         private selectAllGUI;
         blurEvent: () => void;
         componentWillUnmount(): void;
         loadFromJson(serializationObject: any): void;
-        loadFromSnippet(snippedId: string): Promise<void>;
+        loadFromSnippet(snippetId: string): Promise<void>;
         loadToEditor(): void;
         changeSelectionHighlight(value: boolean): void;
         resizeGuiTexture(newvalue: Vector2): void;
         findNodeFromGuiElement(guiControl: Control): Control;
         appendBlock(guiElement: Control): Control;
-        isContainer(guiControl: Control): boolean;
+        private _isMainSelectionParent;
         createNewGuiNode(guiControl: Control): Control;
         private parent;
         private _convertToPixels;
@@ -112,15 +754,16 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         isSelected(value: boolean, guiNode: Control): void;
         clicked: boolean;
         _onMove(guiControl: Control, evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
-        componentDidMount(): void;
+        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;
         createGUICanvas(): void;
+        synchronizeLiveGUI(): void;
         addControls(scene: Scene, camera: ArcRotateCamera): void;
-        getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane): Vector3;
+        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;
@@ -148,6 +791,82 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
         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";
@@ -160,6 +879,7 @@ declare module "@babylonjs/gui-editor/globalState" {
     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,
@@ -168,6 +888,7 @@ declare module "@babylonjs/gui-editor/globalState" {
     }
     export class GlobalState {
         [x: string]: any;
+        liveGuiTexture: Nullable<AdvancedDynamicTexture>;
         guiTexture: AdvancedDynamicTexture;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
@@ -183,11 +904,13 @@ declare module "@babylonjs/gui-editor/globalState" {
         onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
         onNewSceneObservable: Observable<Nullable<Scene>>;
         onGuiNodeRemovalObservable: Observable<Control>;
+        onPopupClosedObservable: Observable<void>;
         backgroundColor: Color4;
         blockKeyboardEvents: boolean;
         controlCamera: boolean;
         selectionLock: boolean;
         workbench: WorkbenchComponent;
+        guiGizmo: GuiGizmoComponent;
         onPropertyChangedObservable: Observable<PropertyChangedEvent>;
         onZoomObservable: Observable<void>;
         onFitToWindowObservable: Observable<void>;
@@ -205,6 +928,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         onDraggingEndObservable: Observable<void>;
         onDraggingStartObservable: Observable<void>;
         onWindowResizeObservable: Observable<void>;
+        onGizmoUpdateRequireObservable: Observable<void>;
         draggedControl: Nullable<Control>;
         draggedControlDirection: DragOverLocation;
         isSaving: boolean;
@@ -257,7 +981,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;
@@ -267,6 +991,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
         disabled?: boolean;
         icon?: string;
         iconLabel?: string;
+        faIcons?: {
+        };
     }
     export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
         isSelected: boolean;
@@ -340,6 +1066,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         onEnter?: (newValue: number) => void;
         icon?: string;
         iconLabel?: string;
+        defaultValue?: number;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -412,6 +1139,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         iconLabel?: string;
         noUnderline?: boolean;
         numbersOnly?: boolean;
+        delayInput?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -436,6 +1164,8 @@ declare module "@babylonjs/gui-editor/components/commandButtonComponent" {
         iconLabel?: string;
         isActive: boolean;
         onClick: () => void;
+        altStyle?: boolean;
+        disabled?: boolean;
     }
     export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> {
         constructor(props: ICommandButtonComponentProps);
@@ -546,7 +1276,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/colorPicker/colorPicker
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
         linearHint?: boolean;
@@ -575,7 +1305,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color3LineCompone
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { Color3, Color4 } 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;
@@ -629,10 +1359,10 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
         private _width;
         private _height;
-        private _responsive;
         constructor(props: ICommonControlPropertyGridComponentProps);
         private _updateAlignment;
         private _checkAndUpdateValues;
+        private _markChildrenAsDirty;
         render(): JSX.Element;
     }
 }
@@ -642,8 +1372,9 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
     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;
+        slider: Slider | ImageBasedSlider;
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -652,6 +1383,22 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
         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";
@@ -853,6 +1600,8 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/g
         private _columnDefinitions;
         private _editedRow;
         private _editedColumn;
+        private _rowChild;
+        private _columnChild;
         renderRows(): JSX.Element[];
         setRowValues(): void;
         setColumnValues(): void;
@@ -861,6 +1610,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/g
         resizeColumn(): void;
         checkValue(value: string, percent: boolean): string;
         checkPercentage(value: string): boolean;
+        resetValues(): void;
         render(): JSX.Element;
     }
 }
@@ -999,7 +1749,7 @@ declare module "@babylonjs/gui-editor/guiNodeTools" {
     import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
     export class GUINodeTools {
         static ImageControlDefaultUrl: string;
-        static CreateControlFromString(data: string): Grid | Rectangle | Line | TextBlock | Image | Slider | RadioButton | InputText | ColorPicker | ImageBasedSlider | StackPanel | Ellipse | Checkbox | DisplayGrid;
+        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" {
@@ -1092,7 +1842,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/extensionsCompone
 declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/controlTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { Control } from "@babylonjs/gui/2D/controls/control";
-    import * as React from 'react';
+    import * as React from "react";
     import { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
     interface IControlTreeItemComponentProps {
         control: Control;
@@ -1273,7 +2023,6 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
         private _panning;
         private _zooming;
         private _selecting;
-        private _moving;
         private _outlines;
         constructor(props: ICommandBarComponentProps);
         private updateNodeOutline;
@@ -1295,10 +2044,9 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         private _leftWidth;
         private _rightWidth;
         private _toolBarIconSize;
-        private _onWidgetKeyUpPointer;
         private _popUpWindow;
+        private _draggedItem;
         componentDidMount(): void;
-        componentWillUnmount(): void;
         constructor(props: IGraphEditorProps);
         showWaitScreen(): void;
         hideWaitScreen(): void;
@@ -1335,10 +2083,12 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/popup" {
 }
 declare module "@babylonjs/gui-editor/guiEditor" {
     import { Observable } from "@babylonjs/core/Misc/observable";
+    import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
     /**
      * Interface used to specify creation options for the gui editor
      */
     export interface IGUIEditorOptions {
+        liveGuiTexture?: AdvancedDynamicTexture;
         customLoad: {
             label: string;
             action: (data: string) => Promise<string>;
@@ -1360,7 +2110,7 @@ declare module "@babylonjs/gui-editor/guiEditor" {
          * Show the gui editor
          * @param options defines the options to use to configure the gui editor
          */
-        static Show(options: IGUIEditorOptions): void;
+        static Show(options: IGUIEditorOptions): Promise<void>;
     }
 }
 declare module "@babylonjs/gui-editor/index" {
@@ -1714,7 +2464,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;