@inweb/viewer-visualize 25.8.2 → 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;
@@ -13160,45 +13160,76 @@
         }
         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;
         }
@@ -13231,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));
@@ -13238,73 +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([]);
-        }
-        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
             });
@@ -13315,8 +13303,8 @@
                 keepRatio: false,
                 flipEnabled: false
             });
-            this._konvaTransformer = transformer;
             layer.add(transformer);
+            this._konvaTransformer = transformer;
             let isPaint = false;
             let lastLine;
             let mouseDownPos;
@@ -13498,31 +13486,28 @@
             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],
@@ -13531,30 +13516,30 @@
                     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(),
@@ -13562,150 +13547,121 @@
                     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) {
@@ -13724,8 +13680,7 @@
                 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) {
@@ -13806,34 +13761,31 @@
             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;
@@ -13845,8 +13797,7 @@
                 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) {
@@ -13858,8 +13809,7 @@
                 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) {
@@ -13870,8 +13820,7 @@
                 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) {
@@ -13884,30 +13833,23 @@
                 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;
         }
     }
@@ -16718,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();
@@ -16774,6 +16722,7 @@
             if (this._visualizeJs)
                 this._visualizeJs.getViewer().clear();
             this._visualizeJs = undefined;
+            this._visualizeTimestamp = undefined;
             return this;
         }
         /**