@babylonjs/gui-editor 5.0.0-beta.4 → 5.0.0-beta.8

package/babylon.guiEditor.module.d.ts

@@ -31,640 +31,72 @@ 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/sharedUiComponents/propertyChangedEvent" {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+        allowNullValue?: boolean;
+    }
+}
+declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Matrix2D } from "@babylonjs/gui/2D/math2D";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom";
+    export class Rect {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        constructor(left: number, top: number, right: number, bottom: number);
+        get center(): Vector2;
+        get width(): number;
+        get height(): number;
+    }
+    export class CoordinateHelper {
+        private static _matrixCache;
+        static globalState: GlobalState;
+        /**
+         * 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
+         */
+        static getScale(node: Control, relative?: boolean): Vector2;
+        static getRotation(node: Control, relative?: boolean): number;
+        /**
+         * 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
+         */
+        static getNodeMatrix(node: Control, storedValues?: Rect): Matrix2D;
+        /**
+         * 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
+         */
+        static nodeToRTTWorldMatrix(node: Control, storedValues?: Rect): Matrix2D;
+        static nodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
+        static rttToLocalNodeSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
+        static rttToCanvasSpace(x: number, y: number): Vector2;
+        static mousePointerToRTTSpace(node: Control, x?: number, y?: number): Vector2;
+        private static resetMatrixArray;
+        static computeLocalBounds(node: Control): Rect;
+        /**
+         * converts a node's dimensions to percentage, properties can be specified as a list, or can convert all
+        */
+        static convertToPercentage(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void;
+        static round(value: number): number;
+        static convertToPixels(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void;
+    }
 }
 declare module "@babylonjs/gui-editor/diagram/workbench" {
     import * as React from "react";
@@ -673,12 +105,9 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
     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";
+    import { IWheelEvent } from "@babylonjs/core/Events/deviceInputEvents";
+    import { Container } from "@babylonjs/gui/2D/controls/container";
+    import { ISize } from "@babylonjs/core/Maths/math";
     export interface IWorkbenchComponentProps {
         globalState: GlobalState;
     }
@@ -688,12 +117,10 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         Y = 3
     }
     export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
-        artBoardBackground: Rectangle;
         private _rootContainer;
         private _setConstraintDirection;
         private _mouseStartPointX;
         private _mouseStartPointY;
-        _textureMesh: Mesh;
         _scene: Scene;
         private _selectedGuiNodes;
         private _ctrlKeyIsPressed;
@@ -709,9 +136,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _isOverGUINode;
         private _clipboard;
         private _selectAll;
-        _camera: ArcRotateCamera;
-        private _cameraRadias;
-        private _cameraMaxRadiasFactor;
         private _pasted;
         private _engine;
         private _liveRenderObserver;
@@ -721,6 +145,26 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _doubleClick;
         private _lockMainSelection;
         _liveGuiTextureRerender: boolean;
+        private _anyControlClicked;
+        private _visibleRegionContainer;
+        get visibleRegionContainer(): Container;
+        private _panAndZoomContainer;
+        get panAndZoomContainer(): Container;
+        private _trueRootContainer;
+        set trueRootContainer(value: Container);
+        get trueRootContainer(): Container;
+        private _nextLiveGuiRender;
+        private _liveGuiRerenderDelay;
+        private _defaultGUISize;
+        private _initialPanningOffset;
+        private _panningOffset;
+        private _zoomFactor;
+        private _zoomModeIncrement;
+        private _guiSize;
+        get guiSize(): ISize;
+        set guiSize(value: ISize);
+        applyEditorTransformation(): void;
+        removeEditorTransformation(): void;
         get globalState(): GlobalState;
         get nodes(): Control[];
         get selectedGuiNodes(): Control[];
@@ -731,7 +175,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         keyEvent: (evt: KeyboardEvent) => void;
         private updateHitTest;
         private updateHitTestForSelection;
-        private setCameraRadius;
         copyToClipboard(): void;
         pasteFromClipboard(): void;
         CopyGUIControl(original: Control): void;
@@ -742,7 +185,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         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;
@@ -755,32 +197,22 @@ 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;
-        convertToPercentage(guiControl: Control, includeScale: boolean): void;
         onMove(evt: React.PointerEvent): void;
-        getGroundPosition(): Nullable<Vector3>;
+        private _screenToTexturePosition;
+        private getScaledPointerPosition;
         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, 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;
+        addControls(scene: Scene): void;
+        panning(): void;
+        zoomWheel(event: IWheelEvent): number;
+        zooming(delta: number): void;
         zeroIfClose(vec: Vector3): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent" {
-    export class PropertyChangedEvent {
-        object: any;
-        property: string;
-        value: any;
-        initialValue: any;
-        allowNullValue?: boolean;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
     /**
      * Class used to provide lock mechanism
@@ -793,10 +225,10 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
     }
 }
 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";
+    import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
     export interface IGuiGizmoProps {
         globalState: GlobalState;
     }
@@ -814,16 +246,6 @@ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
         rotation: number;
         isPivot: boolean;
     }
-    class Rect {
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
-        constructor(left: number, top: number, right: number, bottom: number);
-        get center(): Vector2;
-        get width(): number;
-        get height(): number;
-    }
     interface IGuiGizmoState {
         canvasBounds: Rect;
         scalePoints: IScalePoint[];
@@ -831,12 +253,8 @@ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
         isRotating: boolean;
     }
     export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
-        private _matrixCache;
         private _responsive;
-        private _initH;
-        private _initW;
-        private _initX;
-        private _initY;
+        private _storedValues;
         private _localBounds;
         private _rotation;
         constructor(props: IGuiGizmoProps);
@@ -846,41 +264,11 @@ declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
          * @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;
         onUp(evt?: React.PointerEvent): void;
         private _onUp;
         onMove(evt: React.PointerEvent): void;
         private _onMove;
         private _rotate;
-        private _computeLocalBounds;
         private _dragLocalBounds;
         private _updateNodeFromLocalBounds;
         private _beginDraggingScalePoint;
@@ -892,15 +280,15 @@ 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 { Color3 } from "@babylonjs/core/Maths/math.color";
     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";
+    import { ISize } from "@babylonjs/core/Maths/math";
     export enum DragOverLocation {
         ABOVE = 0,
         BELOW = 1,
@@ -915,7 +303,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         hostDocument: HTMLDocument;
         hostWindow: Window;
         onSelectionChangedObservable: Observable<Nullable<Control>>;
-        onResizeObservable: Observable<Vector2>;
+        onResizeObservable: Observable<ISize>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
         onUpdateRequiredObservable: Observable<void>;
@@ -926,7 +314,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         onNewSceneObservable: Observable<Nullable<Scene>>;
         onGuiNodeRemovalObservable: Observable<Control>;
         onPopupClosedObservable: Observable<void>;
-        backgroundColor: Color4;
+        _backgroundColor: Color3;
         blockKeyboardEvents: boolean;
         controlCamera: boolean;
         selectionLock: boolean;
@@ -950,6 +338,8 @@ declare module "@babylonjs/gui-editor/globalState" {
         onDraggingStartObservable: Observable<void>;
         onWindowResizeObservable: Observable<void>;
         onGizmoUpdateRequireObservable: Observable<void>;
+        onArtBoardUpdateRequiredObservable: Observable<void>;
+        onBackgroundColorChangeObservable: Observable<void>;
         draggedControl: Nullable<Control>;
         draggedControlDirection: DragOverLocation;
         isSaving: boolean;
@@ -964,6 +354,8 @@ declare module "@babylonjs/gui-editor/globalState" {
             action: (data: string) => Promise<string>;
         };
         constructor();
+        get backgroundColor(): Color3;
+        set backgroundColor(value: Color3);
     }
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
@@ -997,6 +389,20 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineCom
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/targetsProxy" {
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    export const conflictingValuesPlaceholder = "\u2014";
+    /**
+     *
+     * @param propertyName the property that the input changes
+     * @param targets a list of selected targets
+     * @param defaultValue the value that should be returned when two targets have conflicting values
+     * @param setter an optional setter function to override the default setter behavior
+     * @returns a proxy object that can be passed as a target into the input
+     */
+    export function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
+}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -1018,6 +424,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
     export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
         isSelected: boolean;
         isDisabled?: boolean;
+        isConflict: boolean;
     }> {
         private static _UniqueIdSeed;
         private _uniqueId;
@@ -1026,6 +433,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
         shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
             isSelected: boolean;
             isDisabled: boolean;
+            isConflict: boolean;
         }): boolean;
         onChange(): void;
         render(): JSX.Element;
@@ -1088,6 +496,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         icon?: string;
         iconLabel?: string;
         defaultValue?: number;
+        unit?: string;
+        onUnitClicked?: () => void;
+        unitLocked?: boolean;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -1096,6 +507,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         private _store;
         constructor(props: IFloatLineComponentProps);
         componentWillUnmount(): void;
+        getValueString(value: any): string;
         shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
             value: string;
         }): boolean;
@@ -1161,6 +573,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         noUnderline?: boolean;
         numbersOnly?: boolean;
         delayInput?: boolean;
+        unit?: string;
+        onUnitClicked?: (unit: string) => void;
+        unitLocked?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -1317,52 +732,59 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorPickerCompon
         constructor(props: IColorPickerComponentProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color3LineComponent" {
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
+    import { Color4 } from "@babylonjs/core/Maths/math.color";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    export interface IColor3LineComponentProps {
+    export interface IColorLineComponentProps {
         label: string;
-        target: any;
+        target?: any;
         propertyName: string;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        onChange?: () => void;
         isLinear?: boolean;
         icon?: string;
-        lockObject?: LockObject;
         iconLabel?: string;
-        onValueChange?: (value: string) => void;
+        lockObject?: LockObject;
+        disableAlpha?: boolean;
     }
-    export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
+    interface IColorLineComponentState {
         isExpanded: boolean;
-        color: Color3 | Color4;
-        colorText: string;
-    }> {
-        private _localChange;
-        constructor(props: IColor3LineComponentProps);
-        private convertToColor3;
-        shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3 | Color4;
-            colorText: string;
-        }): boolean;
-        setPropertyValue(newColor: Color3 | Color4, newColorText: string): void;
-        onChange(newValue: string): void;
+        color: Color4;
+        colorString: string;
+    }
+    export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+        constructor(props: IColorLineComponentProps);
+        shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): Color4;
+        getValueAsString(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
+        setColorFromString(colorString: string): void;
+        setColor(color: Color4): void;
+        updateColor(newColor: Color4): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
+        updateStateA(value: number): void;
         copyToClipboard(): void;
-        convert(colorString: string): void;
-        private _colorStringSaved;
-        private _colorPickerOpen;
-        private _colorString;
+        get colorString(): string;
+        set colorString(_: string);
+        private convertToColor;
+        private toColor3;
         render(): JSX.Element;
     }
 }
@@ -1373,13 +795,11 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ICommonControlPropertyGridComponentProps {
-        control: Control;
+        controls: Control[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
-        private _width;
-        private _height;
         constructor(props: ICommonControlPropertyGridComponentProps);
         private _updateAlignment;
         private _checkAndUpdateValues;
@@ -1395,7 +815,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
     import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
     import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
     interface ISliderPropertyGridComponentProps {
-        slider: Slider | ImageBasedSlider;
+        sliders: (Slider | ImageBasedSlider)[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1411,7 +831,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
     interface ISliderGenericPropertyGridComponentProps {
-        slider: Slider;
+        sliders: Slider[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1427,7 +847,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/l
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Line } from "@babylonjs/gui/2D/controls/line";
     interface ILinePropertyGridComponentProps {
-        line: Line;
+        lines: Line[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1444,7 +864,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/r
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
     interface IRadioButtonPropertyGridComponentProps {
-        radioButton: RadioButton;
+        radioButtons: RadioButton[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1494,7 +914,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/t
     import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ITextBlockPropertyGridComponentProps {
-        textBlock: TextBlock;
+        textBlocks: TextBlock[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1510,7 +930,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
     import { InputText } from "@babylonjs/gui/2D/controls/inputText";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface IInputTextPropertyGridComponentProps {
-        inputText: InputText;
+        inputTexts: InputText[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1519,6 +939,26 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color3LineComponent" {
+    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";
+    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> {
+        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";
@@ -1526,7 +966,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface IColorPickerPropertyGridComponentProps {
-        colorPicker: ColorPicker;
+        colorPickers: ColorPicker[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1542,12 +982,15 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Image } from "@babylonjs/gui/2D/controls/image";
     interface IImagePropertyGridComponentProps {
-        image: Image;
+        images: Image[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
         constructor(props: IImagePropertyGridComponentProps);
+        toggleAnimations(on: boolean): void;
+        getMaxCells(): number;
+        updateCellSize(): void;
         render(): JSX.Element;
     }
 }
@@ -1558,7 +1001,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
     interface IImageBasedSliderPropertyGridComponentProps {
-        imageBasedSlider: ImageBasedSlider;
+        imageBasedSliders: ImageBasedSlider[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1574,7 +1017,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/r
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
     interface IRectanglePropertyGridComponentProps {
-        rectangle: Rectangle;
+        rectangles: Rectangle[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1590,7 +1033,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
     interface IStackPanelPropertyGridComponentProps {
-        stackPanel: StackPanel;
+        stackPanels: StackPanel[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1606,7 +1049,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/g
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Grid } from "@babylonjs/gui/2D/controls/grid";
     interface IGridPropertyGridComponentProps {
-        grid: Grid;
+        grids: Grid[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1642,7 +1085,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/s
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
     interface IScrollViewerPropertyGridComponentProps {
-        scrollViewer: ScrollViewer;
+        scrollViewers: ScrollViewer[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1658,7 +1101,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/e
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
     interface IEllipsePropertyGridComponentProps {
-        ellipse: Ellipse;
+        ellipses: Ellipse[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1674,7 +1117,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
     interface ICheckboxPropertyGridComponentProps {
-        checkbox: Checkbox;
+        checkboxes: Checkbox[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1690,7 +1133,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface IControlPropertyGridComponentProps {
-        control: Control;
+        controls: Control[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1727,7 +1170,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/d
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid";
     interface IDisplayGridPropertyGridComponentProps {
-        displayGrid: DisplayGrid;
+        displayGrids: DisplayGrid[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
@@ -1743,7 +1186,7 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/b
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
     interface IButtonPropertyGridComponentProps {
-        rectangle: Rectangle;
+        rectangles: Rectangle[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         onAddComponent: (newComponent: string) => void;
@@ -1799,8 +1242,13 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponen
         saveToSnippetServerHelper: (content: string, adt: AdvancedDynamicTexture) => Promise<string>;
         saveToSnippetServer: () => Promise<void>;
         loadFromSnippet(): void;
-        renderProperties(): JSX.Element | null;
-        renderControlIcon(): string;
+        renderNode(nodes: Control[]): JSX.Element;
+        /**
+         * returns the class name of a list of controls if they share a class, or an empty string if not
+         */
+        getControlsCommonClassName(nodes: Control[]): string;
+        renderProperties(nodes: Control[]): JSX.Element | undefined;
+        renderControlIcon(nodes: Control[]): string;
         render(): JSX.Element | null;
     }
 }
@@ -1831,13 +1279,20 @@ declare module "@babylonjs/gui-editor/sharedComponents/messageDialog" {
 declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemLabelComponent" {
     import * as React from "react";
     interface ITreeItemLabelComponentProps {
-        label: string;
+        label?: string;
         onClick?: () => void;
-        color: string;
+        onChange: (newValue: string) => void;
+        bracket: string;
+        renaming: boolean;
+        setRenaming: (renaming: boolean) => void;
     }
-    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps> {
+    interface ITreeItemLabelState {
+        value: string;
+    }
+    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps, ITreeItemLabelState> {
         constructor(props: ITreeItemLabelComponentProps);
         onClick(): void;
+        onBlur(): void;
         render(): JSX.Element;
     }
 }
@@ -1877,10 +1332,12 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/cont
     export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
         isActive: boolean;
         isVisible: boolean;
+        isRenaming: boolean;
     }> {
         constructor(props: IControlTreeItemComponentProps);
         highlight(): void;
         switchVisibility(): void;
+        onRename(name: string): void;
         render(): JSX.Element;
     }
 }
@@ -1915,8 +1372,8 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
         scrollIntoView(): void;
         componentWillUnmount(): void;
         onSelect(): void;
-        renderChildren(isExpanded: boolean): (JSX.Element | null)[] | null;
-        render(): JSX.Element | null;
+        renderChildren(isExpanded: boolean, offset?: boolean): (JSX.Element | null)[] | null;
+        render(): JSX.Element | (JSX.Element | null)[] | null;
         dragOver(event: React.DragEvent<HTMLDivElement>): void;
         drop(): void;
     }
@@ -2050,6 +1507,22 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/diagram/artBoard" {
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    import { Rect } from "@babylonjs/gui-editor/diagram/coordinateHelper";
+    interface IArtBoardProps {
+        globalState: GlobalState;
+    }
+    interface IArtBoardState {
+        bounds: Rect;
+    }
+    export class ArtBoardComponent extends React.Component<IArtBoardProps, IArtBoardState> {
+        constructor(props: IArtBoardProps);
+        update(): void;
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/workbenchEditor" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -2392,36 +1865,20 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/booleanLineCompon
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color4LineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
-    import { Color4 } from "@babylonjs/core/Maths/math.color";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     export interface IColor4LineComponentProps {
         label: string;
-        target: any;
+        target?: any;
         propertyName: string;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         onChange?: () => void;
         isLinear?: boolean;
         icon?: string;
         iconLabel?: string;
+        lockObject?: LockObject;
     }
-    export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
-        isExpanded: boolean;
-        color: Color4;
-    }> {
-        private _localChange;
-        constructor(props: IColor4LineComponentProps);
-        shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
-            color: Color4;
-        }): boolean;
-        setPropertyValue(newColor: Color4): void;
-        onChange(newValue: string): void;
-        switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color4): void;
-        updateStateR(value: number): void;
-        updateStateG(value: number): void;
-        updateStateB(value: number): void;
-        updateStateA(value: number): void;
-        copyToClipboard(): void;
+    export class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
         render(): JSX.Element;
     }
 }
@@ -2700,14 +2157,15 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ICommonControlPropertyGridComponentProps {
-        control: Control;
+        controls?: Control[];
+        control?: Control;
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
         constructor(props: ICommonControlPropertyGridComponentProps);
-        renderGridInformation(): JSX.Element | null;
-        render(): JSX.Element;
+        renderGridInformation(control: Control): JSX.Element | null;
+        render(): JSX.Element | undefined;
     }
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/checkboxPropertyGridComponent" {
@@ -2864,7 +2322,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/gui/
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
     interface IRadioButtonPropertyGridComponentProps {
-        radioButton: RadioButton;
+        radioButtons: RadioButton[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }