@inweb/markup 25.8.2 → 25.8.4

package/dist/markup.js

@@ -12419,11 +12419,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;
@@ -12440,12 +12439,13 @@
 	            this.enableEditMode(draggerName);
 	        };
 	        this.resizeContainer = (entries) => {
-	            var _a, _b;
 	            const { width, height } = entries[0].contentRect;
 	            if (!width || !height)
 	                return; // <- invisible container, or container with parent removed
-	            (_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;
@@ -12458,14 +12458,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";
@@ -12482,33 +12484,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;
@@ -12518,43 +12517,62 @@
 	    }
 	    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._konvaLayer.draw();
+	        this.getObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
 	    }
 	    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 || { r: 255, g: 0, b: 0 };
+	        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: [],
-	        };
-	        viewpoint.snapshot = {
-	            data: this.combineMarkupWithDrawing(),
-	        };
-	        viewpoint.custom_fields = {
-	            markup_color: this.getMarkupColor(),
-	        };
-	        this.fillViewpointShapes(viewpoint);
+	        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.description = new Date().toDateString();
 	        return viewpoint;
 	    }
@@ -12591,6 +12609,8 @@
 	        return objects;
 	    }
 	    getSelectedObjects() {
+	        if (!this._konvaTransformer)
+	            return [];
 	        return this._konvaTransformer
 	            .nodes()
 	            .map((ref) => {
@@ -12601,75 +12621,36 @@
 	            .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) {
-	            // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
-	            return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
-	        }
-	        return [];
+	        if (!konvaShape || !konvaShape.initializer)
+	            return [];
+	        // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
+	        return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
 	    }
 	    initializeKonva() {
 	        // first we need Konva core things: stage and layer
-	        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 });
 	        stage.add(layer);
 	        this._konvaLayer = layer;
@@ -12678,8 +12659,8 @@
 	            keepRatio: false,
 	            flipEnabled: false,
 	        });
-	        this._konvaTransformer = transformer;
 	        layer.add(transformer);
+	        this._konvaTransformer = transformer;
 	        let isPaint = false;
 	        let lastLine;
 	        let mouseDownPos;
@@ -12865,32 +12846,29 @@
 	            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) {
 	                // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
 	                // https://stackoverflow.com/a/57641487 - check answer's comments
@@ -12898,28 +12876,27 @@
 	                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 = 0.02;
-	        const textScale = this._worldTransformer.getScale();
-	        this.konvaLayerFind("Text").forEach((text) => {
-	            if (!text)
-	                return;
-	            const position = { x: text.x(), y: text.y() };
+	        this.konvaLayerFind("Text").forEach((ref) => {
+	            const textSize = 0.02;
+	            const textScale = this._worldTransformer.getScale();
+	            const position = { 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(),
@@ -12927,141 +12904,112 @@
 	                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() },
+	                radius: { 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) => {
+	        this.konvaLayerFind("Arrow").forEach((ref) => {
 	            // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-	            const absoluteTransform = arrow.getAbsoluteTransform();
-	            const atStartPoint = absoluteTransform.point({ x: arrow.points()[0], y: arrow.points()[1] });
+	            const absoluteTransform = ref.getAbsoluteTransform();
+	            const atStartPoint = absoluteTransform.point({ 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] });
+	            const atEndPoint = absoluteTransform.point({ 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", 0.25);
 	    }
 	    addLine(linePoints, color, type, width, id) {
@@ -13078,8 +13026,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaLine.ref();
-	        this._konvaLayer.add(obj);
+	        this.addObject(konvaLine);
 	        return konvaLine;
 	    }
 	    createTextInput(pos, inputX, inputY, angle, text) {
@@ -13162,33 +13109,31 @@
 	        this._imageInputRef = null;
 	        this._imageInputPos = null;
 	    }
-	    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
-	        const trNodes = this._konvaTransformer.nodes();
-	        if (trNodes.length > 0) {
-	            // in case of edit - remove old Konva.Text object
-	            trNodes[0].destroy();
-	            this._konvaTransformer.nodes([]);
-	        }
+	    addText(text, position, angle, color, textSize, fontSize, id) {
+	        var _a;
+	        if (!text)
+	            return;
+	        // in case of edit - remove old Konva.Text object
+	        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+	        this.clearSelected();
 	        this.removeTextInput();
-	        if (specifiedText) {
-	            const tolerance = 1.0e-6;
-	            // in case we have old viewpoint without font_size
-	            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-	                const size = 0.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,
-	            });
-	            this._konvaLayer.add(konvaText.ref());
-	            return konvaText;
-	        }
+	        // in case we have old viewpoint without font_size
+	        const tolerance = 1.0e-6;
+	        if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+	            const size = 0.02;
+	            const scale = this._worldTransformer.getScale();
+	            fontSize = textSize / (scale.y / size) / 34;
+	        }
+	        const konvaText = new KonvaText({
+	            position: { x: position.x, y: position.y },
+	            text,
+	            rotation: angle,
+	            fontSize: fontSize || this.fontSize,
+	            color: color || this._markupColor.HexColor,
+	            id,
+	        });
+	        this.addObject(konvaText);
+	        return konvaText;
 	    }
 	    addRectangle(position, width, height, lineWidth, color, id) {
 	        if (!position)
@@ -13201,8 +13146,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaRectangle.ref();
-	        this._konvaLayer.add(obj);
+	        this.addObject(konvaRectangle);
 	        return konvaRectangle;
 	    }
 	    addEllipse(position, radius, lineWidth, color, id) {
@@ -13215,8 +13159,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaEllipse.ref();
-	        this._konvaLayer.add(obj);
+	        this.addObject(konvaEllipse);
 	        return konvaEllipse;
 	    }
 	    addArrow(start, end, color, id) {
@@ -13228,8 +13171,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaArrow.ref();
-	        this._konvaLayer.add(obj);
+	        this.addObject(konvaArrow);
 	        return konvaArrow;
 	    }
 	    addCloud(position, width, height, lineWidth, color, id) {
@@ -13243,32 +13185,25 @@
 	            lineWidth: lineWidth || this.lineWidth,
 	            id,
 	        });
-	        const obj = konvaCloud.ref();
-	        this._konvaLayer.add(obj);
+	        this.addObject(konvaCloud);
 	        return konvaCloud;
 	    }
 	    addImage(position, src, width, height, id) {
-	        if (!position)
+	        var _a;
+	        if (!position || !src)
 	            return;
-	        let konvaImage;
-	        if (src) {
-	            konvaImage = new KonvaImage({
-	                position,
-	                src,
-	                width,
-	                height,
-	                id,
-	            });
-	            const obj = konvaImage.ref();
-	            this._konvaLayer.add(obj);
-	            const trNodes = this._konvaTransformer.nodes();
-	            if (trNodes.length > 0) {
-	                // in case of edit - remove old Image placeholder object
-	                trNodes[0].destroy();
-	                this._konvaTransformer.nodes([]);
-	            }
-	        }
+	        // in case of edit - remove old Image placeholder object
+	        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+	        this.clearSelected();
 	        this.removeImageInput();
+	        const konvaImage = new KonvaImage({
+	            position,
+	            src,
+	            width,
+	            height,
+	            id,
+	        });
+	        this.addObject(konvaImage);
 	        return konvaImage;
 	    }
 	}