@inweb/viewer-visualize 25.9.0 → 25.9.1

package/dist/viewer-visualize.js

@@ -12701,6 +12701,29 @@
     var libExports = lib$1.exports;
     var Konva = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+    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
+            };
+        }
+    }
+
     class MarkupColor {
         constructor(r, g, b) {
             this.setColor(r, g, b);
@@ -12730,29 +12753,6 @@
         }
     }
 
-    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 {
@@ -13705,16 +13705,45 @@
                 this._konvaStage.height(height);
             };
             this.pan = event => {
-                const dX = event.dX / window.devicePixelRatio;
-                const dY = event.dY / window.devicePixelRatio;
-                this.getObjects().forEach((obj => obj.ref().move({
-                    x: dX,
-                    y: dY
-                })));
+                const pointer = this._konvaStage.getPointerPosition();
+                const pointTo = {
+                    x: (pointer.x - this._konvaStage.x()) / this._konvaStage.scaleX(),
+                    y: (pointer.y - this._konvaStage.y()) / this._konvaStage.scaleX()
+                };
+                const newPos = {
+                    x: pointer.x - pointTo.x * this._konvaStage.scale().x + event.dX,
+                    y: pointer.y - pointTo.y * this._konvaStage.scale().x + event.dY
+                };
+                this._konvaStage.position(newPos);
+            };
+            this.zoomAt = event => {
+                const oldScale = this._konvaStage.scaleX();
+                const pointer = this._konvaStage.getPointerPosition();
+                const mousePointTo = {
+                    x: (pointer.x - this._konvaStage.x()) / oldScale,
+                    y: (pointer.y - this._konvaStage.y()) / oldScale
+                };
+                let direction = event.data > 0 ? 1 : -1;
+                const newScale = direction > 0 ? oldScale * event.data : oldScale / event.data;
+                this._konvaStage.scale({
+                    x: newScale,
+                    y: newScale
+                });
+                const newPos = {
+                    x: pointer.x - mousePointTo.x * newScale,
+                    y: pointer.y - mousePointTo.y * newScale
+                };
+                this._konvaStage.position(newPos);
             };
             this.redirectToViewer = event => {
                 if (this._viewer) this._viewer.emit(event);
             };
+            this.getRelativePointPosition = (point, node) => {
+                const transform = node.getAbsoluteTransform().copy();
+                transform.invert();
+                return transform.point(point);
+            };
+            this.getRelativePointerPosition = node => this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
         }
         initialize(container, containerEvents, viewer, worldTransformer) {
             if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
@@ -13738,11 +13767,13 @@
                 this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
                 this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
                 this._viewer.addEventListener("pan", this.pan);
+                this._viewer.addEventListener("zoomat", this.zoomAt);
             }
         }
         dispose() {
             var _a, _b;
             if (this._viewer) {
+                this._viewer.removeEventListener("zoomat", this.zoomAt);
                 this._viewer.removeEventListener("pan", this.pan);
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
                 this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
@@ -13789,6 +13820,14 @@
             this.clearSelected();
             this.removeTextInput();
             this.removeImageInput();
+            this._konvaStage.scale({
+                x: 1,
+                y: 1
+            });
+            this._konvaStage.position({
+                x: 0,
+                y: 0
+            });
             const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
                 r: 255,
                 g: 0,
@@ -13935,7 +13974,7 @@
                     transformer.nodes([]);
                     return;
                 }
-                const pos = stage.getPointerPosition();
+                const pos = this.getRelativePointerPosition(stage);
                 mouseDownPos = pos;
                 isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some((m => m === this._markupMode));
                 if (this._markupMode === "Line") {
@@ -13945,7 +13984,7 @@
             stage.on("mouseup touchend", (e => {
                 if (!this._markupIsActive) return;
                 if (isPaint) {
-                    const pos = stage.getPointerPosition();
+                    const pos = this.getRelativePointerPosition(stage);
                     const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
                     const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
                     const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -13989,7 +14028,7 @@
                 if (!isPaint) {
                     return;
                 }
-                const pos = stage.getPointerPosition();
+                const pos = this.getRelativePointerPosition(stage);
                 const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
                 const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
                 const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -14045,7 +14084,7 @@
                 if (e.target === stage) {
                     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();
+                            const pos = this.getRelativePointerPosition(stage);
                             this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
                         }
                     } else if (this._markupMode === "Image") {
@@ -14053,7 +14092,7 @@
                             x: this._imageInputPos.x,
                             y: this._imageInputPos.y
                         }, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
-                            const pos = stage.getPointerPosition();
+                            const pos = this.getRelativePointerPosition(stage);
                             this.createImageInput(pos);
                         }
                     }
@@ -14158,11 +14197,13 @@
             this.konvaLayerFind("Text").forEach((ref => {
                 const textSize = .02;
                 const textScale = this._worldTransformer.getScale();
-                const position = {
-                    x: ref.x(),
-                    y: ref.y()
-                };
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const position = ref.position();
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 const shape = new KonvaText(null, ref);
                 const text = {
                     id: shape.id(),
@@ -14171,7 +14212,7 @@
                     text_size: textSize * textScale.y,
                     angle: shape.getRotation(),
                     color: shape.getColor(),
-                    font_size: shape.getFontSize()
+                    font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
                 };
                 texts.push(text);
             }));
@@ -14181,13 +14222,19 @@
             const rectangles = [];
             this.konvaLayerFind("Rectangle").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaRectangle(null, ref);
                 const rectangle = {
                     id: shape.id(),
                     position: worldPoint,
-                    width: shape.getWidth(),
-                    height: shape.getHeigth(),
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeigth() * scale,
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -14199,14 +14246,20 @@
             const ellipses = [];
             this.konvaLayerFind("Ellipse").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaEllipse(null, ref);
                 const ellipse = {
                     id: shape.id(),
                     position: worldPoint,
                     radius: {
-                        x: ref.getRadiusX(),
-                        y: ref.getRadiusY()
+                        x: ref.getRadiusX() * scale,
+                        y: ref.getRadiusY() * scale
                     },
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
@@ -14244,14 +14297,20 @@
             const images = [];
             this.konvaLayerFind("Image").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaImage(null, ref);
                 const image = {
                     id: shape.id(),
                     position: worldPoint,
                     src: shape.getSrc(),
-                    width: shape.getWidth(),
-                    height: shape.getHeight()
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeight() * scale
                 };
                 images.push(image);
             }));
@@ -14261,13 +14320,19 @@
             const clouds = [];
             this.konvaLayerFind("Cloud").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaCloud(null, ref);
                 const cloud = {
                     id: shape.id(),
                     position: worldPoint,
-                    width: shape.getWidth(),
-                    height: shape.getHeigth(),
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeigth() * scale,
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -15978,7 +16043,7 @@
             this.beginInteractivity();
         }
         drag(x, y, dltX, dltY) {
-            if (this.press && Math.abs(dltY) <= 10e-6) {
+            if (this.press && Math.abs(dltY) >= 10e-6) {
                 const ZOOM_SPEED = 0.025;
                 const zoomFactor = dltY > 0 ? 1 + ZOOM_SPEED : 1 - ZOOM_SPEED;
                 this._zoomAction.action(this.pressX, this.pressY, zoomFactor);