@babylonjs/gui-editor 5.19.0 → 5.20.0

package/dist/babylon.guiEditor.max.js

@@ -51344,13 +51344,17 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
         props.globalState.onSelectionChangedObservable.add(() => {
             this.forceUpdate();
         });
+        props.globalState.onWindowResizeObservable.add(() => {
+            this.forceUpdate();
+        });
     }
     render() {
-        const isPasteDisabled = this.props.globalState.workbench && this.props.globalState.selectedControls.length > 0 ? this.props.globalState.workbench.pasteDisabled : true;
+        const isPasteDisabled = this.props.globalState.workbench ? this.props.globalState.workbench.pasteDisabled : true;
         const size = this.props.globalState.workbench ? Object.assign({}, this.props.globalState.workbench.guiSize) : { width: 0, height: 0 };
         const copyyIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ : _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__;
         const deleteeIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ : _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__;
         const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
+        const responsiveUI = this.props.globalState.fromPG ? core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("responsiveUI", true) : core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true);
         this._sizeOption = _sizeValues.findIndex((value) => value.width == size.width && value.height == size.height);
         if (this._sizeOption < 0) {
             this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
@@ -51417,37 +51421,46 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "divider padded" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: this._lockObject, label: "Artboard:", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider padded" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Responsive:", iconLabel: "Responsive GUIs will resize the UI layout and reflow controls to accommodate different device screen sizes", isSelected: () => core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true), onSelect: (value) => {
                                         this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
                                         core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
+                                        core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("responsiveUI", value);
                                         this._sizeOption = _sizeOptions.length;
                                         if (value) {
                                             this._sizeOption = 0;
                                             this.props.globalState.workbench.guiSize = _sizeValues[this._sizeOption];
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
                                         }
                                         this.forceUpdate();
-                                    }, large: true }), core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
+                                    }, large: true }), responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
                                         this._sizeOption = value;
                                         if (this._sizeOption !== _sizeOptions.length) {
                                             const newSize = _sizeValues[this._sizeOption];
                                             this.props.globalState.workbench.guiSize = newSize;
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
                                         }
                                         this.forceUpdate();
-                                    } })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
+                                    } })), !responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
                                                 if (!this._stopUpdating) {
                                                     this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
+                                                    core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
                                                 }
                                             }, onDragStart: () => {
                                                 this._stopUpdating = true;
                                             }, onDragStop: (newValue) => {
                                                 this._stopUpdating = false;
                                                 this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
+                                                core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
                                             }, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
                                                 if (!this._stopUpdating) {
                                                     this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
+                                                    core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
                                                 }
                                             }, onDragStart: () => {
                                                 this._stopUpdating = true;
                                             }, onDragStop: (newValue) => {
                                                 this._stopUpdating = false;
                                                 this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
+                                                core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
                                             }, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__, className: "beta-flag", draggable: false }) }))] })));
     }
 }
@@ -55560,7 +55573,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/logger */ "core/Misc/observable");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
 /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -55586,6 +55599,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 var ConstraintDirection;
 (function (ConstraintDirection) {
@@ -55596,6 +55610,7 @@ var ConstraintDirection;
 const ARROW_KEY_MOVEMENT_SMALL = 1; // px
 const ARROW_KEY_MOVEMENT_LARGE = 5; // px
 const MAX_POINTER_TRAVEL_DISTANCE = 5; //px^2. determines how far the pointer can move to be treated as a drag vs. a click
+const CONTROL_OFFSET = 10; //offset in pixels for when a control is added to editor
 class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
         super(props);
@@ -55608,6 +55623,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._controlsHit = [];
         this._pointerTravelDistance = 0;
         this._processSelectionOnUp = false;
+        this._currLeft = 0;
+        this._currTop = 0;
         this._nextLiveGuiRender = -1;
         this._liveGuiRerenderDelay = 30;
         this._defaultGUISize = { width: 1024, height: 1024 };
@@ -55799,6 +55816,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             const obj = {};
             control.serialize(obj);
             controlList.push(obj);
+            this._currLeft = control.leftInPixels;
+            this._currTop = control.topInPixels;
         }
         copyFn(JSON.stringify({
             GUIClipboard: true,
@@ -55818,8 +55837,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 for (const control of parsed.controls) {
                     newSelection.push(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(control, this.props.globalState.guiTexture));
                 }
-                (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(newSelection[0]);
-                this.props.globalState.setSelection(newSelection);
+                if (((_a = newSelection[0].parent) === null || _a === void 0 ? void 0 : _a.typeName) != "StackPanel") {
+                    this._currLeft += CONTROL_OFFSET;
+                    this._currTop += CONTROL_OFFSET;
+                }
+                newSelection[0].leftInPixels = this._currLeft;
+                newSelection[0].topInPixels = this._currTop;
+                const newGuiNode = this.props.globalState.workbench.appendBlock(newSelection[0]);
+                this.props.globalState.setSelection([newGuiNode]);
                 return true;
             }
         }
@@ -56016,12 +56041,18 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     appendBlock(guiElement) {
+        var _a;
         if (this.props.globalState.liveGuiTexture) {
             this.props.globalState.liveGuiTexture.addControl(guiElement);
         }
         this.addEditorBehavior(guiElement);
         guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
-        this.trueRootContainer.addControl(guiElement);
+        if (this.props.globalState.selectedControls.length != 0) {
+            (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(guiElement);
+        }
+        else {
+            this.trueRootContainer.addControl(guiElement);
+        }
         return guiElement;
     }
     parent(dropLocationControl) {
@@ -56289,7 +56320,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this._processSelectionOnUp = false;
         }
     }
-    createGUICanvas() {
+    createGUICanvas(embed) {
         // Get the canvas element from the DOM.
         const canvas = this._rootContainer.current;
         // Associate a Babylon Engine to it.
@@ -56299,7 +56330,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._scene.clearColor = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Color4(0, 0, 0, 0);
         const light = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.HemisphericLight("light1", core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Axis.Y, this._scene);
         light.intensity = 0.9;
-        this._guiSize = this._defaultGUISize;
+        if (embed) {
+            this.props.globalState.fromPG = true;
+            this._guiSize.width = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("width", 1024);
+            this._guiSize.height = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("height", 1024);
+        }
         this._panAndZoomContainer = new gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container("panAndZoom");
         this._panAndZoomContainer.clipContent = false;
         this._panAndZoomContainer.clipChildren = false;
@@ -56656,6 +56691,12 @@ class GlobalState {
     get backgroundColor() {
         return this._backgroundColor;
     }
+    get fromPG() {
+        return this._fromPG;
+    }
+    set fromPG(value) {
+        this._fromPG = value;
+    }
     set backgroundColor(value) {
         this._backgroundColor = value;
         this.onBackgroundColorChangeObservable.notifyObservers();
@@ -56765,8 +56806,9 @@ class GUIEditor {
     /**
      * Show the gui editor
      * @param options defines the options to use to configure the gui editor
+     * @param embed defines whether editor is being opened from the Playground
      */
-    static async Show(options) {
+    static async Show(options, embed) {
         let hostElement = options.hostElement;
         // if we are in a standalone window and we have some current state, just load the GUI from the snippet server, don't do anything else
         if (this._CurrentState && hostElement) {
@@ -56803,7 +56845,7 @@ class GUIEditor {
         react_dom__WEBPACK_IMPORTED_MODULE_1__.render(graphEditor, hostElement);
         // create the middle workbench canvas
         if (!globalState.guiTexture) {
-            globalState.workbench.createGUICanvas();
+            globalState.workbench.createGUICanvas(embed);
             if (options.currentSnippetToken) {
                 try {
                     await globalState.workbench.loadFromSnippet(options.currentSnippetToken);