@inweb/markup 26.4.0 → 26.4.2

package/src/markup/Konva/KonvaRectangle.ts

@@ -1,17 +1,70 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IMarkupRectangle, IMarkupRectangleParams } from "../IMarkupRectangle";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 export class KonvaRectangle implements IMarkupRectangle {
   private _ref: Konva.Rect;
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupRectangleParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupRectangleParams, ref = null) {
     if (ref) {
       this._ref = ref;
+      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.position2) {
+      params.width = params.position.x - params.position2.x;
+      params.height = params.position.y - params.position2.y;
+    } else {
+      if (!params.width || !params.height) {
+        params.position2 = { x: 200, y: 200 };
+        params.width = 200;
+        params.height = 200;
+      } else {
+        params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
+      }
+    }
 
     this._ref = new Konva.Rect({
       stroke: params.color ?? "#ff0000",
@@ -27,11 +80,11 @@ export class KonvaRectangle implements IMarkupRectangle {
       strokeScaleEnabled: false,
     });
 
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
+    this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: params.position2.x, y: params.position2.y }));
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
-
-      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
-
       const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
       const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
 
@@ -57,6 +110,29 @@ export class KonvaRectangle implements IMarkupRectangle {
       this._ref.scale({ x: 1, y: 1 });
     });
 
+    this._ref.on("transformend", (e) => {
+      const attrs = e.target.attrs;
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      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());
   }
 
@@ -74,14 +150,23 @@ export class KonvaRectangle implements IMarkupRectangle {
 
   setWidth(w: number): void {
     this._ref.width(w);
+
+    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);
   }
 
   setHeight(h: number): void {
     this._ref.height(h);
+
+    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);
   }
 
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
   }
 
   ref() {
@@ -136,4 +221,18 @@ export class KonvaRectangle implements IMarkupRectangle {
   getLineWidth(): number {
     return this._ref.strokeWidth();
   }
+
+  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/KonvaText.ts

@@ -1,13 +1,45 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IMarkupText, IMarkupTextParams } from "../IMarkupText";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 export class KonvaText implements IMarkupText {
   private _ref: Konva.Text;
+  private _worldTransformer: IWorldTransform;
   private readonly TEXT_FONT_FAMILY = "Calibri";
 
-  constructor(params: IMarkupTextParams, ref = null) {
+  constructor(params: IMarkupTextParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
+
     if (ref) {
       this._ref = ref;
+      const wcsStart = this._ref.getAttr("wcsStart");
+      if (!wcsStart) {
+        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
+      }
       return;
     }
 
@@ -28,6 +60,7 @@ export class KonvaText implements IMarkupText {
     });
 
     this._ref.width(this._ref.getTextWidth());
+    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;
@@ -58,6 +91,21 @@ export class KonvaText implements IMarkupText {
       this._ref.scale({ x: 1, y: 1 });
     });
 
+    this._ref.on("transformend", (e) => {
+      const attrs = e.target.attrs;
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      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.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.id(this._ref._id.toString());
   }
 
@@ -101,7 +149,7 @@ export class KonvaText implements IMarkupText {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
@@ -120,6 +168,7 @@ export class KonvaText implements IMarkupText {
 
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
   }
 
   getFontSize(): number {
@@ -129,4 +178,14 @@ export class KonvaText implements IMarkupText {
   setFontSize(size: number): void {
     this._ref.fontSize(size);
   }
+
+  updateScreenCoordinates(): void {
+    let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+
+    let invert = this._ref.getStage().getAbsoluteTransform().copy();
+    invert = invert.invert();
+    const positionStart = invert.point(screenPositionStart);
+
+    this._ref.position({ x: positionStart.x, y: positionStart.y });
+  }
 }