@inweb/viewer-visualize 25.8.3 → 25.8.4

package/dist/viewer-visualize.module.js

@@ -1630,11 +1630,10 @@ const MarkupMode2Konva = {
 
 class KonvaMarkup {
     constructor() {
-        this._isInitialized = false;
+        this._pointerEvents = [];
         this._markupIsActive = false;
         this._markupColor = new MarkupColor(255, 0, 0);
         this._zIndex = 1;
-        this._markupContainerName = "markupContainer";
         this.lineWidth = 4;
         this.lineType = "solid";
         this.fontSize = 34;
@@ -1646,11 +1645,11 @@ class KonvaMarkup {
             this.enableEditMode(draggerName);
         };
         this.resizeContainer = entries => {
-            var _a, _b;
             const {width: width, height: height} = entries[0].contentRect;
             if (!width || !height) return;
-            (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.width(width);
-            (_b = this._konvaStage) === null || _b === void 0 ? void 0 : _b.height(height);
+            if (!this._konvaStage) return;
+            this._konvaStage.width(width);
+            this._konvaStage.height(height);
         };
         this.pan = event => {
             const dX = event.dX / window.devicePixelRatio;
@@ -1665,13 +1664,16 @@ class KonvaMarkup {
         };
     }
     initialize(container, pointerEvents, viewer, worldTransformer) {
-        if (!Konva) throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
+        if (!Konva) {
+            console.error('Markup error: Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
+            return;
+        }
         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._markupContainer = document.createElement("div");
-        this._markupContainer.id = this._markupContainerName;
+        this._markupContainer.id = "markup-container";
         this._markupContainer.style.position = "absolute";
         this._markupContainer.style.top = "0px";
         this._markupContainer.style.left = "0px";
@@ -1687,32 +1689,30 @@ class KonvaMarkup {
             this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
             this._viewer.addEventListener("pan", this.pan);
         }
-        this._isInitialized = true;
     }
     dispose() {
-        if (!this._isInitialized) return;
+        var _a, _b;
         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._pointerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
         this.destroyKonva();
-        this._resizeObserver.disconnect();
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this._resizeObserver = undefined;
-        this._markupContainer.remove();
+        (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
         this._markupContainer = undefined;
         this._container = undefined;
         this._viewer = undefined;
         this._worldTransformer = undefined;
         this._markupIsActive = false;
-        this._isInitialized = false;
     }
     syncOverlay() {}
     clearOverlay() {
         this.removeTextInput();
         this.removeImageInput();
         this.clearSelected();
-        this.getObjects().forEach((obj => obj.ref().destroy()));
+        this.getObjects().forEach((obj => obj.delete()));
     }
     getMarkupColor() {
         return this._markupColor.RGB;
@@ -1824,6 +1824,7 @@ class KonvaMarkup {
         return objects;
     }
     getSelectedObjects() {
+        if (!this._konvaTransformer) return [];
         return this._konvaTransformer.nodes().map((ref => {
             const name = ref.className;
             const konvaShape = Object.values(MarkupMode2Konva).find((shape => shape.name === name));
@@ -1831,29 +1832,29 @@ class KonvaMarkup {
         })).filter((x => x));
     }
     selectObjects(objects) {
+        if (!this._konvaTransformer) return;
         const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
         this._konvaTransformer.nodes(selectedObjs);
     }
     clearSelected() {
-        this._konvaTransformer.nodes([]);
+        if (this._konvaTransformer) this._konvaTransformer.nodes([]);
     }
     addObject(object) {
-        this._konvaLayer.add(object.ref());
+        if (this._konvaLayer) this._konvaLayer.add(object.ref());
     }
     konvaLayerFind(type) {
+        if (!this._konvaLayer) return [];
         const konvaShape = MarkupMode2Konva[type];
-        if (konvaShape && konvaShape.initializer) {
-            return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
-        }
-        return [];
+        if (!konvaShape || !konvaShape.initializer) return [];
+        return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
     }
     initializeKonva() {
-        this._konvaStage = new Konva.Stage({
-            container: this._markupContainerName,
+        const stage = new Konva.Stage({
+            container: this._markupContainer,
             width: this._container.clientWidth,
             height: this._container.clientHeight
         });
-        const stage = this._konvaStage;
+        this._konvaStage = stage;
         const layer = new Konva.Layer({
             pixelRation: window.devicePixelRatio
         });
@@ -1864,8 +1865,8 @@ class KonvaMarkup {
             keepRatio: false,
             flipEnabled: false
         });
-        this._konvaTransformer = transformer;
         layer.add(transformer);
+        this._konvaTransformer = transformer;
         let isPaint = false;
         let lastLine;
         let mouseDownPos;
@@ -2047,20 +2048,17 @@ class KonvaMarkup {
         container.addEventListener("keydown", (e => {
             if (!this._markupIsActive) return;
             if (e.code === "Delete") {
-                const trNodes = this._konvaTransformer.nodes();
-                if (trNodes.length > 0) {
-                    this._konvaTransformer.nodes().forEach((x => x.destroy()));
-                    this._konvaTransformer.nodes([]);
-                }
-                layer.draw();
+                this.getSelectedObjects().forEach((obj => obj.delete()));
+                this.clearSelected();
                 return;
             }
             e.preventDefault();
         }));
     }
     destroyKonva() {
+        var _a;
         this.clearOverlay();
-        this._konvaStage.destroy();
+        (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
         this._konvaLayer = undefined;
         this._konvaTransformer = undefined;
         this._konvaStage = undefined;
@@ -2094,9 +2092,9 @@ class KonvaMarkup {
     }
     getMarkupTexts() {
         const texts = [];
-        const textSize = .02;
-        const textScale = this._worldTransformer.getScale();
         this.konvaLayerFind("Text").forEach((ref => {
+            const textSize = .02;
+            const textScale = this._worldTransformer.getScale();
             const position = {
                 x: ref.x(),
                 y: ref.y()
@@ -2217,13 +2215,15 @@ class KonvaMarkup {
     combineMarkupWithDrawing() {
         this.clearSelected();
         const tempCanvas = document.createElement("canvas");
-        tempCanvas.width = this._konvaStage.width();
-        tempCanvas.height = this._konvaStage.height();
-        const ctx = tempCanvas.getContext("2d");
-        if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
-        ctx.drawImage(this._konvaStage.toCanvas({
-            pixelRatio: window.devicePixelRatio
-        }), 0, 0);
+        if (this._konvaStage) {
+            tempCanvas.width = this._konvaStage.width();
+            tempCanvas.height = this._konvaStage.height();
+            const ctx = tempCanvas.getContext("2d");
+            if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
+            ctx.drawImage(this._konvaStage.toCanvas({
+                pixelRatio: window.devicePixelRatio
+            }), 0, 0);
+        }
         return tempCanvas.toDataURL("image/jpeg", .25);
     }
     addLine(linePoints, color, type, width, id) {
@@ -2242,7 +2242,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaLine.ref());
+        this.addObject(konvaLine);
         return konvaLine;
     }
     createTextInput(pos, inputX, inputY, angle, text) {
@@ -2323,13 +2323,11 @@ class KonvaMarkup {
         this._imageInputRef = null;
         this._imageInputPos = null;
     }
-    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
-        if (!specifiedText) return;
-        const trNodes = this._konvaTransformer.nodes();
-        if (trNodes.length > 0) {
-            trNodes[0].destroy();
-            this._konvaTransformer.nodes([]);
-        }
+    addText(text, position, angle, color, textSize, fontSize, id) {
+        var _a;
+        if (!text) return;
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
         this.removeTextInput();
         const tolerance = 1e-6;
         if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
@@ -2342,13 +2340,13 @@ class KonvaMarkup {
                 x: position.x,
                 y: position.y
             },
-            text: specifiedText,
+            text: text,
             rotation: angle,
             fontSize: fontSize || this.fontSize,
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaText.ref());
+        this.addObject(konvaText);
         return konvaText;
     }
     addRectangle(position, width, height, lineWidth, color, id) {
@@ -2361,7 +2359,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaRectangle.ref());
+        this.addObject(konvaRectangle);
         return konvaRectangle;
     }
     addEllipse(position, radius, lineWidth, color, id) {
@@ -2373,7 +2371,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaEllipse.ref());
+        this.addObject(konvaEllipse);
         return konvaEllipse;
     }
     addArrow(start, end, color, id) {
@@ -2384,7 +2382,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaArrow.ref());
+        this.addObject(konvaArrow);
         return konvaArrow;
     }
     addCloud(position, width, height, lineWidth, color, id) {
@@ -2397,16 +2395,14 @@ class KonvaMarkup {
             lineWidth: lineWidth || this.lineWidth,
             id: id
         });
-        this._konvaLayer.add(konvaCloud.ref());
+        this.addObject(konvaCloud);
         return konvaCloud;
     }
     addImage(position, src, width, height, id) {
+        var _a;
         if (!position || !src) return;
-        const trNodes = this._konvaTransformer.nodes();
-        if (trNodes.length > 0) {
-            trNodes[0].destroy();
-            this._konvaTransformer.nodes([]);
-        }
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
         this.removeImageInput();
         const konvaImage = new KonvaImage({
             position: position,
@@ -2415,7 +2411,7 @@ class KonvaMarkup {
             height: height,
             id: id
         });
-        this._konvaLayer.add(konvaImage.ref());
+        this.addObject(konvaImage);
         return konvaImage;
     }
 }
@@ -5136,6 +5132,8 @@ class Viewer extends EventEmitter2 {
         canvas.style.touchAction = "none";
         canvas.width = canvas.clientWidth * window.devicePixelRatio;
         canvas.height = canvas.clientHeight * window.devicePixelRatio;
+        this._visualizeTimestamp = Date.now();
+        const visualizeTimestamp = this._visualizeTimestamp;
         const visualizeJs = await loadVisualizeJs(this.visualizeJsUrl, (event => {
             const {loaded: loaded, total: total} = event;
             if (onProgress) onProgress(new ProgressEvent("progress", {
@@ -5150,6 +5148,10 @@ class Viewer extends EventEmitter2 {
                 total: total
             });
         }));
+        if (visualizeTimestamp !== this._visualizeTimestamp) {
+            console.error("Viewer error: dispose() was called before initialize() completed. Are you using React strict mode?");
+            return this;
+        }
         this._visualizeJs = visualizeJs;
         this.visualizeJs.canvas = canvas;
         this.visualizeJs.Viewer.create();
@@ -5195,6 +5197,7 @@ class Viewer extends EventEmitter2 {
         }
         if (this._visualizeJs) this._visualizeJs.getViewer().clear();
         this._visualizeJs = undefined;
+        this._visualizeTimestamp = undefined;
         return this;
     }
     isInitialized() {