@babylonjs/gui-editor 5.38.0 → 5.39.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);
@@ -41163,7 +41163,6 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
                 const inNodeSpace = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.RttToLocalNodeSpace(node, inRTT.x, inRTT.y, undefined, this._storedValues);
                 this._dragLocalBounds(inNodeSpace);
                 this._updateNodeFromLocalBounds();
-                this.props.globalState.workbench._liveGuiTextureRerender = false;
                 this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
             }
             if (this.state.isRotating) {
@@ -41717,6 +41716,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 var ConstraintDirection;
@@ -41725,6 +41725,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 +41754,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);
@@ -42004,16 +42018,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 +42043,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 +42061,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 +42126,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 +42147,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 +42201,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 +42426,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 +42449,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 +42475,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 +42496,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();