@inweb/viewer-visualize 27.1.3 → 27.1.5

package/lib/Viewer/Commands/GetSnapshot.d.ts

@@ -0,0 +1,2 @@
+import { Viewer } from "../Viewer";
+export declare function getSnapshot(viewer: Viewer, type?: string, quality?: number): string;

package/lib/Viewer/Components/CanvasRemoveComponent.d.ts

@@ -0,0 +1,9 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class CanvasRemoveComponent implements IComponent {
+    protected viewer: Viewer;
+    protected mutationObserver: MutationObserver;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    cleanupViewer: (mutations: MutationRecord[]) => void;
+}

package/lib/Viewer/Components/{ResizeCanvasComponent.d.ts → CanvasResizeComponent.d.ts}

@@ -1,6 +1,6 @@
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
-export declare class ResizeCanvasComponent implements IComponent {
+export declare class CanvasResizeComponent implements IComponent {
     protected viewer: Viewer;
     protected resizeObserver: ResizeObserver;
     constructor(viewer: Viewer);

package/lib/Viewer/Markup/Visualize/VisualizeMarkup.d.ts

@@ -25,6 +25,7 @@ export declare class VisualizeMarkup implements IMarkup {
     colorizeSelectedMarkups(r?: number, g?: number, b?: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(viewpoint: IViewpoint): IViewpoint;
+    getSnapshot(type?: string, quality?: number): string;
     enableEditMode(mode: MarkupMode | false): this;
     createObject(type: string, params: any): IMarkupObject;
     getObjects(): IMarkupObject[];

package/lib/Viewer/Viewer.d.ts

@@ -110,7 +110,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *
      * @param canvas -
      *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement} for
-     *   `VisualizeJS`.
+     *   `VisualizeJS`. The canvas element must have an `id` attribute, otherwise an exception will be
+     *   thrown.
      * @param onProgress - A callback function that handles events measuring progress of loading of the
      *   `VisualizeJS` library.
      */
@@ -251,6 +252,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     getComponent(name: string): IComponent;
     drawViewpoint(viewpoint: IViewpoint): void;
     createViewpoint(): IViewpoint;
+    getSnapshot(type?: string, quality?: number): string;
     screenToWorld(position: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "27.1.3",
+  "version": "27.1.5",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.1.3",
-    "@inweb/eventemitter2": "~27.1.3",
-    "@inweb/markup": "~27.1.3",
-    "@inweb/viewer-core": "~27.1.3"
+    "@inweb/client": "~27.1.5",
+    "@inweb/eventemitter2": "~27.1.5",
+    "@inweb/markup": "~27.1.5",
+    "@inweb/viewer-core": "~27.1.5"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Commands/{CreatePreview.ts → GetSnapshot.ts}

@@ -23,8 +23,15 @@
 
 import { Viewer } from "../Viewer";
 
-export function createPreview(viewer: Viewer, type = "image/jpeg", encoderOptions = 0.25): string {
+export function getSnapshot(viewer: Viewer, type?: string, quality?: number): string {
   if (!viewer.visualizeJs) return "";
 
-  return viewer.canvas?.toDataURL(type, encoderOptions) || "";
+  const mimeType = type ?? viewer.options.snapshotMimeType ?? "image/jpeg";
+  const imageQuality = quality ?? viewer.options.snapshotQuality ?? 0.25;
+
+  if (viewer.markup) {
+    return viewer.markup.getSnapshot(mimeType, imageQuality);
+  }
+
+  return viewer.canvas?.toDataURL(mimeType, imageQuality) || "";
 }

package/src/Viewer/Commands/index.ts

@@ -27,7 +27,7 @@ import { applyModelTransform } from "./ApplyModelTransform";
 import { clearMarkup } from "./ClearMarkup";
 import { clearSelected } from "./ClearSelected";
 import { clearSlices } from "./ClearSlices";
-import { createPreview } from "./CreatePreview";
+import { getSnapshot } from "./GetSnapshot";
 import { explode, collect } from "./Explode";
 import { getDefaultViewPositions } from "./GetDefaultViewPositions";
 import { getModels } from "./GetModels";
@@ -83,7 +83,7 @@ commands.registerCommand("applyModelTransform", applyModelTransform);
 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);
@@ -119,4 +119,5 @@ commands.registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer,
 
 commands.registerCommandAlias("clearMarkup", "clearOverlay");
 commands.registerCommandAlias("clearSelected", "unselect");
+commands.registerCommandAlias("getSnapshot", "createPreview");
 commands.registerCommandAlias("zoomToExtents", "zoomExtents");

package/src/Viewer/Components/CanvasRemoveComponent.ts

@@ -0,0 +1,55 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class CanvasRemoveComponent implements IComponent {
+  protected viewer: Viewer;
+  protected mutationObserver: MutationObserver;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.mutationObserver = new MutationObserver(this.cleanupViewer);
+    this.mutationObserver.observe(document, { childList: true, subtree: true });
+  }
+
+  dispose() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = undefined;
+  }
+
+  cleanupViewer = (mutations: MutationRecord[]) => {
+    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;
+          }
+        }
+      }
+    }
+  };
+}

package/src/Viewer/Components/{ResizeCanvasComponent.ts → CanvasResizeComponent.ts}

@@ -24,7 +24,7 @@
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-export class ResizeCanvasComponent implements IComponent {
+export class CanvasResizeComponent implements IComponent {
   protected viewer: Viewer;
   protected resizeObserver: ResizeObserver;
 

package/src/Viewer/Components/index.ts

@@ -25,8 +25,9 @@ import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 import { CameraComponent } from "./CameraComponent";
 import { InfoComponent } from "./InfoComponent";
+import { CanvasResizeComponent } from "./CanvasResizeComponent";
+import { CanvasRemoveComponent } from "./CanvasRemoveComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
-import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { ZoomWheelComponent } from "./ZoomWheelComponent";
 import { GestureManagerComponent } from "./GestureManagerComponent";
 import { ResetComponent } from "./ResetComponent";
@@ -76,7 +77,8 @@ export const components: IComponentsRegistry = 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));

package/src/Viewer/Markup/Visualize/VisualizeMarkup.ts

@@ -164,7 +164,6 @@ export class VisualizeMarkup implements IMarkup {
       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: {} };
@@ -219,12 +218,18 @@ export class VisualizeMarkup implements IMarkup {
     }
     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): string {
+    if (!this._viewer.visualizeJs) return "";
+
+    const visLib = this._viewer.visLib();
+    return visLib.canvas?.toDataURL(type, quality) || "";
+  }
+
   enableEditMode(mode: MarkupMode | false): this {
     return this;
   }

package/src/Viewer/Viewer.ts

@@ -226,7 +226,8 @@ export class Viewer
    *
    * @param canvas -
    *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement} for
-   *   `VisualizeJS`.
+   *   `VisualizeJS`. The canvas element must have an `id` attribute, otherwise an exception will be
+   *   thrown.
    * @param onProgress - A callback function that handles events measuring progress of loading of the
    *   `VisualizeJS` library.
    */
@@ -1195,6 +1196,8 @@ export class Viewer
     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();
@@ -1204,6 +1207,10 @@ export class Viewer
     return viewpoint;
   }
 
+  getSnapshot(type?: string, quality?: number): string {
+    return this.executeCommand("getSnapshot", type, quality);
+  }
+
   // IWorldTransform
 
   screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {

package/lib/Viewer/Commands/CreatePreview.d.ts

@@ -1,2 +0,0 @@
-import { Viewer } from "../Viewer";
-export declare function createPreview(viewer: Viewer, type?: string, encoderOptions?: number): string;