@babylonjs/gui-editor 5.0.0-beta.8 → 5.0.0-rc.1

package/babylon.guiEditor.module.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+declare module "@babylonjs/gui-editor/controlTypes" {
+    export const ControlTypes: {
+        className: string;
+        icon: string;
+    }[];
+}
 declare module "@babylonjs/gui-editor/components/log/logComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -24,7 +30,7 @@ declare module "@babylonjs/gui-editor/tools" {
     import { Grid } from "@babylonjs/gui/2D/controls/grid";
     import { Vector2 } from "@babylonjs/core/Maths/math";
     export class Tools {
-        static LookForItem(item: any, selectedEntity: any, firstIteration?: boolean): boolean;
+        static LookForItems(item: any, selectedEntities: any[], firstIteration?: boolean): boolean;
         private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
         static SortAndFilter(parent: any, items: any[]): any[];
         static getCellInfo(grid: Grid, control: Control): Vector2;
@@ -47,13 +53,14 @@ declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
     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 type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "fontSize";
     export class Rect {
         top: number;
         left: number;
         right: number;
         bottom: number;
         constructor(left: number, top: number, right: number, bottom: number);
+        clone(): Rect;
         get center(): Vector2;
         get width(): number;
         get height(): number;
@@ -101,11 +108,9 @@ declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
 declare module "@babylonjs/gui-editor/diagram/workbench" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    import { Nullable } from "@babylonjs/core/types";
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
     import { Scene } from "@babylonjs/core/scene";
-    import { IWheelEvent } from "@babylonjs/core/Events/deviceInputEvents";
     import { Container } from "@babylonjs/gui/2D/controls/container";
     import { ISize } from "@babylonjs/core/Maths/math";
     export interface IWorkbenchComponentProps {
@@ -122,28 +127,22 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _mouseStartPointX;
         private _mouseStartPointY;
         _scene: Scene;
-        private _selectedGuiNodes;
         private _ctrlKeyIsPressed;
         private _altKeyIsPressed;
         private _constraintDirection;
         private _forcePanning;
         private _forceZooming;
         private _forceSelecting;
-        private _outlines;
         private _panning;
         private _canvas;
         private _responsive;
         private _isOverGUINode;
-        private _clipboard;
-        private _selectAll;
-        private _pasted;
         private _engine;
         private _liveRenderObserver;
         private _guiRenderObserver;
         private _mainSelection;
         private _selectionDepth;
         private _doubleClick;
-        private _lockMainSelection;
         _liveGuiTextureRerender: boolean;
         private _anyControlClicked;
         private _visibleRegionContainer;
@@ -171,12 +170,12 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _getParentWithDepth;
         private _getMaxParent;
         constructor(props: IWorkbenchComponentProps);
-        determineMouseSelection(selection: Nullable<Control>): void;
+        determineMouseSelection(selection: Control): void;
         keyEvent: (evt: KeyboardEvent) => void;
-        private updateHitTest;
-        private updateHitTestForSelection;
-        copyToClipboard(): void;
-        pasteFromClipboard(): void;
+        private _deleteSelectedNodes;
+        copyToClipboard(copyFn: (content: string) => void): void;
+        cutToClipboard(copyFn: (content: string) => void): void;
+        pasteFromClipboard(clipboardContents: string): boolean;
         CopyGUIControl(original: Control): void;
         private selectAllGUI;
         blurEvent: () => void;
@@ -184,7 +183,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         loadFromJson(serializationObject: any): void;
         loadFromSnippet(snippetId: string): Promise<void>;
         loadToEditor(): void;
-        changeSelectionHighlight(value: boolean): void;
+        updateNodeOutlines(): void;
         findNodeFromGuiElement(guiControl: Control): Control;
         appendBlock(guiElement: Control): Control;
         private _isMainSelectionParent;
@@ -207,7 +206,8 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         synchronizeLiveGUI(): void;
         addControls(scene: Scene): void;
         panning(): void;
-        zoomWheel(event: IWheelEvent): number;
+        moveControls(moveHorizontal: boolean, amount: number): void;
+        zoomWheel(event: WheelEvent): number;
         zooming(delta: number): void;
         zeroIfClose(vec: Vector3): void;
         render(): JSX.Element;
@@ -224,58 +224,6 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
         lock: boolean;
     }
 }
-declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
-    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;
-    }
-    enum ScalePointPosition {
-        Top = -1,
-        Left = -1,
-        Center = 0,
-        Right = 1,
-        Bottom = 1
-    }
-    interface IScalePoint {
-        position: Vector2;
-        horizontalPosition: ScalePointPosition;
-        verticalPosition: ScalePointPosition;
-        rotation: number;
-        isPivot: boolean;
-    }
-    interface IGuiGizmoState {
-        canvasBounds: Rect;
-        scalePoints: IScalePoint[];
-        scalePointDragging: number;
-        isRotating: boolean;
-    }
-    export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
-        private _responsive;
-        private _storedValues;
-        private _localBounds;
-        private _rotation;
-        constructor(props: IGuiGizmoProps);
-        componentDidMount(): void;
-        /**
-         * Update the gizmo's positions
-         * @param force should the update be forced. otherwise it will be updated only when the pointer is down
-         */
-        updateGizmo(force?: boolean): void;
-        onUp(evt?: React.PointerEvent): void;
-        private _onUp;
-        onMove(evt: React.PointerEvent): void;
-        private _onMove;
-        private _rotate;
-        private _dragLocalBounds;
-        private _updateNodeFromLocalBounds;
-        private _beginDraggingScalePoint;
-        private _beginRotate;
-        render(): JSX.Element | null;
-    }
-}
 declare module "@babylonjs/gui-editor/globalState" {
     import { Nullable } from "@babylonjs/core/types";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -287,7 +235,6 @@ 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";
     import { ISize } from "@babylonjs/core/Maths/math";
     export enum DragOverLocation {
         ABOVE = 0,
@@ -296,13 +243,13 @@ declare module "@babylonjs/gui-editor/globalState" {
         NONE = 3
     }
     export class GlobalState {
-        [x: string]: any;
         liveGuiTexture: Nullable<AdvancedDynamicTexture>;
         guiTexture: AdvancedDynamicTexture;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: Observable<Nullable<Control>>;
+        selectedControls: Control[];
+        onSelectionChangedObservable: Observable<void>;
         onResizeObservable: Observable<ISize>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
@@ -314,25 +261,26 @@ declare module "@babylonjs/gui-editor/globalState" {
         onNewSceneObservable: Observable<Nullable<Scene>>;
         onGuiNodeRemovalObservable: Observable<Control>;
         onPopupClosedObservable: Observable<void>;
-        _backgroundColor: Color3;
+        private _backgroundColor;
+        private _outlines;
+        isMultiSelecting: boolean;
+        onOutlineChangedObservable: Observable<void>;
         blockKeyboardEvents: boolean;
         controlCamera: boolean;
         selectionLock: boolean;
         workbench: WorkbenchComponent;
-        guiGizmo: GuiGizmoComponent;
         onPropertyChangedObservable: Observable<PropertyChangedEvent>;
         onZoomObservable: Observable<void>;
         onFitToWindowObservable: Observable<void>;
         onPanObservable: Observable<void>;
         onSelectionButtonObservable: Observable<void>;
-        onMoveObservable: Observable<void>;
         onLoadObservable: Observable<File>;
         onSaveObservable: Observable<void>;
         onSnippetLoadObservable: Observable<void>;
         onSnippetSaveObservable: Observable<void>;
-        onOutlinesObservable: Observable<void>;
         onResponsiveChangeObservable: Observable<boolean>;
         onParentingChangeObservable: Observable<Nullable<Control>>;
+        onDropObservable: Observable<void>;
         onPropertyGridUpdateRequiredObservable: Observable<void>;
         onDraggingEndObservable: Observable<void>;
         onDraggingStartObservable: Observable<void>;
@@ -340,8 +288,13 @@ declare module "@babylonjs/gui-editor/globalState" {
         onGizmoUpdateRequireObservable: Observable<void>;
         onArtBoardUpdateRequiredObservable: Observable<void>;
         onBackgroundColorChangeObservable: Observable<void>;
+        onPointerMoveObservable: Observable<import("react").PointerEvent<HTMLCanvasElement>>;
+        onPointerUpObservable: Observable<Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>;
         draggedControl: Nullable<Control>;
         draggedControlDirection: DragOverLocation;
+        onCopyObservable: Observable<(content: string) => void>;
+        onCutObservable: Observable<(content: string) => void>;
+        onPasteObservable: Observable<string>;
         isSaving: boolean;
         lockObject: LockObject;
         storeEditorData: (serializationObject: any) => void;
@@ -354,39 +307,16 @@ declare module "@babylonjs/gui-editor/globalState" {
             action: (data: string) => Promise<string>;
         };
         constructor();
+        /** adds copy, cut and paste listeners to the host window */
+        registerEventListeners(): void;
+        private _updateKeys;
         get backgroundColor(): Color3;
         set backgroundColor(value: Color3);
-    }
-}
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
-    import * as React from "react";
-    export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
-        icon?: string;
-        iconLabel?: string;
-    }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-        constructor(props: IButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineComponent" {
-    import * as React from "react";
-    interface IFileButtonLineComponentProps {
-        label: string;
-        onClick: (file: File) => void;
-        accept: string;
-        icon?: string;
-        iconLabel?: string;
-    }
-    export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-        private static _IDGenerator;
-        private _id;
-        private uploadInputRef;
-        constructor(props: IFileButtonLineComponentProps);
-        onChange(evt: any): void;
-        render(): JSX.Element;
+        get outlines(): boolean;
+        set outlines(value: boolean);
+        select(control: Control): void;
+        setSelection(controls: Control[]): void;
+        isMultiSelectable(control: Control): boolean;
     }
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/targetsProxy" {
@@ -426,8 +356,6 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
         isDisabled?: boolean;
         isConflict: boolean;
     }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
         private _localChange;
         constructor(props: ICheckBoxLineComponentProps);
         shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
@@ -555,13 +483,26 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/sliderLineCompone
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/inputArrowsComponent" {
+    import * as React from "react";
+    interface IInputArrowsComponentProps {
+        incrementValue: (amount: number) => void;
+        setDragging: (dragging: boolean) => void;
+    }
+    export class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {
+        private _arrowsRef;
+        private _drag;
+        private _releaseListener;
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ITextInputLineComponentProps {
-        label: string;
+        label?: string;
         lockObject: LockObject;
         target?: any;
         propertyName?: string;
@@ -576,18 +517,25 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         unit?: string;
         onUnitClicked?: (unit: string) => void;
         unitLocked?: boolean;
+        arrows?: boolean;
+        arrowsIncrement?: (amount: number) => void;
+        step?: number;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
+        dragging: boolean;
     }> {
         private _localChange;
         constructor(props: ITextInputLineComponentProps);
         componentWillUnmount(): void;
         shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
             value: string;
+            dragging: boolean;
         }): boolean;
         raiseOnPropertyChanged(newValue: string, previousValue: string): void;
         updateValue(value: string): void;
+        incrementValue(amount: number): void;
+        onKeyDown(event: React.KeyboardEvent): void;
         render(): JSX.Element;
     }
 }
@@ -788,6 +736,50 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/colorLineComponen
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/iconComponent" {
+    import * as React from "react";
+    interface IIconComponentProps {
+        icon: string;
+        label?: string;
+    }
+    export class IconComponent extends React.Component<IIconComponentProps> {
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
+    export const Null_Value: number;
+    export interface IOptionsLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        options: IInspectableOptions[];
+        noDirectUpdate?: boolean;
+        onSelect?: (value: number) => void;
+        extractValue?: () => number;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        allowNullValue?: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
+        value: number;
+    }> {
+        private _localChange;
+        private remapValueIn;
+        private remapValueOut;
+        constructor(props: IOptionsLineComponentProps);
+        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+            value: number;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        updateValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -800,10 +792,13 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+        private _onPropertyChangedObserver;
         constructor(props: ICommonControlPropertyGridComponentProps);
+        private _getTransformedReferenceCoordinate;
         private _updateAlignment;
         private _checkAndUpdateValues;
         private _markChildrenAsDirty;
+        componentWillUnmount(): void;
         render(): JSX.Element;
     }
 }
@@ -873,40 +868,6 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/r
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/lines/optionsLineComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
-    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
-    export const Null_Value: number;
-    export interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: IInspectableOptions[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        extractValue?: () => number;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-        allowNullValue?: boolean;
-        icon?: string;
-        iconLabel?: string;
-    }
-    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-        value: number;
-    }> {
-        private _localChange;
-        private remapValueIn;
-        private remapValueOut;
-        constructor(props: IOptionsLineComponentProps);
-        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-            value: number;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/textBlockPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -1010,6 +971,19 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/containerPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    import { Container } from "@babylonjs/gui/2D/controls/container";
+    interface IContainerPropertyGridComponentProps {
+        containers: Container[];
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ContainerPropertyGridComponent extends React.Component<IContainerPropertyGridComponentProps> {
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/rectanglePropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -1213,22 +1187,18 @@ 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 | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
+        static CreateControlFromString(data: string): Grid | Rectangle | Line | TextBlock | Image | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
     }
 }
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    import { Nullable } from "@babylonjs/core/types";
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
-    interface IPropertyTabComponentState {
-        currentNode: Nullable<Control>;
-    }
-    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
+    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps> {
         private _onBuiltObserver;
         private _timerIntervalId;
         private _lockObject;
@@ -1326,7 +1296,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/cont
         onClick: () => void;
         globalState: GlobalState;
         isHovered: boolean;
-        dragOverHover: boolean;
+        isDragOver: boolean;
         dragOverLocation: DragOverLocation;
     }
     export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
@@ -1348,22 +1318,29 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
     import { DragOverLocation, GlobalState } from "@babylonjs/gui-editor/globalState";
     export interface ITreeItemSelectableComponentProps {
         entity: any;
-        selectedEntity?: any;
+        selectedEntities: any[];
         mustExpand?: boolean;
         offset: number;
         globalState: GlobalState;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
         filter: Nullable<string>;
     }
-    export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, {
+    export interface ITreeItemSelectableComponentState {
+        dragOver: boolean;
         isSelected: boolean;
         isHovered: boolean;
         dragOverLocation: DragOverLocation;
-    }> {
-        dragOverHover: boolean;
+    }
+    export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, ITreeItemSelectableComponentState> {
         private _onSelectionChangedObservable;
         private _onDraggingEndObservable;
         private _onDraggingStartObservable;
+        /** flag flipped onDragEnter if dragOver is already true
+         * prevents dragLeave from immediately setting dragOver to false
+         * required to make dragging work as expected
+         * see: see: https://github.com/transformation-dev/matrx/tree/master/packages/dragster
+         */
+        private _secondDragEnter;
         constructor(props: ITreeItemSelectableComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
@@ -1375,6 +1352,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemSelectabl
         renderChildren(isExpanded: boolean, offset?: boolean): (JSX.Element | null)[] | null;
         render(): JSX.Element | (JSX.Element | null)[] | null;
         dragOver(event: React.DragEvent<HTMLDivElement>): void;
+        updateDragOverLocation(event: React.DragEvent<HTMLDivElement>): void;
         drop(): void;
     }
 }
@@ -1391,7 +1369,7 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemComponent
         forceSubitems?: boolean;
         globalState: GlobalState;
         entity?: any;
-        selectedEntity: any;
+        selectedEntities: any[];
         extensibilityGroups?: IExplorerExtensibilityGroup[];
         contextMenuItems?: {
             label: string;
@@ -1462,6 +1440,24 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/sceneExplorerComp
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/fileButtonLineComponent" {
+    import * as React from "react";
+    interface IFileButtonLineComponentProps {
+        label: string;
+        onClick: (file: File) => void;
+        accept: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+        private static _IDGenerator;
+        private _id;
+        private uploadInputRef;
+        constructor(props: IFileButtonLineComponentProps);
+        onChange(evt: any): void;
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/components/commandDropdownComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -1501,9 +1497,77 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
         private _panning;
         private _zooming;
         private _selecting;
-        private _outlines;
         constructor(props: ICommandBarComponentProps);
-        private updateNodeOutline;
+        render(): JSX.Element;
+    }
+}
+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;
+        control: Control;
+    }
+    enum ScalePointPosition {
+        Top = -1,
+        Left = -1,
+        Center = 0,
+        Right = 1,
+        Bottom = 1
+    }
+    interface IScalePoint {
+        position: Vector2;
+        horizontalPosition: ScalePointPosition;
+        verticalPosition: ScalePointPosition;
+        rotation: number;
+        isPivot: boolean;
+    }
+    interface IGuiGizmoState {
+        canvasBounds: Rect;
+        scalePoints: IScalePoint[];
+        scalePointDragging: number;
+        isRotating: boolean;
+    }
+    export class GuiGizmoComponent extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
+        private _storedValues;
+        private _localBounds;
+        private _rotation;
+        private _gizmoUpdateObserver;
+        private _pointerUpObserver;
+        private _pointerMoveObserver;
+        constructor(props: IGuiGizmoProps);
+        componentWillUnmount(): void;
+        /**
+         * Update the gizmo's positions
+         * @param force should the update be forced. otherwise it will be updated only when the pointer is down
+         */
+        updateGizmo(force?: boolean): void;
+        private _onUp;
+        private _onMove;
+        private _rotate;
+        private _modulo;
+        private _dragLocalBounds;
+        private _updateNodeFromLocalBounds;
+        private _beginDraggingScalePoint;
+        private _beginRotate;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/gui-editor/diagram/guiGizmoWrapper" {
+    import { Nullable } from "@babylonjs/core/types";
+    import { Observer } from "@babylonjs/core/Misc/observable";
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    export interface IGizmoWrapperProps {
+        globalState: GlobalState;
+    }
+    export class GizmoWrapper extends React.Component<IGizmoWrapperProps> {
+        observer: Nullable<Observer<void>>;
+        componentWillMount(): void;
+        componentWillUnmount(): void;
         render(): JSX.Element;
     }
 }
@@ -1526,6 +1590,7 @@ declare module "@babylonjs/gui-editor/diagram/artBoard" {
 declare module "@babylonjs/gui-editor/workbenchEditor" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
     interface IGraphEditorProps {
         globalState: GlobalState;
     }
@@ -1533,13 +1598,13 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         showPreviewPopUp: boolean;
     }
     export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
-        private _startX;
         private _moveInProgress;
         private _leftWidth;
         private _rightWidth;
         private _toolBarIconSize;
         private _popUpWindow;
         private _draggedItem;
+        private _rootRef;
         componentDidMount(): void;
         constructor(props: IGraphEditorProps);
         showWaitScreen(): void;
@@ -1553,19 +1618,7 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
         copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
         render(): JSX.Element;
-        _items: {
-            label: string;
-            icon?: string;
-            fileButton?: boolean;
-            onClick?: () => void;
-            onCheck?: (value: boolean) => void;
-            storeKey?: string;
-            isActive?: boolean;
-            defaultValue?: boolean | string;
-            subItems?: string[];
-        }[];
-        createItems(): void;
-        onCreate(value: string): void;
+        onCreate(value: string): Control;
         createToolbar(): JSX.Element;
     }
 }
@@ -1862,6 +1915,19 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/booleanLineCompon
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/lines/buttonLineComponent" {
+    import * as React from "react";
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/color4LineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";