@inweb/markup 25.7.4 → 25.7.6

package/dist/markup.module.js

@@ -1,18 +1,5 @@
 import Konva from "konva";
 
-var MarkupMode;
-
-(function(MarkupMode) {
-    MarkupMode["SelectMarkup"] = "SelectMarkup";
-    MarkupMode["Line"] = "Line";
-    MarkupMode["Text"] = "Text";
-    MarkupMode["Rectangle"] = "Rectangle";
-    MarkupMode["Ellipse"] = "Ellipse";
-    MarkupMode["Arrow"] = "Arrow";
-    MarkupMode["Image"] = "Image";
-    MarkupMode["Cloud"] = "Cloud";
-})(MarkupMode || (MarkupMode = {}));
-
 class MarkupColor {
     get HexColor() {
         return "#" + this._hex;
@@ -872,31 +859,40 @@ class KonvaCloud {
     }
 }
 
-const MarkupMode2Konva = new Map([ [ MarkupMode.SelectMarkup, {
-    name: "SelectMarkup",
-    initializer: () => {}
-} ], [ MarkupMode.Line, {
-    name: "Line",
-    initializer: ref => new KonvaLine(null, ref)
-} ], [ MarkupMode.Text, {
-    name: "Text",
-    initializer: ref => new KonvaText(null, ref)
-} ], [ MarkupMode.Rectangle, {
-    name: "Rect",
-    initializer: ref => new KonvaRectangle(null, ref)
-} ], [ MarkupMode.Ellipse, {
-    name: "Ellipse",
-    initializer: ref => new KonvaEllipse(null, ref)
-} ], [ MarkupMode.Arrow, {
-    name: "Arrow",
-    initializer: ref => new KonvaArrow(null, ref)
-} ], [ MarkupMode.Image, {
-    name: "Image",
-    initializer: ref => new KonvaImage(null, ref)
-} ], [ MarkupMode.Cloud, {
-    name: "Cloud",
-    initializer: ref => new KonvaCloud(null, ref)
-} ] ]);
+const MarkupMode2Konva = {
+    SelectMarkup: {
+        name: "SelectMarkup",
+        initializer: null
+    },
+    Line: {
+        name: "Line",
+        initializer: ref => new KonvaLine(null, ref)
+    },
+    Text: {
+        name: "Text",
+        initializer: ref => new KonvaText(null, ref)
+    },
+    Rectangle: {
+        name: "Rect",
+        initializer: ref => new KonvaRectangle(null, ref)
+    },
+    Ellipse: {
+        name: "Ellipse",
+        initializer: ref => new KonvaEllipse(null, ref)
+    },
+    Arrow: {
+        name: "Arrow",
+        initializer: ref => new KonvaArrow(null, ref)
+    },
+    Image: {
+        name: "Image",
+        initializer: ref => new KonvaImage(null, ref)
+    },
+    Cloud: {
+        name: "Cloud",
+        initializer: ref => new KonvaCloud(null, ref)
+    }
+};
 
 class KonvaMarkup {
     constructor() {
@@ -913,10 +909,9 @@ class KonvaMarkup {
             this._markupContainer.className = this._canvasOriginal.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
             this.removeTextInput();
             this.removeImageInput();
-            const markupMode = MarkupMode[draggerName];
-            const konvaMode = MarkupMode2Konva.get(markupMode);
-            if (konvaMode) {
-                this._markupMode = markupMode;
+            const konvaShape = MarkupMode2Konva[draggerName];
+            if (konvaShape) {
+                this._markupMode = draggerName;
                 this._markupIsActive = true;
             } else {
                 this._markupIsActive = false;
@@ -931,7 +926,7 @@ class KonvaMarkup {
         this.pan = event => {
             const dX = event.dX / window.devicePixelRatio;
             const dY = event.dY / window.devicePixelRatio;
-            Object.values(MarkupMode).forEach((mode => this.konvaLayerFind(mode).forEach((x => x.move({
+            Object.keys(MarkupMode2Konva).forEach((mode => this.konvaLayerFind(mode).forEach((ref => ref.move({
                 x: dX,
                 y: dY
             })))));
@@ -987,7 +982,7 @@ class KonvaMarkup {
         this.removeTextInput();
         this.removeImageInput();
         this._konvaTransformer.nodes([]);
-        Object.values(MarkupMode).forEach((mode => this.konvaLayerFind(mode).forEach((x => x.destroy()))));
+        Object.keys(MarkupMode2Konva).forEach((mode => this.konvaLayerFind(mode).forEach((ref => ref.destroy()))));
     }
     getMarkupColor() {
         return this._markupColor.RGB;
@@ -997,11 +992,11 @@ class KonvaMarkup {
     }
     colorizeAllMarkup(r = 255, g = 0, b = 0) {
         const hex = new MarkupColor(r, g, b).HexColor;
-        Object.values(MarkupMode).forEach((mode => {
-            this.konvaLayerFind(mode).forEach((x => {
-                var _a;
-                const konvaObj = (_a = MarkupMode2Konva.get(mode)) === null || _a === void 0 ? void 0 : _a.initializer(x);
-                if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
+        Object.keys(MarkupMode2Konva).forEach((mode => {
+            this.konvaLayerFind(mode).forEach((ref => {
+                const konvaShape = MarkupMode2Konva[mode];
+                const konvaObj = konvaShape.initializer(ref);
+                if (konvaObj.setColor) konvaObj.setColor(hex);
             }));
         }));
         this._konvaLayer.draw();
@@ -1090,25 +1085,25 @@ class KonvaMarkup {
     }
     getObjects() {
         const objects = [];
-        this.konvaLayerFind(MarkupMode.Line).forEach((line => {
+        this.konvaLayerFind("Line").forEach((line => {
             objects.push(new KonvaLine(null, line));
         }));
-        this.konvaLayerFind(MarkupMode.Text).forEach((text => {
+        this.konvaLayerFind("Text").forEach((text => {
             objects.push(new KonvaText(null, text));
         }));
-        this.konvaLayerFind(MarkupMode.Rectangle).forEach((rectangle => {
+        this.konvaLayerFind("Rectangle").forEach((rectangle => {
             objects.push(new KonvaRectangle(null, rectangle));
         }));
-        this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
+        this.konvaLayerFind("Ellipse").forEach((ellipse => {
             objects.push(new KonvaEllipse(null, ellipse));
         }));
-        this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow => {
+        this.konvaLayerFind("Arrow").forEach((arrow => {
             objects.push(new KonvaArrow(null, arrow));
         }));
-        this.konvaLayerFind(MarkupMode.Image).forEach((image => {
+        this.konvaLayerFind("Image").forEach((image => {
             objects.push(new KonvaImage(null, image));
         }));
-        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+        this.konvaLayerFind("Cloud").forEach((cloud => {
             objects.push(new KonvaCloud(null, cloud));
         }));
         return objects;
@@ -1211,10 +1206,9 @@ class KonvaMarkup {
         this._konvaLayer.add(object.ref());
     }
     konvaLayerFind(markupShape) {
-        const konvaShape = MarkupMode2Konva.get(markupShape);
-        if (konvaShape) {
-            const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x => x.parent instanceof Konva.Layer));
-            return konvaShapes;
+        const konvaShape = MarkupMode2Konva[markupShape];
+        if (konvaShape && konvaShape.initializer) {
+            return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
         }
         return [];
     }
@@ -1242,15 +1236,15 @@ class KonvaMarkup {
         let mouseDownPos;
         let lastObj;
         stage.on("mousedown touchstart", (e => {
-            if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.Image) return;
+            if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image") return;
             if (e.target === stage && transformer.nodes().length > 0) {
                 transformer.nodes([]);
                 return;
             }
             const pos = stage.getPointerPosition();
             mouseDownPos = pos;
-            isPaint = [ MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle ].some((m => m === this._markupMode));
-            if (this._markupMode === MarkupMode.Line) {
+            isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some((m => m === this._markupMode));
+            if (this._markupMode === "Line") {
                 lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
             }
         }));
@@ -1264,12 +1258,12 @@ class KonvaMarkup {
                 const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
                 const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
                 if (defParams) {
-                    if (this._markupMode === MarkupMode.Rectangle) {
+                    if (this._markupMode === "Rectangle") {
                         this.addRectangle({
                             x: startX,
                             y: startY
                         }, dX, dY);
-                    } else if (this._markupMode === MarkupMode.Ellipse) {
+                    } else if (this._markupMode === "Ellipse") {
                         this.addEllipse({
                             x: startX,
                             y: startY
@@ -1277,7 +1271,7 @@ class KonvaMarkup {
                             x: dX / 2,
                             y: dY / 2
                         });
-                    } else if (this._markupMode === MarkupMode.Arrow) {
+                    } else if (this._markupMode === "Arrow") {
                         this.addArrow({
                             x: mouseDownPos.x,
                             y: mouseDownPos.y
@@ -1285,7 +1279,7 @@ class KonvaMarkup {
                             x: defParams ? mouseDownPos.x + 200 : pos.x,
                             y: defParams ? startY : pos.y
                         });
-                    } else if (this._markupMode === MarkupMode.Cloud) {
+                    } else if (this._markupMode === "Cloud") {
                         this.addCloud({
                             x: startX,
                             y: startY
@@ -1307,12 +1301,12 @@ class KonvaMarkup {
             const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
             const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
             const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
-            if (this._markupMode === MarkupMode.Line) {
+            if (this._markupMode === "Line") {
                 lastLine.addPoints([ {
                     x: pos.x,
                     y: pos.y
                 } ]);
-            } else if (this._markupMode === MarkupMode.Arrow) {
+            } else if (this._markupMode === "Arrow") {
                 if (lastObj) lastObj.setEndPoint(pos.x, pos.y); else lastObj = this.addArrow({
                     x: mouseDownPos.x,
                     y: mouseDownPos.y
@@ -1320,7 +1314,7 @@ class KonvaMarkup {
                     x: pos.x,
                     y: pos.y
                 });
-            } else if (this._markupMode === MarkupMode.Rectangle) {
+            } else if (this._markupMode === "Rectangle") {
                 if (lastObj) {
                     lastObj.setPosition(startX, startY);
                     lastObj.setWidth(dX);
@@ -1329,7 +1323,7 @@ class KonvaMarkup {
                     x: startX,
                     y: startY
                 }, dX, dY);
-            } else if (this._markupMode === MarkupMode.Ellipse) {
+            } else if (this._markupMode === "Ellipse") {
                 if (lastObj) {
                     lastObj.setPosition(startX, startY);
                     lastObj.setRadiusX(dX);
@@ -1341,7 +1335,7 @@ class KonvaMarkup {
                     x: dX,
                     y: dY
                 });
-            } else if (this._markupMode === MarkupMode.Cloud) {
+            } else if (this._markupMode === "Cloud") {
                 if (lastObj) {
                     lastObj.setPosition(startX, startY);
                     lastObj.setWidth(Math.max(100, dX));
@@ -1355,12 +1349,12 @@ class KonvaMarkup {
         stage.on("click tap", (e => {
             if (!this._markupIsActive) return;
             if (e.target === stage) {
-                if (this._markupMode === MarkupMode.Text) {
+                if (this._markupMode === "Text") {
                     if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
                         const pos = stage.getPointerPosition();
                         this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
                     }
-                } else if (this._markupMode === MarkupMode.Image) {
+                } else if (this._markupMode === "Image") {
                     if (this._imageInputRef && this._imageInputRef.value) this.addImage({
                         x: this._imageInputPos.x,
                         y: this._imageInputPos.y
@@ -1372,7 +1366,7 @@ class KonvaMarkup {
                 transformer.nodes([]);
                 return;
             }
-            if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
+            if (this._markupMode === "Text" || this._markupMode === "SelectMarkup") {
                 if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
                     if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
                         x: e.target.attrs.x,
@@ -1383,7 +1377,7 @@ class KonvaMarkup {
                     this.removeTextInput();
                 }
             }
-            if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
+            if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
                 if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
                     if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
                         x: e.target.attrs.x,
@@ -1438,7 +1432,7 @@ class KonvaMarkup {
     }
     getMarkupLines() {
         const lines = [];
-        this.konvaLayerFind(MarkupMode.Line).forEach((line => {
+        this.konvaLayerFind("Line").forEach((line => {
             const linePoints = line.points();
             if (!linePoints) return;
             const worldPoints = [];
@@ -1466,7 +1460,7 @@ class KonvaMarkup {
         const texts = [];
         const textSize = .02;
         const textScale = this._worldTransformer.getScale();
-        this.konvaLayerFind(MarkupMode.Text).forEach((text => {
+        this.konvaLayerFind("Text").forEach((text => {
             if (!text) return;
             const position = this._worldTransformer.screenToWorld({
                 x: text.x(),
@@ -1487,7 +1481,7 @@ class KonvaMarkup {
     }
     getMarkupRectangles() {
         const rectangles = [];
-        this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect => {
+        this.konvaLayerFind("Rectangle").forEach((rect => {
             const position = rect.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaRectangle(null, rect);
@@ -1504,7 +1498,7 @@ class KonvaMarkup {
     }
     getMarkupEllipses() {
         const ellipses = [];
-        this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
+        this.konvaLayerFind("Ellipse").forEach((ellipse => {
             const position = ellipse.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaEllipse(null, ellipse);
@@ -1523,7 +1517,7 @@ class KonvaMarkup {
     }
     getMarkupArrows() {
         const arrows = [];
-        this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow => {
+        this.konvaLayerFind("Arrow").forEach((arrow => {
             const absoluteTransform = arrow.getAbsoluteTransform();
             const atStartPoint = absoluteTransform.point({
                 x: arrow.points()[0],
@@ -1547,7 +1541,7 @@ class KonvaMarkup {
     }
     getMarkupImages() {
         const images = [];
-        this.konvaLayerFind(MarkupMode.Image).forEach((image => {
+        this.konvaLayerFind("Image").forEach((image => {
             const position = image.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaImage(null, image);
@@ -1563,7 +1557,7 @@ class KonvaMarkup {
     }
     getMarkupClouds() {
         const clouds = [];
-        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+        this.konvaLayerFind("Cloud").forEach((cloud => {
             const position = cloud.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaCloud(null, cloud);
@@ -1834,5 +1828,5 @@ class KonvaMarkup {
     }
 }
 
-export { KonvaMarkup as Markup, MarkupMode };
+export { KonvaMarkup as Markup };
 //# sourceMappingURL=markup.module.js.map