@inweb/markup 26.4.0 → 26.5.0

package/dist/markup.js

@@ -12001,16 +12001,50 @@
 	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	const LineTypeSpecs = new Map([
 	    ["solid", []],
 	    ["dot", [30, 30, 0.001, 30]],
 	    ["dash", [30, 30]],
 	]);
 	class KonvaLine {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b;
+	        this._worldTransformer = worldTransformer;
 	        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;
 	        }
 	        if (!params)
@@ -12021,7 +12055,12 @@
 	                { x: 100, y: 100 },
 	            ];
 	        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: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
 	            strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
@@ -12033,11 +12072,36 @@
 	            strokeScaleEnabled: false,
 	            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());
 	    }
 	    ref() {
@@ -12106,19 +12170,64 @@
 	    }
 	    addPoints(points) {
 	        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() {
+	        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();
+	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	class KonvaText {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b, _c;
 	        this.TEXT_FONT_FAMILY = "Calibri";
+	        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;
 	        }
 	        if (!params)
@@ -12139,6 +12248,7 @@
 	            rotation: (_c = params.rotation) !== null && _c !== undefined ? _c : 0,
 	        });
 	        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;
 	            if (attrs.rotation !== this._ref.rotation())
@@ -12164,6 +12274,19 @@
 	            }
 	            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());
 	    }
 	    ref() {
@@ -12211,6 +12334,7 @@
 	    }
 	    setPosition(x, y) {
 	        this._ref.setPosition({ x, y });
+	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
 	    }
 	    getFontSize() {
 	        return this._ref.fontSize();
@@ -12218,19 +12342,72 @@
 	    setFontSize(size) {
 	        this._ref.fontSize(size);
 	    }
+	    updateScreenCoordinates() {
+	        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 });
+	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	class KonvaRectangle {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b, _c, _d;
+	        this._worldTransformer = worldTransformer;
 	        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 };
+	            }
+	        }
 	        this._ref = new Konva.Rect({
 	            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
 	            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
@@ -12244,10 +12421,10 @@
 	            draggable: true,
 	            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;
 	            let newWidth = this._ref.width();
@@ -12270,6 +12447,21 @@
 	            }
 	            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());
 	    }
 	    getPosition() {
@@ -12283,12 +12475,22 @@
 	    }
 	    setWidth(w) {
 	        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) {
 	        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, y) {
 	        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);
 	    }
 	    ref() {
 	        return this._ref;
@@ -12330,21 +12532,80 @@
 	    getLineWidth() {
 	        return this._ref.strokeWidth();
 	    }
+	    updateScreenCoordinates() {
+	        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));
+	    }
+	}
+
+	function getDistanceIn2D(p1, p2) {
+	    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	class KonvaEllipse {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b;
+	        this._worldTransformer = worldTransformer;
 	        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 = getDistanceIn2D(params.position, params.position2);
+	            if (params.position3)
+	                params.radius.y = 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: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
 	            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
@@ -12358,6 +12619,9 @@
 	            draggable: true,
 	            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;
 	            if (attrs.rotation !== this._ref.rotation())
@@ -12389,6 +12653,24 @@
 	            }
 	            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());
 	    }
 	    getPosition() {
@@ -12396,18 +12678,21 @@
 	    }
 	    setPosition(x, y) {
 	        this._ref.setPosition({ x, y });
+	        this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x, y }));
 	    }
 	    getRadiusX() {
 	        return this._ref.radiusX();
 	    }
 	    setRadiusX(r) {
 	        this._ref.radiusX(r);
+	        this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({ x: this._ref.x() + r, y: this._ref.y() }));
 	    }
 	    getRadiusY() {
 	        return this._ref.radiusY();
 	    }
 	    setRadiusY(r) {
 	        this._ref.radiusY(r);
+	        this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({ x: this._ref.x(), y: this._ref.y() + r }));
 	    }
 	    getLineWidth() {
 	        return this._ref.strokeWidth();
@@ -12449,6 +12734,19 @@
 	        this._ref.destroy();
 	        this._ref = null;
 	    }
+	    updateScreenCoordinates() {
+	        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),
+	        });
+	    }
 	}
 
 	///////////////////////////////////////////////////////////////////////////////
@@ -12474,10 +12772,17 @@
 	// acknowledge and accept the above terms.
 	///////////////////////////////////////////////////////////////////////////////
 	class KonvaArrow {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b;
+	        this._worldTransformer = worldTransformer;
 	        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;
 	        }
 	        if (!params)
@@ -12497,10 +12802,26 @@
 	            draggable: true,
 	            strokeScaleEnabled: false,
 	        });
-	        this._ref.on("transform", (e) => {
+	        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());
 	    }
@@ -12548,6 +12869,8 @@
 	    }
 	    setPoints(points) {
 	        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]);
 	        }
 	    }
@@ -12558,6 +12881,7 @@
 	    setStartPoint(x, y) {
 	        const points = this._ref.points();
 	        this._ref.points([x, y, points[2], points[3]]);
+	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
 	    }
 	    getEndPoint() {
 	        const points = this._ref.points();
@@ -12566,16 +12890,49 @@
 	    setEndPoint(x, y) {
 	        const points = this._ref.points();
 	        this._ref.points([points[0], points[1], x, y]);
+	        this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x, y }));
+	    }
+	    updateScreenCoordinates() {
+	        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]);
 	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	class KonvaImage {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b;
 	        this._ratio = 1;
 	        this.EPSILON = 10e-6;
 	        this.BASE64_HEADER_START = "data:image/";
 	        this.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=";
+	        this._worldTransformer = worldTransformer;
 	        if (ref) {
 	            if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START))
 	                ref.src = this.BASE64_NOT_FOUND;
@@ -12589,6 +12946,15 @@
 	                this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
 	                    ? 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)
@@ -12597,6 +12963,10 @@
 	            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();
 	        this._canvasImage.onload = () => {
 	            this._ref.image(this._canvasImage);
@@ -12622,6 +12992,11 @@
 	                        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);
 	                }
 	            }
 	        };
@@ -12638,6 +13013,7 @@
 	            height: (_b = params.height) !== null && _b !== undefined ? _b : 0,
 	            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;
 	            if (attrs.rotation !== this._ref.rotation())
@@ -12670,6 +13046,18 @@
 	            }
 	            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());
 	    }
 	    getSrc() {
@@ -12684,6 +13072,9 @@
 	    setWidth(w) {
 	        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() {
 	        return this._ref.height();
@@ -12691,6 +13082,9 @@
 	    setHeight(h) {
 	        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() {
 	        return this._ref;
@@ -12725,21 +13119,82 @@
 	    }
 	    setPosition(x, y) {
 	        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() {
+	        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));
 	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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.
+	///////////////////////////////////////////////////////////////////////////////
 	class KonvaCloud {
-	    constructor(params, ref = null) {
+	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
 	        var _a, _b, _c, _d;
+	        this._worldTransformer = worldTransformer;
 	        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 };
-	        const arcRadius = 16;
+	        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 ARC_RADIUS = 16;
 	        this._ref = new Konva.Shape({
 	            x: params.position.x,
 	            y: params.position.y,
@@ -12783,10 +13238,10 @@
 	                    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;
 	                        pY += dy / arcCount;
@@ -12799,10 +13254,10 @@
 	            },
 	        });
 	        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;
 	            let newWidth = this._ref.width();
@@ -12825,12 +13280,27 @@
 	            }
 	            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,
 	            };
 	        };
 	        this._ref.id(this._ref._id.toString());
@@ -12874,18 +13344,28 @@
 	    }
 	    setPosition(x, y) {
 	        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() {
 	        return this._ref.width();
 	    }
 	    setWidth(w) {
 	        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() {
 	        return this._ref.height();
 	    }
 	    setHeight(h) {
 	        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() {
 	        return this._ref.strokeWidth();
@@ -12893,6 +13373,17 @@
 	    setLineWidth(size) {
 	        this._ref.strokeWidth(size);
 	    }
+	    updateScreenCoordinates() {
+	        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));
+	    }
 	}
 
 	///////////////////////////////////////////////////////////////////////////////
@@ -12924,39 +13415,50 @@
 	    },
 	    Line: {
 	        name: "Line",
-	        initializer: (ref, params = null) => new KonvaLine(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaLine(params, ref, ...attr),
 	    },
 	    Text: {
 	        name: "Text",
-	        initializer: (ref, params = null) => new KonvaText(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaText(params, ref, ...attr),
 	    },
 	    Rectangle: {
 	        name: "Rect",
-	        initializer: (ref, params = null) => new KonvaRectangle(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaRectangle(params, ref, ...attr),
 	    },
 	    Ellipse: {
 	        name: "Ellipse",
-	        initializer: (ref, params = null) => new KonvaEllipse(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaEllipse(params, ref, ...attr),
 	    },
 	    Arrow: {
 	        name: "Arrow",
-	        initializer: (ref, params = null) => new KonvaArrow(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaArrow(params, ref, ...attr),
 	    },
 	    Image: {
 	        name: "Image",
-	        initializer: (ref, params = null) => new KonvaImage(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaImage(params, ref, ...attr),
 	    },
 	    Cloud: {
 	        name: "Cloud",
-	        initializer: (ref, params = null) => new KonvaCloud(params, ref),
+	        initializer: (ref, params = null, ...attr) => new KonvaCloud(params, ref, ...attr),
 	    },
 	};
+	function debounce(func, wait) {
+	    let timeout = null;
+	    return (...args) => {
+	        if (timeout) {
+	            clearTimeout(timeout);
+	        }
+	        timeout = setTimeout(() => {
+	            timeout = null;
+	            func(...args);
+	        }, wait);
+	    };
+	}
 	/**
 	 * 2D markup core.
 	 */
 	class KonvaMarkup {
 	    constructor() {
-	        this._containerEvents = [];
 	        this._markupIsActive = false;
 	        this._markupColor = new MarkupColor(255, 0, 0);
 	        this.lineWidth = 4;
@@ -12982,22 +13484,31 @@
 	                return;
 	            this._konvaStage.width(width);
 	            this._konvaStage.height(height);
+	            this.getObjects().forEach((markupObject) => {
+	                markupObject.updateScreenCoordinates();
+	            });
+	        };
+	        this.resizeViewer = (event) => {
+	            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();
+	            });
 	        };
 	        this.pan = (event) => {
-	            const newPos = {
-	                x: this._konvaStage.x() + event.dX,
-	                y: this._konvaStage.y() + event.dY,
-	            };
-	            this._konvaStage.position(newPos);
+	            this.getObjects().forEach((markupObject) => {
+	                markupObject.updateScreenCoordinates();
+	            });
 	        };
 	        this.zoomAt = (event) => {
-	            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();
+	            });
 	        };
 	        this.redirectToViewer = (event) => {
 	            if (this._viewer)
@@ -13022,7 +13533,6 @@
 	        this._viewer = viewer;
 	        this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform();
 	        this._container = container;
-	        this._containerEvents = containerEvents !== null && containerEvents !== undefined ? containerEvents : [];
 	        this._markupContainer = document.createElement("div");
 	        this._markupContainer.id = "markup-container";
 	        this._markupContainer.style.position = "absolute";
@@ -13032,12 +13542,13 @@
 	        this._markupContainer.style.pointerEvents = "none";
 	        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);
@@ -13049,7 +13560,6 @@
 	            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();
 	        (_a = this._resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
@@ -13107,11 +13617,14 @@
 	        });
 	        (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect) => {
 	            const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-	            this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+	            const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
+	            this.addRectangle(screenPoint, screenPoint2, rect.width, rect.height, rect.line_width, rect.color, rect.id);
 	        });
 	        (_e = viewpoint.ellipses) === null || _e === undefined ? undefined : _e.forEach((ellipse) => {
 	            const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
-	            this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+	            const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
+	            const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
+	            this.addEllipse(screenPoint, screenPoint2, screenPoint3, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
 	        });
 	        (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow) => {
 	            const startPoint = this._worldTransformer.worldToScreen(arrow.start);
@@ -13120,11 +13633,13 @@
 	        });
 	        (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud) => {
 	            const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-	            this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+	            const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
+	            this.addCloud(screenPoint, screenPoint2, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
 	        });
 	        (_h = viewpoint.images) === null || _h === undefined ? undefined : _h.forEach((image) => {
 	            const screenPoint = this._worldTransformer.worldToScreen(image.position);
-	            this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+	            const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
+	            this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
 	        });
 	    }
 	    getViewpoint(viewpoint) {
@@ -13160,7 +13675,7 @@
 	        const konvaShape = MarkupMode2Konva[type];
 	        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;
 	    }
@@ -13168,7 +13683,7 @@
 	        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;
 	    }
@@ -13180,7 +13695,7 @@
 	            .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);
 	    }
@@ -13272,16 +13787,16 @@
 	                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 });
+	                        this.addEllipse({ x: startX, y: startY }, null, null, { x: dX / 2, y: dY / 2 });
 	                    }
 	                    else if (this._markupMode === "Arrow") {
 	                        this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { 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));
 	                    }
 	                }
 	            }
@@ -13318,7 +13833,7 @@
 	                    lastObj.setHeight(dY);
 	                }
 	                else
-	                    lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+	                    lastObj = this.addRectangle({ x: startX, y: startY }, null, dX, dY);
 	            }
 	            else if (this._markupMode === "Ellipse") {
 	                if (lastObj) {
@@ -13327,7 +13842,7 @@
 	                    lastObj.setRadiusY(dY);
 	                }
 	                else
-	                    lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+	                    lastObj = this.addEllipse({ x: startX, y: startY }, null, null, { x: dX, y: dY });
 	            }
 	            else if (this._markupMode === "Cloud") {
 	                if (lastObj) {
@@ -13336,7 +13851,7 @@
 	                    lastObj.setHeight(Math.max(100, dY));
 	                }
 	                else
-	                    lastObj = this.addCloud({ x: startX, y: startY }, dX, dY);
+	                    lastObj = this.addCloud({ x: startX, y: startY }, null, dX, dY);
 	            }
 	        });
 	        // clicks should select/deselect shapes
@@ -13355,7 +13870,7 @@
 	                }
 	                else if (this._markupMode === "Image") {
 	                    if (this._imageInputRef && this._imageInputRef.value)
-	                        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
+	                        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
 	                    else if (transformer.nodes().length === 0) {
 	                        const pos = this.getRelativePointerPosition(stage);
 	                        this.createImageInput(pos);
@@ -13379,7 +13894,7 @@
 	            if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
 	                if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
 	                    if (this._imageInputRef && this._imageInputRef.value)
-	                        this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
+	                        this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0);
 	                    else
 	                        this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
 	                    return;
@@ -13450,25 +13965,13 @@
 	    getMarkupLines() {
 	        const lines = [];
 	        this.konvaLayerFind("Line").forEach((ref) => {
-	            const linePoints = ref.points();
-	            if (!linePoints)
+	            const wcsPoints = ref.getAttr("wcsPoints");
+	            if (!wcsPoints)
 	                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);
-	                worldPoints.push(worldPoint);
-	            }
-	            const konvaLine = new KonvaLine(null, ref);
+	            const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
 	            const line = {
 	                id: konvaLine.id(),
-	                points: worldPoints,
+	                points: wcsPoints,
 	                color: konvaLine.getColor() || "#ff0000",
 	                type: konvaLine.getLineType() || this.lineType,
 	                width: konvaLine.getLineWidth() || this.lineWidth,
@@ -13482,14 +13985,12 @@
 	        this.konvaLayerFind("Text").forEach((ref) => {
 	            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 = {
 	                id: shape.id(),
-	                position: worldPoint,
+	                position: wcsPosition,
 	                text: shape.getText(),
 	                text_size: textSize * textScale.y,
 	                angle: shape.getRotation(),
@@ -13503,17 +14004,17 @@
 	    getMarkupRectangles() {
 	        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 shape = new KonvaRectangle(null, ref);
+	            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, this._worldTransformer);
 	            const rectangle = {
 	                id: shape.id(),
-	                position: worldPoint,
-	                width: shape.getWidth() * scale,
-	                height: shape.getHeigth() * scale,
+	                position: wcsStart,
+	                position2: wcsEnd,
+	                width: Math.abs(screenStart.x - screenEnd.x),
+	                height: Math.abs(screenStart.y - screenEnd.y),
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13524,15 +14025,17 @@
 	    getMarkupEllipses() {
 	        const ellipses = [];
 	        this.konvaLayerFind("Ellipse").forEach((ref) => {
-	            const position = ref.position();
+	            const wcsPosition = ref.getAttr("wcsPosition");
+	            const wcsPosition2 = ref.getAttr("wcsRadiusX");
+	            const wcsPosition3 = ref.getAttr("wcsRadiusY");
 	            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 = {
 	                id: shape.id(),
-	                position: worldPoint,
+	                position: wcsPosition,
+	                position2: wcsPosition2,
+	                position3: wcsPosition3,
 	                radius: {
 	                    x: ref.getRadiusX() * scale,
 	                    y: ref.getRadiusY() * scale,
@@ -13548,22 +14051,13 @@
 	        const arrows = [];
 	        this.konvaLayerFind("Arrow").forEach((ref) => {
 	            // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-	            const absoluteTransform = ref.getAbsoluteTransform();
-	            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 wcsStart = ref.getAttr("wcsStart");
+	            const wcsEnd = ref.getAttr("wcsEnd");
+	            const shape = new KonvaArrow(null, ref, this._worldTransformer);
 	            const arrow = {
 	                id: shape.id(),
-	                start: worldStartPoint,
-	                end: worldEndPoint,
+	                start: wcsStart,
+	                end: wcsEnd,
 	                color: shape.getColor(),
 	            };
 	            arrows.push(arrow);
@@ -13573,15 +14067,15 @@
 	    getMarkupImages() {
 	        const images = [];
 	        this.konvaLayerFind("Image").forEach((ref) => {
-	            const position = ref.position();
+	            const wcsStart = ref.getAttr("wcsStart");
+	            const wcsEnd = ref.getAttr("wcsEnd");
 	            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 = {
 	                id: shape.id(),
-	                position: worldPoint,
+	                position: wcsStart,
+	                position2: wcsEnd,
 	                src: shape.getSrc(),
 	                width: shape.getWidth() * scale,
 	                height: shape.getHeight() * scale,
@@ -13593,17 +14087,17 @@
 	    getMarkupClouds() {
 	        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 shape = new KonvaCloud(null, ref);
+	            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, this._worldTransformer);
 	            const cloud = {
 	                id: shape.id(),
-	                position: worldPoint,
-	                width: shape.getWidth() * scale,
-	                height: shape.getHeigth() * scale,
+	                position: wcsStart,
+	                position2: wcsEnd,
+	                width: Math.abs(screenStart.x - screenEnd.x),
+	                height: Math.abs(screenStart.y - screenEnd.y),
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13637,7 +14131,7 @@
 	            width: width || this.lineWidth,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaLine);
 	        return konvaLine;
 	    }
@@ -13704,7 +14198,7 @@
 	            this._imageInputRef.onchange = async (event) => {
 	                const file = event.target.files[0];
 	                const base64 = await convertBase64(file);
-	                this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+	                this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, base64.toString(), 0, 0);
 	            };
 	            this._imageInputRef.oncancel = (event) => {
 	                this.removeImageInput();
@@ -13746,34 +14240,37 @@
 	            fontSize: fontSize || this.fontSize,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaText);
 	        return konvaText;
 	    }
-	    addRectangle(position, width, height, lineWidth, color, id) {
+	    addRectangle(position, position2, width, height, lineWidth, color, id) {
 	        if (!position)
 	            return;
 	        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;
 	    }
-	    addEllipse(position, radius, lineWidth, color, id) {
+	    addEllipse(position, position2, position3, radius, lineWidth, color, id) {
 	        if (!position)
 	            return;
 	        const konvaEllipse = new KonvaEllipse({
 	            position,
+	            position2,
+	            position3,
 	            radius,
 	            lineWidth,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaEllipse);
 	        return konvaEllipse;
 	    }
@@ -13785,25 +14282,26 @@
 	            end,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaArrow);
 	        return konvaArrow;
 	    }
-	    addCloud(position, width, height, lineWidth, color, id) {
+	    addCloud(position, position2, width, height, lineWidth, color, id) {
 	        if (!position || !width || !height)
 	            return;
 	        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;
 	    }
-	    addImage(position, src, width, height, id) {
+	    addImage(position, position2, src, width, height, id) {
 	        var _a;
 	        if (!position || !src)
 	            return;
@@ -13813,13 +14311,14 @@
 	        this.removeImageInput();
 	        const konvaImage = new KonvaImage({
 	            position,
+	            position2,
 	            src,
 	            width,
 	            height,
 	            maxWidth: this._konvaStage.width() - position.x,
 	            maxHeight: this._konvaStage.height() - position.y,
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaImage);
 	        return konvaImage;
 	    }