@inweb/markup 25.8.3 → 25.8.5

package/dist/markup.module.js

@@ -925,11 +925,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;
@@ -941,11 +940,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;
@@ -960,13 +959,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";
@@ -982,32 +984,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;
@@ -1119,6 +1119,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));
@@ -1126,29 +1127,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([]);
+        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
         });
@@ -1159,8 +1160,8 @@ class KonvaMarkup {
             keepRatio: false,
             flipEnabled: false
         });
-        this._konvaTransformer = transformer;
         layer.add(transformer);
+        this._konvaTransformer = transformer;
         let isPaint = false;
         let lastLine;
         let mouseDownPos;
@@ -1342,20 +1343,17 @@ 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;
@@ -1389,9 +1387,9 @@ class KonvaMarkup {
     }
     getMarkupTexts() {
         const texts = [];
-        const textSize = .02;
-        const textScale = this._worldTransformer.getScale();
         this.konvaLayerFind("Text").forEach((ref => {
+            const textSize = .02;
+            const textScale = this._worldTransformer.getScale();
             const position = {
                 x: ref.x(),
                 y: ref.y()
@@ -1512,13 +1510,15 @@ class KonvaMarkup {
     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) {
@@ -1537,7 +1537,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaLine.ref());
+        this.addObject(konvaLine);
         return konvaLine;
     }
     createTextInput(pos, inputX, inputY, angle, text) {
@@ -1618,13 +1618,11 @@ class KonvaMarkup {
         this._imageInputRef = null;
         this._imageInputPos = null;
     }
-    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
-        if (!specifiedText) return;
-        const trNodes = this._konvaTransformer.nodes();
-        if (trNodes.length > 0) {
-            trNodes[0].destroy();
-            this._konvaTransformer.nodes([]);
-        }
+    addText(text, position, angle, color, textSize, fontSize, id) {
+        var _a;
+        if (!text) return;
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
         this.removeTextInput();
         const tolerance = 1e-6;
         if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
@@ -1637,13 +1635,13 @@ class KonvaMarkup {
                 x: position.x,
                 y: position.y
             },
-            text: specifiedText,
+            text: text,
             rotation: angle,
             fontSize: fontSize || this.fontSize,
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaText.ref());
+        this.addObject(konvaText);
         return konvaText;
     }
     addRectangle(position, width, height, lineWidth, color, id) {
@@ -1656,7 +1654,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaRectangle.ref());
+        this.addObject(konvaRectangle);
         return konvaRectangle;
     }
     addEllipse(position, radius, lineWidth, color, id) {
@@ -1668,7 +1666,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaEllipse.ref());
+        this.addObject(konvaEllipse);
         return konvaEllipse;
     }
     addArrow(start, end, color, id) {
@@ -1679,7 +1677,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        this._konvaLayer.add(konvaArrow.ref());
+        this.addObject(konvaArrow);
         return konvaArrow;
     }
     addCloud(position, width, height, lineWidth, color, id) {
@@ -1692,16 +1690,14 @@ class KonvaMarkup {
             lineWidth: lineWidth || this.lineWidth,
             id: id
         });
-        this._konvaLayer.add(konvaCloud.ref());
+        this.addObject(konvaCloud);
         return konvaCloud;
     }
     addImage(position, src, width, height, id) {
+        var _a;
         if (!position || !src) return;
-        const trNodes = this._konvaTransformer.nodes();
-        if (trNodes.length > 0) {
-            trNodes[0].destroy();
-            this._konvaTransformer.nodes([]);
-        }
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
         this.removeImageInput();
         const konvaImage = new KonvaImage({
             position: position,
@@ -1710,7 +1706,7 @@ class KonvaMarkup {
             height: height,
             id: id
         });
-        this._konvaLayer.add(konvaImage.ref());
+        this.addObject(konvaImage);
         return konvaImage;
     }
 }