@inweb/viewer-visualize 25.8.19 → 25.8.21

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);
+        }
+        asHex() {
+            return "#" + this.HEX;
         }
-        get RGB() {
+        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 => {
@@ -12268,7 +12268,14 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.points) return;
+            if (!params) params = {};
+            if (!params.points) params.points = [ {
+                x: 50,
+                y: 50
+            }, {
+                x: 100,
+                y: 100
+            } ];
             const konvaPoints = [];
             params.points.forEach((point => konvaPoints.push(point.x, point.y)));
             this._ref = new Konva.Line({
@@ -12370,7 +12377,12 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.position || !params.text) return;
+            if (!params) params = {};
+            if (!params.position) params.position = {
+                x: 100,
+                y: 100
+            };
+            if (!params.text) params.text = "default";
             this._ref = new Konva.Text({
                 x: params.position.x,
                 y: params.position.y,
@@ -12472,7 +12484,11 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.position) return;
+            if (!params) params = {};
+            if (!params.position) params.position = {
+                x: 100,
+                y: 100
+            };
             this._ref = new Konva.Rect({
                 stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
                 strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
@@ -12582,7 +12598,15 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.position || !params.radius) return;
+            if (!params) params = {};
+            if (!params.position) params.position = {
+                x: 100,
+                y: 100
+            };
+            if (!params.radius) params.radius = {
+                x: 25,
+                y: 25
+            };
             this._ref = new Konva.Ellipse({
                 stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
                 strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
@@ -12704,7 +12728,15 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.start || !params.end) return;
+            if (!params) params = {};
+            if (!params.start) params.start = {
+                x: 50,
+                y: 50
+            };
+            if (!params.end) params.end = {
+                x: 100,
+                y: 100
+            };
             this._ref = new Konva.Arrow({
                 stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
                 fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
@@ -12801,22 +12833,24 @@
             var _a, _b;
             this._ratio = 1;
             this.EPSILON = 1e-5;
+            this.BASE64_NOT_FOUND = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+            this.BASE64_HEADER_START = "data:image/";
             if (ref) {
+                if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
+                if (ref.height() <= this.EPSILON) ref.height(32);
+                if (ref.width() <= this.EPSILON) ref.width(32);
                 this._ref = ref;
                 this._canvasImage = ref.image();
                 this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
                 return;
             }
-            if (!params || !params.position || !params.src) return;
+            if (!params) params = {};
+            if (!params.position) params.position = {
+                x: 50,
+                y: 50
+            };
+            if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
             this._canvasImage = new Image;
-            this._ref = new Konva.Image({
-                x: params.position.x,
-                y: params.position.y,
-                image: this._canvasImage,
-                width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
-                height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
-                draggable: true
-            });
             this._canvasImage.onload = () => {
                 this._ref.image(this._canvasImage);
                 if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
@@ -12836,7 +12870,19 @@
                     }
                 }
             };
+            this._canvasImage.onerror = () => {
+                this._canvasImage.onerror = function() {};
+                this._canvasImage.src = this.BASE64_NOT_FOUND;
+            };
             this._canvasImage.src = params.src;
+            this._ref = new Konva.Image({
+                x: params.position.x,
+                y: params.position.y,
+                image: this._canvasImage,
+                width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+                height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+                draggable: true
+            });
             this._ref.on("transform", (e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
@@ -12935,7 +12981,11 @@
                 this._ref = ref;
                 return;
             }
-            if (!params || !params.position) return;
+            if (!params) params = {};
+            if (!params.position) params.position = {
+                x: 100,
+                y: 100
+            };
             const arcRadius = 16;
             this._ref = new Konva.Shape({
                 x: params.position.x,
@@ -13140,7 +13190,7 @@
 
     class KonvaMarkup {
         constructor() {
-            this._pointerEvents = [];
+            this._containerEvents = [];
             this._markupIsActive = false;
             this._markupColor = new MarkupColor(255, 0, 0);
             this.lineWidth = 4;
@@ -13172,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";
@@ -13191,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);
             }
@@ -13201,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();
@@ -13221,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);
@@ -13758,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);
@@ -13775,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) {
@@ -13865,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);
@@ -13878,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);
@@ -13890,7 +13940,7 @@
                 position: position,
                 radius: radius,
                 lineWidth: lineWidth,
-                color: color || this._markupColor.HexColor,
+                color: color || this._markupColor.asHex(),
                 id: id
             });
             this.addObject(konvaEllipse);
@@ -13901,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);
@@ -13913,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
             });
@@ -16417,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);
@@ -16610,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
@@ -17282,9 +17332,12 @@
             this.update();
         }
         /**
-         * 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:
@@ -17297,9 +17350,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)
@@ -17452,9 +17505,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);
@@ -17464,15 +17517,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.
@@ -17502,7 +17555,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.
          */
@@ -17514,7 +17568,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();