@inweb/markup 26.4.0 → 26.5.0

package/src/markup/IMarkupImage.ts

@@ -28,12 +28,12 @@ import { IMarkupObject } from "./IMarkupObject";
  */
 export interface IMarkupImage extends IMarkupObject {
   /**
-   * Returns the coordinates of the top-left point (position) of the image.
+   * Returns the screen coordinates of the top-left point (position) of the image.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the image.
+   * Sets the screen coordinates of the top-left point (position) of the image.
    */
   setPosition(x: number, y: number): void;
 
@@ -79,10 +79,16 @@ export interface IMarkupImage extends IMarkupObject {
  */
 export interface IMarkupImageParams {
   /**
-   * Coordinates of the top-left point (position) of the image.
+   * Screen coordinates of the top-left point (position) of the image.
    */
   position?: { x: number; y: number };
 
+  /**
+   * Screen coordinates of the bottom-right point (position) of the image. Specify 0 to set widt and
+   * height of the source image.
+   */
+  position2?: { x: number; y: number };
+
   /**
    * Image source as a base64-encoded
    * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}.
@@ -90,16 +96,16 @@ export interface IMarkupImageParams {
   src?: string;
 
   /**
-   * Width of the image. The original image is scaled to this width. Specify 0 to set width of the source
-   * image.
+   * Deprecated. Width of the image. The original image is scaled to this width. Specify 0 to set width
+   * of the source image. Ignored if {@link position2} is defined.
    *
    * @default 0
    */
   width?: number;
 
   /**
-   * Height of the image. The original image is scaled to this height. Specify 0 to set height of the
-   * source image.
+   * Deprecated. Height of the image. The original image is scaled to this height. Specify 0 to set
+   * height of the source image. Ignored if {@link position2} is defined.
    *
    * @default 0
    */

package/src/markup/IMarkupLine.ts

@@ -34,7 +34,7 @@ export type MarkupLineType = "solid" | "dot" | "dash";
  */
 export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
+   * Returns the screen coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
    */
   getPoints(): number[];
 
@@ -73,7 +73,7 @@ export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupLineParams {
   /**
-   * Array of line points.
+   * Array of screen points of the line.
    */
   points?: { x: number; y: number }[];
 

package/src/markup/IMarkupObject.ts

@@ -81,6 +81,11 @@ export interface IMarkupObject {
    */
   setZIndex(zIndex: number): void;
 
+  /**
+   * Update current screen coordinates with internal WCS-based. Only for resize.
+   */
+  updateScreenCoordinates(): void;
+
   /**
    * Deletes the current object.
    */

package/src/markup/IMarkupRectangle.ts

@@ -29,12 +29,12 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the top-left point (position) of the rectangle.
+   * Returns the screen coordinates of the top-left point (position) of the rectangle.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the rectangle.
+   * Sets the screen coordinates of the top-left point (position) of the rectangle.
    */
   setPosition(x: number, y: number): void;
 
@@ -74,19 +74,24 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupRectangleParams {
   /**
-   * Coordinates of the top-left point (position) of the rectangle.
+   * Screen coordinates of the top-left point (position) of the rectangle.
    */
   position?: { x: number; y: number };
 
   /**
-   * Width of the rectangle.
+   * Screen coordinates of the bottom-right point (position) of the rectangle.
+   */
+  position2?: { x: number; y: number };
+
+  /**
+   * Width of the rectangle. Ignored if {@link position2} is defined.
    *
    * @default 200
    */
   width?: number;
 
   /**
-   * Height of the rectangle.
+   * Height of the rectangle. Ignored if {@link position2} is defined.
    *
    * @default 200
    */

package/src/markup/IMarkupText.ts

@@ -39,12 +39,12 @@ export interface IMarkupText extends IMarkupObject, IMarkupColorable {
   setText(text: string): void;
 
   /**
-   * Returns the coordinates of the top-left point (position) of the text.
+   * Returns the screen coordinates of the top-left point (position) of the text.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the text.
+   * Sets the screen coordinates of the top-left point (position) of the text.
    */
   setPosition(x: number, y: number): void;
 
@@ -64,7 +64,7 @@ export interface IMarkupText extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupTextParams {
   /**
-   * Coordinates of the top-left point (position) of the text.
+   * Screen coordinates of the top-left point (position) of the text.
    */
   position?: { x: number; y: number };
 

package/src/markup/Konva/KonvaArrow.ts

@@ -23,13 +23,24 @@
 
 import Konva from "konva";
 import { IMarkupArrow, IMarkupArrowParams } from "../IMarkupArrow";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 export class KonvaArrow implements IMarkupArrow {
   private _ref: Konva.Arrow;
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupArrowParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupArrowParams, 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.points()[0], y: ref.points()[1] }));
+      if (!wcsEnd)
+        this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: ref.points()[2], y: ref.points()[3] }));
       return;
     }
 
@@ -49,10 +60,28 @@ export class KonvaArrow implements IMarkupArrow {
       strokeScaleEnabled: false,
     });
 
-    this._ref.on("transform", (e) => {
-      const attrs = e.target.attrs;
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.start.x, y: params.start.y }));
+    this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: params.end.x, y: params.end.y }));
 
+    this._ref.on("transformend", (e) => {
+      const attrs = e.target.attrs;
       if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      const points = this._ref.points();
+      const absoluteTransform = this._ref.getAbsoluteTransform();
+      const transformStart = absoluteTransform.point({ x: points[0], y: points[1] });
+      const transformEnd = absoluteTransform.point({ x: points[2], y: points[3] });
+      this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
+      this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
+    });
+
+    this._ref.on("dragend", (e) => {
+      const points = this._ref.points();
+      const absoluteTransform = e.target.getAbsoluteTransform();
+      const transformStart = absoluteTransform.point({ x: points[0], y: points[1] });
+      const transformEnd = absoluteTransform.point({ x: points[2], y: points[3] });
+      this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
+      this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
     });
 
     this._ref.id(this._ref._id.toString());
@@ -99,7 +128,7 @@ export class KonvaArrow implements IMarkupArrow {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
@@ -114,6 +143,8 @@ export class KonvaArrow implements IMarkupArrow {
 
   setPoints(points: { x: number; y: number }[]): void {
     if (points.length === 2) {
+      this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: points[0].x, y: points[0].y }));
+      this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: points[1].x, y: points[1].y }));
       this._ref.points([points[0].x, points[0].y, points[1].x, points[1].y]);
     }
   }
@@ -126,6 +157,7 @@ export class KonvaArrow implements IMarkupArrow {
   setStartPoint(x: number, y: number): void {
     const points = this._ref.points();
     this._ref.points([x, y, points[2], points[3]]);
+    this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
   }
 
   getEndPoint(): { x: number; y: number } {
@@ -136,5 +168,18 @@ export class KonvaArrow implements IMarkupArrow {
   setEndPoint(x: number, y: number): void {
     const points = this._ref.points();
     this._ref.points([points[0], points[1], x, y]);
+    this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x, y }));
+  }
+
+  updateScreenCoordinates(): void {
+    let screenStartPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+    let screenEndPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+
+    let invert = this._ref.getAbsoluteTransform().copy();
+    invert = invert.invert();
+    const startPoint = invert.point({ x: screenStartPoint.x, y: screenStartPoint.y });
+    const endPoint = invert.point({ x: screenEndPoint.x, y: screenEndPoint.y });
+
+    this._ref.points([startPoint.x, startPoint.y, endPoint.x, endPoint.y]);
   }
 }

package/src/markup/Konva/KonvaCloud.ts

@@ -1,19 +1,71 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IMarkupCloud, IMarkupCloudParams } from "../IMarkupCloud";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
 
 export class KonvaCloud implements IMarkupCloud {
   private _ref: Konva.Shape;
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupCloudParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupCloudParams, 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.position2.x - params.position.x;
+      params.height = params.position2.y - params.position.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 };
+      }
+    }
 
-    const arcRadius = 16;
+    const ARC_RADIUS = 16;
 
     this._ref = new Konva.Shape({
       x: params.position.x,
@@ -63,9 +115,9 @@ export class KonvaCloud implements IMarkupCloud {
           const counterClockwise = pX > midPoint.x && pY > midPoint.y;
           for (let iArc = 0; iArc < arcCount; iArc++) {
             if (counterClockwise) {
-              context.arc(pX, pY, arcRadius, endAngle, startAngle);
+              context.arc(pX, pY, ARC_RADIUS, endAngle, startAngle);
             } else {
-              context.arc(pX, pY, arcRadius, startAngle, endAngle);
+              context.arc(pX, pY, ARC_RADIUS, startAngle, endAngle);
             }
 
             pX += dx / arcCount;
@@ -82,11 +134,12 @@ export class KonvaCloud implements IMarkupCloud {
 
     this._ref.className = "Cloud";
 
+    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;
 
@@ -112,12 +165,35 @@ export class KonvaCloud implements IMarkupCloud {
       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.getSelfRect = () => {
       return {
-        x: 0 - arcRadius,
-        y: 0 - arcRadius,
-        width: this._ref.width() + 2 * arcRadius,
-        height: this._ref.height() + 2 * arcRadius,
+        x: 0 - ARC_RADIUS,
+        y: 0 - ARC_RADIUS,
+        width: this._ref.width() + 2 * ARC_RADIUS,
+        height: this._ref.height() + 2 * ARC_RADIUS,
       };
     };
 
@@ -164,7 +240,7 @@ export class KonvaCloud implements IMarkupCloud {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
@@ -175,6 +251,10 @@ export class KonvaCloud implements IMarkupCloud {
 
   setPosition(x: number, y: number): void {
     this._ref.position({ 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);
   }
 
   getWidth(): number {
@@ -183,6 +263,10 @@ export class KonvaCloud implements IMarkupCloud {
 
   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);
   }
 
   getHeigth(): number {
@@ -191,6 +275,10 @@ export class KonvaCloud implements IMarkupCloud {
 
   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);
   }
 
   getLineWidth(): number {
@@ -200,4 +288,18 @@ export class KonvaCloud implements IMarkupCloud {
   setLineWidth(size: number): void {
     this._ref.strokeWidth(size);
   }
+
+  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/KonvaEllipse.ts

@@ -1,18 +1,73 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IMarkupEllipse, IMarkupEllipseParams } from "../IMarkupEllipse";
+import { IWorldTransform } from "../IWorldTransform";
+import { WorldTransform } from "../WorldTransform";
+import * as utils from "../Utils";
 
 export class KonvaEllipse implements IMarkupEllipse {
   private _ref: Konva.Ellipse;
+  private _worldTransformer: IWorldTransform;
+
+  constructor(params: IMarkupEllipseParams, ref = null, worldTransformer = new WorldTransform()) {
+    this._worldTransformer = worldTransformer;
 
-  constructor(params: IMarkupEllipseParams, ref = null) {
     if (ref) {
       this._ref = ref;
+
+      const wcsPosition = this._ref.getAttr("wcsPosition");
+      const radiusX = this._ref.getAttr("wcsRadiusX");
+      const radiusY = this._ref.getAttr("wcsRadiusY");
+      if (!wcsPosition) {
+        this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
+      }
+      if (!radiusX) {
+        this._ref.setAttr(
+          "wcsRadiusX",
+          this._worldTransformer.screenToWorld({ x: ref.x() + ref.radiusX(), y: ref.y() })
+        );
+      }
+      if (!radiusY) {
+        this._ref.setAttr(
+          "wcsRadiusY",
+          this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() + ref.radiusY() })
+        );
+      }
+
       return;
     }
 
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
-    if (!params.radius) params.radius = { x: 25, y: 25 };
+    if (params.position2) {
+      params.radius.x = utils.getDistanceIn2D(params.position, params.position2);
+      if (params.position3) params.radius.y = utils.getDistanceIn2D(params.position, params.position3);
+      else params.radius.x = params.radius.y;
+    } else {
+      if (!params.radius) params.radius = { x: 25, y: 25 };
+    }
 
     this._ref = new Konva.Ellipse({
       stroke: params.color ?? "#ff0000",
@@ -28,6 +83,19 @@ export class KonvaEllipse implements IMarkupEllipse {
       strokeScaleEnabled: false,
     });
 
+    this._ref.setAttr(
+      "wcsPosition",
+      this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y })
+    );
+    this._ref.setAttr(
+      "wcsRadiusX",
+      this._worldTransformer.screenToWorld({ x: this._ref.x() + params.radius.x, y: this._ref.y() })
+    );
+    this._ref.setAttr(
+      "wcsRadiusY",
+      this._worldTransformer.screenToWorld({ x: this._ref.x(), y: this._ref.y() + params.radius.y })
+    );
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
@@ -60,6 +128,26 @@ export class KonvaEllipse implements IMarkupEllipse {
       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("wcsPosition", this._worldTransformer.screenToWorld(position));
+      const radiusX = absoluteTransform.point({ x: this._ref.x() + this._ref.radiusX(), y: this._ref.y() });
+      this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld(radiusX));
+      const radiusY = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() + this._ref.radiusY() });
+      this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
+    });
+
+    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("wcsPosition", this._worldTransformer.screenToWorld(position));
+      const radiusX = absoluteTransform.point({ x: this._ref.x() + this._ref.radiusX(), y: this._ref.y() });
+      this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld(radiusX));
+      const radiusY = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() + this._ref.radiusY() });
+      this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 
@@ -69,6 +157,7 @@ export class KonvaEllipse implements IMarkupEllipse {
 
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
+    this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x, y }));
   }
 
   getRadiusX(): number {
@@ -77,6 +166,7 @@ export class KonvaEllipse implements IMarkupEllipse {
 
   setRadiusX(r: number): void {
     this._ref.radiusX(r);
+    this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({ x: this._ref.x() + r, y: this._ref.y() }));
   }
 
   getRadiusY(): number {
@@ -85,6 +175,7 @@ export class KonvaEllipse implements IMarkupEllipse {
 
   setRadiusY(r: number): void {
     this._ref.radiusY(r);
+    this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({ x: this._ref.x(), y: this._ref.y() + r }));
   }
 
   getLineWidth(): number {
@@ -135,8 +226,24 @@ export class KonvaEllipse implements IMarkupEllipse {
     this._ref.zIndex(zIndex);
   }
 
-  delete() {
+  delete(): void {
     this._ref.destroy();
     this._ref = null;
   }
+
+  updateScreenCoordinates(): void {
+    let screenPosition = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsPosition"));
+    let radiusX = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusX"));
+    let radiusY = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusY"));
+
+    let invert = this._ref.getStage().getAbsoluteTransform().copy();
+    invert = invert.invert();
+    const position = invert.point({ x: screenPosition.x, y: screenPosition.y });
+
+    this._ref.position({ x: position.x, y: position.y });
+    this._ref.radius({
+      x: Math.abs(invert.point(radiusX).x - position.x),
+      y: Math.abs(invert.point(radiusY).y - position.y),
+    });
+  }
 }