@preference-sl/pref-viewer 2.16.0-beta.1 → 2.16.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.16.0-beta.1",
+    "version": "2.16.0-beta.2",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-controller.js

@@ -167,6 +167,7 @@ export default class BabylonJSController {
     #prefViewer = undefined;
     #modelFirstPaintedEmitted = false;
     #modelFirstPaintedLoadToken = 0;
+    #pendingModelReplacementCleanup = null;
 
     // Babylon.js core objects
     #engine = null;
@@ -2590,7 +2591,20 @@ export default class BabylonJSController {
      * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
     #replaceContainer(container, newAssetContainer, { releaseEffects = true } = {}) {
+        const keepPreviousVisibleUntilPaint = container.state.name === "model" && container.assetContainer && container.state.isVisible;
+        if (this.#pendingModelReplacementCleanup && container.state.name === "model") {
+            this.#finalizePendingModelReplacement();
+        }
         if (container.assetContainer) {
+            if (keepPreviousVisibleUntilPaint) {
+                if (this.#pendingModelReplacementCleanup) {
+                    this.#finalizePendingModelReplacement();
+                }
+                const oldAssetContainer = container.assetContainer;
+                container.assetContainer = newAssetContainer;
+                this.#pendingModelReplacementCleanup = { container, oldAssetContainer, releaseEffects };
+                return true;
+            }
             this.#removeContainer(container, false);
             container.assetContainer.dispose();
             container.assetContainer = null;
@@ -2613,6 +2627,63 @@ export default class BabylonJSController {
         return this.#addContainer(container, false);
     }
 
+    /**
+     * Finalizes a deferred model replacement by disposing the previously visible model container.
+     * @private
+     * @returns {void}
+     */
+    #finalizePendingModelReplacement() {
+        if (!this.#pendingModelReplacementCleanup) {
+            return;
+        }
+        const { container, oldAssetContainer } = this.#pendingModelReplacementCleanup;
+        this.#pendingModelReplacementCleanup = null;
+        if (!oldAssetContainer) {
+            return;
+        }
+        const stagedAssetContainer = container?.assetContainer ?? null;
+        if (stagedAssetContainer) {
+            try {
+                stagedAssetContainer.meshes?.forEach((mesh) => {
+                    mesh.visibility = 0;
+                });
+            } catch {
+                // ignore
+            }
+            try {
+                container.state.visible = false;
+                this.#addContainer(container, false);
+            } catch {
+                // ignore
+            }
+        }
+        try {
+            oldAssetContainer.removeAllFromScene();
+        } catch {
+            // ignore
+        }
+        try {
+            oldAssetContainer.dispose();
+        } catch {
+            // ignore
+        }
+        if (stagedAssetContainer) {
+            try {
+                stagedAssetContainer.meshes?.forEach((mesh) => {
+                    mesh.visibility = 1;
+                });
+                this.#setVisibilityOfWallAndFloorInModel();
+            } catch {
+                // ignore
+            }
+        }
+        this.#requestRender({
+            frames: 3,
+            continuousMs: this.#config.render.interactionMs,
+            force: true,
+        });
+    }
+
     /**
      * Stops every animation group on the provided asset container to guarantee new loads start from a clean state.
      * @private
@@ -3450,6 +3521,7 @@ export default class BabylonJSController {
         this.#disablingPromises.general = (async () => {
             this.#disableInteraction();
             this.#disposeAnimationController();
+            this.#finalizePendingModelReplacement();
             this.#disposeGLTFResolver();
             try {
                 await this.#disposeXRExperience();
@@ -3837,6 +3909,7 @@ export default class BabylonJSController {
                             tAfterMerge: Math.round(tAfterMerge),
                             tAfterPaint: Math.round(performance.now()),
                         });
+                        this.#finalizePendingModelReplacement();
                     }
                 })();
             }