@inweb/viewer-visualize 27.1.3 → 27.1.5

package/dist/viewer-visualize.js

@@ -251,6 +251,8 @@
             rulerUnit: "Default",
             rulerPrecision: 2,
             cameraMode: "perspective",
+            snapshotMimeType: "image/jpeg",
+            snapshotQuality: 0.25,
         };
     }
     class Options {
@@ -2956,11 +2958,16 @@
         viewer.clearSlices();
     }
 
-    function createPreview(viewer, type = "image/jpeg", encoderOptions = 0.25) {
-        var _a;
+    function getSnapshot(viewer, type, quality) {
+        var _a, _b, _c;
         if (!viewer.visualizeJs)
             return "";
-        return ((_a = viewer.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL(type, encoderOptions)) || "";
+        const mimeType = (_a = type !== null && type !== void 0 ? type : viewer.options.snapshotMimeType) !== null && _a !== void 0 ? _a : "image/jpeg";
+        const imageQuality = (_b = quality !== null && quality !== void 0 ? quality : viewer.options.snapshotQuality) !== null && _b !== void 0 ? _b : 0.25;
+        if (viewer.markup) {
+            return viewer.markup.getSnapshot(mimeType, imageQuality);
+        }
+        return ((_c = viewer.canvas) === null || _c === void 0 ? void 0 : _c.toDataURL(mimeType, imageQuality)) || "";
     }
 
     function explode(viewer, index = 0) {
@@ -3265,7 +3272,7 @@
     commands.registerCommand("clearMarkup", clearMarkup);
     commands.registerCommand("clearSelected", clearSelected);
     commands.registerCommand("clearSlices", clearSlices);
-    commands.registerCommand("createPreview", createPreview);
+    commands.registerCommand("getSnapshot", getSnapshot);
     commands.registerCommand("explode", explode);
     commands.registerCommand("collect", collect);
     commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
@@ -3299,6 +3306,7 @@
     commands.registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));
     commands.registerCommandAlias("clearMarkup", "clearOverlay");
     commands.registerCommandAlias("clearSelected", "unselect");
+    commands.registerCommandAlias("getSnapshot", "createPreview");
     commands.registerCommandAlias("zoomToExtents", "zoomExtents");
 
     class CameraComponent {
@@ -3434,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;
@@ -3466,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;
@@ -3720,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));
@@ -17128,10 +17162,22 @@ js: import "konva/skia-backend";
             viewpoint.ellipses = this.getMarkupEllipses();
             viewpoint.images = this.getMarkupImages();
             viewpoint.rectangles = this.getMarkupRectangles();
-            viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
             viewpoint.custom_fields.markup_color = this.getMarkupColor();
             return viewpoint;
         }
+        getSnapshot(type = "image/jpeg", quality = 0.25) {
+            this.clearSelected();
+            const tempCanvas = document.createElement("canvas");
+            if (this._konvaStage) {
+                tempCanvas.width = this._konvaStage.width();
+                tempCanvas.height = this._konvaStage.height();
+                const ctx = tempCanvas.getContext("2d");
+                if (this._container instanceof HTMLCanvasElement)
+                    ctx.drawImage(this._container, 0, 0);
+                ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+            }
+            return tempCanvas.toDataURL(type, quality);
+        }
         enableEditMode(mode) {
             if (!mode || !MarkupMode2Konva[mode]) {
                 this.clearSelected();
@@ -17568,19 +17614,6 @@ js: import "konva/skia-backend";
             });
             return clouds;
         }
-        combineMarkupWithDrawing() {
-            this.clearSelected();
-            const tempCanvas = document.createElement("canvas");
-            if (this._konvaStage) {
-                tempCanvas.width = this._konvaStage.width();
-                tempCanvas.height = this._konvaStage.height();
-                const ctx = tempCanvas.getContext("2d");
-                if (this._container instanceof HTMLCanvasElement)
-                    ctx.drawImage(this._container, 0, 0);
-                ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
-            }
-            return tempCanvas.toDataURL("image/jpeg", 0.25);
-        }
         addLine(linePoints, color, type, width, id) {
             if (!linePoints || linePoints.length === 0)
                 return;
@@ -18008,7 +18041,6 @@ js: import "konva/skia-backend";
             function getLogicalPoint3dFromArray(array) {
                 return { x: array[0], y: array[1], z: array[2] };
             }
-            const visLib = this._viewer.visLib();
             const visViewer = this._viewer.visViewer();
             if (!viewpoint)
                 viewpoint = { custom_fields: {} };
@@ -18053,10 +18085,16 @@ js: import "konva/skia-backend";
                 entityPtr.delete();
             }
             itr.delete();
-            viewpoint.snapshot = { data: visLib.canvas.toDataURL("image/jpeg", 0.25) };
             viewpoint.custom_fields.markup_color = this.getMarkupColor();
             return viewpoint;
         }
+        getSnapshot(type = "image/jpeg", quality = 0.25) {
+            var _a;
+            if (!this._viewer.visualizeJs)
+                return "";
+            const visLib = this._viewer.visLib();
+            return ((_a = visLib.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL(type, quality)) || "";
+        }
         enableEditMode(mode) {
             return this;
         }
@@ -18773,11 +18811,15 @@ js: import "konva/skia-backend";
             viewpoint.clipping_planes = getClippingPlanes();
             viewpoint.selection = getSelection();
             viewpoint.description = new Date().toDateString();
+            viewpoint.snapshot = { data: this.getSnapshot() };
             this._markup.getViewpoint(viewpoint);
             viewpoint.custom_fields.selection2 = getSelection2();
             this.emitEvent({ type: "createviewpoint", data: viewpoint });
             return viewpoint;
         }
+        getSnapshot(type, quality) {
+            return this.executeCommand("getSnapshot", type, quality);
+        }
         screenToWorld(position) {
             if (!this.visualizeJs)
                 return { x: position.x, y: position.y, z: 0 };