@inweb/viewer-visualize 25.8.20 → 25.8.22

package/README.md

@@ -1,8 +1,8 @@
 # Viewer.visualize
 
-`Viewer.visualize` is JavaScript library implementating 3D viewer powered by [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs) for in-browser visualization of 3D CAD and BIM data files.
+`Viewer.visualize` is JavaScript library implementating 3D viewer powered by [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs) for in-browser visualization of CAD and BIM data files.
 
-With `Viewer.visualize` you can:
+Core capabilities:
 
 - Visualize files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), on the web, or on your local computer.
 - Add user interaction with scenes.
@@ -11,8 +11,6 @@ With `Viewer.visualize` you can:
 
 This library is a part of [CDE SDK](https://www.opendesign.com/products/cde) by [Open Design Alliance](https://opendesign.com).
 
-> `Viewer.visualize` uses `VSFX` file format as internal geometry data format. `VSFX` is a [Visualize SDK](https://cloud.opendesign.com/docs/index.html#/visualizejs) file format with support for streaming and partial viewing.
-
 ## Installation
 
 ### CDN or static hosting

package/dist/viewer-visualize.js

@@ -12208,24 +12208,24 @@
     var Konva = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
     class MarkupColor {
-        get HexColor() {
-            return "#" + this._hex;
+        constructor(r, g, b) {
+            this.setColor(r, g, b);
         }
-        get RGB() {
+        asHex() {
+            return "#" + this.HEX;
+        }
+        asRGB() {
             return {
                 r: this.R,
                 g: this.G,
                 b: this.B
             };
         }
-        constructor(r, g, b) {
-            this.setColor(r, g, b);
-        }
         setColor(r, g, b) {
             this.R = r;
             this.G = g;
             this.B = b;
-            this._hex = this.rgbToHex(r, g, b);
+            this.HEX = this.rgbToHex(r, g, b);
         }
         rgbToHex(r, g, b) {
             const valueToHex = c => {
@@ -13190,7 +13190,7 @@
 
     class KonvaMarkup {
         constructor() {
-            this._pointerEvents = [];
+            this._containerEvents = [];
             this._markupIsActive = false;
             this._markupColor = new MarkupColor(255, 0, 0);
             this.lineWidth = 4;
@@ -13222,12 +13222,12 @@
                 if (this._viewer) this._viewer.emit(event);
             };
         }
-        initialize(container, pointerEvents, viewer, worldTransformer) {
+        initialize(container, containerEvents, viewer, worldTransformer) {
             if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
             this._viewer = viewer;
             this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
             this._container = container;
-            this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
+            this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
             this._markupContainer.style.position = "absolute";
@@ -13241,7 +13241,7 @@
             this._markupColor.setColor(255, 0, 0);
             this.initializeKonva();
             if (this._viewer) {
-                this._pointerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
+                this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
                 this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
                 this._viewer.addEventListener("pan", this.pan);
             }
@@ -13251,7 +13251,7 @@
             if (this._viewer) {
                 this._viewer.removeEventListener("pan", this.pan);
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-                this._pointerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
+                this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
             }
             this.destroyKonva();
             (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -13271,20 +13271,20 @@
             this.getObjects().forEach((obj => obj.delete()));
         }
         getMarkupColor() {
-            return this._markupColor.RGB;
+            return this._markupColor.asRGB();
         }
         setMarkupColor(r, g, b) {
             this._markupColor.setColor(r, g, b);
         }
         colorizeAllMarkup(r, g, b) {
-            const hexColor = new MarkupColor(r, g, b).HexColor;
+            const hexColor = new MarkupColor(r, g, b).asHex();
             this.getObjects().filter((obj => {
                 var _a;
                 return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
             }));
         }
         colorizeSelectedMarkups(r, g, b) {
-            const hexColor = new MarkupColor(r, g, b).HexColor;
+            const hexColor = new MarkupColor(r, g, b).asHex();
             this.getSelectedObjects().filter((obj => {
                 var _a;
                 return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
@@ -13808,7 +13808,7 @@
                 points: points,
                 type: type || this.lineType,
                 width: width || this.lineWidth,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaLine);
@@ -13825,7 +13825,7 @@
                 this._textInputRef.style.top = inputY + "px";
                 this._textInputRef.style.left = inputX + "px";
                 this._textInputRef.style.fontSize = `${this.fontSize}px`;
-                this._textInputRef.style.color = `${this._markupColor.HexColor}`;
+                this._textInputRef.style.color = `${this._markupColor.asHex()}`;
                 this._textInputRef.style.fontFamily = "Calibri";
                 this._textInputRef.onkeydown = event => {
                     if (event.key === "Enter" && !event.shiftKey) {
@@ -13915,7 +13915,7 @@
                 text: text,
                 rotation: angle,
                 fontSize: fontSize || this.fontSize,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaText);
@@ -13928,7 +13928,7 @@
                 width: width,
                 height: height,
                 lineWidth: lineWidth || this.lineWidth,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaRectangle);
@@ -13940,7 +13940,7 @@
                 position: position,
                 radius: radius,
                 lineWidth: lineWidth,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaEllipse);
@@ -13951,7 +13951,7 @@
             const konvaArrow = new KonvaArrow({
                 start: start,
                 end: end,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaArrow);
@@ -13963,7 +13963,7 @@
                 position: position,
                 width: width,
                 height: height,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 lineWidth: lineWidth || this.lineWidth,
                 id: id
             });
@@ -16467,7 +16467,7 @@
             this.lineWidth = 4;
             this.fontSize = 34;
         }
-        initialize(canvas, canvasEvents, viewer, worldTransformer) {
+        initialize(container, containerEvents, viewer, worldTransformer) {
             this._viewer = viewer;
             this._viewer.registerDragger("Line", OdaLineDragger);
             this._viewer.registerDragger("Text", OdaTextDragger);
@@ -16660,9 +16660,9 @@
      */
     class Viewer extends EventEmitter2 {
         /**
-         * @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
@@ -16854,6 +16854,8 @@
             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;
             const visViewer = this.visualizeJs.getViewer();
@@ -17332,9 +17334,12 @@
             this.update();
         }
         /**
-         * 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:
@@ -17347,9 +17352,9 @@
          * - {@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) {
             if (!this.visualizeJs)
@@ -17502,9 +17507,9 @@
          *
          * - {@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) {
             this._markup.setMarkupColor(r, g, b);
@@ -17514,15 +17519,15 @@
         /**
          * 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) {
             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.
@@ -17552,7 +17557,8 @@
         /**
          * 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.
          */
@@ -17564,7 +17570,7 @@
         /**
          * 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() {
             const vp = this._markup.getViewpoint();