@inweb/markup 26.4.0 → 26.4.2

package/dist/markup.module.js

@@ -55,10 +55,29 @@ class MarkupColor {
 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 = {};
@@ -70,7 +89,19 @@ class KonvaLine {
             y: 100
         } ];
         const konvaPoints = [];
-        params.points.forEach((point => konvaPoints.push(point.x, point.y)));
+        const wcsPoints = [];
+        params.points.forEach((point => {
+            konvaPoints.push(point.x, point.y);
+            let wcsPoint = this._worldTransformer.screenToWorld({
+                x: point.x,
+                y: point.y
+            });
+            wcsPoints.push({
+                x: wcsPoint.x,
+                y: wcsPoint.y,
+                z: wcsPoint.z
+            });
+        }));
         this._ref = new Konva.Line({
             stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
             strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
@@ -82,10 +113,55 @@ class KonvaLine {
             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() {
@@ -155,19 +231,48 @@ class KonvaLine {
     }
     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 = {};
@@ -188,6 +293,10 @@ class KonvaText {
             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);
@@ -211,6 +320,24 @@ class KonvaText {
                 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() {
@@ -261,6 +388,10 @@ class KonvaText {
             x: x,
             y: y
         });
+        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+            x: x,
+            y: y
+        }));
     }
     getFontSize() {
         return this._ref.fontSize();
@@ -268,13 +399,42 @@ class KonvaText {
     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 = {};
@@ -282,6 +442,24 @@ class KonvaRectangle {
             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 !== undefined ? _a : "#ff0000",
             strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
@@ -295,9 +473,16 @@ class KonvaRectangle {
             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();
@@ -319,6 +504,32 @@ class KonvaRectangle {
                 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() {
@@ -332,15 +543,31 @@ class KonvaRectangle {
     }
     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;
@@ -382,13 +609,49 @@ class KonvaRectangle {
     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 = {};
@@ -413,6 +676,18 @@ class KonvaEllipse {
             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);
@@ -449,6 +724,42 @@ class KonvaEllipse {
                 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() {
@@ -459,18 +770,30 @@ class KonvaEllipse {
             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();
@@ -512,13 +835,43 @@ class KonvaEllipse {
         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 = {};
@@ -541,9 +894,43 @@ class KonvaArrow {
             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());
     }
@@ -594,6 +981,14 @@ class KonvaArrow {
     }
     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 ]);
         }
     }
@@ -607,6 +1002,10 @@ class KonvaArrow {
     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();
@@ -618,16 +1017,36 @@ class KonvaArrow {
     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);
@@ -635,6 +1054,13 @@ class KonvaImage {
             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 = {};
@@ -676,6 +1102,10 @@ class KonvaImage {
             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);
@@ -706,6 +1136,22 @@ class KonvaImage {
                 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() {
@@ -764,14 +1210,47 @@ class KonvaImage {
             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 = {};
@@ -779,7 +1258,25 @@ class KonvaCloud {
             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,
@@ -838,9 +1335,9 @@ class KonvaCloud {
                     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;
@@ -851,9 +1348,16 @@ class KonvaCloud {
             }
         });
         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();
@@ -875,11 +1379,37 @@ class KonvaCloud {
                 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());
     }
@@ -925,18 +1455,34 @@ class KonvaCloud {
             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();
@@ -944,6 +1490,20 @@ class KonvaCloud {
     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 = {
@@ -953,37 +1513,49 @@ const MarkupMode2Konva = {
     },
     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;
@@ -1002,25 +1574,29 @@ class KonvaMarkup {
             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);
@@ -1037,7 +1613,6 @@ class KonvaMarkup {
         this._viewer = viewer;
         this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform;
         this._container = container;
-        this._containerEvents = containerEvents !== null && containerEvents !== undefined ? containerEvents : [];
         this._markupContainer = document.createElement("div");
         this._markupContainer.id = "markup-container";
         this._markupContainer.style.position = "absolute";
@@ -1047,8 +1622,7 @@ class KonvaMarkup {
         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) {
@@ -1143,7 +1717,7 @@ class KonvaMarkup {
         }));
         (_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 === undefined ? undefined : _e.forEach((ellipse => {
             const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
@@ -1156,7 +1730,7 @@ class KonvaMarkup {
         }));
         (_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 === undefined ? undefined : _h.forEach((image => {
             const screenPoint = this._worldTransformer.worldToScreen(image.position);
@@ -1197,7 +1771,7 @@ class KonvaMarkup {
     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;
     }
@@ -1205,7 +1779,7 @@ class KonvaMarkup {
         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;
     }
@@ -1214,7 +1788,7 @@ class KonvaMarkup {
         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) {
@@ -1290,7 +1864,7 @@ class KonvaMarkup {
                         this.addRectangle({
                             x: startX,
                             y: startY
-                        }, dX, dY);
+                        }, null, dX, dY);
                     } else if (this._markupMode === "Ellipse") {
                         this.addEllipse({
                             x: startX,
@@ -1311,7 +1885,7 @@ class KonvaMarkup {
                         this.addCloud({
                             x: startX,
                             y: startY
-                        }, Math.max(100, dX), Math.max(100, dY));
+                        }, null, Math.max(100, dX), Math.max(100, dY));
                     }
                 }
             }
@@ -1350,7 +1924,7 @@ class KonvaMarkup {
                 } else lastObj = this.addRectangle({
                     x: startX,
                     y: startY
-                }, dX, dY);
+                }, null, dX, dY);
             } else if (this._markupMode === "Ellipse") {
                 if (lastObj) {
                     lastObj.setPosition(startX, startY);
@@ -1371,7 +1945,7 @@ class KonvaMarkup {
                 } else lastObj = this.addCloud({
                     x: startX,
                     y: startY
-                }, dX, dY);
+                }, null, dX, dY);
             }
         }));
         stage.on("click tap", (e => {
@@ -1463,22 +2037,12 @@ class KonvaMarkup {
     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
@@ -1492,17 +2056,12 @@ class KonvaMarkup {
         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(),
@@ -1516,20 +2075,16 @@ class KonvaMarkup {
     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()
             };
@@ -1540,18 +2095,13 @@ class KonvaMarkup {
     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
@@ -1566,22 +2116,13 @@ class KonvaMarkup {
     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);
@@ -1591,18 +2132,13 @@ class KonvaMarkup {
     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
@@ -1614,20 +2150,16 @@ class KonvaMarkup {
     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()
             };
@@ -1664,7 +2196,7 @@ class KonvaMarkup {
             width: width || this.lineWidth,
             color: color || this._markupColor.asHex(),
             id: id
-        });
+        }, null, this._worldTransformer);
         this.addObject(konvaLine);
         return konvaLine;
     }
@@ -1771,20 +2303,21 @@ class KonvaMarkup {
             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;
     }
@@ -1796,7 +2329,7 @@ class KonvaMarkup {
             lineWidth: lineWidth,
             color: color || this._markupColor.asHex(),
             id: id
-        });
+        }, null, this._worldTransformer);
         this.addObject(konvaEllipse);
         return konvaEllipse;
     }
@@ -1807,20 +2340,21 @@ class KonvaMarkup {
             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;
     }
@@ -1838,7 +2372,7 @@ class KonvaMarkup {
             maxWidth: this._konvaStage.width() - position.x,
             maxHeight: this._konvaStage.height() - position.y,
             id: id
-        });
+        }, null, this._worldTransformer);
         this.addObject(konvaImage);
         return konvaImage;
     }