@inweb/viewer-visualize 25.3.21 → 25.3.23

package/dist/viewer-visualize.module.js

@@ -3509,6 +3509,8 @@ class KonvaImage {
         });
         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;
@@ -3781,6 +3783,7 @@ class KonvaMarkup {
             const draggerName = event.data;
             this._markupContainer.className = this._canvasOriginal.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
             this.removeTextInput();
+            this.removeImageInput();
             const markupMode = MarkupMode[draggerName];
             const konvaMode = MarkupMode2Konva.get(markupMode);
             if (konvaMode) {
@@ -3849,6 +3852,7 @@ class KonvaMarkup {
     }
     clearOverlay() {
         this.removeTextInput();
+        this.removeImageInput();
         this._konvaTransformer.nodes([]);
         Object.values(MarkupMode).forEach((mode => this.konvaLayerFind(mode).forEach((x => x.destroy()))));
     }
@@ -3868,6 +3872,14 @@ class KonvaMarkup {
         }));
         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,
@@ -4091,46 +4103,61 @@ class KonvaMarkup {
         layer.add(transformer);
         let isPaint = false;
         let lastLine;
+        let mouseDownPos;
+        let lastObj;
         stage.on("mousedown touchstart", (e => {
-            if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text) return;
+            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) {
                 lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
-                isPaint = true;
-            } 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 => {
@@ -4139,23 +4166,78 @@ class KonvaMarkup {
                 return;
             }
             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);
+            }
         }));
         stage.on("click tap", (e => {
             if (!this._markupIsActive) return;
             if (e.target === stage) {
                 if (this._markupMode === MarkupMode.Text) {
-                    if (this._textInputRef) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
+                    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) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
+                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);
@@ -4163,6 +4245,15 @@ class KonvaMarkup {
             } 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);
             } else {
@@ -4441,7 +4532,7 @@ class KonvaMarkup {
         });
         const obj = konvaLine.ref();
         this._konvaLayer.add(obj);
-        return obj;
+        return konvaLine;
     }
     createTextInput(pos, inputX, inputY, angle, text) {
         if (!this._textInputRef) {
@@ -4479,6 +4570,48 @@ class KonvaMarkup {
         this._textInputPos = null;
         this._textInputAngle = 0;
     }
+    createImageInput(pos) {
+        if (!this._imageInputRef) {
+            const convertBase64 = file => 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 = 1e-6;
@@ -4525,7 +4658,7 @@ class KonvaMarkup {
         });
         const obj = konvaRectangle.ref();
         this._konvaLayer.add(obj);
-        return obj;
+        return konvaRectangle;
     }
     addEllipse(position, radius, lineWidth, color, id) {
         if (!position) return;
@@ -4538,7 +4671,7 @@ class KonvaMarkup {
         });
         const obj = konvaEllipse.ref();
         this._konvaLayer.add(obj);
-        return obj;
+        return konvaEllipse;
     }
     addArrow(start, end, color, id) {
         if (!start || !end) return;
@@ -4550,7 +4683,7 @@ class KonvaMarkup {
         });
         const obj = konvaArrow.ref();
         this._konvaLayer.add(obj);
-        return obj;
+        return konvaArrow;
     }
     addCloud(position, width, height, lineWidth, color, id) {
         if (!position || !width || !height) return;
@@ -4564,20 +4697,28 @@ class KonvaMarkup {
         });
         const obj = konvaCloud.ref();
         this._konvaLayer.add(obj);
-        return obj;
+        return konvaCloud;
     }
     addImage(position, src, width, height, id) {
-        if (!position || !width || !height) return;
-        const konvaImage = new KonvaImage({
-            position: position,
-            src: src,
-            width: width,
-            height: height,
-            id: id
-        });
-        const obj = konvaImage.ref();
-        this._konvaLayer.add(obj);
-        return obj;
+        if (!position) return;
+        if (src) {
+            const konvaImage = new KonvaImage({
+                position: position,
+                src: src,
+                width: width,
+                height: height,
+                id: id
+            });
+            const obj = konvaImage.ref();
+            this._konvaLayer.add(obj);
+            const trNodes = this._konvaTransformer.nodes();
+            if (trNodes.length > 0) {
+                trNodes[0].destroy();
+                this._konvaTransformer.nodes([]);
+            }
+        }
+        this.removeImageInput();
+        return;
     }
 }
 
@@ -4755,6 +4896,9 @@ class VisualizeMarkup {
         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 ];
@@ -4984,7 +5128,7 @@ class Viewer extends EventEmitter2 {
             };
             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;
@@ -5005,7 +5149,6 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     dispose() {
-        var _a, _b, _c, _d;
         this.cancel();
         this.emitEvent({
             type: "dispose"
@@ -5013,19 +5156,20 @@ class Viewer extends EventEmitter2 {
         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;
     }
     isInitialized() {
@@ -5109,6 +5253,9 @@ class Viewer extends EventEmitter2 {
             this._isRunAsyncUpdate = false;
         }
     }
+    get visualizeJs() {
+        return this._visualizeJs;
+    }
     visLib() {
         return this.visualizeJs;
     }
@@ -5522,6 +5669,9 @@ class Viewer extends EventEmitter2 {
     colorizeAllMarkup(r = 255, g = 0, b = 0) {
         this.markup.colorizeAllMarkup(r, g, b);
     }
+    colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
+        this.markup.colorizeSelectedMarkups(r, g, b);
+    }
     addMarkupEntity(entityName) {
         if (!this.visualizeJs) return null;
         this.syncOverlay();