@inweb/viewer-visualize 25.8.3 → 25.8.4

package/dist/viewer-visualize.js

@@ -13068,11 +13068,10 @@
 
     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;
@@ -13084,11 +13083,11 @@
                 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;
@@ -13103,13 +13102,16 @@
             };
         }
         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";
@@ -13125,32 +13127,30 @@
                 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;
@@ -13262,6 +13262,7 @@
             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));
@@ -13269,29 +13270,29 @@
             })).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
             });
@@ -13302,8 +13303,8 @@
                 keepRatio: false,
                 flipEnabled: false
             });
-            this._konvaTransformer = transformer;
             layer.add(transformer);
+            this._konvaTransformer = transformer;
             let isPaint = false;
             let lastLine;
             let mouseDownPos;
@@ -13485,20 +13486,17 @@
             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;
@@ -13532,9 +13530,9 @@
         }
         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()
@@ -13655,13 +13653,15 @@
         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) {
@@ -13680,7 +13680,7 @@
                 color: color || this._markupColor.HexColor,
                 id: id
             });
-            this._konvaLayer.add(konvaLine.ref());
+            this.addObject(konvaLine);
             return konvaLine;
         }
         createTextInput(pos, inputX, inputY, angle, text) {
@@ -13761,13 +13761,11 @@
             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)) {
@@ -13780,13 +13778,13 @@
                     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) {
@@ -13799,7 +13797,7 @@
                 color: color || this._markupColor.HexColor,
                 id: id
             });
-            this._konvaLayer.add(konvaRectangle.ref());
+            this.addObject(konvaRectangle);
             return konvaRectangle;
         }
         addEllipse(position, radius, lineWidth, color, id) {
@@ -13811,7 +13809,7 @@
                 color: color || this._markupColor.HexColor,
                 id: id
             });
-            this._konvaLayer.add(konvaEllipse.ref());
+            this.addObject(konvaEllipse);
             return konvaEllipse;
         }
         addArrow(start, end, color, id) {
@@ -13822,7 +13820,7 @@
                 color: color || this._markupColor.HexColor,
                 id: id
             });
-            this._konvaLayer.add(konvaArrow.ref());
+            this.addObject(konvaArrow);
             return konvaArrow;
         }
         addCloud(position, width, height, lineWidth, color, id) {
@@ -13835,16 +13833,14 @@
                 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,
@@ -13853,7 +13849,7 @@
                 height: height,
                 id: id
             });
-            this._konvaLayer.add(konvaImage.ref());
+            this.addObject(konvaImage);
             return konvaImage;
         }
     }
@@ -16664,12 +16660,18 @@
             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, total } = event;
                 if (onProgress)
                     onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded, total }));
                 this.emitEvent({ type: "initializeprogress", data: loaded / total, loaded, 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();
@@ -16720,6 +16722,7 @@
             if (this._visualizeJs)
                 this._visualizeJs.getViewer().clear();
             this._visualizeJs = undefined;
+            this._visualizeTimestamp = undefined;
             return this;
         }
         /**