@inweb/viewer-visualize 25.8.2 → 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;
@@ -1722,45 +1722,76 @@ class KonvaMarkup {
     }
     colorizeAllMarkup(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).HexColor;
-        this.getObjects().forEach((obj => {
-            const colorable = obj;
-            if (colorable && colorable.setColor) colorable.setColor(hexColor);
+        this.getObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
-        this._konvaLayer.draw();
     }
     colorizeSelectedMarkups(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).HexColor;
-        this.getSelectedObjects().forEach((obj => {
-            const colorable = obj;
-            if (colorable && colorable.setColor) colorable.setColor(hexColor);
+        this.getSelectedObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
     }
     setViewpoint(viewpoint) {
-        const markupColor = viewpoint.custom_fields.markup_color || {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
             r: 255,
             g: 0,
             b: 0
         };
         this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-        this.loadMarkup(viewpoint);
+        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line => {
+            const linePoints = [];
+            line.points.forEach((point => {
+                const screenPoint = this._worldTransformer.worldToScreen(point);
+                linePoints.push(screenPoint.x);
+                linePoints.push(screenPoint.y);
+            }));
+            this.addLine(linePoints, line.color, line.type, line.width, line.id);
+        }));
+        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text => {
+            const screenPoint = this._worldTransformer.worldToScreen(text.position);
+            this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
+        }));
+        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect => {
+            const screenPoint = this._worldTransformer.worldToScreen(rect.position);
+            this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+        }));
+        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse => {
+            const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
+            this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+        }));
+        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow => {
+            const startPoint = this._worldTransformer.worldToScreen(arrow.start);
+            const endPoint = this._worldTransformer.worldToScreen(arrow.end);
+            this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
+        }));
+        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud => {
+            const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
+            this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+        }));
+        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image => {
+            const screenPoint = this._worldTransformer.worldToScreen(image.position);
+            this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+        }));
     }
     getViewpoint() {
-        const viewpoint = {
-            lines: [],
-            texts: [],
-            arrows: [],
-            clouds: [],
-            ellipses: [],
-            images: [],
-            rectangles: []
+        const viewpoint = {};
+        viewpoint.lines = this.getMarkupLines();
+        viewpoint.texts = this.getMarkupTexts();
+        viewpoint.arrows = this.getMarkupArrows();
+        viewpoint.clouds = this.getMarkupClouds();
+        viewpoint.ellipses = this.getMarkupEllipses();
+        viewpoint.images = this.getMarkupImages();
+        viewpoint.rectangles = this.getMarkupRectangles();
+        viewpoint.custom_fields = {
+            markup_color: this.getMarkupColor()
         };
         viewpoint.snapshot = {
             data: this.combineMarkupWithDrawing()
         };
-        viewpoint.custom_fields = {
-            markup_color: this.getMarkupColor()
-        };
-        this.fillViewpointShapes(viewpoint);
         viewpoint.description = (new Date).toDateString();
         return viewpoint;
     }
@@ -1793,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));
@@ -1800,73 +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([]);
-    }
-    fillViewpointShapes(viewpoint) {
-        const markupLines = this.getMarkupLines();
-        if (markupLines && markupLines.length > 0) {
-            markupLines === null || markupLines === void 0 ? void 0 : markupLines.forEach((line => {
-                viewpoint.lines.push(line);
-            }));
-        }
-        const markupTexts = this.getMarkupTexts();
-        if (markupTexts && markupTexts.length > 0) {
-            markupTexts === null || markupTexts === void 0 ? void 0 : markupTexts.forEach((text => {
-                viewpoint.texts.push(text);
-            }));
-        }
-        const markupRectangles = this.getMarkupRectangles();
-        if (markupRectangles && markupRectangles.length > 0) {
-            markupRectangles === null || markupRectangles === void 0 ? void 0 : markupRectangles.forEach((rectangle => {
-                viewpoint.rectangles.push(rectangle);
-            }));
-        }
-        const markupEllipses = this.getMarkupEllipses();
-        if (markupEllipses && markupEllipses.length > 0) {
-            markupEllipses === null || markupEllipses === void 0 ? void 0 : markupEllipses.forEach((ellipse => {
-                viewpoint.ellipses.push(ellipse);
-            }));
-        }
-        const markupArrows = this.getMarkupArrows();
-        if (markupArrows && markupArrows.length > 0) {
-            markupArrows === null || markupArrows === void 0 ? void 0 : markupArrows.forEach((arrow => {
-                viewpoint.arrows.push(arrow);
-            }));
-        }
-        const markupImages = this.getMarkupImages();
-        if (markupImages && markupImages.length > 0) {
-            markupImages === null || markupImages === void 0 ? void 0 : markupImages.forEach((image => {
-                viewpoint.images.push(image);
-            }));
-        }
-        const markupClouds = this.getMarkupClouds();
-        if (markupClouds && markupClouds.length > 0) {
-            markupClouds === null || markupClouds === void 0 ? void 0 : markupClouds.forEach((cloud => {
-                viewpoint.clouds.push(cloud);
-            }));
-        }
+        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
         });
@@ -1877,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;
@@ -2060,31 +2048,28 @@ 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;
     }
     getMarkupLines() {
         const lines = [];
-        this.konvaLayerFind("Line").forEach((line => {
-            const linePoints = line.points();
+        this.konvaLayerFind("Line").forEach((ref => {
+            const linePoints = ref.points();
             if (!linePoints) return;
             const worldPoints = [];
-            const absoluteTransform = line.getAbsoluteTransform();
+            const absoluteTransform = ref.getAbsoluteTransform();
             for (let i = 0; i < linePoints.length; i += 2) {
                 const atPoint = absoluteTransform.point({
                     x: linePoints[i],
@@ -2093,30 +2078,30 @@ class KonvaMarkup {
                 const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 worldPoints.push(worldPoint);
             }
-            const konvaLine = new KonvaLine(null, line);
-            lines.push({
+            const konvaLine = new KonvaLine(null, ref);
+            const line = {
                 id: konvaLine.id(),
                 points: worldPoints,
                 color: konvaLine.getColor() || "#ff0000",
                 type: konvaLine.getLineType() || this.lineType,
                 width: konvaLine.getLineWidth() || this.lineWidth
-            });
+            };
+            lines.push(line);
         }));
         return lines;
     }
     getMarkupTexts() {
         const texts = [];
-        const textSize = .02;
-        const textScale = this._worldTransformer.getScale();
-        this.konvaLayerFind("Text").forEach((text => {
-            if (!text) return;
+        this.konvaLayerFind("Text").forEach((ref => {
+            const textSize = .02;
+            const textScale = this._worldTransformer.getScale();
             const position = {
-                x: text.x(),
-                y: text.y()
+                x: ref.x(),
+                y: ref.y()
             };
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaText(null, text);
-            texts.push({
+            const shape = new KonvaText(null, ref);
+            const text = {
                 id: shape.id(),
                 position: worldPoint,
                 text: shape.getText(),
@@ -2124,150 +2109,121 @@ class KonvaMarkup {
                 angle: shape.getRotation(),
                 color: shape.getColor(),
                 font_size: shape.getFontSize()
-            });
+            };
+            texts.push(text);
         }));
         return texts;
     }
     getMarkupRectangles() {
         const rectangles = [];
-        this.konvaLayerFind("Rectangle").forEach((rect => {
-            const position = rect.position();
+        this.konvaLayerFind("Rectangle").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaRectangle(null, rect);
-            rectangles.push({
+            const shape = new KonvaRectangle(null, ref);
+            const rectangle = {
                 id: shape.id(),
                 position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            rectangles.push(rectangle);
         }));
         return rectangles;
     }
     getMarkupEllipses() {
         const ellipses = [];
-        this.konvaLayerFind("Ellipse").forEach((ellipse => {
-            const position = ellipse.position();
+        this.konvaLayerFind("Ellipse").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaEllipse(null, ellipse);
-            ellipses.push({
+            const shape = new KonvaEllipse(null, ref);
+            const ellipse = {
                 id: shape.id(),
                 position: worldPoint,
                 radius: {
-                    x: ellipse.getRadiusX(),
-                    y: ellipse.getRadiusY()
+                    x: ref.getRadiusX(),
+                    y: ref.getRadiusY()
                 },
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            ellipses.push(ellipse);
         }));
         return ellipses;
     }
     getMarkupArrows() {
         const arrows = [];
-        this.konvaLayerFind("Arrow").forEach((arrow => {
-            const absoluteTransform = arrow.getAbsoluteTransform();
+        this.konvaLayerFind("Arrow").forEach((ref => {
+            const absoluteTransform = ref.getAbsoluteTransform();
             const atStartPoint = absoluteTransform.point({
-                x: arrow.points()[0],
-                y: arrow.points()[1]
+                x: ref.points()[0],
+                y: ref.points()[1]
             });
             const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
             const atEndPoint = absoluteTransform.point({
-                x: arrow.points()[2],
-                y: arrow.points()[3]
+                x: ref.points()[2],
+                y: ref.points()[3]
             });
             const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
-            const shape = new KonvaArrow(null, arrow);
-            arrows.push({
+            const shape = new KonvaArrow(null, ref);
+            const arrow = {
                 id: shape.id(),
                 start: worldStartPoint,
                 end: worldEndPoint,
                 color: shape.getColor()
-            });
+            };
+            arrows.push(arrow);
         }));
         return arrows;
     }
     getMarkupImages() {
         const images = [];
-        this.konvaLayerFind("Image").forEach((image => {
-            const position = image.position();
+        this.konvaLayerFind("Image").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaImage(null, image);
-            images.push({
+            const shape = new KonvaImage(null, ref);
+            const image = {
                 id: shape.id(),
                 position: worldPoint,
                 src: shape.getSrc(),
                 width: shape.getWidth(),
                 height: shape.getHeight()
-            });
+            };
+            images.push(image);
         }));
         return images;
     }
     getMarkupClouds() {
         const clouds = [];
-        this.konvaLayerFind("Cloud").forEach((cloud => {
-            const position = cloud.position();
+        this.konvaLayerFind("Cloud").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaCloud(null, cloud);
-            clouds.push({
+            const shape = new KonvaCloud(null, ref);
+            const cloud = {
                 id: shape.id(),
                 position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            clouds.push(cloud);
         }));
         return clouds;
     }
-    loadMarkup(viewpoint) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = viewpoint.lines) === null || _a === void 0 ? void 0 : _a.forEach((vpLine => {
-            const linePoints = [];
-            vpLine.points.forEach((point => {
-                const screenPoint = this._worldTransformer.worldToScreen(point);
-                linePoints.push(screenPoint.x);
-                linePoints.push(screenPoint.y);
-            }));
-            this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
-        }));
-        (_b = viewpoint.texts) === null || _b === void 0 ? void 0 : _b.forEach((vpText => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpText.position);
-            this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
-        }));
-        (_c = viewpoint.rectangles) === null || _c === void 0 ? void 0 : _c.forEach((vpRect => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
-            this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
-        }));
-        (_d = viewpoint.ellipses) === null || _d === void 0 ? void 0 : _d.forEach((vpEllipse => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
-            this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
-        }));
-        (_e = viewpoint.arrows) === null || _e === void 0 ? void 0 : _e.forEach((vpArrow => {
-            const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
-            const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
-            this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
-        }));
-        (_f = viewpoint.clouds) === null || _f === void 0 ? void 0 : _f.forEach((vpCloud => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
-            this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
-        }));
-        (_g = viewpoint.images) === null || _g === void 0 ? void 0 : _g.forEach((vpImage => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
-            this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
-        }));
-    }
     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) {
@@ -2286,8 +2242,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaLine.ref();
-        this._konvaLayer.add(obj);
+        this.addObject(konvaLine);
         return konvaLine;
     }
     createTextInput(pos, inputX, inputY, angle, text) {
@@ -2368,34 +2323,31 @@ class KonvaMarkup {
         this._imageInputRef = null;
         this._imageInputPos = null;
     }
-    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
-        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();
-        if (specifiedText) {
-            const tolerance = 1e-6;
-            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-                const size = .02;
-                const scale = this._worldTransformer.getScale();
-                fontSize = textSize / (scale.y / size) / 34;
-            }
-            const konvaText = new KonvaText({
-                position: {
-                    x: position.x,
-                    y: position.y
-                },
-                text: specifiedText,
-                rotation: angle,
-                fontSize: fontSize || this.fontSize,
-                color: color || this._markupColor.HexColor,
-                id: id
-            });
-            this._konvaLayer.add(konvaText.ref());
-            return konvaText;
-        }
+        const tolerance = 1e-6;
+        if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+            const size = .02;
+            const scale = this._worldTransformer.getScale();
+            fontSize = textSize / (scale.y / size) / 34;
+        }
+        const konvaText = new KonvaText({
+            position: {
+                x: position.x,
+                y: position.y
+            },
+            text: text,
+            rotation: angle,
+            fontSize: fontSize || this.fontSize,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        this.addObject(konvaText);
+        return konvaText;
     }
     addRectangle(position, width, height, lineWidth, color, id) {
         if (!position) return;
@@ -2407,8 +2359,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaRectangle.ref();
-        this._konvaLayer.add(obj);
+        this.addObject(konvaRectangle);
         return konvaRectangle;
     }
     addEllipse(position, radius, lineWidth, color, id) {
@@ -2420,8 +2371,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaEllipse.ref();
-        this._konvaLayer.add(obj);
+        this.addObject(konvaEllipse);
         return konvaEllipse;
     }
     addArrow(start, end, color, id) {
@@ -2432,8 +2382,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaArrow.ref();
-        this._konvaLayer.add(obj);
+        this.addObject(konvaArrow);
         return konvaArrow;
     }
     addCloud(position, width, height, lineWidth, color, id) {
@@ -2446,30 +2395,23 @@ class KonvaMarkup {
             lineWidth: lineWidth || this.lineWidth,
             id: id
         });
-        const obj = konvaCloud.ref();
-        this._konvaLayer.add(obj);
+        this.addObject(konvaCloud);
         return konvaCloud;
     }
     addImage(position, src, width, height, id) {
-        if (!position) return;
-        let konvaImage;
-        if (src) {
-            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([]);
-            }
-        }
+        var _a;
+        if (!position || !src) return;
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
         this.removeImageInput();
+        const konvaImage = new KonvaImage({
+            position: position,
+            src: src,
+            width: width,
+            height: height,
+            id: id
+        });
+        this.addObject(konvaImage);
         return konvaImage;
     }
 }
@@ -5190,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", {
@@ -5204,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();
@@ -5249,6 +5197,7 @@ class Viewer extends EventEmitter2 {
         }
         if (this._visualizeJs) this._visualizeJs.getViewer().clear();
         this._visualizeJs = undefined;
+        this._visualizeTimestamp = undefined;
         return this;
     }
     isInitialized() {