@inweb/viewer-visualize 25.7.10 → 25.8.1

package/dist/viewer-visualize.js

@@ -12172,6 +12172,29 @@
         }
     }
 
+    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 {
@@ -13009,31 +13032,37 @@
         },
         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
         }
     };
 
@@ -13064,10 +13093,10 @@
             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);
@@ -13076,7 +13105,7 @@
         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");
@@ -13120,8 +13149,8 @@
         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;
@@ -13129,23 +13158,19 @@
         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) {
@@ -13188,110 +13213,29 @@
             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())));
@@ -13300,13 +13244,6 @@
         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) {
@@ -13354,8 +13291,8 @@
         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));
             }
@@ -13597,7 +13534,7 @@
                 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
@@ -13611,14 +13548,15 @@
             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(),
@@ -13636,7 +13574,7 @@
                 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(),
@@ -13653,7 +13591,7 @@
                 const shape = new KonvaEllipse(null, ellipse);
                 ellipses.push({
                     id: shape.id(),
-                    position: this.getPoint3dFromArray(worldPoint),
+                    position: worldPoint,
                     radius: {
                         x: ellipse.getRadiusX(),
                         y: ellipse.getRadiusY()
@@ -13681,8 +13619,8 @@
                 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()
                 });
             }));
@@ -13696,7 +13634,7 @@
                 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()
@@ -13712,7 +13650,7 @@
                 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(),