@inweb/viewer-visualize 25.8.20 → 25.8.22

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

@@ -11,7 +11,7 @@ export declare class VisualizeMarkup implements IMarkup {
     lineWidth: number;
     lineType: "solid";
     fontSize: number;
-    initialize(canvas: HTMLCanvasElement, canvasEvents: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
+    initialize(container: HTMLElement, containerEvents: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
     dispose(): void;
     syncOverlay(): void;
     clearOverlay(): void;

package/lib/Viewer/Viewer.d.ts

@@ -31,9 +31,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     _abortControllerForReferences: AbortController | undefined;
     client: Client | undefined;
     /**
-     * @param client - The `Client` instance that provides access to a Open Cloud Server. Do not
-     *   specify `Client` if you need a standalone viewer instance to view `VSFX` files from the
-     *   web or from local computer.
+     * @param client - The `Client` instance that is used to load model reference files from the
+     *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
+     *   view `VSFX` files from the web or from local computer.
      * @param params - An object containing viewer configuration parameters.
      * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
      *   library instance, or specify `undefined` or blank to use the default URL defined by
@@ -251,9 +251,12 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     applyModelTransformMatrix(model: Model | Assembly): void;
     applySceneGraphSettings(options?: IOptions): void;
     /**
-     * Loads a model/file/assembly into the viewer.
+     * Loads a file from Open Cloud Server into the viewer.
      *
-     * This method requires a {@link Client} instance to work. For standalone viewer instance use
+     * The file geometry data on the server must be converted to `VSFX` format.
+     *
+     * This method requires a `Client` instance to be specified when creating the viewer to load
+     * model reference files from the Open Cloud Server. For a standalone viewer instance use
      * {@link openVsfFile | openVsfFile()} or {@link openVsfxFile | openVsfxFile()}.
      *
      * Fires:
@@ -266,9 +269,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * - {@link GeometryEndEvent | geometryend}
      * - {@link GeometryErrorEvent | geometryerror}
      *
-     * @param file - File or Assembly or Model instance to load. If a `File` instance with
-     *   multiple models is specified, the default model will be loaded. If there is no default
-     *   model, first availiable model will be loaded.
+     * @param file - File, assembly or specific model to load. If a `File` instance with multiple
+     *   models is specified, the default model will be loaded. If there is no default model,
+     *   first availiable model will be loaded.
      */
     open(file: File | Assembly | Model): Promise<this>;
     /**
@@ -324,21 +327,21 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *
      * - {@link ChangeMarkupColorEvent | changemarkupcolor}
      *
-     * @param r - `Red` part of color.
-     * @param g - `Green` part of color.
-     * @param b - `Blue` part of color.
+     * @param r - The `red` component of the color, as a number between 0 and 255.
+     * @param g - The `green` component of the color, as a number between 0 and 255.
+     * @param b - The `blue` component of the color, as a number between 0 and 255.
      */
     setMarkupColor(r?: number, g?: number, b?: number): void;
     /**
      * Colors all markup objects with the specified color.
      *
-     * @param r - `Red` part of color.
-     * @param g - `Green` part of color.
-     * @param b - `Blue` part of color.
+     * @param r - The `red` component of the color, as a number between 0 and 255.
+     * @param g - The `green` component of the color, as a number between 0 and 255.
+     * @param b - The `blue` component of the color, as a number between 0 and 255.
      */
     colorizeAllMarkup(r?: number, g?: number, b?: number): void;
     /**
-     * Colors selected markup objects with the specified color.
+     * Colors the selected markup objects with the specified color.
      *
      * @param r - `Red` part of color.
      * @param g - `Green` part of color.
@@ -352,7 +355,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     /**
      * Sets the viewer state to the specified viewpoint.
      *
-     * To get a list of available model viewpoints, use the `File.getViewpoints()`.
+     * To get a list of available viewpoints from the server for a specific file, use the
+     * `File.getViewpoints()`.
      *
      * @param viewpoint - Viewpoint data.
      */
@@ -360,7 +364,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     /**
      * Saves the viewer state at the viewpoint.
      *
-     * To save a viewpoint to a model on the server, use the `File.saveViewpoint()`.
+     * To save a viewpoint to the server for a specific file, use the `File.saveViewpoint()`.
      */
     createViewpoint(): IViewpoint;
     private getPoint3dFromArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.8.20",
+  "version": "25.8.22",
   "description": "3D viewer powered by VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.8.20",
-    "@inweb/eventemitter2": "~25.8.20",
-    "@inweb/markup": "~25.8.20",
-    "@inweb/viewer-core": "~25.8.20"
+    "@inweb/client": "~25.8.22",
+    "@inweb/eventemitter2": "~25.8.22",
+    "@inweb/markup": "~25.8.22",
+    "@inweb/viewer-core": "~25.8.22"
   },
   "visualizeJS": "https://opencloud.azureedge.net/libs/visualizejs/master/Visualize.js"
 }

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

@@ -14,8 +14,8 @@ export class VisualizeMarkup implements IMarkup {
   public fontSize = 34;
 
   initialize(
-    canvas: HTMLCanvasElement,
-    canvasEvents: string[],
+    container: HTMLElement,
+    containerEvents: string[],
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void {

package/src/Viewer/Viewer.ts

@@ -98,9 +98,9 @@ export class Viewer
   public client: Client | undefined;
 
   /**
-   * @param client - The `Client` instance that provides access to a Open Cloud Server. Do not
-   *   specify `Client` if you need a standalone viewer instance to view `VSFX` files from the
-   *   web or from local computer.
+   * @param client - The `Client` instance that is used to load model reference files from the
+   *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
+   *   view `VSFX` files from the web or from local computer.
    * @param params - An object containing viewer configuration parameters.
    * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
    *   library instance, or specify `undefined` or blank to use the default URL defined by
@@ -331,6 +331,9 @@ export class Viewer
     if (!this.visualizeJs) return this;
 
     const { clientWidth, clientHeight } = this.canvas;
+
+    if (!clientWidth || !clientHeight) return this; // <- invisible viewer, or viewer with parent removed
+
     this.canvas.width = clientWidth * window.devicePixelRatio;
     this.canvas.height = clientHeight * window.devicePixelRatio;
 
@@ -899,9 +902,12 @@ export class Viewer
   }
 
   /**
-   * Loads a model/file/assembly into the viewer.
+   * Loads a file from Open Cloud Server into the viewer.
+   *
+   * The file geometry data on the server must be converted to `VSFX` format.
    *
-   * This method requires a {@link Client} instance to work. For standalone viewer instance use
+   * This method requires a `Client` instance to be specified when creating the viewer to load
+   * model reference files from the Open Cloud Server. For a standalone viewer instance use
    * {@link openVsfFile | openVsfFile()} or {@link openVsfxFile | openVsfxFile()}.
    *
    * Fires:
@@ -914,9 +920,9 @@ export class Viewer
    * - {@link GeometryEndEvent | geometryend}
    * - {@link GeometryErrorEvent | geometryerror}
    *
-   * @param file - File or Assembly or Model instance to load. If a `File` instance with
-   *   multiple models is specified, the default model will be loaded. If there is no default
-   *   model, first availiable model will be loaded.
+   * @param file - File, assembly or specific model to load. If a `File` instance with multiple
+   *   models is specified, the default model will be loaded. If there is no default model,
+   *   first availiable model will be loaded.
    */
   async open(file: File | Assembly | Model): Promise<this> {
     if (!this.visualizeJs) return this;
@@ -1101,9 +1107,9 @@ export class Viewer
    *
    * - {@link ChangeMarkupColorEvent | changemarkupcolor}
    *
-   * @param r - `Red` part of color.
-   * @param g - `Green` part of color.
-   * @param b - `Blue` part of color.
+   * @param r - The `red` component of the color, as a number between 0 and 255.
+   * @param g - The `green` component of the color, as a number between 0 and 255.
+   * @param b - The `blue` component of the color, as a number between 0 and 255.
    */
   setMarkupColor(r = 255, g = 0, b = 0): void {
     this._markup.setMarkupColor(r, g, b);
@@ -1114,16 +1120,16 @@ export class Viewer
   /**
    * Colors all markup objects with the specified color.
    *
-   * @param r - `Red` part of color.
-   * @param g - `Green` part of color.
-   * @param b - `Blue` part of color.
+   * @param r - The `red` component of the color, as a number between 0 and 255.
+   * @param g - The `green` component of the color, as a number between 0 and 255.
+   * @param b - The `blue` component of the color, as a number between 0 and 255.
    */
   colorizeAllMarkup(r = 255, g = 0, b = 0): void {
     this._markup.colorizeAllMarkup(r, g, b);
   }
 
   /**
-   * Colors selected markup objects with the specified color.
+   * Colors the selected markup objects with the specified color.
    *
    * @param r - `Red` part of color.
    * @param g - `Green` part of color.
@@ -1159,7 +1165,8 @@ export class Viewer
   /**
    * Sets the viewer state to the specified viewpoint.
    *
-   * To get a list of available model viewpoints, use the `File.getViewpoints()`.
+   * To get a list of available viewpoints from the server for a specific file, use the
+   * `File.getViewpoints()`.
    *
    * @param viewpoint - Viewpoint data.
    */
@@ -1172,7 +1179,7 @@ export class Viewer
   /**
    * Saves the viewer state at the viewpoint.
    *
-   * To save a viewpoint to a model on the server, use the `File.saveViewpoint()`.
+   * To save a viewpoint to the server for a specific file, use the `File.saveViewpoint()`.
    */
   createViewpoint(): IViewpoint {
     const vp = this._markup.getViewpoint();