@babylonjs/gui-editor 5.38.0 → 5.40.0

package/dist/babylon.guiEditor.max.js

@@ -40217,7 +40217,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         if (!scene) {
             return null;
         }
-        const guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
+        const guiElements = [this.props.globalState.guiTexture];
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "tree", onDrop: () => {
                 this.props.globalState.onDropObservable.notifyObservers();
                 this.props.globalState.onParentingChangeObservable.notifyObservers(null);
@@ -41118,7 +41118,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "GizmoGeneric": () => (/* binding */ GizmoGeneric)
 /* 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 gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
+/* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__);
@@ -41132,6 +41132,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 const roundFactor = 100;
 const round = (value) => Math.round(value * roundFactor) / roundFactor;
 const modulo = (dividend, divisor) => ((dividend % divisor) + divisor) % divisor;
@@ -41161,9 +41162,8 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
                 const node = this.props.control;
                 const inRTT = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.MousePointerToRTTSpace(node, scene.pointerX, scene.pointerY);
                 const inNodeSpace = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.RttToLocalNodeSpace(node, inRTT.x, inRTT.y, undefined, this._storedValues);
-                this._dragLocalBounds(inNodeSpace);
+                this._dragLocalBounds(inNodeSpace, this.props.globalState.shiftKeyPressed);
                 this._updateNodeFromLocalBounds();
-                this.props.globalState.workbench._liveGuiTextureRerender = false;
                 this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
             }
             if (this.state.isRotating) {
@@ -41324,13 +41324,14 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
             y: (x - centerX) * Math.sin(angle) + (y - centerY) * Math.cos(angle) + centerY,
         };
     }
-    _dragLocalBounds(toPosition) {
+    _dragLocalBounds(toPosition, preserveAspectRatio = false) {
         const scalePoint = this.state.scalePoints[this.state.scalePointDragging];
         const newBounds = this._localBounds.clone();
+        const currentAspectRatio = gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__.MathTools.Round(this._localBounds.width / this._localBounds.height);
         if (scalePoint.horizontalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Left) {
             newBounds.left = Math.min(this._localBounds.right - 1, toPosition.x);
         }
-        if (scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Left) {
+        if (scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Top) {
             newBounds.top = Math.min(this._localBounds.bottom - 1, toPosition.y);
         }
         if (scalePoint.horizontalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Right) {
@@ -41339,6 +41340,38 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
         if (scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Bottom) {
             newBounds.bottom = Math.max(this._localBounds.top + 1, toPosition.y);
         }
+        if (preserveAspectRatio) {
+            const deltaWidth = newBounds.width - this._localBounds.width;
+            const deltaHeight = newBounds.height - this._localBounds.height;
+            const signInverted = scalePoint.horizontalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Center || scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Center;
+            const comparison = Math.abs(deltaWidth) > Math.abs(deltaHeight);
+            if (signInverted ? comparison : !comparison) {
+                const aspectRatioDeltaHeight = deltaWidth / currentAspectRatio;
+                if (scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Top) {
+                    newBounds.top = this._localBounds.top - aspectRatioDeltaHeight;
+                }
+                else if (scalePoint.verticalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Bottom) {
+                    newBounds.bottom = this._localBounds.bottom + aspectRatioDeltaHeight;
+                }
+                else {
+                    newBounds.top = this._localBounds.top - aspectRatioDeltaHeight / 2;
+                    newBounds.bottom = this._localBounds.bottom + aspectRatioDeltaHeight / 2;
+                }
+            }
+            else {
+                const aspectRatioDeltaWidth = deltaHeight * currentAspectRatio;
+                if (scalePoint.horizontalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Left) {
+                    newBounds.left = this._localBounds.left - aspectRatioDeltaWidth;
+                }
+                else if (scalePoint.horizontalPosition === _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Right) {
+                    newBounds.right = this._localBounds.right + aspectRatioDeltaWidth;
+                }
+                else {
+                    newBounds.left = this._localBounds.left - aspectRatioDeltaWidth / 2;
+                    newBounds.right = this._localBounds.right + aspectRatioDeltaWidth / 2;
+                }
+            }
+        }
         // apply bounds changes to all controls
         const edges = ["left", "top", "right", "bottom"];
         for (const node of this.props.globalState.selectedControls) {
@@ -41717,6 +41750,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 var ConstraintDirection;
@@ -41725,6 +41759,23 @@ var ConstraintDirection;
     ConstraintDirection[ConstraintDirection["X"] = 2] = "X";
     ConstraintDirection[ConstraintDirection["Y"] = 3] = "Y";
 })(ConstraintDirection || (ConstraintDirection = {}));
+/**
+ * This function will throttle calls to functions.
+ *
+ * @param callback callback to call.
+ * @param time time to wait between calls in ms.
+ */
+function throttle(callback, time) {
+    let lastCalledTime = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastCalledTime < time) {
+            return;
+        }
+        lastCalledTime = now;
+        callback(...args);
+    };
+}
 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
@@ -41737,14 +41788,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._constraintDirection = ConstraintDirection.NONE;
         this._isOverGUINode = [];
         this._doubleClick = null;
-        this._liveGuiTextureRerender = true;
         this._currLeft = 0;
         this._currTop = 0;
         this._controlsHit = [];
         this._pointerTravelDistance = 0;
         this._processSelectionOnUp = false;
-        this._nextLiveGuiRender = -1;
-        this._liveGuiRerenderDelay = 30;
         this._defaultGUISize = { width: 1024, height: 1024 };
         this._initialPanningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
         this._panningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
@@ -41762,6 +41810,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 this._setConstraintDirection = false;
                 this._constraintDirection = ConstraintDirection.NONE;
             }
+            this.props.globalState.shiftKeyPressed = evt.shiftKey && evt.type === "keydown";
             if (evt.key === "Delete" || evt.key === "Backspace") {
                 if (!this.props.globalState.lockObject.lock) {
                     this.props.globalState.deleteSelectedNodes();
@@ -42004,16 +42053,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
      * @param guiControl
      */
     addEditorBehavior(guiControl) {
-        const onPointerUpStored = guiControl.onPointerUpObservable.observers.slice();
-        guiControl.onPointerUpObservable.clear();
-        const onPointerDownStored = guiControl.onPointerDownObservable.observers.slice();
-        guiControl.onPointerDownObservable.clear();
-        const onPointerEnterStored = guiControl.onPointerEnterObservable.observers.slice();
-        guiControl.onPointerEnterObservable.clear();
-        const onPointerOutStored = guiControl.onPointerOutObservable.observers.slice();
-        guiControl.onPointerOutObservable.clear();
-        const onDisposeStored = guiControl.onDisposeObservable.observers.slice();
-        guiControl.onDisposeObservable.clear();
         guiControl.onPointerUpObservable.add(() => {
             this.clicked = false;
         });
@@ -42039,21 +42078,9 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 this._isOverGUINode.splice(index, 1);
             }
         });
-        // use metadata to keep track of things we need to cleanup/restore when the gui editor closes
-        // also stores the old metadata
         guiControl.metadata = {
+            ...guiControl.metadata,
             guiEditor: true,
-            metadata: guiControl.metadata,
-            isHighlighted: guiControl.isHighlighted,
-            highlightLineWidth: guiControl.highlightLineWidth,
-            isReadOnly: guiControl.isReadOnly,
-            isHitTestVisible: guiControl.isHitTestVisible,
-            isPointerBlocker: guiControl.isPointerBlocker,
-            onPointerUpStored,
-            onPointerDownStored,
-            onPointerEnterStored,
-            onPointerOutStored,
-            onDisposeStored,
         };
         guiControl.highlightLineWidth = 5;
         guiControl.isHighlighted = false;
@@ -42069,44 +42096,15 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (!control.metadata || !control.metadata.guiEditor) {
             return;
         }
-        const restoreObservers = (observable, storedObservers) => {
-            observable.clear();
-            for (const observer of storedObservers) {
-                const obs = observer;
-                observable.add(obs.callback, obs.mask, false, obs.scope, obs.unregisterOnNextCall);
-            }
-        };
-        restoreObservers(control.onPointerUpObservable, control.metadata.onPointerUpStored);
-        restoreObservers(control.onPointerDownObservable, control.metadata.onPointerDownStored);
-        restoreObservers(control.onPointerEnterObservable, control.metadata.onPointerEnterStored);
-        restoreObservers(control.onPointerOutObservable, control.metadata.onPointerOutStored);
-        restoreObservers(control.onDisposeObservable, control.metadata.onDisposeStored);
-        control.highlightLineWidth = control.metadata.highlightLineWidth;
-        control.isHighlighted = control.metadata.isHighlighted;
-        control.isPointerBlocker = control.metadata.isPointerBlocker;
-        control.isHitTestVisible = control.metadata.isHitTestVisible;
-        control.isReadOnly = control.metadata.isReadOnly;
-        control.metadata = control.metadata.metadata;
+        delete control.metadata.guiEditor;
+        delete control.metadata.editorUniqueId;
     }
     dispose() {
         this.props.globalState.hostDocument.removeEventListener("keyup", this.keyEvent);
         this.props.globalState.hostDocument.removeEventListener("keydown", this.keyEvent);
         this.props.globalState.hostDocument.defaultView.removeEventListener("blur", this.blurEvent);
-        if (this.props.globalState.liveGuiTexture) {
-            this.props.globalState.liveGuiTexture.onEndRenderObservable.remove(this._liveRenderObserver);
-            this.props.globalState.guiTexture.onBeginRenderObservable.remove(this._guiRenderObserver);
-            this.props.globalState.guiTexture.getDescendants().forEach((control) => {
-                this.removeEditorBehavior(control);
-                this.props.globalState.guiTexture.removeControl(control);
-                if (control.parent === this._trueRootContainer) {
-                    control.parent = this.props.globalState.liveGuiTexture.rootContainer;
-                }
-                control._host = this.props.globalState.liveGuiTexture;
-            });
-            this.props.globalState.liveGuiTexture.markAsDirty();
-            this.props.globalState.guiTexture.getDescendants(true).forEach((control) => {
-                this.props.globalState.guiTexture.removeControl(control);
-            });
+        if (this._guiRenderObserver) {
+            this.props.globalState.guiTexture.onEndRenderObservable.remove(this._guiRenderObserver);
         }
         this._engine.dispose();
     }
@@ -42163,9 +42161,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     appendBlock(guiElement) {
-        if (this.props.globalState.liveGuiTexture) {
-            this.props.globalState.liveGuiTexture.addControl(guiElement);
-        }
         this.addEditorBehavior(guiElement);
         guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
         if (this.props.globalState.selectedControls.length != 0) {
@@ -42187,12 +42182,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                     if (dropLocationControl instanceof gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container && //dropping inside a container control
                         this.props.globalState.draggedControlDirection === _globalState__WEBPACK_IMPORTED_MODULE_2__.DragOverLocation.CENTER) {
                         draggedControlParent.removeControl(draggedControl);
-                        const liveGui = this.props.globalState.liveGuiTexture;
-                        if (liveGui) {
-                            if (liveGui.rootContainer.children.indexOf(draggedControl) !== -1) {
-                                liveGui.rootContainer.removeControl(draggedControl);
-                            }
-                        }
                         dropLocationControl.addControl(draggedControl);
                     }
                     else if (dropLocationControl.parent) {
@@ -42247,7 +42236,36 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             }
         }
         this.props.globalState.draggedControl = null;
-        this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
+    }
+    _canClone() {
+        return this.props.globalState.liveGuiTexture && this.props.globalState.guiTexture && this.trueRootContainer;
+    }
+    _copyEditorGUIToLiveGUI() {
+        if (this._canClone()) {
+            // Before cloning, save all of the live GUI controls that have a linked mesh
+            const controlToLinkedMesh = new Map();
+            const liveRoot = this.props.globalState.liveGuiTexture.rootContainer;
+            liveRoot.getDescendants().forEach((control) => {
+                if (control.linkedMesh) {
+                    controlToLinkedMesh.set(control.metadata.editorUniqueId, control.linkedMesh);
+                }
+            });
+            liveRoot.clearControls();
+            const updatedRootChildren = this.trueRootContainer.children.slice(0);
+            for (const child of updatedRootChildren) {
+                const clone = child.clone(this.props.globalState.liveGuiTexture);
+                liveRoot.addControl(clone);
+            }
+            // Relink all meshes
+            liveRoot.getDescendants().forEach((control) => {
+                if (control.metadata && controlToLinkedMesh.has(control.metadata.editorUniqueId)) {
+                    const linkedMesh = controlToLinkedMesh.get(control.metadata.editorUniqueId);
+                    if (linkedMesh) {
+                        control.linkWithMesh(linkedMesh);
+                    }
+                }
+            });
+        }
     }
     _reorderGrid(grid, draggedControl, dropLocationControl) {
         const cellInfo = _tools__WEBPACK_IMPORTED_MODULE_5__.Tools.GetCellInfo(grid, draggedControl);
@@ -42443,6 +42461,19 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this._processSelectionOnUp = false;
         }
     }
+    _copyLiveGUIToEditorGUI() {
+        if (this.props.globalState.liveGuiTexture && this.trueRootContainer) {
+            // Create special IDs that will allow us to know which cloned control corresponds to its original
+            this.props.globalState.liveGuiTexture.rootContainer.getDescendants().forEach((control) => {
+                control.metadata = { ...(control.metadata ?? {}), editorUniqueId: (0,core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.RandomGUID)() };
+            });
+            this.trueRootContainer.clearControls();
+            for (const control of this.props.globalState.liveGuiTexture.rootContainer.children) {
+                const cloned = control.clone(this.props.globalState.guiTexture);
+                this.appendBlock(cloned);
+            }
+        }
+    }
     createGUICanvas(embed) {
         // Get the canvas element from the DOM.
         const canvas = this._rootContainer.current;
@@ -42453,10 +42484,15 @@ 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;
-        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);
+        if (this.props.globalState.liveGuiTexture) {
+            this._guiSize.width = this.props.globalState.liveGuiTexture.getSize().width;
+            this._guiSize.height = this.props.globalState.liveGuiTexture.getSize().height;
+            canvas.width = this._guiSize.width;
+            canvas.height = this._guiSize.height;
+        }
+        else {
+            this._guiSize.width = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("GUIEditorWidth", 1024);
+            this._guiSize.height = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("GUIEditorHeight", 1024);
         }
         this._panAndZoomContainer = new gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container("panAndZoom");
         this._panAndZoomContainer.clipContent = false;
@@ -42474,7 +42510,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         adt.useInvalidateRectOptimization = false;
         this.trueRootContainer = adt.rootContainer;
         adt.onEndRenderObservable.add(() => this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers());
-        this.synchronizeLiveGUI();
+        this._copyLiveGUIToEditorGUI();
         new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.ArcRotateCamera("Camera", 0, 0, 0, core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector3.Zero(), this._scene);
         // This attaches the mouse controls
         this.addControls(this._scene);
@@ -42495,27 +42531,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             ev.object.markAsDirty(false);
             this.props.globalState.onWindowResizeObservable.notifyObservers();
         });
-        // Every time the original ADT re-renders, we must also re-render, so that layout information is computed correctly
-        // also, every time *we* re-render (due to a change in the GUI), we must re-render the original ADT
-        // to prevent an infinite loop, we flip a boolean flag
+        const throttledSynchronization = throttle(() => {
+            this._copyEditorGUIToLiveGUI();
+        }, 33);
         if (this.props.globalState.liveGuiTexture) {
-            this._guiRenderObserver = this.props.globalState.guiTexture.onBeginRenderObservable.add(() => {
-                if (this._liveGuiTextureRerender) {
-                    this._nextLiveGuiRender = Date.now() + this._liveGuiRerenderDelay;
-                }
-                this._liveGuiTextureRerender = true;
-            });
-            this._liveRenderObserver = this.props.globalState.liveGuiTexture.onEndRenderObservable.add(() => {
-                // return the GUI to the editor mode
-                this.props.globalState.guiTexture?.markAsDirty();
-                this._liveGuiTextureRerender = false;
-            });
-            this._scene.onAfterRenderObservable.add(() => {
-                if (this._nextLiveGuiRender > 0 && Date.now() > this._nextLiveGuiRender) {
-                    this._nextLiveGuiRender = -1;
-                    this.props.globalState.liveGuiTexture?.markAsDirty();
-                }
-            });
+            this._guiRenderObserver = this.props.globalState.guiTexture.onEndRenderObservable.add(throttledSynchronization);
         }
         this._engine.runRenderLoop(() => {
             this._scene.render();
@@ -42765,6 +42785,7 @@ class GlobalState {
         this.onPasteObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.isSaving = false;
         this.lockObject = new shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__.LockObject();
+        this.shiftKeyPressed = false;
         this.controlCamera = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("ControlCamera", true);
         const defaultBrightness = 204 / 255.0;
         const r = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("BackgroundColorR", defaultBrightness);
@@ -43213,7 +43234,7 @@ class GUINodeTools {
         }
     }
 }
-GUINodeTools.ImageControlDefaultUrl = "./imageControlDefault.jpg";
+GUINodeTools.ImageControlDefaultUrl = "https://assets.babylonjs.com/textures/Checker_albedo.png";
 
 
 /***/ }),