@inweb/viewer-visualize 25.3.21 → 25.3.23

package/README.md

@@ -1,10 +1,10 @@
 # Viewer.visualize
 
-`Viewer.visualize` is JavaScript library powered by [Visualize](https://www.opendesign.com/products/visualize) for in-browser visualization of 3D CAD and BIM data in browser from `VSFX` files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), on the web, or on your local computer.
+`Viewer.visualize` is JavaScript library powered by [Visualize](https://www.opendesign.com/products/visualize) for in-browser visualization of 3D CAD and BIM data files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), on the web, or on your local computer.
 
-This library enables you to integrate advanced visualization capabilities into your web applications, including user interaction with scenes and objects, markups, and collaboration using the [inWEB Open Cloud](https://www.opendesign.com/products/open-cloud) platform.
+This library enables you to integrate advanced visualization capabilities into your web applications, including user interaction with scenes and markup creation.
 
-> `VSFX` is an internal [Visualize SDK](https://cloud.opendesign.com/docs/index.html#/visualizejs) file format with support for streaming and partial viewing.
+> `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
 

package/dist/viewer-visualize.js

@@ -811,20 +811,6 @@
     ///////////////////////////////////////////////////////////////////////////////
     const CLICK_DELTA = 5;
     const INTERACTIVITY_FPS = 24;
-    /**
-     * A [Viewer]{@link Viewer} event that fires when the viewer needs to be updated.
-     *
-     * @property {string} type - `update`
-     * @event update
-     */
-    /**
-     * A [Viewer]{@link Viewer} event that fires when the user selects an entity with the mouse.
-     *
-     * @property {string} type - `select`
-     * @property {OdTvSelectionSet} data - The set of selected entities. For more information, see
-     *   [OdTvSelectionSet](https://cloud.opendesign.com/docs/index.html#/vis/OdTvSelectionSet?id=odtvselectionset).
-     * @event select
-     */
     class OdBaseDragger extends OdaGeAction {
         constructor(subject) {
             super(subject.visualizeJs);
@@ -14964,6 +14950,10 @@
             });
             this._canvasImage.onload = () => {
                 this._ref.image(this._canvasImage);
+                if (this._ref.height() === 0)
+                    this._ref.height(this._canvasImage.height);
+                if (this._ref.width() === 0)
+                    this._ref.width(this._canvasImage.width);
                 this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
             };
             this._canvasImage.src = params.src;
@@ -15270,6 +15260,7 @@
                     .concat(`oda-cursor-${draggerName.toLowerCase()}`)
                     .join(" ");
                 this.removeTextInput();
+                this.removeImageInput();
                 const markupMode = MarkupMode[draggerName];
                 const konvaMode = MarkupMode2Konva.get(markupMode);
                 if (konvaMode) {
@@ -15339,6 +15330,7 @@
         }
         clearOverlay() {
             this.removeTextInput();
+            this.removeImageInput();
             this._konvaTransformer.nodes([]);
             Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.destroy()));
         }
@@ -15359,6 +15351,14 @@
             });
             this._konvaLayer.draw();
         }
+        colorizeSelectedMarkups(r, g, b) {
+            this.getSelectedObjects().forEach((obj) => {
+                const colorable = obj;
+                if (colorable && colorable.setColor) {
+                    colorable.setColor(new MarkupColor(r, g, b).HexColor);
+                }
+            });
+        }
         setViewpoint(viewpoint) {
             const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
             this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
@@ -15565,37 +15565,53 @@
             layer.add(transformer);
             let isPaint = false;
             let lastLine;
+            let mouseDownPos;
+            let lastObj;
             stage.on("mousedown touchstart", (e) => {
                 // do nothing if we mousedown on any shape
-                if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text)
+                if (!this._markupIsActive ||
+                    e.target !== stage ||
+                    this._markupMode === MarkupMode.Text ||
+                    this._markupMode === MarkupMode.Image)
                     return;
                 if (e.target === stage && transformer.nodes().length > 0) {
                     transformer.nodes([]);
                     return;
                 }
                 const pos = stage.getPointerPosition();
+                mouseDownPos = pos;
+                isPaint = [MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle].some((m) => m === this._markupMode);
                 if (this._markupMode === MarkupMode.Line) {
                     // add point twice, so we have some drawings even on a simple click
                     lastLine = this.addLine([pos.x, pos.y, pos.x, pos.y]);
-                    isPaint = true;
-                }
-                // 25.2 - currently only for debug purposes:
-                else if (this._markupMode === MarkupMode.Rectangle) {
-                    this.addRectangle({ x: pos.x, y: pos.y }, 50, 50);
-                }
-                else if (this._markupMode === MarkupMode.Ellipse) {
-                    this.addEllipse({ x: pos.x, y: pos.y }, { x: 50, y: 50 });
-                }
-                else if (this._markupMode === MarkupMode.Arrow) {
-                    this.addArrow({ x: pos.x, y: pos.y }, { x: pos.x + 50, y: pos.y + 50 });
-                }
-                else if (this._markupMode === MarkupMode.Cloud) {
-                    this.addCloud({ x: pos.x, y: pos.y }, 200, 400);
                 }
             });
             stage.on("mouseup touchend", (e) => {
                 if (!this._markupIsActive)
                     return;
+                if (isPaint) {
+                    const pos = stage.getPointerPosition();
+                    const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+                    const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+                    const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+                    const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+                    const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+                    if (defParams) {
+                        if (this._markupMode === MarkupMode.Rectangle) {
+                            this.addRectangle({ x: startX, y: startY }, dX, dY);
+                        }
+                        else if (this._markupMode === MarkupMode.Ellipse) {
+                            this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+                        }
+                        else if (this._markupMode === MarkupMode.Arrow) {
+                            this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y });
+                        }
+                        else if (this._markupMode === MarkupMode.Cloud) {
+                            this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
+                        }
+                    }
+                }
+                lastObj = undefined;
                 isPaint = false;
             });
             stage.on("mousemove touchmove", (e) => {
@@ -15607,8 +15623,47 @@
                 // prevent scrolling on touch devices
                 //e.evt.preventDefault();
                 const pos = stage.getPointerPosition();
-                const newPoints = lastLine.points().concat([pos.x, pos.y]);
-                lastLine.points(newPoints);
+                const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+                const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+                const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+                const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+                const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+                if (this._markupMode === MarkupMode.Line) {
+                    lastLine.addPoints([{ x: pos.x, y: pos.y }]);
+                }
+                else if (this._markupMode === MarkupMode.Arrow) {
+                    if (lastObj)
+                        lastObj.setEndPoint(pos.x, pos.y);
+                    else
+                        lastObj = this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: pos.x, y: pos.y });
+                }
+                else if (this._markupMode === MarkupMode.Rectangle) {
+                    if (lastObj) {
+                        lastObj.setPosition(startX, startY);
+                        lastObj.setWidth(dX);
+                        lastObj.setHeight(dY);
+                    }
+                    else
+                        lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+                }
+                else if (this._markupMode === MarkupMode.Ellipse) {
+                    if (lastObj) {
+                        lastObj.setPosition(startX, startY);
+                        lastObj.setRadiusX(dX);
+                        lastObj.setRadiusY(dY);
+                    }
+                    else
+                        lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+                }
+                else if (this._markupMode === MarkupMode.Cloud) {
+                    if (lastObj) {
+                        lastObj.setPosition(startX, startY);
+                        lastObj.setWidth(Math.max(100, dX));
+                        lastObj.setHeight(Math.max(100, dY));
+                    }
+                    else
+                        lastObj = this.addCloud({ x: startX, y: startY }, dX, dY);
+                }
             });
             // clicks should select/deselect shapes
             stage.on("click tap", (e) => {
@@ -15617,18 +15672,26 @@
                 // if click on empty area - remove all selections
                 if (e.target === stage) {
                     if (this._markupMode === MarkupMode.Text) {
-                        if (this._textInputRef)
+                        if (this._textInputRef && this._textInputRef.value)
                             this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
                         else if (transformer.nodes().length === 0) {
                             const pos = stage.getPointerPosition();
                             this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
                         }
                     }
+                    else if (this._markupMode === MarkupMode.Image) {
+                        if (this._imageInputRef && this._imageInputRef.value)
+                            this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
+                        else if (transformer.nodes().length === 0) {
+                            const pos = stage.getPointerPosition();
+                            this.createImageInput(pos);
+                        }
+                    }
                     transformer.nodes([]);
                     return;
                 }
                 if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
-                    if (this._textInputRef)
+                    if (this._textInputRef && this._textInputRef.value)
                         this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
                     else
                         this.createTextInput({ x: e.target.attrs.x, y: e.target.attrs.y }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
@@ -15637,6 +15700,16 @@
                 else {
                     this.removeTextInput();
                 }
+                if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._imageInputRef && this._imageInputRef.value)
+                        this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
+                    else
+                        this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
+                    return;
+                }
+                else {
+                    this.removeImageInput();
+                }
                 if (transformer.nodes().filter((x) => x.className === "Cloud").length > 0 || e.target.className === "Cloud") {
                     transformer.rotateEnabled(false);
                 }
@@ -15912,7 +15985,7 @@
             });
             const obj = konvaLine.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaLine;
         }
         createTextInput(pos, inputX, inputY, angle, text) {
             if (!this._textInputRef) {
@@ -15952,6 +16025,48 @@
             this._textInputPos = null;
             this._textInputAngle = 0;
         }
+        createImageInput(pos) {
+            if (!this._imageInputRef) {
+                const convertBase64 = (file) => {
+                    return new Promise((resolve, reject) => {
+                        const fileReader = new FileReader();
+                        fileReader.readAsDataURL(file);
+                        fileReader.onload = () => {
+                            resolve(fileReader.result);
+                        };
+                        fileReader.onerror = (error) => {
+                            reject(error);
+                        };
+                    });
+                };
+                this._imageInputPos = pos;
+                this._imageInputRef = document.createElement("input");
+                this._imageInputRef.style.display = "none";
+                this._imageInputRef.type = "file";
+                this._imageInputRef.accept = "image/png, image/jpeg";
+                this._imageInputRef.onchange = async (event) => {
+                    const file = event.target.files[0];
+                    const base64 = await convertBase64(file);
+                    this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+                };
+                this._imageInputRef.oncancel = (event) => {
+                    this.removeImageInput();
+                };
+                document.body.appendChild(this._imageInputRef);
+                setTimeout(() => {
+                    this._imageInputRef.click();
+                }, 50);
+            }
+            else {
+                this.removeImageInput();
+            }
+        }
+        removeImageInput() {
+            var _a;
+            (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+            this._imageInputRef = null;
+            this._imageInputPos = null;
+        }
         addText(specifiedText, position, angle, color, textSize, fontSize, id) {
             if (specifiedText) {
                 const tol = 1.0e-6;
@@ -15998,7 +16113,7 @@
             });
             const obj = konvaRectangle.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaRectangle;
         }
         addEllipse(position, radius, lineWidth, color, id) {
             if (!position)
@@ -16012,7 +16127,7 @@
             });
             const obj = konvaEllipse.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaEllipse;
         }
         addArrow(start, end, color, id) {
             if (!start || !end)
@@ -16025,7 +16140,7 @@
             });
             const obj = konvaArrow.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaArrow;
         }
         addCloud(position, width, height, lineWidth, color, id) {
             if (!position || !width || !height)
@@ -16040,21 +16155,30 @@
             });
             const obj = konvaCloud.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaCloud;
         }
         addImage(position, src, width, height, id) {
-            if (!position || !width || !height)
+            if (!position)
                 return;
-            const konvaImage = new KonvaImage({
-                position,
-                src,
-                width,
-                height,
-                id,
-            });
-            const obj = konvaImage.ref();
-            this._konvaLayer.add(obj);
-            return obj;
+            if (src) {
+                const konvaImage = new KonvaImage({
+                    position,
+                    src,
+                    width,
+                    height,
+                    id,
+                });
+                const obj = konvaImage.ref();
+                this._konvaLayer.add(obj);
+                const trNodes = this._konvaTransformer.nodes();
+                if (trNodes.length > 0) {
+                    // in case of edit - remove old Image placeholder object
+                    trNodes[0].destroy();
+                    this._konvaTransformer.nodes([]);
+                }
+            }
+            this.removeImageInput();
+            return;
         }
     }
 
@@ -16228,6 +16352,9 @@
             itr.delete();
             this._viewer.update();
         }
+        colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
+            throw new Error("Not implemented yet");
+        }
         setViewpoint(viewpoint) {
             function getLogicalPoint3dAsArray(point3d) {
                 return [point3d.x, point3d.y, point3d.z];
@@ -16496,7 +16623,7 @@
                 const event = { loaded, timeStamp, total, lengthComputable, type: "visualizeprogress" };
                 onProgress === null || onProgress === void 0 ? void 0 : onProgress(event);
             });
-            this.visualizeJs = visualizeJs;
+            this._visualizeJs = visualizeJs;
             this.visualizeJs.canvas = canvas;
             this.visualizeJs.Viewer.create();
             this.canvas = canvas;
@@ -16521,23 +16648,30 @@
          * release the `Viewer` instance.
          */
         dispose() {
-            var _a, _b, _c, _d;
             this.cancel();
             this.emitEvent({ type: "dispose" });
             if (this.frameId)
                 cancelAnimationFrame(this.frameId);
             this.frameId = 0;
             this.setActiveDragger("");
-            (_a = this._zoomWheelDragger) === null || _a === void 0 ? void 0 : _a.dispose();
-            (_b = this._gestureManager) === null || _b === void 0 ? void 0 : _b.dispose();
             this.removeAllListeners();
-            (_c = this._resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+            if (this._gestureManager)
+                this._gestureManager.dispose();
+            this._gestureManager = undefined;
+            if (this._zoomWheelDragger)
+                this._zoomWheelDragger.dispose();
+            this._zoomWheelDragger = undefined;
+            if (this._resizeObserver)
+                this._resizeObserver.disconnect();
             this._resizeObserver = undefined;
             this.markup.dispose();
-            this.canvasEvents.forEach((x) => { var _a; return (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.removeEventListener(x, this.canvaseventlistener); });
-            this.canvas = undefined;
-            (_d = this.visualizeJs) === null || _d === void 0 ? void 0 : _d.getViewer().clear();
-            this.visualizeJs = undefined;
+            if (this.canvas) {
+                this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
+                this.canvas = undefined;
+            }
+            if (this._visualizeJs)
+                this._visualizeJs.getViewer().clear();
+            this._visualizeJs = undefined;
             return this;
         }
         /**
@@ -16640,6 +16774,13 @@
                 this._isRunAsyncUpdate = false;
             }
         }
+        /**
+         * Returns `VisualizeJS`
+         * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
+         */
+        get visualizeJs() {
+            return this._visualizeJs;
+        }
         /**
          * Returns `VisualizeJS`
          * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
@@ -16829,7 +16970,7 @@
          *
          * Fires:
          *
-         * - {@link ChangeActiveDragger | changeactivedragger}
+         * - {@link ChangeActiveDraggerEvent | changeactivedragger}
          *
          * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
          * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
@@ -17189,6 +17330,16 @@
         colorizeAllMarkup(r = 255, g = 0, b = 0) {
             this.markup.colorizeAllMarkup(r, g, b);
         }
+        /**
+         * Colorize all selected markup entities with the specified color.
+         *
+         * @param r - `Red` part of color.
+         * @param g - `Green` part of color.
+         * @param b - `Blue` part of color.
+         */
+        colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
+            this.markup.colorizeSelectedMarkups(r, g, b);
+        }
         /**
          * Add an empty markup entity to the overlay.
          */
@@ -17209,10 +17360,9 @@
         }
         /**
          * Draw a viewpoint. To get a list of available model viewpoints, use the
-         * {@link Model#getViewpoints | Model.getViewpoints()} or
-         * {@link File#getViewpoints | File.getViewpoints()}.
+         * {@link Model.getViewpoints()} or {@link File.getViewpoints()}.
          *
-         * @param viewpoint - Viewpoint.
+         * @param viewpoint - Viewpoint data.
          */
         drawViewpoint(viewpoint) {
             this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
@@ -17221,8 +17371,7 @@
         }
         /**
          * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
-         * {@link Model#saveViewpoint | Model.saveViewpoint()} or
-         * {@link File#saveViewpoint | File.saveViewpoint()}.
+         * {@link Model.saveViewpoint()} or {@link File.saveViewpoint()}.
          */
         createViewpoint() {
             const vp = this.markup.getViewpoint();