@inweb/markup 25.9.0 → 25.9.2

package/lib/markup/IMarkup.d.ts

@@ -46,7 +46,7 @@ export interface IMarkup {
      */
     initialize(container: HTMLElement, containerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
     /**
-     * Releases all resources allocated by this markup instance.
+     * Releases resources allocated in the {@link initialize | initialize()}.
      */
     dispose(): void;
     /**

package/lib/markup/Konva/KonvaMarkup.d.ts

@@ -1,5 +1,5 @@
 import { IEventEmitter } from "@inweb/eventemitter2";
-import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
+import { ChangeActiveDraggerEvent, IViewpoint, PanEvent, ZoomAtEvent } from "@inweb/viewer-core";
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
@@ -36,6 +36,7 @@ export declare class KonvaMarkup implements IMarkup {
     changeActiveDragger: (event: ChangeActiveDraggerEvent) => void;
     resizeContainer: (entries: ResizeObserverEntry[]) => void;
     pan: (event: PanEvent) => void;
+    zoomAt: (event: ZoomAtEvent) => void;
     redirectToViewer: (event: any) => void;
     syncOverlay(): void;
     clearOverlay(): void;
@@ -57,6 +58,8 @@ export declare class KonvaMarkup implements IMarkup {
     clearSelected(): void;
     private addObject;
     private konvaLayerFind;
+    private getRelativePointPosition;
+    private getRelativePointerPosition;
     private initializeKonva;
     private destroyKonva;
     private getMarkupLines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.9.0",
+  "version": "25.9.2",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,13 +26,13 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~25.9.0",
-    "@inweb/viewer-core": "~25.9.0"
+    "@inweb/eventemitter2": "~25.9.2",
+    "@inweb/viewer-core": "~25.9.2"
   },
   "devDependencies": {
     "konva": "^9.3.14"
   },
   "peerDependencies": {
-    "konva": "^9.2.0"
+    "konva": "^9.3.14"
   }
 }

package/src/markup/IMarkup.ts

@@ -80,7 +80,7 @@ export interface IMarkup {
   ): void;
 
   /**
-   * Releases all resources allocated by this markup instance.
+   * Releases resources allocated in the {@link initialize | initialize()}.
    */
   dispose(): void;
 

package/src/markup/Konva/KonvaMarkup.ts

@@ -34,14 +34,15 @@ import {
   IText,
   IViewpoint,
   PanEvent,
+  ZoomAtEvent,
 } from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
 import { MarkupLineType } from "../IMarkupLine";
 import { MarkupColor } from "./MarkupColor";
-import { WorldTransform } from "../WorldTransform";
 import { KonvaLine } from "./KonvaLine";
 import { KonvaText } from "./KonvaText";
 import { KonvaRectangle } from "./KonvaRectangle";
@@ -153,11 +154,13 @@ export class KonvaMarkup implements IMarkup {
       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(): void {
     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));
@@ -205,9 +208,42 @@ export class KonvaMarkup implements IMarkup {
   };
 
   pan = (event: PanEvent) => {
-    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);
+  };
+
+  zoomAt = (event: ZoomAtEvent) => {
+    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,
+    };
+
+    // how to scale? Zoom in? Or zoom out?
+    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);
   };
 
   redirectToViewer = (event: any) => {
@@ -245,6 +281,8 @@ export class KonvaMarkup implements IMarkup {
     this.clearSelected();
     this.removeTextInput();
     this.removeImageInput();
+    this._konvaStage.scale({ x: 1, y: 1 });
+    this._konvaStage.position({ x: 0, y: 0 });
 
     const markupColor = viewpoint.custom_fields?.markup_color || { r: 255, g: 0, b: 0 };
     this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
@@ -390,6 +428,20 @@ export class KonvaMarkup implements IMarkup {
       );
   }
 
+  private getRelativePointPosition = (point, node) => {
+    // the function will return pointer position relative to the passed node
+    const transform = node.getAbsoluteTransform().copy();
+    // to detect relative position we need to invert transform
+    transform.invert();
+    // get pointer (say mouse or touch) position
+    // now we find relative point
+    return transform.point(point);
+  };
+
+  private getRelativePointerPosition = (node) => {
+    return this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
+  };
+
   private initializeKonva(): any {
     // first we need Konva core things: stage and layer
     const stage = new Konva.Stage({
@@ -434,7 +486,7 @@ export class KonvaMarkup implements IMarkup {
         return;
       }
 
-      const pos = stage.getPointerPosition();
+      const pos = this.getRelativePointerPosition(stage);
       mouseDownPos = pos;
 
       isPaint = ["Arrow", "Cloud", "Ellipse", "Line", "Rectangle"].some((m) => m === this._markupMode);
@@ -448,7 +500,7 @@ export class KonvaMarkup implements IMarkup {
       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);
@@ -483,7 +535,7 @@ export class KonvaMarkup implements IMarkup {
       // prevent scrolling on touch devices
       //e.evt.preventDefault();
 
-      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);
@@ -526,7 +578,7 @@ export class KonvaMarkup implements IMarkup {
           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") {
@@ -539,7 +591,7 @@ export class KonvaMarkup implements IMarkup {
               this._imageInputRef.value
             );
           else if (transformer.nodes().length === 0) {
-            const pos = stage.getPointerPosition();
+            const pos = this.getRelativePointerPosition(stage);
             this.createImageInput(pos);
           }
         }
@@ -683,11 +735,11 @@ export class KonvaMarkup implements IMarkup {
       const textSize = 0.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: IText = {
@@ -697,7 +749,7 @@ export class KonvaMarkup implements IMarkup {
         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);
@@ -711,14 +763,17 @@ export class KonvaMarkup implements IMarkup {
 
     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: IRectangle = {
         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(),
       };
@@ -734,13 +789,19 @@ export class KonvaMarkup implements IMarkup {
 
     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: IEllipse = {
         id: shape.id(),
         position: worldPoint,
-        radius: { x: ref.getRadiusX(), y: ref.getRadiusY() },
+        radius: {
+          x: ref.getRadiusX() * scale,
+          y: ref.getRadiusY() * scale,
+        },
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
       };
@@ -789,15 +850,18 @@ export class KonvaMarkup implements IMarkup {
 
     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: IImage = {
         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);
@@ -811,14 +875,17 @@ export class KonvaMarkup implements IMarkup {
 
     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: ICloud = {
         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(),
       };