@inweb/markup 26.4.0 → 26.5.0

package/src/markup/Konva/KonvaImage.ts

@@ -1,5 +1,30 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 import Konva from "konva";
 import { IMarkupImage, IMarkupImageParams } from "../IMarkupImage";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 export class KonvaImage implements IMarkupImage {
   private _ref: Konva.Image;
@@ -9,8 +34,11 @@ export class KonvaImage implements IMarkupImage {
   private readonly BASE64_HEADER_START = "data:image/";
   private readonly BASE64_NOT_FOUND =
     "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupImageParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupImageParams, ref = null) {
     if (ref) {
       if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
       if (ref.height() <= this.EPSILON) ref.height(32);
@@ -23,12 +51,29 @@ export class KonvaImage implements IMarkupImage {
           ? 1
           : this._ref.height() / this._ref.width();
 
+      const wcsStart = this._ref.getAttr("wcsStart");
+      const wcsEnd = this._ref.getAttr("wcsEnd");
+      if (!wcsStart) {
+        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
+      }
+      if (!wcsEnd) {
+        const rightBottomPoint = { x: ref.x() + ref.width(), y: ref.y() + ref.height() };
+        this._ref.setAttr(
+          "wcsEnd",
+          this._worldTransformer.screenToWorld({ x: rightBottomPoint.x, y: rightBottomPoint.y })
+        );
+      }
+
       return;
     }
 
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
     if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
+    if (params.position2) {
+      params.width = params.position2.x - params.position.x;
+      params.height = params.position2.y - params.position.y;
+    }
 
     this._canvasImage = new Image();
 
@@ -58,6 +103,12 @@ export class KonvaImage implements IMarkupImage {
             this._ref.width(params.maxHeight / this._ratio);
             this._ref.height(params.maxHeight);
           }
+
+          const wcsEnd = this._worldTransformer.screenToWorld({
+            x: params.position.x + this._ref.width(),
+            y: params.position.y + this._ref.height(),
+          });
+          this._ref.setAttr("wcsEnd", wcsEnd);
         }
       }
     };
@@ -78,6 +129,8 @@ export class KonvaImage implements IMarkupImage {
       draggable: true,
     });
 
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
@@ -111,6 +164,26 @@ export class KonvaImage implements IMarkupImage {
       this._ref.scale({ x: 1, y: 1 });
     });
 
+    this._ref.on("transformend", (e) => {
+      const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
+      const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
+      this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+      this._ref.setAttr(
+        "wcsEnd",
+        this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() })
+      );
+    });
+
+    this._ref.on("dragend", (e) => {
+      const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
+      const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
+      this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+      this._ref.setAttr(
+        "wcsEnd",
+        this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() })
+      );
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 
@@ -129,6 +202,10 @@ export class KonvaImage implements IMarkupImage {
   setWidth(w: number): void {
     this._ref.width(w);
     this._ref.height(w * this._ratio);
+
+    const rightLowerPoint = { x: this._ref.x() + w, y: this._ref.y() + this._ref.height() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   getHeight(): number {
@@ -138,6 +215,10 @@ export class KonvaImage implements IMarkupImage {
   setHeight(h: number): void {
     this._ref.height(h);
     this._ref.width(h / this._ratio);
+
+    const rightLowerPoint = { x: this._ref.x() + this._ref.width(), y: this._ref.y() + h };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   ref() {
@@ -172,7 +253,7 @@ export class KonvaImage implements IMarkupImage {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
@@ -183,5 +264,23 @@ export class KonvaImage implements IMarkupImage {
 
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
+    const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
+  }
+
+  updateScreenCoordinates(): void {
+    let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+    let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+
+    let invert = this._ref.getStage().getAbsoluteTransform().copy();
+    invert = invert.invert();
+    const positionStart = invert.point(screenPositionStart);
+    const positionEnd = invert.point(screenPositionEnd);
+
+    this._ref.position({ x: positionStart.x, y: positionStart.y });
+    this._ref.width(Math.abs(positionEnd.x - positionStart.x));
+    this._ref.height(Math.abs(positionEnd.y - positionStart.y));
   }
 }

package/src/markup/Konva/KonvaLine.ts

@@ -1,5 +1,30 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 import Konva from "konva";
 import { IMarkupLine, IMarkupLineParams, MarkupLineType } from "../IMarkupLine";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 const LineTypeSpecs = new Map<string, number[]>([
   ["solid", []],
@@ -9,10 +34,24 @@ const LineTypeSpecs = new Map<string, number[]>([
 
 export class KonvaLine implements IMarkupLine {
   private _ref: Konva.Line;
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupLineParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupLineParams, ref = null) {
     if (ref) {
       this._ref = ref;
+      let wcsPoints = this._ref.getAttr("wcsPoints");
+      if (!wcsPoints) {
+        wcsPoints = [];
+        let points = this._ref.points();
+        let wcsPoint;
+        for (let i = 0; i < points.length; i += 2) {
+          wcsPoint = this._worldTransformer.screenToWorld({ x: points[i], y: points[i + 1] });
+          wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
+        }
+        this._ref.setAttr("wcsPoints", wcsPoints);
+      }
       return;
     }
 
@@ -24,7 +63,12 @@ export class KonvaLine implements IMarkupLine {
       ];
 
     const konvaPoints = [];
-    params.points.forEach((point) => konvaPoints.push(point.x, point.y));
+    const wcsPoints = [];
+    params.points.forEach((point) => {
+      konvaPoints.push(point.x, point.y);
+      let wcsPoint = this._worldTransformer.screenToWorld({ x: point.x, y: point.y });
+      wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
+    });
 
     this._ref = new Konva.Line({
       stroke: params.color ?? "#ff0000",
@@ -38,12 +82,42 @@ export class KonvaLine implements IMarkupLine {
       dash: LineTypeSpecs.get(params.type) || [],
     });
 
+    this._ref.setAttr("wcsPoints", wcsPoints);
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
       if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
     });
 
+    this._ref.on("transformend", (e) => {
+      const absoluteTransform = this._ref.getAbsoluteTransform();
+
+      let wcsPoints = [];
+      let points = this._ref.points();
+      let wcsPoint;
+      for (let i = 0; i < points.length; i += 2) {
+        const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
+        wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
+        wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
+      }
+      this._ref.setAttr("wcsPoints", wcsPoints);
+    });
+
+    this._ref.on("dragend", (e) => {
+      const absoluteTransform = this._ref.getAbsoluteTransform();
+
+      let wcsPoints = [];
+      let points = this._ref.points();
+      let wcsPoint;
+      for (let i = 0; i < points.length; i += 2) {
+        const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
+        wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
+        wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
+      }
+      this._ref.setAttr("wcsPoints", wcsPoints);
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 
@@ -87,7 +161,7 @@ export class KonvaLine implements IMarkupLine {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
@@ -128,10 +202,30 @@ export class KonvaLine implements IMarkupLine {
 
   addPoints(points: [{ x: number; y: number }]) {
     let newPoints = this._ref.points();
+    let wcsPoints = this._ref.getAttr("wcsPoints");
     points.forEach((point) => {
       newPoints = newPoints.concat([point.x, point.y]);
+      let wcsPoint = this._worldTransformer.screenToWorld(point);
+      wcsPoints.push(wcsPoint);
     });
 
     this._ref.points(newPoints);
   }
+
+  updateScreenCoordinates(): void {
+    let wcsPoints = this._ref.getAttr("wcsPoints");
+    let points = [];
+    let invert = this._ref.getAbsoluteTransform().copy();
+    invert = invert.invert();
+    wcsPoints.forEach((point) => {
+      let screenPoint = this._worldTransformer.worldToScreen(point);
+      screenPoint = invert.point({ x: screenPoint.x, y: screenPoint.y });
+      points.push(screenPoint.x);
+      points.push(screenPoint.y);
+    });
+
+    this._ref.points([]);
+    this._ref.points(points);
+    this._ref.clearCache();
+  }
 }