@inweb/markup 25.7.10 → 25.8.1

package/dist/markup.module.js

@@ -29,6 +29,29 @@ class MarkupColor {
     }
 }
 
+class WorldTransform {
+    screenToWorld(position) {
+        return {
+            x: position.x,
+            y: position.y,
+            z: 0
+        };
+    }
+    worldToScreen(position) {
+        return {
+            x: position.x,
+            y: position.y
+        };
+    }
+    getScale() {
+        return {
+            x: 1,
+            y: 1,
+            z: 1
+        };
+    }
+}
+
 const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
 
 class KonvaLine {
@@ -866,31 +889,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
     }
 };
 
@@ -921,10 +950,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);
@@ -933,7 +962,7 @@ 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>');
         this._viewer = viewer;
-        this._worldTransformer = worldTransformer;
+        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");
@@ -977,8 +1006,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;
@@ -986,23 +1015,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) {
@@ -1045,110 +1070,29 @@ class KonvaMarkup {
         return this;
     }
     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.");
-        }
+        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())));
@@ -1157,13 +1101,6 @@ class KonvaMarkup {
     clearSelected() {
         this._konvaTransformer.nodes([]);
     }
-    getPoint3dFromArray(array) {
-        return {
-            x: array[0],
-            y: array[1],
-            z: array[2]
-        };
-    }
     fillViewpointShapes(viewpoint) {
         const markupLines = this.getMarkupLines();
         if (markupLines && markupLines.length > 0) {
@@ -1211,8 +1148,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));
         }
@@ -1454,7 +1391,7 @@ class KonvaMarkup {
             const konvaLine = new KonvaLine(null, line);
             lines.push({
                 id: konvaLine.id(),
-                points: worldPoints.map((p => this.getPoint3dFromArray(p))),
+                points: worldPoints,
                 color: konvaLine.getColor() || "#ff0000",
                 type: konvaLine.getLineType() || this.lineType,
                 width: konvaLine.getLineWidth() || this.lineWidth
@@ -1468,14 +1405,15 @@ class KonvaMarkup {
         const textScale = this._worldTransformer.getScale();
         this.konvaLayerFind("Text").forEach((text => {
             if (!text) return;
-            const position = this._worldTransformer.screenToWorld({
+            const position = {
                 x: text.x(),
                 y: text.y()
-            });
+            };
+            const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaText(null, text);
             texts.push({
                 id: shape.id(),
-                position: this.getPoint3dFromArray(position),
+                position: worldPoint,
                 text: shape.getText(),
                 text_size: textSize * textScale.y,
                 angle: shape.getRotation(),
@@ -1493,7 +1431,7 @@ class KonvaMarkup {
             const shape = new KonvaRectangle(null, rect);
             rectangles.push({
                 id: shape.id(),
-                position: this.getPoint3dFromArray(worldPoint),
+                position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),
@@ -1510,7 +1448,7 @@ class KonvaMarkup {
             const shape = new KonvaEllipse(null, ellipse);
             ellipses.push({
                 id: shape.id(),
-                position: this.getPoint3dFromArray(worldPoint),
+                position: worldPoint,
                 radius: {
                     x: ellipse.getRadiusX(),
                     y: ellipse.getRadiusY()
@@ -1538,8 +1476,8 @@ class KonvaMarkup {
             const shape = new KonvaArrow(null, arrow);
             arrows.push({
                 id: shape.id(),
-                start: this.getPoint3dFromArray(worldStartPoint),
-                end: this.getPoint3dFromArray(worldEndPoint),
+                start: worldStartPoint,
+                end: worldEndPoint,
                 color: shape.getColor()
             });
         }));
@@ -1553,7 +1491,7 @@ class KonvaMarkup {
             const shape = new KonvaImage(null, image);
             images.push({
                 id: shape.id(),
-                position: this.getPoint3dFromArray(worldPoint),
+                position: worldPoint,
                 src: shape.getSrc(),
                 width: shape.getWidth(),
                 height: shape.getHeight()
@@ -1569,7 +1507,7 @@ class KonvaMarkup {
             const shape = new KonvaCloud(null, cloud);
             clouds.push({
                 id: shape.id(),
-                position: this.getPoint3dFromArray(worldPoint),
+                position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),