@inweb/markup 25.9.0 → 25.9.2

package/dist/markup.module.js

@@ -1,5 +1,28 @@
 import Konva from "konva";
 
+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);
@@ -29,29 +52,6 @@ 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 {
@@ -1004,16 +1004,45 @@ class KonvaMarkup {
             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?');
@@ -1037,11 +1066,13 @@ class KonvaMarkup {
             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)));
@@ -1088,6 +1119,14 @@ class KonvaMarkup {
         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,
@@ -1234,7 +1273,7 @@ class KonvaMarkup {
                 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") {
@@ -1244,7 +1283,7 @@ class KonvaMarkup {
         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);
@@ -1288,7 +1327,7 @@ class KonvaMarkup {
             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);
@@ -1344,7 +1383,7 @@ class KonvaMarkup {
             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") {
@@ -1352,7 +1391,7 @@ class KonvaMarkup {
                         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);
                     }
                 }
@@ -1457,11 +1496,13 @@ class KonvaMarkup {
         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(),
@@ -1470,7 +1511,7 @@ class KonvaMarkup {
                 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);
         }));
@@ -1480,13 +1521,19 @@ class KonvaMarkup {
         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()
             };
@@ -1498,14 +1545,20 @@ class KonvaMarkup {
         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()
@@ -1543,14 +1596,20 @@ class KonvaMarkup {
         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);
         }));
@@ -1560,13 +1619,19 @@ class KonvaMarkup {
         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()
             };