@inweb/viewer-visualize 25.9.0 → 25.9.2

package/dist/viewer-visualize.module.js

@@ -766,6 +766,29 @@ async function autoTransformAllModelsToCentralPoint(viewer, model) {
 
 commands("VisualizeJS").registerCommand("autoTransformAllModelsToCentralPoint", autoTransformAllModelsToCentralPoint);
 
+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);
@@ -795,29 +818,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 {
@@ -1770,16 +1770,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?');
@@ -1803,11 +1832,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)));
@@ -1854,6 +1885,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,
@@ -2000,7 +2039,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") {
@@ -2010,7 +2049,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);
@@ -2054,7 +2093,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);
@@ -2110,7 +2149,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") {
@@ -2118,7 +2157,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);
                     }
                 }
@@ -2223,11 +2262,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(),
@@ -2236,7 +2277,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);
         }));
@@ -2246,13 +2287,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()
             };
@@ -2264,14 +2311,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()
@@ -2309,14 +2362,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);
         }));
@@ -2326,13 +2385,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()
             };
@@ -3937,7 +4002,7 @@ class OdZoomDragger extends OdBaseDragger {
         this.beginInteractivity();
     }
     drag(x, y, dltX, dltY) {
-        if (this.press && Math.abs(dltY) <= 1e-5) {
+        if (this.press && Math.abs(dltY) >= 1e-5) {
             const ZOOM_SPEED = .025;
             const zoomFactor = dltY > 0 ? 1 + ZOOM_SPEED : 1 - ZOOM_SPEED;
             this._zoomAction.action(this.pressX, this.pressY, zoomFactor);