@inweb/markup 25.8.3 → 25.8.5

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;
@@ -12610,6 +12609,8 @@
 	        return objects;
 	    }
 	    getSelectedObjects() {
+	        if (!this._konvaTransformer)
+	            return [];
 	        return this._konvaTransformer
 	            .nodes()
 	            .map((ref) => {
@@ -12620,31 +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([]);
+	        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;
@@ -12653,8 +12659,8 @@
 	            keepRatio: false,
 	            flipEnabled: false,
 	        });
-	        this._konvaTransformer = transformer;
 	        layer.add(transformer);
+	        this._konvaTransformer = transformer;
 	        let isPaint = false;
 	        let lastLine;
 	        let mouseDownPos;
@@ -12840,20 +12846,17 @@
 	            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;
@@ -12887,9 +12890,9 @@
 	    }
 	    getMarkupTexts() {
 	        const texts = [];
-	        const textSize = 0.02;
-	        const textScale = this._worldTransformer.getScale();
 	        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, ref);
@@ -12999,12 +13002,14 @@
 	    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) {
@@ -13021,7 +13026,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaLine.ref());
+	        this.addObject(konvaLine);
 	        return konvaLine;
 	    }
 	    createTextInput(pos, inputX, inputY, angle, text) {
@@ -13104,15 +13109,13 @@
 	        this._imageInputRef = null;
 	        this._imageInputPos = null;
 	    }
-	    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
-	        if (!specifiedText)
+	    addText(text, position, angle, color, textSize, fontSize, id) {
+	        var _a;
+	        if (!text)
 	            return;
-	        const trNodes = this._konvaTransformer.nodes();
-	        if (trNodes.length > 0) {
-	            // in case of edit - remove old Konva.Text object
-	            trNodes[0].destroy();
-	            this._konvaTransformer.nodes([]);
-	        }
+	        // 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();
 	        // in case we have old viewpoint without font_size
 	        const tolerance = 1.0e-6;
@@ -13123,13 +13126,13 @@
 	        }
 	        const konvaText = new KonvaText({
 	            position: { x: position.x, y: position.y },
-	            text: specifiedText,
+	            text,
 	            rotation: angle,
 	            fontSize: fontSize || this.fontSize,
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaText.ref());
+	        this.addObject(konvaText);
 	        return konvaText;
 	    }
 	    addRectangle(position, width, height, lineWidth, color, id) {
@@ -13143,7 +13146,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaRectangle.ref());
+	        this.addObject(konvaRectangle);
 	        return konvaRectangle;
 	    }
 	    addEllipse(position, radius, lineWidth, color, id) {
@@ -13156,7 +13159,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaEllipse.ref());
+	        this.addObject(konvaEllipse);
 	        return konvaEllipse;
 	    }
 	    addArrow(start, end, color, id) {
@@ -13168,7 +13171,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaArrow.ref());
+	        this.addObject(konvaArrow);
 	        return konvaArrow;
 	    }
 	    addCloud(position, width, height, lineWidth, color, id) {
@@ -13182,18 +13185,16 @@
 	            lineWidth: lineWidth || this.lineWidth,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaCloud.ref());
+	        this.addObject(konvaCloud);
 	        return konvaCloud;
 	    }
 	    addImage(position, src, width, height, id) {
+	        var _a;
 	        if (!position || !src)
 	            return;
-	        const trNodes = this._konvaTransformer.nodes();
-	        if (trNodes.length > 0) {
-	            // 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,
@@ -13202,7 +13203,7 @@
 	            height,
 	            id,
 	        });
-	        this._konvaLayer.add(konvaImage.ref());
+	        this.addObject(konvaImage);
 	        return konvaImage;
 	    }
 	}