@inweb/viewer-three 26.3.3 → 26.4.1

package/dist/viewer-three.js

@@ -39,7 +39,7 @@
             }
             const {handler: handler, thisArg: thisArg} = command;
             const result = handler.apply(thisArg, [ viewer, ...args ]);
-            viewer === null || viewer === void 0 ? void 0 : viewer.emit({
+            viewer === null || viewer === undefined ? undefined : viewer.emit({
                 type: "command",
                 data: id,
                 args: args
@@ -484,7 +484,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' &&
@@ -500,7 +500,7 @@
     		            : {};
     		exports.Konva = {
     		    _global: exports.glob,
-    		    version: '9.3.20',
+    		    version: '9.3.18',
     		    isBrowser: detectBrowser(),
     		    isUnminified: /param/.test(function (param) { }.toString()),
     		    dblClickWindow: 400,
@@ -532,7 +532,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;
@@ -561,7 +561,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]) {
@@ -1579,7 +1579,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';
@@ -1717,7 +1717,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) {
@@ -2206,7 +2206,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;
@@ -2265,10 +2265,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) {
@@ -2357,6 +2359,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);
@@ -2388,7 +2391,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 = {
@@ -2509,7 +2512,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();
@@ -3414,7 +3417,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);
     	        }
@@ -3616,7 +3619,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) {
@@ -3677,13 +3680,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);
     	            }
@@ -3949,7 +3952,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();
@@ -4106,13 +4109,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();
@@ -4183,7 +4186,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) {
@@ -4205,7 +4208,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;
     	            }
@@ -4337,7 +4340,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();
@@ -5054,7 +5057,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();
@@ -5287,7 +5290,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;
     		        }
@@ -5607,7 +5610,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();
@@ -5925,7 +5928,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();
@@ -5950,7 +5953,7 @@
     	if (hasRequiredGroup) return Group$1;
     	hasRequiredGroup = 1;
     	Object.defineProperty(Group$1, "__esModule", { value: true });
-    	Group$1.Group = void 0;
+    	Group$1.Group = undefined;
     	const Util_1 = requireUtil();
     	const Container_1 = requireContainer();
     	const Global_1 = requireGlobal();
@@ -5976,7 +5979,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 () {
@@ -6132,7 +6135,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();
@@ -6665,7 +6668,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();
@@ -6712,7 +6715,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();
@@ -6763,12 +6766,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)());
@@ -6787,7 +6785,7 @@
     	if (hasRequiredLine) return Line$1;
     	hasRequiredLine = 1;
     	Object.defineProperty(Line$1, "__esModule", { value: true });
-    	Line$1.Line = void 0;
+    	Line$1.Line = undefined;
     	const Factory_1 = requireFactory();
     	const Global_1 = requireGlobal();
     	const Shape_1 = requireShape();
@@ -6958,7 +6956,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 = [
     		    [],
     		    [],
@@ -7756,7 +7754,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();
@@ -7939,8 +7937,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 };
@@ -8369,7 +8367,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();
@@ -8481,7 +8479,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();
@@ -8527,7 +8525,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();
@@ -8577,7 +8575,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();
@@ -8586,11 +8584,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();
@@ -8604,19 +8598,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();
@@ -8680,11 +8666,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();
@@ -8720,7 +8706,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();
@@ -8907,7 +8893,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();
@@ -8942,7 +8928,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();
@@ -9020,7 +9006,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();
@@ -9066,7 +9052,7 @@
     	if (hasRequiredSprite) return Sprite$1;
     	hasRequiredSprite = 1;
     	Object.defineProperty(Sprite$1, "__esModule", { value: true });
-    	Sprite$1.Sprite = void 0;
+    	Sprite$1.Sprite = undefined;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Animation_1 = requireAnimation();
@@ -9187,7 +9173,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();
@@ -9238,7 +9224,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();
@@ -9484,17 +9470,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,
     	        };
@@ -9538,14 +9524,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;
@@ -9692,7 +9672,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();
@@ -9942,7 +9922,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();
@@ -10139,12 +10119,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);
@@ -10619,12 +10597,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;
@@ -10737,7 +10715,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) => {
@@ -10852,7 +10830,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;
@@ -10959,7 +10937,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();
@@ -11010,7 +10988,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();
@@ -11258,7 +11236,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();
@@ -11283,7 +11261,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();
@@ -11331,7 +11309,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();
@@ -11447,7 +11425,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();
@@ -11544,7 +11522,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) {
@@ -11566,7 +11544,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();
@@ -11603,7 +11581,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();
@@ -11640,7 +11618,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) {
@@ -11661,7 +11639,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();
@@ -11807,7 +11785,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();
@@ -11961,7 +11939,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();
@@ -11986,7 +11964,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();
@@ -12059,7 +12037,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();
@@ -12082,7 +12060,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();
@@ -12133,7 +12111,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();
@@ -12195,7 +12173,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) {
@@ -12219,7 +12197,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;
@@ -12258,7 +12236,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();
@@ -12279,7 +12257,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();
@@ -12432,10 +12410,29 @@
     const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .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) params = {};
@@ -12447,10 +12444,22 @@
                 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",
@@ -12459,10 +12468,55 @@
                 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() {
@@ -12532,19 +12586,48 @@
         }
         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();
+        }
     }
 
     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) params = {};
@@ -12557,14 +12640,18 @@
                 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()) this._ref.rotation(attrs.rotation);
@@ -12588,6 +12675,24 @@
                     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() {
@@ -12638,6 +12743,10 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
         }
         getFontSize() {
             return this._ref.fontSize();
@@ -12645,13 +12754,42 @@
         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
+            });
+        }
     }
 
     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 = {};
@@ -12659,22 +12797,47 @@
                 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) > 1e-5;
                 const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
                 let newWidth = this._ref.width();
@@ -12696,6 +12859,32 @@
                     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() {
@@ -12709,15 +12898,31 @@
         }
         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: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
         }
         ref() {
             return this._ref;
@@ -12759,13 +12964,49 @@
         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));
+        }
     }
 
     class KonvaEllipse {
-        constructor(params, ref = null) {
+        constructor(params, ref = null, worldTransformer = new WorldTransform) {
             var _a, _b;
+            this._worldTransformer = worldTransformer;
             if (ref) {
                 this._ref = ref;
+                const wcsPosition = this._ref.getAttr("wcsPosition");
+                const radiusX = this._ref.getAttr("wcsRadiusX");
+                const radiusY = this._ref.getAttr("wcsRadiusY");
+                if (!wcsPosition) {
+                    this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({
+                        x: ref.x(),
+                        y: ref.y()
+                    }));
+                }
+                if (!radiusX) {
+                    this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({
+                        x: ref.x() + ref.radiusX(),
+                        y: ref.y()
+                    }));
+                }
+                if (!radiusY) {
+                    this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({
+                        x: ref.x(),
+                        y: ref.y() + ref.radiusY()
+                    }));
+                }
                 return;
             }
             if (!params) params = {};
@@ -12778,8 +13019,8 @@
                 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",
@@ -12790,6 +13031,18 @@
                 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()) this._ref.rotation(attrs.rotation);
@@ -12826,6 +13079,42 @@
                     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() {
@@ -12836,18 +13125,30 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({
+                x: x,
+                y: 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();
@@ -12889,13 +13190,43 @@
             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)
+            });
+        }
     }
 
     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) params = {};
@@ -12908,8 +13239,8 @@
                 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",
@@ -12918,9 +13249,43 @@
                 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());
         }
@@ -12971,6 +13336,14 @@
         }
         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 ]);
             }
         }
@@ -12984,6 +13357,10 @@
         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: x,
+                y: y
+            }));
         }
         getEndPoint() {
             const points = this._ref.points();
@@ -12995,16 +13372,36 @@
         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: x,
+                y: 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 ]);
         }
     }
 
     class KonvaImage {
-        constructor(params, ref = null) {
+        constructor(params, ref = null, worldTransformer = new WorldTransform) {
             var _a, _b;
             this._ratio = 1;
             this.EPSILON = 1e-5;
             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;
                 if (ref.height() <= this.EPSILON) ref.height(32);
@@ -13012,6 +13409,13 @@
                 this._ref = ref;
                 this._canvasImage = ref.image();
                 this._ratio = 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) params = {};
@@ -13049,10 +13453,14 @@
                 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()) this._ref.rotation(attrs.rotation);
@@ -13083,6 +13491,22 @@
                     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() {
@@ -13141,14 +13565,47 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: 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
+            });
         }
     }
 
     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 = {};
@@ -13156,14 +13613,32 @@
                 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",
@@ -13215,9 +13690,9 @@
                         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;
@@ -13228,9 +13703,16 @@
                 }
             });
             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) > 1e-5;
                 const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
                 let newWidth = this._ref.width();
@@ -13252,11 +13734,37 @@
                     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 = () => ({
-                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());
         }
@@ -13302,18 +13810,34 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: 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();
@@ -13321,6 +13845,20 @@
         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));
+        }
     }
 
     const MarkupMode2Konva = {
@@ -13330,37 +13868,49 @@
         },
         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);
+        };
+    }
+
     class KonvaMarkup {
         constructor() {
-            this._containerEvents = [];
             this._markupIsActive = false;
             this._markupColor = new MarkupColor(255, 0, 0);
             this.lineWidth = 4;
@@ -13379,25 +13929,29 @@
                 if (!this._konvaStage) return;
                 this._konvaStage.width(width);
                 this._konvaStage.height(height);
+                this.getObjects().forEach((markupObject => {
+                    markupObject.updateScreenCoordinates();
+                }));
+            };
+            this.resizeViewer = event => {
+                const {width: width, height: height} = event;
+                if (!width || !height) return;
+                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) this._viewer.emit(event);
@@ -13412,9 +13966,8 @@
         initialize(container, containerEvents, viewer, worldTransformer) {
             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";
@@ -13424,8 +13977,7 @@
             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) {
@@ -13442,9 +13994,9 @@
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
             }
             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;
@@ -13476,14 +14028,14 @@
             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);
+                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);
+                return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
             }));
         }
         setViewpoint(viewpoint) {
@@ -13499,13 +14051,13 @@
                 x: 0,
                 y: 0
             });
-            const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
+            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);
@@ -13514,28 +14066,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);
             }));
@@ -13574,7 +14126,7 @@
         createObject(type, params) {
             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;
         }
@@ -13582,7 +14134,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;
         }
@@ -13591,7 +14143,7 @@
             return this._konvaTransformer.nodes().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));
         }
         selectObjects(objects) {
@@ -13667,7 +14219,7 @@
                             this.addRectangle({
                                 x: startX,
                                 y: startY
-                            }, dX, dY);
+                            }, null, dX, dY);
                         } else if (this._markupMode === "Ellipse") {
                             this.addEllipse({
                                 x: startX,
@@ -13688,7 +14240,7 @@
                             this.addCloud({
                                 x: startX,
                                 y: startY
-                            }, Math.max(100, dX), Math.max(100, dY));
+                            }, null, Math.max(100, dX), Math.max(100, dY));
                         }
                     }
                 }
@@ -13727,7 +14279,7 @@
                     } else lastObj = this.addRectangle({
                         x: startX,
                         y: startY
-                    }, dX, dY);
+                    }, null, dX, dY);
                 } else if (this._markupMode === "Ellipse") {
                     if (lastObj) {
                         lastObj.setPosition(startX, startY);
@@ -13748,7 +14300,7 @@
                     } else lastObj = this.addCloud({
                         x: startX,
                         y: startY
-                    }, dX, dY);
+                    }, null, dX, dY);
                 }
             }));
             stage.on("click tap", (e => {
@@ -13829,7 +14381,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;
@@ -13840,22 +14392,12 @@
         getMarkupLines() {
             const lines = [];
             this.konvaLayerFind("Line").forEach((ref => {
-                const linePoints = ref.points();
-                if (!linePoints) return;
-                const worldPoints = [];
-                const absoluteTransform = ref.getAbsoluteTransform();
-                for (let i = 0; i < linePoints.length; i += 2) {
-                    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 wcsPoints = ref.getAttr("wcsPoints");
+                if (!wcsPoints) return;
+                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
@@ -13869,17 +14411,12 @@
             this.konvaLayerFind("Text").forEach((ref => {
                 const textSize = .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(),
@@ -13893,20 +14430,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()
                 };
@@ -13917,18 +14450,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
@@ -13943,22 +14471,13 @@
         getMarkupArrows() {
             const arrows = [];
             this.konvaLayerFind("Arrow").forEach((ref => {
-                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);
@@ -13968,18 +14487,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
@@ -13991,20 +14505,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()
                 };
@@ -14041,7 +14551,7 @@
                 width: width || this.lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaLine);
             return konvaLine;
         }
@@ -14079,7 +14589,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;
@@ -14122,14 +14632,14 @@
         }
         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;
         }
         addText(text, position, angle, color, textSize, fontSize, id) {
             var _a;
             if (!text) return;
-            (_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();
             const tolerance = 1e-6;
@@ -14148,20 +14658,21 @@
                 fontSize: fontSize || this.fontSize,
                 color: color || this._markupColor.asHex(),
                 id: 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: position,
+                position2: position2,
                 width: width,
                 height: height,
                 lineWidth: lineWidth || this.lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaRectangle);
             return konvaRectangle;
         }
@@ -14173,7 +14684,7 @@
                 lineWidth: lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaEllipse);
             return konvaEllipse;
         }
@@ -14184,27 +14695,28 @@
                 end: end,
                 color: color || this._markupColor.asHex(),
                 id: 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: position,
+                position2: position2,
                 width: width,
                 height: height,
                 color: color || this._markupColor.asHex(),
                 lineWidth: lineWidth || this.lineWidth,
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaCloud);
             return konvaCloud;
         }
         addImage(position, src, width, height, id) {
             var _a;
             if (!position || !src) return;
-            (_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({
@@ -14215,7 +14727,7 @@
                 maxWidth: this._konvaStage.width() - position.x,
                 maxHeight: this._konvaStage.height() - position.y,
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaImage);
             return konvaImage;
         }
@@ -57010,7 +57522,7 @@ void main() {
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
     function getModels(viewer) {
-        return viewer.models.map((model) => { var _a; return ((_a = model.userData) === null || _a === void 0 ? void 0 : _a.handle) || ""; }).filter((handle) => handle);
+        return viewer.models.map((model) => { var _a; return ((_a = model.userData) === null || _a === undefined ? undefined : _a.handle) || ""; }).filter((handle) => handle);
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -57036,7 +57548,7 @@ void main() {
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
     function getSelected(viewer) {
-        return viewer.selected.map((object) => { var _a; return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle; }).filter((handle) => handle);
+        return viewer.selected.map((object) => { var _a; return (_a = object.userData) === null || _a === undefined ? undefined : _a.handle; }).filter((handle) => handle);
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -57382,7 +57894,7 @@ void main() {
         const objects = [];
         viewer.scene.traverseVisible((child) => {
             var _a;
-            if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle))
+            if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle))
                 objects.push(child);
         });
         const selection = viewer.getComponent("SelectionComponent");
@@ -57475,7 +57987,7 @@ void main() {
         const objects = [];
         viewer.scene.traverseVisible((child) => {
             var _a;
-            if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle))
+            if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle))
                 objects.push(child);
         });
         const extents = objects.reduce((result, object) => result.expandByObject(object), new Box3());
@@ -63021,7 +63533,7 @@ void main() {
                     .replace(this.resourcePath, "")
                     .replace(/^(\.?\/)/, "");
                 const dataURL = this.dataURLs.get(key);
-                return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+                return dataURL !== null && dataURL !== undefined ? dataURL : url;
             });
         }
         dispose() {
@@ -63202,7 +63714,7 @@ void main() {
             this.renderer.autoClear = false;
             this.renderer.render(this.helpers, this.camera);
             this.renderer.clippingPlanes = clippingPlanes;
-            (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
             const deltaTime = (time - this.renderTime) / 1000;
             this.renderTime = time;
             this.emitEvent({ type: "render", time, deltaTime });
@@ -63470,7 +63982,7 @@ void main() {
                     newDragger = draggers.createDragger(name, this);
                     if (newDragger) {
                         this._activeDragger = newDragger;
-                        (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        (_b = (_a = this._activeDragger).initialize) === null || _b === undefined ? undefined : _b.call(_a);
                     }
                 }
                 const canvas = this.canvas;
@@ -63567,7 +64079,7 @@ void main() {
                 }
             };
             const setClippingPlanes = (clipping_planes) => {
-                clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane) => {
+                clipping_planes === null || clipping_planes === undefined ? undefined : clipping_planes.forEach((clipping_plane) => {
                     const plane = new Plane();
                     plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
                     this.renderer.clippingPlanes.push(plane);
@@ -63577,7 +64089,7 @@ void main() {
                 if (selection)
                     this.setSelected(selection.map((component) => component.handle));
             };
-            const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
+            const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
             this.setActiveDragger();
             this.clearSlices();
             this.clearOverlay();
@@ -63589,7 +64101,7 @@ void main() {
             setClippingPlanes(viewpoint.clipping_planes);
             setSelection(viewpoint.selection);
             this._markup.setViewpoint(viewpoint);
-            this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
+            this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === undefined ? undefined : _b.camera_target) !== null && _c !== undefined ? _c : this.target);
             this.setActiveDragger(draggerName);
             this.emitEvent({ type: "drawviewpoint", data: viewpoint });
             this.update();