@babylonjs/gui-editor 5.18.0 → 5.19.0

package/dist/babylon.guiEditor.max.js

@@ -49644,7 +49644,9 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.props.onColorChanged(this.state.color.clone());
     }
     render() {
-        const colorHex = this.state.color.toHexString();
+        const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromColor3(this.state.color);
+        color4.a = this.state.alpha;
+        const colorHex = color4.toHexString();
         const hsv = this.state.color.toHSV();
         const colorRef = new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3();
         core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
@@ -50268,8 +50270,8 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this.props.lockObject.lock = false;
         }
     }
-    incrementValue(amount) {
-        if (this.props.step) {
+    incrementValue(amount, processStep = true) {
+        if (processStep && this.props.step) {
             amount *= parseFloat(this.props.step);
         }
         let currentValue = parseFloat(this.state.value);
@@ -50279,15 +50281,22 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.updateValue((currentValue + amount).toFixed(2));
     }
     onKeyDown(event) {
-        if (this.props.arrows) {
-            if (event.key === "ArrowUp") {
-                this.incrementValue(1);
-                event.preventDefault();
-            }
-            if (event.key === "ArrowDown") {
-                this.incrementValue(-1);
-                event.preventDefault();
+        const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
+        const handleArrowKey = (sign) => {
+            if (event.shiftKey) {
+                sign *= 10;
+                if (event.ctrlKey || event.metaKey) {
+                    sign *= 10;
+                }
             }
+            this.incrementValue(sign * step, false);
+            event.preventDefault();
+        };
+        if (event.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (event.key === "ArrowDown") {
+            handleArrowKey(-1);
         }
         if (event.key === "Enter" && this.props.onEnter) {
             this.props.onEnter(this._store);
@@ -50448,14 +50457,13 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         return false;
     }
-    updateValue(evt) {
-        const value = evt.target.value;
-        if (/[^0-9.-]/g.test(value)) {
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
             return;
         }
-        const valueAsNumber = parseFloat(value);
+        const valueAsNumber = parseFloat(valueString);
         this._localChange = true;
-        this.setState({ value: value });
+        this.setState({ value: valueString });
         if (isNaN(valueAsNumber)) {
             return;
         }
@@ -50473,8 +50481,34 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         this.props.onChange(valueAsNumber);
     }
+    incrementValue(amount) {
+        let currentValue = parseFloat(this.state.value);
+        if (isNaN(currentValue)) {
+            currentValue = 0;
+        }
+        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
+    }
+    onKeyDown(evt) {
+        const step = this.props.step || 1;
+        const handleArrowKey = (sign) => {
+            if (evt.shiftKey) {
+                sign *= 10;
+                if (evt.ctrlKey || evt.metaKey) {
+                    sign *= 10;
+                }
+            }
+            this.incrementValue(sign * step);
+            evt.preventDefault();
+        };
+        if (evt.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (evt.key === "ArrowDown") {
+            handleArrowKey(-1);
+        }
+    }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt), onFocus: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
                         if (this.props.lockObject) {
                             this.props.lockObject.lock = true;
                         }
@@ -56350,26 +56384,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     addControls(scene) {
         scene.onKeyboardObservable.add((k) => {
             switch (k.event.key) {
-                case "s": //select
-                case "S":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
-                    break;
-                case "p": //pan
-                case "P":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
-                    break;
-                case "z": //zoom
-                case "Z":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
-                    break;
-                case "g": //outlines
-                case "G":
-                    this.props.globalState.outlines = !this.props.globalState.outlines;
-                    break;
-                case "f": //fit to window
-                case "F":
-                    this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
-                    break;
                 case "ArrowUp": // move up
                     this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
                     break;
@@ -56549,6 +56563,7 @@ class GlobalState {
         this.onOutlineChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onPropertyChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this._tool = GUIEditorTool.SELECT;
+        this._prevTool = this._tool;
         this.onToolChangeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onFitControlsToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onReframeWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56587,7 +56602,7 @@ class GlobalState {
         if (this._tool === GUIEditorTool.ZOOM) {
             return GUIEditorTool.ZOOM;
         }
-        else if (this._tool === GUIEditorTool.PAN || this.keys.isKeyDown("space")) {
+        else if (this._tool === GUIEditorTool.PAN) {
             return GUIEditorTool.PAN;
         }
         else {
@@ -56597,9 +56612,16 @@ class GlobalState {
     set tool(newTool) {
         if (this._tool === newTool)
             return;
+        this._prevTool = this._tool;
         this._tool = newTool;
         this.onToolChangeObservable.notifyObservers();
     }
+    restorePreviousTool() {
+        if (this._tool !== this._prevTool) {
+            this._tool = this._prevTool;
+            this.onToolChangeObservable.notifyObservers();
+        }
+    }
     /** adds copy, cut and paste listeners to the host window */
     registerEventListeners() {
         const isElementEditable = (element) => {
@@ -57288,23 +57310,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
-/* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
-/* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
-/* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
-/* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
-/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
-/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
-/* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
-/* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
-/* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
-/* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
-/* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
-/* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
-/* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
+/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./globalState */ "../../../tools/guiEditor/dist/globalState.js");
+/* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
+/* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
+/* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
+/* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
+/* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
+/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
+/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
+/* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
+/* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
+/* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
+/* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
+/* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
+/* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
+/* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
+
 
 
 
@@ -57326,8 +57350,43 @@ __webpack_require__.r(__webpack_exports__);
 class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
         super(props);
-        this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("LeftWidth", 200);
-        this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("RightWidth", 300);
+        this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("LeftWidth", 200);
+        this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("RightWidth", 300);
+        this.addToolControls = (evt) => {
+            // If the event target is a text input, we're currently focused on it, and the user
+            // just wants to type normal text
+            if (evt.target && evt.target instanceof HTMLInputElement && evt.target.type === "text") {
+                return;
+            }
+            switch (evt.key) {
+                case "s": //select
+                case "S":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
+                    break;
+                case "p": //pan
+                case "P":
+                case " ":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
+                    break;
+                case "z": //zoom
+                case "Z":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
+                    break;
+                case "g": //outlines
+                case "G":
+                    this.props.globalState.outlines = !this.props.globalState.outlines;
+                    break;
+                case "f": //fit to window
+                case "F":
+                    this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
+                    break;
+            }
+        };
+        this.removePressToolControls = (evt) => {
+            if (evt.key === " ") {
+                this.props.globalState.restorePreviousTool();
+            }
+        };
         this.handlePopUp = () => {
             this.setState({
                 showPreviewPopUp: true,
@@ -57417,6 +57476,12 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (navigator.userAgent.indexOf("Mobile") !== -1) {
             (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
         }
+        document.addEventListener("keydown", this.addToolControls);
+        document.addEventListener("keyup", this.removePressToolControls);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.addToolControls);
+        document.removeEventListener("keyup", this.removePressToolControls);
     }
     showWaitScreen() {
         var _a;
@@ -57446,11 +57511,11 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         const maxWidth = this.props.globalState.hostWindow.innerWidth;
         if (forLeft) {
             this._leftWidth = Math.max(150, Math.min(maxWidth - this._rightWidth, evt.clientX - this._rootRef.current.clientLeft));
-            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
+            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
         }
         else {
             this._rightWidth = Math.max(250, Math.min(maxWidth - this._leftWidth, this._rootRef.current.clientLeft + this._rootRef.current.clientWidth - evt.clientX));
-            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
+            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
         }
         rootElement.style.gridTemplateColumns = this.buildColumnLayout();
         this.props.globalState.onWindowResizeObservable.notifyObservers();
@@ -57469,13 +57534,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     }
     render() {
         const classForElement = this.state.toolbarExpand ? "left-panel" : "left-panel expand";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_3__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
                         gridTemplateColumns: this.buildColumnLayout(),
                     }, onMouseDown: (evt) => {
                         if (evt.target.nodeName === "INPUT") {
                             return;
                         }
-                    }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
+                    }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
                                 event.preventDefault();
                                 this.props.globalState.onDropObservable.notifyObservers();
                                 this.props.globalState.onParentingChangeObservable.notifyObservers(null);
@@ -57483,10 +57548,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                                 event.preventDefault();
                             }, style: {
                                 backgroundColor: this.props.globalState.backgroundColor.toHexString(),
-                            } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
+                            } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_8__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_9__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
     }
     onCreate(value) {
-        const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__.GUINodeTools.CreateControlFromString(value);
+        const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
         const newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
         this.props.globalState.setSelection([newGuiNode]);
         this.props.globalState.onPointerUpObservable.notifyObservers(null);
@@ -57494,7 +57559,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         return newGuiNode;
     }
     createBlackLine() {
-        const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" });
+        const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__, className: "icon" });
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blackLine" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "arrow", onClick: () => this.switchExpandedState() }, { children: icon })) })));
     }
     createToolbarHelper(ct) {
@@ -57508,10 +57573,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     }
     createToolbar() {
         if (this.state.toolbarExpand) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes) }))] })) }));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes) }))] })) }));
         }
         else {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2)))] }))] })) }));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2)))] }))] })) }));
         }
     }
 }