@inweb/markup 26.4.0 → 26.4.2

package/src/markup/Konva/KonvaMarkup.ts

@@ -35,6 +35,7 @@ import {
   IViewpoint,
   PanEvent,
   ZoomAtEvent,
+  ResizeEvent,
 } from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
@@ -58,34 +59,47 @@ const MarkupMode2Konva = {
   },
   Line: {
     name: "Line",
-    initializer: (ref: any, params = null) => new KonvaLine(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaLine(params, ref, ...attr),
   },
   Text: {
     name: "Text",
-    initializer: (ref: any, params = null) => new KonvaText(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaText(params, ref, ...attr),
   },
   Rectangle: {
     name: "Rect",
-    initializer: (ref: any, params = null) => new KonvaRectangle(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaRectangle(params, ref, ...attr),
   },
   Ellipse: {
     name: "Ellipse",
-    initializer: (ref: any, params = null) => new KonvaEllipse(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaEllipse(params, ref, ...attr),
   },
   Arrow: {
     name: "Arrow",
-    initializer: (ref: any, params = null) => new KonvaArrow(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaArrow(params, ref, ...attr),
   },
   Image: {
     name: "Image",
-    initializer: (ref: any, params = null) => new KonvaImage(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaImage(params, ref, ...attr),
   },
   Cloud: {
     name: "Cloud",
-    initializer: (ref: any, params = null) => new KonvaCloud(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaCloud(params, ref, ...attr),
   },
 };
 
+function debounce(func, wait: number) {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      func(...args);
+    }, wait);
+  };
+}
+
 /**
  * 2D markup core.
  */
@@ -93,7 +107,6 @@ export class KonvaMarkup implements IMarkup {
   private _viewer: IEventEmitter;
   private _worldTransformer: IWorldTransform;
   private _container: HTMLElement;
-  private _containerEvents: string[] = [];
   private _markupIsActive = false;
   private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
@@ -130,7 +143,6 @@ export class KonvaMarkup implements IMarkup {
     this._viewer = viewer;
     this._worldTransformer = worldTransformer ?? new WorldTransform();
     this._container = container;
-    this._containerEvents = containerEvents ?? [];
 
     this._markupContainer = document.createElement("div");
     this._markupContainer.id = "markup-container";
@@ -143,15 +155,14 @@ export class KonvaMarkup implements IMarkup {
     const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
-    this._resizeObserver = new ResizeObserver(this.resizeContainer);
-    this._resizeObserver.observe(parentDiv);
+    if (viewer) this._viewer.addEventListener("resize", this.resizeViewer);
+    else this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
 
     this._markupColor.setColor(255, 0, 0);
 
     this.initializeKonva();
 
     if (this._viewer) {
-      // 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);
@@ -163,7 +174,6 @@ export class KonvaMarkup implements IMarkup {
       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));
     }
 
     this.destroyKonva();
@@ -205,25 +215,36 @@ export class KonvaMarkup implements IMarkup {
 
     this._konvaStage.width(width);
     this._konvaStage.height(height);
+
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
+  };
+
+  resizeViewer = (event: ResizeEvent) => {
+    const { width, height } = event;
+
+    if (!width || !height) return; // <- invisible container, or container with parent removed
+    if (!this._konvaStage) return;
+
+    this._konvaStage.width(width);
+    this._konvaStage.height(height);
+
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   pan = (event: PanEvent) => {
-    const newPos = {
-      x: this._konvaStage.x() + event.dX,
-      y: this._konvaStage.y() + event.dY,
-    };
-    this._konvaStage.position(newPos);
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   zoomAt = (event: ZoomAtEvent) => {
-    const newScale = this._konvaStage.scaleX() * event.data;
-    this._konvaStage.scale({ x: newScale, y: newScale });
-
-    const newPos = {
-      x: event.x - (event.x - this._konvaStage.x()) * event.data,
-      y: event.y - (event.y - this._konvaStage.y()) * event.data,
-    };
-    this._konvaStage.position(newPos);
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   redirectToViewer = (event: any) => {
@@ -285,7 +306,7 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.rectangles?.forEach((rect: IRectangle) => {
       const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-      this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+      this.addRectangle(screenPoint, null, rect.width, rect.height, rect.line_width, rect.color, rect.id);
     });
 
     viewpoint.ellipses?.forEach((ellipse: IEllipse) => {
@@ -301,7 +322,7 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.clouds?.forEach((cloud: ICloud) => {
       const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-      this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+      this.addCloud(screenPoint, null, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
     });
 
     viewpoint.images?.forEach((image: IImage) => {
@@ -347,7 +368,7 @@ export class KonvaMarkup implements IMarkup {
     if (!konvaShape || !konvaShape.initializer)
       throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
 
-    const object = konvaShape.initializer(null, params);
+    const object = konvaShape.initializer(null, params, this._worldTransformer);
     this.addObject(object);
 
     return object;
@@ -357,7 +378,9 @@ export class KonvaMarkup implements IMarkup {
     const objects = [];
     Object.keys(MarkupMode2Konva).forEach((type) => {
       const konvaShape = MarkupMode2Konva[type];
-      this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
+      this.konvaLayerFind(type).forEach((ref) =>
+        objects.push(konvaShape.initializer(ref, null, this._worldTransformer))
+      );
     });
     return objects;
   }
@@ -370,7 +393,7 @@ export class KonvaMarkup implements IMarkup {
       .map((ref) => {
         const name = ref.className;
         const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
-        return konvaShape ? konvaShape.initializer(ref) : null;
+        return konvaShape ? konvaShape.initializer(ref, null, this._worldTransformer) : null;
       })
       .filter((x) => x);
   }
@@ -490,7 +513,7 @@ export class KonvaMarkup implements IMarkup {
         const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
         if (defParams) {
           if (this._markupMode === "Rectangle") {
-            this.addRectangle({ x: startX, y: startY }, dX, dY);
+            this.addRectangle({ x: startX, y: startY }, null, dX, dY);
           } else if (this._markupMode === "Ellipse") {
             this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
           } else if (this._markupMode === "Arrow") {
@@ -499,7 +522,7 @@ export class KonvaMarkup implements IMarkup {
               { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y }
             );
           } else if (this._markupMode === "Cloud") {
-            this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
+            this.addCloud({ x: startX, y: startY }, null, Math.max(100, dX), Math.max(100, dY));
           }
         }
       }
@@ -534,7 +557,7 @@ export class KonvaMarkup implements IMarkup {
           lastObj.setPosition(startX, startY);
           lastObj.setWidth(dX);
           lastObj.setHeight(dY);
-        } else lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+        } else lastObj = this.addRectangle({ x: startX, y: startY }, null, dX, dY);
       } else if (this._markupMode === "Ellipse") {
         if (lastObj) {
           lastObj.setPosition(startX, startY);
@@ -546,7 +569,7 @@ export class KonvaMarkup implements IMarkup {
           lastObj.setPosition(startX, startY);
           lastObj.setWidth(Math.max(100, dX));
           lastObj.setHeight(Math.max(100, dY));
-        } else lastObj = this.addCloud({ x: startX, y: startY }, dX, dY);
+        } else lastObj = this.addCloud({ x: startX, y: startY }, null, dX, dY);
       }
     });
 
@@ -678,27 +701,13 @@ export class KonvaMarkup implements IMarkup {
     const lines = [];
 
     this.konvaLayerFind("Line").forEach((ref) => {
-      const linePoints = ref.points();
-      if (!linePoints) return;
-
-      const worldPoints = [];
-      const absoluteTransform = ref.getAbsoluteTransform();
-      for (let i = 0; i < linePoints.length; i += 2) {
-        // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-        // https://stackoverflow.com/a/57641487 - check answer's comments
-        const atPoint = absoluteTransform.point({
-          x: linePoints[i],
-          y: linePoints[i + 1],
-        });
-        const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+      const wcsPoints = ref.getAttr("wcsPoints");
+      if (!wcsPoints) return;
 
-        worldPoints.push(worldPoint);
-      }
-
-      const konvaLine = new KonvaLine(null, ref);
+      const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
       const line: ILine = {
         id: konvaLine.id(),
-        points: worldPoints,
+        points: wcsPoints,
         color: konvaLine.getColor() || "#ff0000",
         type: konvaLine.getLineType() || this.lineType,
         width: konvaLine.getLineWidth() || this.lineWidth,
@@ -717,16 +726,13 @@ export class KonvaMarkup implements IMarkup {
       const textSize = 0.02;
       const textScale = this._worldTransformer.getScale();
 
-      const position = ref.position();
+      const wcsPosition = ref.getAttr("wcsStart");
       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 shape = new KonvaText(null, ref, this._worldTransformer);
       const text: IText = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsPosition,
         text: shape.getText(),
         text_size: textSize * textScale.y,
         angle: shape.getRotation(),
@@ -744,18 +750,17 @@ export class KonvaMarkup implements IMarkup {
     const rectangles = [];
 
     this.konvaLayerFind("Rectangle").forEach((ref) => {
-      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 scale = stageAbsoluteTransform.getMatrix()[0];
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
+      const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+      const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
 
-      const shape = new KonvaRectangle(null, ref);
+      const shape = new KonvaRectangle(null, ref, this._worldTransformer);
       const rectangle: IRectangle = {
         id: shape.id(),
-        position: worldPoint,
-        width: shape.getWidth() * scale,
-        height: shape.getHeigth() * scale,
+        position: wcsStart,
+        width: Math.abs(screenStart.x - screenEnd.x),
+        height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
       };
@@ -770,16 +775,14 @@ export class KonvaMarkup implements IMarkup {
     const ellipses = [];
 
     this.konvaLayerFind("Ellipse").forEach((ref) => {
-      const position = ref.position();
+      const wcsPosition = ref.getAttr("wcsPosition");
       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 shape = new KonvaEllipse(null, ref, this._worldTransformer);
       const ellipse: IEllipse = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsPosition,
         radius: {
           x: ref.getRadiusX() * scale,
           y: ref.getRadiusY() * scale,
@@ -799,25 +802,14 @@ export class KonvaMarkup implements IMarkup {
 
     this.konvaLayerFind("Arrow").forEach((ref) => {
       // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-      const absoluteTransform = ref.getAbsoluteTransform();
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
 
-      const atStartPoint = absoluteTransform.point({
-        x: ref.points()[0],
-        y: ref.points()[1],
-      });
-      const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
-
-      const atEndPoint = absoluteTransform.point({
-        x: ref.points()[2],
-        y: ref.points()[3],
-      });
-      const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
-
-      const shape = new KonvaArrow(null, ref);
+      const shape = new KonvaArrow(null, ref, this._worldTransformer);
       const arrow: IArrow = {
         id: shape.id(),
-        start: worldStartPoint,
-        end: worldEndPoint,
+        start: wcsStart,
+        end: wcsEnd,
         color: shape.getColor(),
       };
 
@@ -831,16 +823,14 @@ export class KonvaMarkup implements IMarkup {
     const images = [];
 
     this.konvaLayerFind("Image").forEach((ref) => {
-      const position = ref.position();
+      const wcsStart = ref.getAttr("wcsStart");
       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 shape = new KonvaImage(null, ref, this._worldTransformer);
       const image: IImage = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsStart,
         src: shape.getSrc(),
         width: shape.getWidth() * scale,
         height: shape.getHeight() * scale,
@@ -856,18 +846,17 @@ export class KonvaMarkup implements IMarkup {
     const clouds = [];
 
     this.konvaLayerFind("Cloud").forEach((ref) => {
-      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 scale = stageAbsoluteTransform.getMatrix()[0];
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
+      const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+      const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
 
-      const shape = new KonvaCloud(null, ref);
+      const shape = new KonvaCloud(null, ref, this._worldTransformer);
       const cloud: ICloud = {
         id: shape.id(),
-        position: worldPoint,
-        width: shape.getWidth() * scale,
-        height: shape.getHeigth() * scale,
+        position: wcsStart,
+        width: Math.abs(screenStart.x - screenEnd.x),
+        height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
       };
@@ -908,13 +897,17 @@ export class KonvaMarkup implements IMarkup {
       points.push({ x: linePoints[i], y: linePoints[i + 1] });
     }
 
-    const konvaLine = new KonvaLine({
-      points,
-      type: type || this.lineType,
-      width: width || this.lineWidth,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaLine = new KonvaLine(
+      {
+        points,
+        type: type || this.lineType,
+        width: width || this.lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaLine);
     return konvaLine;
@@ -1033,14 +1026,18 @@ export class KonvaMarkup implements IMarkup {
       fontSize = textSize / (scale.y / size) / 34;
     }
 
-    const konvaText = new KonvaText({
-      position: { x: position.x, y: position.y },
-      text,
-      rotation: angle,
-      fontSize: fontSize || this.fontSize,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaText = new KonvaText(
+      {
+        position: { x: position.x, y: position.y },
+        text,
+        rotation: angle,
+        fontSize: fontSize || this.fontSize,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaText);
     return konvaText;
@@ -1048,6 +1045,7 @@ export class KonvaMarkup implements IMarkup {
 
   private addRectangle(
     position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     width: number,
     height: number,
     lineWidth?: number,
@@ -1056,61 +1054,70 @@ export class KonvaMarkup implements IMarkup {
   ): KonvaRectangle | void {
     if (!position) return;
 
-    const konvaRectangle = new KonvaRectangle({
-      position,
-      width,
-      height,
-      lineWidth: lineWidth || this.lineWidth,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaRectangle = new KonvaRectangle(
+      {
+        position,
+        position2,
+        width,
+        height,
+        lineWidth: lineWidth || this.lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaRectangle);
     return konvaRectangle;
   }
 
   private addEllipse(
-    position: { x: number; y: number },
-    radius: { x: number; y: number },
+    position: Konva.Vector2d,
+    radius: Konva.Vector2d,
     lineWidth?: number,
     color?: string,
     id?: string
   ): KonvaEllipse | void {
     if (!position) return;
 
-    const konvaEllipse = new KonvaEllipse({
-      position,
-      radius,
-      lineWidth,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaEllipse = new KonvaEllipse(
+      {
+        position,
+        radius,
+        lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaEllipse);
     return konvaEllipse;
   }
 
-  private addArrow(
-    start: { x: number; y: number },
-    end: { x: number; y: number },
-    color?: string,
-    id?: string
-  ): KonvaArrow | void {
+  private addArrow(start: Konva.Vector2d, end: Konva.Vector2d, color?: string, id?: string): KonvaArrow | void {
     if (!start || !end) return;
 
-    const konvaArrow = new KonvaArrow({
-      start,
-      end,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaArrow = new KonvaArrow(
+      {
+        start,
+        end,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaArrow);
     return konvaArrow;
   }
 
   private addCloud(
-    position: { x: number; y: number },
+    position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     width: number,
     height: number,
     lineWidth?: number,
@@ -1119,21 +1126,26 @@ export class KonvaMarkup implements IMarkup {
   ): KonvaCloud | void {
     if (!position || !width || !height) return;
 
-    const konvaCloud = new KonvaCloud({
-      position,
-      width,
-      height,
-      color: color || this._markupColor.asHex(),
-      lineWidth: lineWidth || this.lineWidth,
-      id,
-    });
+    const konvaCloud = new KonvaCloud(
+      {
+        position,
+        position2,
+        width,
+        height,
+        color: color || this._markupColor.asHex(),
+        lineWidth: lineWidth || this.lineWidth,
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaCloud);
     return konvaCloud;
   }
 
   private addImage(
-    position: { x: number; y: number },
+    position: Konva.Vector2d,
     src: string,
     width?: number,
     height?: number,
@@ -1147,15 +1159,19 @@ export class KonvaMarkup implements IMarkup {
     this.clearSelected();
     this.removeImageInput();
 
-    const konvaImage = new KonvaImage({
-      position,
-      src,
-      width,
-      height,
-      maxWidth: this._konvaStage.width() - position.x,
-      maxHeight: this._konvaStage.height() - position.y,
-      id,
-    });
+    const konvaImage = new KonvaImage(
+      {
+        position,
+        src,
+        width,
+        height,
+        maxWidth: this._konvaStage.width() - position.x,
+        maxHeight: this._konvaStage.height() - position.y,
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaImage);
     return konvaImage;