@inweb/markup 26.3.3 → 26.4.1

package/dist/markup.js

@@ -25,7 +25,7 @@
 		hasRequiredGlobal = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports._registerNode = exports.Konva = exports.glob = void 0;
+			exports._registerNode = exports.Konva = exports.glob = undefined;
 			const PI_OVER_180 = Math.PI / 180;
 			function detectBrowser() {
 			    return (typeof window !== 'undefined' &&
@@ -41,7 +41,7 @@
 			            : {};
 			exports.Konva = {
 			    _global: exports.glob,
-			    version: '9.3.20',
+			    version: '9.3.18',
 			    isBrowser: detectBrowser(),
 			    isUnminified: /param/.test(function (param) { }.toString()),
 			    dblClickWindow: 400,
@@ -73,7 +73,7 @@
 			    },
 			    isTransforming() {
 			        var _a;
-			        return (_a = exports.Konva['Transformer']) === null || _a === void 0 ? void 0 : _a.isTransforming();
+			        return (_a = exports.Konva['Transformer']) === null || _a === undefined ? undefined : _a.isTransforming();
 			    },
 			    isDragReady() {
 			        return !!exports.Konva['DD'].node;
@@ -102,7 +102,7 @@
 		hasRequiredUtil = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Util = exports.Transform = void 0;
+			exports.Util = exports.Transform = undefined;
 			const Global_1 = requireGlobal();
 			class Transform {
 			    constructor(m = [1, 0, 0, 1, 0, 0]) {
@@ -1120,7 +1120,7 @@
 		hasRequiredFactory = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Factory = void 0;
+			exports.Factory = undefined;
 			const Util_1 = requireUtil();
 			const Validators_1 = requireValidators();
 			const GET = 'get';
@@ -1258,7 +1258,7 @@
 		if (hasRequiredContext) return Context;
 		hasRequiredContext = 1;
 		Object.defineProperty(Context, "__esModule", { value: true });
-		Context.HitContext = Context.SceneContext = Context.Context = void 0;
+		Context.HitContext = Context.SceneContext = Context.Context = undefined;
 		const Util_1 = requireUtil();
 		const Global_1 = requireGlobal();
 		function simplifyArray(arr) {
@@ -1747,7 +1747,7 @@
 		    }
 		    _applyShadow(shape) {
 		        var _a, _b, _c;
-		        const color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
+		        const color = (_a = shape.getShadowRGBA()) !== null && _a !== undefined ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== undefined ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== undefined ? _c : {
 		            x: 0,
 		            y: 0,
 		        }, scale = shape.getAbsoluteScale(), ratio = this.canvas.getPixelRatio(), scaleX = scale.x * ratio, scaleY = scale.y * ratio;
@@ -1806,10 +1806,12 @@
 		if (hasRequiredCanvas) return Canvas;
 		hasRequiredCanvas = 1;
 		Object.defineProperty(Canvas, "__esModule", { value: true });
-		Canvas.HitCanvas = Canvas.SceneCanvas = Canvas.Canvas = void 0;
+		Canvas.HitCanvas = Canvas.SceneCanvas = Canvas.Canvas = undefined;
 		const Util_1 = requireUtil();
 		const Context_1 = requireContext();
 		const Global_1 = requireGlobal();
+		const Factory_1 = requireFactory();
+		const Validators_1 = requireValidators();
 		let _pixelRatio;
 		function getDevicePixelRatio() {
 		    if (_pixelRatio) {
@@ -1898,6 +1900,7 @@
 		    }
 		};
 		Canvas.Canvas = Canvas$1;
+		Factory_1.Factory.addGetterSetter(Canvas$1, 'pixelRatio', undefined, (0, Validators_1.getNumberValidator)());
 		class SceneCanvas extends Canvas$1 {
 		    constructor(config = { width: 0, height: 0, willReadFrequently: false }) {
 		        super(config);
@@ -1929,7 +1932,7 @@
 		hasRequiredDragAndDrop = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.DD = void 0;
+			exports.DD = undefined;
 			const Global_1 = requireGlobal();
 			const Util_1 = requireUtil();
 			exports.DD = {
@@ -2050,7 +2053,7 @@
 		if (hasRequiredNode) return Node;
 		hasRequiredNode = 1;
 		Object.defineProperty(Node, "__esModule", { value: true });
-		Node.Node = void 0;
+		Node.Node = undefined;
 		const Util_1 = requireUtil();
 		const Factory_1 = requireFactory();
 		const Canvas_1 = requireCanvas();
@@ -2955,7 +2958,7 @@
 		        var _a, _b;
 		        const m = this._cache.get(TRANSFORM) || new Util_1.Transform();
 		        m.reset();
-		        const x = this.x(), y = this.y(), rotation = Global_1.Konva.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== void 0 ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== void 0 ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
+		        const x = this.x(), y = this.y(), rotation = Global_1.Konva.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== undefined ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== undefined ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
 		        if (x !== 0 || y !== 0) {
 		            m.translate(x, y);
 		        }
@@ -3157,7 +3160,7 @@
 		    _requestDraw() {
 		        if (Global_1.Konva.autoDrawEnabled) {
 		            const drawNode = this.getLayer() || this.getStage();
-		            drawNode === null || drawNode === void 0 ? void 0 : drawNode.batchDraw();
+		            drawNode === null || drawNode === undefined ? undefined : drawNode.batchDraw();
 		        }
 		    }
 		    _setAttr(key, val) {
@@ -3218,13 +3221,13 @@
 		    }
 		    _getProtoListeners(eventType) {
 		        var _a, _b, _c;
-		        const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== void 0 ? _a : {};
-		        let events = allListeners === null || allListeners === void 0 ? void 0 : allListeners[eventType];
+		        const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== undefined ? _a : {};
+		        let events = allListeners === null || allListeners === undefined ? undefined : allListeners[eventType];
 		        if (events === undefined) {
 		            events = [];
 		            let obj = Object.getPrototypeOf(this);
 		            while (obj) {
-		                const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === void 0 ? void 0 : _b[eventType]) !== null && _c !== void 0 ? _c : [];
+		                const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === undefined ? undefined : _b[eventType]) !== null && _c !== undefined ? _c : [];
 		                events.push(...hierarchyEvents);
 		                obj = Object.getPrototypeOf(obj);
 		            }
@@ -3490,7 +3493,7 @@
 		if (hasRequiredContainer) return Container;
 		hasRequiredContainer = 1;
 		Object.defineProperty(Container, "__esModule", { value: true });
-		Container.Container = void 0;
+		Container.Container = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -3647,13 +3650,13 @@
 		        if (this.isCached()) {
 		            return;
 		        }
-		        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (node) {
+		        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (node) {
 		            node._clearSelfAndDescendantCache(attr);
 		        });
 		    }
 		    _setChildrenIndices() {
 		        var _a;
-		        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child, n) {
+		        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child, n) {
 		            child.index = n;
 		        });
 		        this._requestDraw();
@@ -3724,7 +3727,7 @@
 		            context.save();
 		            context._applyGlobalCompositeOperation(this);
 		        }
-		        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+		        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child) {
 		            child[drawMethod](canvas, top, bufferCanvas);
 		        });
 		        if (hasComposition) {
@@ -3746,7 +3749,7 @@
 		            height: 0,
 		        };
 		        const that = this;
-		        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+		        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child) {
 		            if (!child.visible()) {
 		                return;
 		            }
@@ -3878,7 +3881,7 @@
 		hasRequiredStage = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Stage = exports.stages = void 0;
+			exports.Stage = exports.stages = undefined;
 			const Util_1 = requireUtil();
 			const Factory_1 = requireFactory();
 			const Container_1 = requireContainer();
@@ -4595,7 +4598,7 @@
 		hasRequiredShape = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Shape = exports.shapes = void 0;
+			exports.Shape = exports.shapes = undefined;
 			const Global_1 = requireGlobal();
 			const Util_1 = requireUtil();
 			const Factory_1 = requireFactory();
@@ -4828,7 +4831,7 @@
 			    }
 			    _useBufferCanvas(forceFill) {
 			        var _a;
-			        const perfectDrawEnabled = (_a = this.attrs.perfectDrawEnabled) !== null && _a !== void 0 ? _a : true;
+			        const perfectDrawEnabled = (_a = this.attrs.perfectDrawEnabled) !== null && _a !== undefined ? _a : true;
 			        if (!perfectDrawEnabled) {
 			            return false;
 			        }
@@ -5148,7 +5151,7 @@
 		if (hasRequiredLayer) return Layer;
 		hasRequiredLayer = 1;
 		Object.defineProperty(Layer, "__esModule", { value: true });
-		Layer.Layer = void 0;
+		Layer.Layer = undefined;
 		const Util_1 = requireUtil();
 		const Container_1 = requireContainer();
 		const Node_1 = requireNode();
@@ -5466,7 +5469,7 @@
 		if (hasRequiredFastLayer) return FastLayer;
 		hasRequiredFastLayer = 1;
 		Object.defineProperty(FastLayer, "__esModule", { value: true });
-		FastLayer.FastLayer = void 0;
+		FastLayer.FastLayer = undefined;
 		const Util_1 = requireUtil();
 		const Layer_1 = requireLayer();
 		const Global_1 = requireGlobal();
@@ -5491,7 +5494,7 @@
 		if (hasRequiredGroup) return Group;
 		hasRequiredGroup = 1;
 		Object.defineProperty(Group, "__esModule", { value: true });
-		Group.Group = void 0;
+		Group.Group = undefined;
 		const Util_1 = requireUtil();
 		const Container_1 = requireContainer();
 		const Global_1 = requireGlobal();
@@ -5517,7 +5520,7 @@
 		if (hasRequiredAnimation) return Animation;
 		hasRequiredAnimation = 1;
 		Object.defineProperty(Animation, "__esModule", { value: true });
-		Animation.Animation = void 0;
+		Animation.Animation = undefined;
 		const Global_1 = requireGlobal();
 		const Util_1 = requireUtil();
 		const now = (function () {
@@ -5673,7 +5676,7 @@
 		hasRequiredTween = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Easings = exports.Tween = void 0;
+			exports.Easings = exports.Tween = undefined;
 			const Util_1 = requireUtil();
 			const Animation_1 = requireAnimation();
 			const Node_1 = requireNode();
@@ -6206,7 +6209,7 @@
 		hasRequired_CoreInternals = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.Konva = void 0;
+			exports.Konva = undefined;
 			const Global_1 = requireGlobal();
 			const Util_1 = requireUtil();
 			const Node_1 = requireNode();
@@ -6253,7 +6256,7 @@
 		if (hasRequiredArc) return Arc;
 		hasRequiredArc = 1;
 		Object.defineProperty(Arc, "__esModule", { value: true });
-		Arc.Arc = void 0;
+		Arc.Arc = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Global_1 = requireGlobal();
@@ -6304,12 +6307,7 @@
 		Arc.Arc = Arc$1;
 		Arc$1.prototype._centroid = true;
 		Arc$1.prototype.className = 'Arc';
-		Arc$1.prototype._attrsAffectingSize = [
-		    'innerRadius',
-		    'outerRadius',
-		    'angle',
-		    'clockwise',
-		];
+		Arc$1.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
 		(0, Global_2._registerNode)(Arc$1);
 		Factory_1.Factory.addGetterSetter(Arc$1, 'innerRadius', 0, (0, Validators_1.getNumberValidator)());
 		Factory_1.Factory.addGetterSetter(Arc$1, 'outerRadius', 0, (0, Validators_1.getNumberValidator)());
@@ -6328,7 +6326,7 @@
 		if (hasRequiredLine) return Line;
 		hasRequiredLine = 1;
 		Object.defineProperty(Line, "__esModule", { value: true });
-		Line.Line = void 0;
+		Line.Line = undefined;
 		const Factory_1 = requireFactory();
 		const Global_1 = requireGlobal();
 		const Shape_1 = requireShape();
@@ -6499,7 +6497,7 @@
 		hasRequiredBezierFunctions = 1;
 		(function (exports) {
 			Object.defineProperty(exports, "__esModule", { value: true });
-			exports.t2length = exports.getQuadraticArcLength = exports.getCubicArcLength = exports.binomialCoefficients = exports.cValues = exports.tValues = void 0;
+			exports.t2length = exports.getQuadraticArcLength = exports.getCubicArcLength = exports.binomialCoefficients = exports.cValues = exports.tValues = undefined;
 			exports.tValues = [
 			    [],
 			    [],
@@ -7297,7 +7295,7 @@
 		if (hasRequiredPath) return Path;
 		hasRequiredPath = 1;
 		Object.defineProperty(Path, "__esModule", { value: true });
-		Path.Path = void 0;
+		Path.Path = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Global_1 = requireGlobal();
@@ -7480,8 +7478,8 @@
 		        return null;
 		    }
 		    static getPointOnLine(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
-		        fromX = fromX !== null && fromX !== void 0 ? fromX : P1x;
-		        fromY = fromY !== null && fromY !== void 0 ? fromY : P1y;
+		        fromX = fromX !== null && fromX !== undefined ? fromX : P1x;
+		        fromY = fromY !== null && fromY !== undefined ? fromY : P1y;
 		        const len = this.getLineLength(P1x, P1y, P2x, P2y);
 		        if (len < 1e-10) {
 		            return { x: P1x, y: P1y };
@@ -7910,7 +7908,7 @@
 		if (hasRequiredArrow) return Arrow;
 		hasRequiredArrow = 1;
 		Object.defineProperty(Arrow, "__esModule", { value: true });
-		Arrow.Arrow = void 0;
+		Arrow.Arrow = undefined;
 		const Factory_1 = requireFactory();
 		const Line_1 = requireLine();
 		const Validators_1 = requireValidators();
@@ -8022,7 +8020,7 @@
 		if (hasRequiredCircle) return Circle;
 		hasRequiredCircle = 1;
 		Object.defineProperty(Circle, "__esModule", { value: true });
-		Circle.Circle = void 0;
+		Circle.Circle = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Validators_1 = requireValidators();
@@ -8068,7 +8066,7 @@
 		if (hasRequiredEllipse) return Ellipse;
 		hasRequiredEllipse = 1;
 		Object.defineProperty(Ellipse, "__esModule", { value: true });
-		Ellipse.Ellipse = void 0;
+		Ellipse.Ellipse = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Validators_1 = requireValidators();
@@ -8118,7 +8116,7 @@
 		if (hasRequiredImage) return Image$1;
 		hasRequiredImage = 1;
 		Object.defineProperty(Image$1, "__esModule", { value: true });
-		Image$1.Image = void 0;
+		Image$1.Image = undefined;
 		const Util_1 = requireUtil();
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
@@ -8127,11 +8125,7 @@
 		class Image extends Shape_1.Shape {
 		    constructor(attrs) {
 		        super(attrs);
-		        this._loadListener = () => {
-		            this._requestDraw();
-		        };
-		        this.on('imageChange.konva', (props) => {
-		            this._removeImageLoad(props.oldVal);
+		        this.on('imageChange.konva', () => {
 		            this._setImageLoad();
 		        });
 		        this._setImageLoad();
@@ -8145,19 +8139,11 @@
 		            return;
 		        }
 		        if (image && image['addEventListener']) {
-		            image['addEventListener']('load', this._loadListener);
-		        }
-		    }
-		    _removeImageLoad(image) {
-		        if (image && image['removeEventListener']) {
-		            image['removeEventListener']('load', this._loadListener);
+		            image['addEventListener']('load', () => {
+		                this._requestDraw();
+		            });
 		        }
 		    }
-		    destroy() {
-		        this._removeImageLoad(this.image());
-		        super.destroy();
-		        return this;
-		    }
 		    _useBufferCanvas() {
 		        const hasCornerRadius = !!this.cornerRadius();
 		        const hasShadow = this.hasShadow();
@@ -8221,11 +8207,11 @@
 		    }
 		    getWidth() {
 		        var _a, _b;
-		        return (_a = this.attrs.width) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.width;
+		        return (_a = this.attrs.width) !== null && _a !== undefined ? _a : (_b = this.image()) === null || _b === undefined ? undefined : _b.width;
 		    }
 		    getHeight() {
 		        var _a, _b;
-		        return (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height;
+		        return (_a = this.attrs.height) !== null && _a !== undefined ? _a : (_b = this.image()) === null || _b === undefined ? undefined : _b.height;
 		    }
 		    static fromURL(url, callback, onError = null) {
 		        const img = Util_1.Util.createImageElement();
@@ -8261,7 +8247,7 @@
 		if (hasRequiredLabel) return Label;
 		hasRequiredLabel = 1;
 		Object.defineProperty(Label, "__esModule", { value: true });
-		Label.Tag = Label.Label = void 0;
+		Label.Tag = Label.Label = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Group_1 = requireGroup();
@@ -8448,7 +8434,7 @@
 		if (hasRequiredRect) return Rect;
 		hasRequiredRect = 1;
 		Object.defineProperty(Rect, "__esModule", { value: true });
-		Rect.Rect = void 0;
+		Rect.Rect = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Global_1 = requireGlobal();
@@ -8483,7 +8469,7 @@
 		if (hasRequiredRegularPolygon) return RegularPolygon;
 		hasRequiredRegularPolygon = 1;
 		Object.defineProperty(RegularPolygon, "__esModule", { value: true });
-		RegularPolygon.RegularPolygon = void 0;
+		RegularPolygon.RegularPolygon = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Validators_1 = requireValidators();
@@ -8561,7 +8547,7 @@
 		if (hasRequiredRing) return Ring;
 		hasRequiredRing = 1;
 		Object.defineProperty(Ring, "__esModule", { value: true });
-		Ring.Ring = void 0;
+		Ring.Ring = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Validators_1 = requireValidators();
@@ -8607,7 +8593,7 @@
 		if (hasRequiredSprite) return Sprite;
 		hasRequiredSprite = 1;
 		Object.defineProperty(Sprite, "__esModule", { value: true });
-		Sprite.Sprite = void 0;
+		Sprite.Sprite = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Animation_1 = requireAnimation();
@@ -8728,7 +8714,7 @@
 		if (hasRequiredStar) return Star;
 		hasRequiredStar = 1;
 		Object.defineProperty(Star, "__esModule", { value: true });
-		Star.Star = void 0;
+		Star.Star = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Validators_1 = requireValidators();
@@ -8779,7 +8765,7 @@
 		if (hasRequiredText) return Text;
 		hasRequiredText = 1;
 		Object.defineProperty(Text, "__esModule", { value: true });
-		Text.Text = void 0;
+		Text.Text = undefined;
 		Text.stringToArray = stringToArray;
 		const Util_1 = requireUtil();
 		const Factory_1 = requireFactory();
@@ -9025,17 +9011,17 @@
 		        _context.restore();
 		        const scaleFactor = fontSize / 100;
 		        return {
-		            actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== void 0 ? _a : 71.58203125 * scaleFactor,
-		            actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== void 0 ? _b : 0,
-		            actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== void 0 ? _c : -7.421875 * scaleFactor,
-		            actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== void 0 ? _d : 75.732421875 * scaleFactor,
-		            alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== void 0 ? _e : 0,
-		            emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== void 0 ? _f : 100 * scaleFactor,
-		            emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== void 0 ? _g : -20 * scaleFactor,
-		            fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== void 0 ? _h : 91 * scaleFactor,
-		            fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== void 0 ? _j : 21 * scaleFactor,
-		            hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== void 0 ? _k : 72.80000305175781 * scaleFactor,
-		            ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== void 0 ? _l : -21 * scaleFactor,
+		            actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== undefined ? _a : 71.58203125 * scaleFactor,
+		            actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== undefined ? _b : 0,
+		            actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== undefined ? _c : -7.421875 * scaleFactor,
+		            actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== undefined ? _d : 75.732421875 * scaleFactor,
+		            alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== undefined ? _e : 0,
+		            emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== undefined ? _f : 100 * scaleFactor,
+		            emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== undefined ? _g : -20 * scaleFactor,
+		            fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== undefined ? _h : 91 * scaleFactor,
+		            fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== undefined ? _j : 21 * scaleFactor,
+		            hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== undefined ? _k : 72.80000305175781 * scaleFactor,
+		            ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== undefined ? _l : -21 * scaleFactor,
 		            width: metrics.width,
 		            height: fontSize,
 		        };
@@ -9079,14 +9065,8 @@
 		                while (line.length > 0) {
 		                    let low = 0, high = stringToArray(line).length, match = '', matchWidth = 0;
 		                    while (low < high) {
-		                        const mid = (low + high) >>> 1, lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), substrWidth = this._getTextWidth(substr);
-		                        const shouldConsiderEllipsis = shouldAddEllipsis &&
-		                            fixedHeight &&
-		                            currentHeightPx + lineHeightPx > maxHeightPx;
-		                        const effectiveWidth = shouldConsiderEllipsis
-		                            ? substrWidth + additionalWidth
-		                            : substrWidth;
-		                        if (effectiveWidth <= maxWidth) {
+		                        const mid = (low + high) >>> 1, lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), substrWidth = this._getTextWidth(substr) + additionalWidth;
+		                        if (substrWidth <= maxWidth) {
 		                            low = mid + 1;
 		                            match = substr;
 		                            matchWidth = substrWidth;
@@ -9233,7 +9213,7 @@
 		if (hasRequiredTextPath) return TextPath;
 		hasRequiredTextPath = 1;
 		Object.defineProperty(TextPath, "__esModule", { value: true });
-		TextPath.TextPath = void 0;
+		TextPath.TextPath = undefined;
 		const Util_1 = requireUtil();
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
@@ -9483,7 +9463,7 @@
 		if (hasRequiredTransformer) return Transformer;
 		hasRequiredTransformer = 1;
 		Object.defineProperty(Transformer, "__esModule", { value: true });
-		Transformer.Transformer = void 0;
+		Transformer.Transformer = undefined;
 		const Util_1 = requireUtil();
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
@@ -9680,12 +9660,10 @@
 		                    this.update();
 		                }
 		            };
-		            if (node._attrsAffectingSize.length) {
-		                const additionalEvents = node._attrsAffectingSize
-		                    .map((prop) => prop + 'Change.' + this._getEventNamespace())
-		                    .join(' ');
-		                node.on(additionalEvents, onChange);
-		            }
+		            const additionalEvents = node._attrsAffectingSize
+		                .map((prop) => prop + 'Change.' + this._getEventNamespace())
+		                .join(' ');
+		            node.on(additionalEvents, onChange);
 		            node.on(TRANSFORM_CHANGE_STR.map((e) => e + `.${this._getEventNamespace()}`).join(' '), onChange);
 		            node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
 		            this._proxyDrag(node);
@@ -10160,12 +10138,12 @@
 		            const node = this.getNode();
 		            activeTransformersCount--;
 		            this._fire('transformend', { evt: e, target: node });
-		            (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+		            (_a = this.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
 		            if (node) {
 		                this._nodes.forEach((target) => {
 		                    var _a;
 		                    target._fire('transformend', { evt: e, target });
-		                    (_a = target.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+		                    (_a = target.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
 		                });
 		            }
 		            this._movingAnchorName = null;
@@ -10278,7 +10256,7 @@
 		                .multiply(localTransform);
 		            const attrs = newLocalTransform.decompose();
 		            node.setAttrs(attrs);
-		            (_a = node.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+		            (_a = node.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
 		        });
 		        this.rotation(Util_1.Util._getRotation(newAttrs.rotation));
 		        this._nodes.forEach((node) => {
@@ -10393,7 +10371,7 @@
 		                styleFunc(node);
 		            });
 		        }
-		        (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+		        (_a = this.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
 		    }
 		    isTransforming() {
 		        return this._transforming;
@@ -10500,7 +10478,7 @@
 		if (hasRequiredWedge) return Wedge;
 		hasRequiredWedge = 1;
 		Object.defineProperty(Wedge, "__esModule", { value: true });
-		Wedge.Wedge = void 0;
+		Wedge.Wedge = undefined;
 		const Factory_1 = requireFactory();
 		const Shape_1 = requireShape();
 		const Global_1 = requireGlobal();
@@ -10551,7 +10529,7 @@
 		if (hasRequiredBlur) return Blur;
 		hasRequiredBlur = 1;
 		Object.defineProperty(Blur, "__esModule", { value: true });
-		Blur.Blur = void 0;
+		Blur.Blur = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -10799,7 +10777,7 @@
 		if (hasRequiredBrighten) return Brighten;
 		hasRequiredBrighten = 1;
 		Object.defineProperty(Brighten, "__esModule", { value: true });
-		Brighten.Brighten = void 0;
+		Brighten.Brighten = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -10824,7 +10802,7 @@
 		if (hasRequiredContrast) return Contrast;
 		hasRequiredContrast = 1;
 		Object.defineProperty(Contrast, "__esModule", { value: true });
-		Contrast.Contrast = void 0;
+		Contrast.Contrast = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -10872,7 +10850,7 @@
 		if (hasRequiredEmboss) return Emboss;
 		hasRequiredEmboss = 1;
 		Object.defineProperty(Emboss, "__esModule", { value: true });
-		Emboss.Emboss = void 0;
+		Emboss.Emboss = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Util_1 = requireUtil();
@@ -10988,7 +10966,7 @@
 		if (hasRequiredEnhance) return Enhance;
 		hasRequiredEnhance = 1;
 		Object.defineProperty(Enhance, "__esModule", { value: true });
-		Enhance.Enhance = void 0;
+		Enhance.Enhance = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11085,7 +11063,7 @@
 		if (hasRequiredGrayscale) return Grayscale;
 		hasRequiredGrayscale = 1;
 		Object.defineProperty(Grayscale, "__esModule", { value: true });
-		Grayscale.Grayscale = void 0;
+		Grayscale.Grayscale = undefined;
 		const Grayscale$1 = function (imageData) {
 		    const data = imageData.data, len = data.length;
 		    for (let i = 0; i < len; i += 4) {
@@ -11107,7 +11085,7 @@
 		if (hasRequiredHSL) return HSL;
 		hasRequiredHSL = 1;
 		Object.defineProperty(HSL, "__esModule", { value: true });
-		HSL.HSL = void 0;
+		HSL.HSL = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11144,7 +11122,7 @@
 		if (hasRequiredHSV) return HSV;
 		hasRequiredHSV = 1;
 		Object.defineProperty(HSV, "__esModule", { value: true });
-		HSV.HSV = void 0;
+		HSV.HSV = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11181,7 +11159,7 @@
 		if (hasRequiredInvert) return Invert;
 		hasRequiredInvert = 1;
 		Object.defineProperty(Invert, "__esModule", { value: true });
-		Invert.Invert = void 0;
+		Invert.Invert = undefined;
 		const Invert$1 = function (imageData) {
 		    const data = imageData.data, len = data.length;
 		    for (let i = 0; i < len; i += 4) {
@@ -11202,7 +11180,7 @@
 		if (hasRequiredKaleidoscope) return Kaleidoscope;
 		hasRequiredKaleidoscope = 1;
 		Object.defineProperty(Kaleidoscope, "__esModule", { value: true });
-		Kaleidoscope.Kaleidoscope = void 0;
+		Kaleidoscope.Kaleidoscope = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Util_1 = requireUtil();
@@ -11348,7 +11326,7 @@
 		if (hasRequiredMask) return Mask;
 		hasRequiredMask = 1;
 		Object.defineProperty(Mask, "__esModule", { value: true });
-		Mask.Mask = void 0;
+		Mask.Mask = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11502,7 +11480,7 @@
 		if (hasRequiredNoise) return Noise;
 		hasRequiredNoise = 1;
 		Object.defineProperty(Noise, "__esModule", { value: true });
-		Noise.Noise = void 0;
+		Noise.Noise = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11527,7 +11505,7 @@
 		if (hasRequiredPixelate) return Pixelate;
 		hasRequiredPixelate = 1;
 		Object.defineProperty(Pixelate, "__esModule", { value: true });
-		Pixelate.Pixelate = void 0;
+		Pixelate.Pixelate = undefined;
 		const Factory_1 = requireFactory();
 		const Util_1 = requireUtil();
 		const Node_1 = requireNode();
@@ -11600,7 +11578,7 @@
 		if (hasRequiredPosterize) return Posterize;
 		hasRequiredPosterize = 1;
 		Object.defineProperty(Posterize, "__esModule", { value: true });
-		Posterize.Posterize = void 0;
+		Posterize.Posterize = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11623,7 +11601,7 @@
 		if (hasRequiredRGB) return RGB;
 		hasRequiredRGB = 1;
 		Object.defineProperty(RGB, "__esModule", { value: true });
-		RGB.RGB = void 0;
+		RGB.RGB = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11674,7 +11652,7 @@
 		if (hasRequiredRGBA) return RGBA;
 		hasRequiredRGBA = 1;
 		Object.defineProperty(RGBA, "__esModule", { value: true });
-		RGBA.RGBA = void 0;
+		RGBA.RGBA = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11736,7 +11714,7 @@
 		if (hasRequiredSepia) return Sepia;
 		hasRequiredSepia = 1;
 		Object.defineProperty(Sepia, "__esModule", { value: true });
-		Sepia.Sepia = void 0;
+		Sepia.Sepia = undefined;
 		const Sepia$1 = function (imageData) {
 		    const data = imageData.data, nPixels = data.length;
 		    for (let i = 0; i < nPixels; i += 4) {
@@ -11760,7 +11738,7 @@
 		if (hasRequiredSolarize) return Solarize;
 		hasRequiredSolarize = 1;
 		Object.defineProperty(Solarize, "__esModule", { value: true });
-		Solarize.Solarize = void 0;
+		Solarize.Solarize = undefined;
 		const Solarize$1 = function (imageData) {
 		    const data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4;
 		    let y = h;
@@ -11799,7 +11777,7 @@
 		if (hasRequiredThreshold) return Threshold;
 		hasRequiredThreshold = 1;
 		Object.defineProperty(Threshold, "__esModule", { value: true });
-		Threshold.Threshold = void 0;
+		Threshold.Threshold = undefined;
 		const Factory_1 = requireFactory();
 		const Node_1 = requireNode();
 		const Validators_1 = requireValidators();
@@ -11820,7 +11798,7 @@
 		if (hasRequired_FullInternals) return _FullInternals;
 		hasRequired_FullInternals = 1;
 		Object.defineProperty(_FullInternals, "__esModule", { value: true });
-		_FullInternals.Konva = void 0;
+		_FullInternals.Konva = undefined;
 		const _CoreInternals_1 = require_CoreInternals();
 		const Arc_1 = requireArc();
 		const Arrow_1 = requireArrow();
@@ -12023,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)
@@ -12043,10 +12055,15 @@
 	                { 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 !== void 0 ? _a : "#ff0000",
-	            strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
+	            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+	            strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
 	            globalCompositeOperation: "source-over",
 	            lineCap: "round",
 	            lineJoin: "round",
@@ -12055,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() {
@@ -12128,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)
@@ -12153,14 +12240,15 @@
 	            x: params.position.x,
 	            y: params.position.y,
 	            text: params.text,
-	            fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
+	            fontSize: (_a = params.fontSize) !== null && _a !== undefined ? _a : 34,
 	            fontFamily: this.TEXT_FONT_FAMILY,
-	            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+	            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
 	            align: "left",
 	            draggable: true,
-	            rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0,
+	            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())
@@ -12186,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() {
@@ -12233,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();
@@ -12240,36 +12342,89 @@
 	    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.position.x - params.position2.x;
+	            params.height = params.position.y - params.position2.y;
+	        }
+	        else {
+	            if (!params.width || !params.height) {
+	                params.position2 = { x: 200, y: 200 };
+	                params.width = 200;
+	                params.height = 200;
+	            }
+	            else {
+	                params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
+	            }
+	        }
 	        this._ref = new Konva.Rect({
-	            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-	            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+	            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+	            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
 	            globalCompositeOperation: "source-over",
 	            lineCap: "round",
 	            lineJoin: "round",
 	            x: params.position.x,
 	            y: params.position.y,
-	            width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
-	            height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
+	            width: (_c = params.width) !== null && _c !== undefined ? _c : 200,
+	            height: (_d = params.height) !== null && _d !== undefined ? _d : 200,
 	            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();
@@ -12292,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() {
@@ -12305,12 +12475,19 @@
 	    }
 	    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 }));
 	    }
 	    ref() {
 	        return this._ref;
@@ -12352,13 +12529,59 @@
 	    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));
+	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// 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)
@@ -12368,8 +12591,8 @@
 	        if (!params.radius)
 	            params.radius = { x: 25, y: 25 };
 	        this._ref = new Konva.Ellipse({
-	            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-	            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+	            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+	            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
 	            globalCompositeOperation: "source-over",
 	            lineCap: "round",
 	            lineJoin: "round",
@@ -12380,6 +12603,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())
@@ -12411,6 +12637,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() {
@@ -12418,18 +12662,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();
@@ -12471,6 +12718,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),
+	        });
+	    }
 	}
 
 	///////////////////////////////////////////////////////////////////////////////
@@ -12496,10 +12756,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)
@@ -12509,8 +12776,8 @@
 	        if (!params.end)
 	            params.end = { x: 100, y: 100 };
 	        this._ref = new Konva.Arrow({
-	            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-	            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+	            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+	            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
 	            strokeWidth: 4,
 	            globalCompositeOperation: "source-over",
 	            lineCap: "round",
@@ -12519,10 +12786,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());
 	    }
@@ -12570,6 +12853,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]);
 	        }
 	    }
@@ -12580,6 +12865,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();
@@ -12588,16 +12874,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;
@@ -12611,6 +12930,10 @@
 	                this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
 	                    ? 1
 	                    : this._ref.height() / this._ref.width();
+	            const wcsStart = this._ref.getAttr("wcsStart");
+	            if (!wcsStart) {
+	                this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
+	            }
 	            return;
 	        }
 	        if (!params)
@@ -12656,10 +12979,11 @@
 	            x: params.position.x,
 	            y: params.position.y,
 	            image: this._canvasImage,
-	            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
-	            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+	            width: (_a = params.width) !== null && _a !== undefined ? _a : 0,
+	            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())
@@ -12692,6 +13016,16 @@
 	            }
 	            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.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());
 	    }
 	    getSrc() {
@@ -12747,28 +13081,82 @@
 	    }
 	    setPosition(x, y) {
 	        this._ref.setPosition({ x, y });
+	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
+	    }
+	    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 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.position.x - params.position2.x;
+	            params.height = params.position.y - params.position2.y;
+	        }
+	        else {
+	            if (!params.width || !params.height) {
+	                params.position2 = { x: 200, y: 200 };
+	                params.width = 200;
+	                params.height = 200;
+	            }
+	            else {
+	                params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
+	            }
+	        }
+	        const ARC_RADIUS = 16;
 	        this._ref = new Konva.Shape({
 	            x: params.position.x,
 	            y: params.position.y,
-	            width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
-	            height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
-	            stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
-	            strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
+	            width: (_a = params.width) !== null && _a !== undefined ? _a : 200,
+	            height: (_b = params.height) !== null && _b !== undefined ? _b : 200,
+	            stroke: (_c = params.color) !== null && _c !== undefined ? _c : "#ff0000",
+	            strokeWidth: (_d = params.lineWidth) !== null && _d !== undefined ? _d : 4,
 	            draggable: true,
 	            strokeScaleEnabled: false,
 	            globalCompositeOperation: "source-over",
@@ -12805,10 +13193,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;
@@ -12821,10 +13209,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();
@@ -12847,12 +13235,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());
@@ -12896,18 +13299,25 @@
 	    }
 	    setPosition(x, y) {
 	        this._ref.position({ x, y });
+	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
 	    }
 	    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();
@@ -12915,6 +13325,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));
+	    }
 	}
 
 	///////////////////////////////////////////////////////////////////////////////
@@ -12946,39 +13367,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;
@@ -13004,22 +13436,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)
@@ -13042,9 +13483,8 @@
 	        if (!Konva)
 	            throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"></script> to your page?');
 	        this._viewer = viewer;
-	        this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform();
+	        this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform();
 	        this._container = container;
-	        this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
 	        this._markupContainer = document.createElement("div");
 	        this._markupContainer.id = "markup-container";
 	        this._markupContainer.style.position = "absolute";
@@ -13054,12 +13494,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);
@@ -13071,12 +13512,11 @@
 	            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 === void 0 ? void 0 : _a.disconnect();
+	        (_a = this._resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
 	        this._resizeObserver = undefined;
-	        (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
+	        (_b = this._markupContainer) === null || _b === undefined ? undefined : _b.remove();
 	        this._markupContainer = undefined;
 	        this._container = undefined;
 	        this._viewer = undefined;
@@ -13099,11 +13539,11 @@
 	    }
 	    colorizeAllMarkup(r, g, b) {
 	        const hexColor = new MarkupColor(r, g, b).asHex();
-	        this.getObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
+	        this.getObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor); });
 	    }
 	    colorizeSelectedMarkups(r, g, b) {
 	        const hexColor = new MarkupColor(r, g, b).asHex();
-	        this.getSelectedObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
+	        this.getSelectedObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor); });
 	    }
 	    setViewpoint(viewpoint) {
 	        var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -13112,9 +13552,9 @@
 	        this.removeImageInput();
 	        this._konvaStage.scale({ x: 1, y: 1 });
 	        this._konvaStage.position({ x: 0, y: 0 });
-	        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || { r: 255, g: 0, b: 0 };
+	        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === undefined ? undefined : _a.markup_color) || { r: 255, g: 0, b: 0 };
 	        this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-	        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+	        (_b = viewpoint.lines) === null || _b === undefined ? undefined : _b.forEach((line) => {
 	            const linePoints = [];
 	            line.points.forEach((point) => {
 	                const screenPoint = this._worldTransformer.worldToScreen(point);
@@ -13123,28 +13563,28 @@
 	            });
 	            this.addLine(linePoints, line.color, line.type, line.width, line.id);
 	        });
-	        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text) => {
+	        (_c = viewpoint.texts) === null || _c === undefined ? undefined : _c.forEach((text) => {
 	            const screenPoint = this._worldTransformer.worldToScreen(text.position);
 	            this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
 	        });
-	        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect) => {
+	        (_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);
+	            this.addRectangle(screenPoint, null, rect.width, rect.height, rect.line_width, rect.color, rect.id);
 	        });
-	        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse) => {
+	        (_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);
 	        });
-	        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow) => {
+	        (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow) => {
 	            const startPoint = this._worldTransformer.worldToScreen(arrow.start);
 	            const endPoint = this._worldTransformer.worldToScreen(arrow.end);
 	            this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
 	        });
-	        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud) => {
+	        (_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);
+	            this.addCloud(screenPoint, null, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
 	        });
-	        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image) => {
+	        (_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);
 	        });
@@ -13182,7 +13622,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;
 	    }
@@ -13190,7 +13630,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;
 	    }
@@ -13202,7 +13642,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);
 	    }
@@ -13294,7 +13734,7 @@
 	                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 });
@@ -13303,7 +13743,7 @@
 	                        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));
 	                    }
 	                }
 	            }
@@ -13340,7 +13780,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) {
@@ -13358,7 +13798,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
@@ -13461,7 +13901,7 @@
 	        this.removeTextInput();
 	        this.removeImageInput();
 	        this.clearOverlay();
-	        (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
+	        (_a = this._konvaStage) === null || _a === undefined ? undefined : _a.destroy();
 	        this._groupImages = undefined;
 	        this._groupGeometry = undefined;
 	        this._groupTexts = undefined;
@@ -13472,25 +13912,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,
@@ -13504,14 +13932,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(),
@@ -13525,17 +13951,16 @@
 	    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,
+	                width: Math.abs(screenStart.x - screenEnd.x),
+	                height: Math.abs(screenStart.y - screenEnd.y),
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13546,15 +13971,13 @@
 	    getMarkupEllipses() {
 	        const ellipses = [];
 	        this.konvaLayerFind("Ellipse").forEach((ref) => {
-	            const position = ref.position();
+	            const wcsPosition = ref.getAttr("wcsPosition");
 	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
 	            const scale = stageAbsoluteTransform.getMatrix()[0];
-	            const shape = new KonvaEllipse(null, ref);
+	            const shape = new KonvaEllipse(null, ref, this._worldTransformer);
 	            const ellipse = {
 	                id: shape.id(),
-	                position: worldPoint,
+	                position: wcsPosition,
 	                radius: {
 	                    x: ref.getRadiusX() * scale,
 	                    y: ref.getRadiusY() * scale,
@@ -13570,22 +13993,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);
@@ -13595,15 +14009,13 @@
 	    getMarkupImages() {
 	        const images = [];
 	        this.konvaLayerFind("Image").forEach((ref) => {
-	            const position = ref.position();
+	            const wcsStart = ref.getAttr("wcsStart");
 	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
 	            const scale = stageAbsoluteTransform.getMatrix()[0];
-	            const shape = new KonvaImage(null, ref);
+	            const shape = new KonvaImage(null, ref, this._worldTransformer);
 	            const image = {
 	                id: shape.id(),
-	                position: worldPoint,
+	                position: wcsStart,
 	                src: shape.getSrc(),
 	                width: shape.getWidth() * scale,
 	                height: shape.getHeight() * scale,
@@ -13615,17 +14027,16 @@
 	    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,
+	                width: Math.abs(screenStart.x - screenEnd.x),
+	                height: Math.abs(screenStart.y - screenEnd.y),
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13659,7 +14070,7 @@
 	            width: width || this.lineWidth,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaLine);
 	        return konvaLine;
 	    }
@@ -13699,7 +14110,7 @@
 	    }
 	    removeTextInput() {
 	        var _a;
-	        (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+	        (_a = this._textInputRef) === null || _a === undefined ? undefined : _a.remove();
 	        this._textInputRef = null;
 	        this._textInputPos = null;
 	        this._textInputAngle = 0;
@@ -13742,7 +14153,7 @@
 	    }
 	    removeImageInput() {
 	        var _a;
-	        (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+	        (_a = this._imageInputRef) === null || _a === undefined ? undefined : _a.remove();
 	        this._imageInputRef = null;
 	        this._imageInputPos = null;
 	    }
@@ -13751,7 +14162,7 @@
 	        if (!text)
 	            return;
 	        // in case of edit - remove old Konva.Text object
-	        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+	        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
 	        this.clearSelected();
 	        this.removeTextInput();
 	        // in case we have old viewpoint without font_size
@@ -13768,21 +14179,22 @@
 	            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;
 	    }
@@ -13795,7 +14207,7 @@
 	            lineWidth,
 	            color: color || this._markupColor.asHex(),
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaEllipse);
 	        return konvaEllipse;
 	    }
@@ -13807,21 +14219,22 @@
 	            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;
 	    }
@@ -13830,7 +14243,7 @@
 	        if (!position || !src)
 	            return;
 	        // in case of edit - remove old Image placeholder object
-	        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+	        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
 	        this.clearSelected();
 	        this.removeImageInput();
 	        const konvaImage = new KonvaImage({
@@ -13841,7 +14254,7 @@
 	            maxWidth: this._konvaStage.width() - position.x,
 	            maxHeight: this._konvaStage.height() - position.y,
 	            id,
-	        });
+	        }, null, this._worldTransformer);
 	        this.addObject(konvaImage);
 	        return konvaImage;
 	    }