@inweb/viewer-visualize 25.3.22 → 25.3.24

package/dist/viewer-visualize.js

@@ -14950,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;
@@ -15256,6 +15260,7 @@
                     .concat(`oda-cursor-${draggerName.toLowerCase()}`)
                     .join(" ");
                 this.removeTextInput();
+                this.removeImageInput();
                 const markupMode = MarkupMode[draggerName];
                 const konvaMode = MarkupMode2Konva.get(markupMode);
                 if (konvaMode) {
@@ -15325,6 +15330,7 @@
         }
         clearOverlay() {
             this.removeTextInput();
+            this.removeImageInput();
             this._konvaTransformer.nodes([]);
             Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.destroy()));
         }
@@ -15345,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);
@@ -15551,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) => {
@@ -15593,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) => {
@@ -15603,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);
@@ -15623,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);
                 }
@@ -15898,7 +15985,7 @@
             });
             const obj = konvaLine.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaLine;
         }
         createTextInput(pos, inputX, inputY, angle, text) {
             if (!this._textInputRef) {
@@ -15938,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;
@@ -15984,7 +16113,7 @@
             });
             const obj = konvaRectangle.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaRectangle;
         }
         addEllipse(position, radius, lineWidth, color, id) {
             if (!position)
@@ -15998,7 +16127,7 @@
             });
             const obj = konvaEllipse.ref();
             this._konvaLayer.add(obj);
-            return obj;
+            return konvaEllipse;
         }
         addArrow(start, end, color, id) {
             if (!start || !end)
@@ -16011,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)
@@ -16026,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;
         }
     }
 
@@ -16214,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];
@@ -16477,10 +16618,11 @@
             canvas.style.touchAction = "none";
             canvas.width = canvas.clientWidth * window.devicePixelRatio;
             canvas.height = canvas.clientHeight * window.devicePixelRatio;
-            const visualizeJs = await loadVisualizeJs(this.visualizeJsUrl, (ev) => {
-                const { loaded, timeStamp, total, lengthComputable } = ev;
-                const event = { loaded, timeStamp, total, lengthComputable, type: "visualizeprogress" };
-                onProgress === null || onProgress === void 0 ? void 0 : onProgress(event);
+            const visualizeJs = await loadVisualizeJs(this.visualizeJsUrl, (event) => {
+                const { loaded, total } = event;
+                if (onProgress)
+                    onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded, total }));
+                this.emitEvent({ type: "initializeprogress", data: loaded / total, loaded, total });
             });
             this._visualizeJs = visualizeJs;
             this.visualizeJs.canvas = canvas;
@@ -16500,6 +16642,7 @@
             this.syncOptions();
             this._renderTime = performance.now();
             this.render(this._renderTime);
+            this.emitEvent({ type: "initialize" });
             return this;
         }
         /**
@@ -17189,7 +17332,17 @@
         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.
          */
         addMarkupEntity(entityName) {