@inweb/markup 25.7.9 → 25.8.0

package/dist/markup.module.js

@@ -866,31 +866,37 @@ const MarkupMode2Konva = {
     },
     Line: {
         name: "Line",
-        initializer: ref => new KonvaLine(null, ref)
+        initializer: (ref, params = null) => new KonvaLine(params, ref),
+        zIndex: 1
     },
     Text: {
         name: "Text",
-        initializer: ref => new KonvaText(null, ref)
+        initializer: (ref, params = null) => new KonvaText(params, ref)
     },
     Rectangle: {
         name: "Rect",
-        initializer: ref => new KonvaRectangle(null, ref)
+        initializer: (ref, params = null) => new KonvaRectangle(params, ref),
+        zIndex: 1
     },
     Ellipse: {
         name: "Ellipse",
-        initializer: ref => new KonvaEllipse(null, ref)
+        initializer: (ref, params = null) => new KonvaEllipse(params, ref),
+        zIndex: 1
     },
     Arrow: {
         name: "Arrow",
-        initializer: ref => new KonvaArrow(null, ref)
+        initializer: (ref, params = null) => new KonvaArrow(params, ref),
+        zIndex: 1
     },
     Image: {
         name: "Image",
-        initializer: ref => new KonvaImage(null, ref)
+        initializer: (ref, params = null) => new KonvaImage(params, ref),
+        zIndex: 0
     },
     Cloud: {
         name: "Cloud",
-        initializer: ref => new KonvaCloud(null, ref)
+        initializer: ref => new KonvaCloud(null, ref),
+        zIndex: 1
     }
 };
 
@@ -909,14 +915,7 @@ class KonvaMarkup {
             this._markupContainer.className = this._container.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
             this.removeTextInput();
             this.removeImageInput();
-            const konvaShape = MarkupMode2Konva[draggerName];
-            if (konvaShape) {
-                this._markupMode = draggerName;
-                this._markupIsActive = true;
-            } else {
-                this._markupIsActive = false;
-                this._konvaTransformer.nodes([]);
-            }
+            this.enableEditMode(draggerName);
         };
         this.resizeContainer = entries => {
             var _a, _b;
@@ -928,10 +927,10 @@ class KonvaMarkup {
         this.pan = event => {
             const dX = event.dX / window.devicePixelRatio;
             const dY = event.dY / window.devicePixelRatio;
-            Object.keys(MarkupMode2Konva).forEach((mode => this.konvaLayerFind(mode).forEach((ref => ref.move({
+            this.getObjects().forEach((obj => obj.ref().move({
                 x: dX,
                 y: dY
-            })))));
+            })));
         };
         this.redirectToViewer = event => {
             if (this._viewer) this._viewer.emit(event);
@@ -984,8 +983,8 @@ class KonvaMarkup {
     clearOverlay() {
         this.removeTextInput();
         this.removeImageInput();
-        this._konvaTransformer.nodes([]);
-        Object.keys(MarkupMode2Konva).forEach((mode => this.konvaLayerFind(mode).forEach((ref => ref.destroy()))));
+        this.clearSelected();
+        this.getObjects().forEach((obj => obj.ref().destroy()));
     }
     getMarkupColor() {
         return this._markupColor.RGB;
@@ -993,23 +992,19 @@ class KonvaMarkup {
     setMarkupColor(r, g, b) {
         this._markupColor.setColor(r, g, b);
     }
-    colorizeAllMarkup(r = 255, g = 0, b = 0) {
-        const hex = new MarkupColor(r, g, b).HexColor;
-        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);
-            }));
+    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();
     }
     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(new MarkupColor(r, g, b).HexColor);
-            }
+            if (colorable && colorable.setColor) colorable.setColor(hexColor);
         }));
     }
     setViewpoint(viewpoint) {
@@ -1041,111 +1036,40 @@ class KonvaMarkup {
         viewpoint.description = (new Date).toDateString();
         return viewpoint;
     }
-    createObject(type, params) {
-        let object = null;
-        let zIndex = this._zIndex;
-        switch (type.toLocaleLowerCase()) {
-          case "line":
-            object = new KonvaLine(params);
-            zIndex = 1;
-            break;
-
-          case "text":
-            object = new KonvaText(params);
-            break;
-
-          case "rectangle":
-            object = new KonvaRectangle(params);
-            zIndex = 1;
-            break;
-
-          case "ellipse":
-            object = new KonvaEllipse(params);
-            zIndex = 1;
-            break;
-
-          case "arrow":
-            object = new KonvaArrow(params);
-            break;
-
-          case "image":
-            object = new KonvaImage(params);
-            zIndex = 0;
-            break;
-
-          case "cloud":
-            object = new KonvaCloud(params);
-            zIndex = 1;
-            break;
-
-          default:
-            throw new Error("Markup CreateObject - unsupported type has been detected.");
+    enableEditMode(mode) {
+        if (!mode || !MarkupMode2Konva[mode]) {
+            this.clearSelected();
+            this._markupIsActive = false;
+        } else {
+            this._markupMode = mode;
+            this._markupIsActive = true;
         }
+        return this;
+    }
+    createObject(type, params) {
+        var _a;
+        const konvaShape = MarkupMode2Konva[type];
+        if (!konvaShape || !konvaShape.initializer) throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
+        const object = konvaShape.initializer(null, params);
         this.addObject(object);
-        object.setZIndex(zIndex);
+        object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
         this._zIndex++;
         return object;
     }
     getObjects() {
         const objects = [];
-        this.konvaLayerFind("Line").forEach((line => {
-            objects.push(new KonvaLine(null, line));
-        }));
-        this.konvaLayerFind("Text").forEach((text => {
-            objects.push(new KonvaText(null, text));
-        }));
-        this.konvaLayerFind("Rectangle").forEach((rectangle => {
-            objects.push(new KonvaRectangle(null, rectangle));
-        }));
-        this.konvaLayerFind("Ellipse").forEach((ellipse => {
-            objects.push(new KonvaEllipse(null, ellipse));
-        }));
-        this.konvaLayerFind("Arrow").forEach((arrow => {
-            objects.push(new KonvaArrow(null, arrow));
-        }));
-        this.konvaLayerFind("Image").forEach((image => {
-            objects.push(new KonvaImage(null, image));
-        }));
-        this.konvaLayerFind("Cloud").forEach((cloud => {
-            objects.push(new KonvaCloud(null, cloud));
+        Object.keys(MarkupMode2Konva).forEach((type => {
+            const konvaShape = MarkupMode2Konva[type];
+            this.konvaLayerFind(type).forEach((ref => objects.push(konvaShape.initializer(ref))));
         }));
         return objects;
     }
     getSelectedObjects() {
-        const objects = [];
-        this._konvaTransformer.nodes().forEach((obj => {
-            const konvaShapeName = obj.className;
-            switch (konvaShapeName) {
-              case "Line":
-                objects.push(new KonvaLine(null, obj));
-                break;
-
-              case "Text":
-                objects.push(new KonvaText(null, obj));
-                break;
-
-              case "Rect":
-                objects.push(new KonvaRectangle(null, obj));
-                break;
-
-              case "Ellipse":
-                objects.push(new KonvaEllipse(null, obj));
-                break;
-
-              case "Arrow":
-                objects.push(new KonvaArrow(null, obj));
-                break;
-
-              case "Image":
-                objects.push(new KonvaImage(null, obj));
-                break;
-
-              case "Cloud":
-                objects.push(new KonvaCloud(null, obj));
-                break;
-            }
-        }));
-        return objects;
+        return this._konvaTransformer.nodes().map((ref => {
+            const name = ref.className;
+            const konvaShape = Object.values(MarkupMode2Konva).find((shape => shape.name === name));
+            return konvaShape ? konvaShape.initializer(ref) : null;
+        })).filter((x => x));
     }
     selectObjects(objects) {
         const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
@@ -1208,8 +1132,8 @@ class KonvaMarkup {
     addObject(object) {
         this._konvaLayer.add(object.ref());
     }
-    konvaLayerFind(markupShape) {
-        const konvaShape = MarkupMode2Konva[markupShape];
+    konvaLayerFind(type) {
+        const konvaShape = MarkupMode2Konva[type];
         if (konvaShape && konvaShape.initializer) {
             return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
         }