@inweb/viewer-visualize 27.1.4 → 27.1.5

package/dist/viewer-visualize.js

@@ -3442,22 +3442,7 @@
         }
     }
 
-    class RenderLoopComponent {
-        constructor(viewer) {
-            this.animate = (time) => {
-                this.requestId = requestAnimationFrame(this.animate);
-                this.viewer.render(time);
-                this.viewer.emitEvent({ type: "animate", time });
-            };
-            this.viewer = viewer;
-            this.requestId = requestAnimationFrame(this.animate);
-        }
-        dispose() {
-            cancelAnimationFrame(this.requestId);
-        }
-    }
-
-    class ResizeCanvasComponent {
+    class CanvasResizeComponent {
         constructor(viewer) {
             this.resizeViewer = (entries) => {
                 const { width, height } = entries[0].contentRect;
@@ -3474,6 +3459,46 @@
         }
     }
 
+    class CanvasRemoveComponent {
+        constructor(viewer) {
+            this.cleanupViewer = (mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
+                        for (const node of mutation.removedNodes) {
+                            if (node === this.viewer.canvas || node.contains(this.viewer.canvas)) {
+                                this.viewer.emitEvent({ type: "canvasremoved" });
+                                this.viewer.dispose();
+                                return;
+                            }
+                        }
+                    }
+                }
+            };
+            this.viewer = viewer;
+            this.mutationObserver = new MutationObserver(this.cleanupViewer);
+            this.mutationObserver.observe(document, { childList: true, subtree: true });
+        }
+        dispose() {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+
+    class RenderLoopComponent {
+        constructor(viewer) {
+            this.animate = (time) => {
+                this.requestId = requestAnimationFrame(this.animate);
+                this.viewer.render(time);
+                this.viewer.emitEvent({ type: "animate", time });
+            };
+            this.viewer = viewer;
+            this.requestId = requestAnimationFrame(this.animate);
+        }
+        dispose() {
+            cancelAnimationFrame(this.requestId);
+        }
+    }
+
     class ZoomWheelComponent {
         constructor(viewer) {
             this.viewer = viewer;
@@ -3728,7 +3753,8 @@
     const components = componentsRegistry("visualizejs");
     components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
     components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
-    components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
+    components.registerComponent("CanvasResizeComponent", (viewer) => new CanvasResizeComponent(viewer));
+    components.registerComponent("CanvasRemoveComponent", (viewer) => new CanvasRemoveComponent(viewer));
     components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
     components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));
     components.registerComponent("GestureManagerComponent", (viewer) => new GestureManagerComponent(viewer));