@inweb/viewer-three 26.4.0 → 26.4.1

package/dist/viewer-three.js

@@ -12410,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 = {};
@@ -12425,7 +12444,19 @@
                 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,
@@ -12437,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() {
@@ -12510,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 = {};
@@ -12543,6 +12648,10 @@
                 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);
@@ -12566,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() {
@@ -12616,6 +12743,10 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
         }
         getFontSize() {
             return this._ref.fontSize();
@@ -12623,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 = {};
@@ -12637,6 +12797,24 @@
                 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,
@@ -12650,9 +12828,16 @@
                 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();
@@ -12674,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() {
@@ -12687,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;
@@ -12737,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 = {};
@@ -12768,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);
@@ -12804,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() {
@@ -12814,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();
@@ -12867,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 = {};
@@ -12896,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());
         }
@@ -12949,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 ]);
             }
         }
@@ -12962,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();
@@ -12973,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);
@@ -12990,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 = {};
@@ -13031,6 +13457,10 @@
                 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);
@@ -13061,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() {
@@ -13119,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 = {};
@@ -13134,7 +13613,25 @@
                 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,
@@ -13193,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;
@@ -13206,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();
@@ -13230,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());
         }
@@ -13280,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();
@@ -13299,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 = {
@@ -13308,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;
@@ -13357,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);
@@ -13392,7 +13968,6 @@
             this._viewer = viewer;
             this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform;
             this._container = container;
-            this._containerEvents = containerEvents !== null && containerEvents !== undefined ? containerEvents : [];
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
             this._markupContainer.style.position = "absolute";
@@ -13402,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) {
@@ -13498,7 +14072,7 @@
             }));
             (_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);
@@ -13511,7 +14085,7 @@
             }));
             (_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);
@@ -13552,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;
         }
@@ -13560,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;
         }
@@ -13569,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) {
@@ -13645,7 +14219,7 @@
                             this.addRectangle({
                                 x: startX,
                                 y: startY
-                            }, dX, dY);
+                            }, null, dX, dY);
                         } else if (this._markupMode === "Ellipse") {
                             this.addEllipse({
                                 x: startX,
@@ -13666,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));
                         }
                     }
                 }
@@ -13705,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);
@@ -13726,7 +14300,7 @@
                     } else lastObj = this.addCloud({
                         x: startX,
                         y: startY
-                    }, dX, dY);
+                    }, null, dX, dY);
                 }
             }));
             stage.on("click tap", (e => {
@@ -13818,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
@@ -13847,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(),
@@ -13871,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()
                 };
@@ -13895,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
@@ -13921,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);
@@ -13946,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
@@ -13969,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()
                 };
@@ -14019,7 +14551,7 @@
                 width: width || this.lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaLine);
             return konvaLine;
         }
@@ -14126,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;
         }
@@ -14151,7 +14684,7 @@
                 lineWidth: lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaEllipse);
             return konvaEllipse;
         }
@@ -14162,20 +14695,21 @@
                 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;
         }
@@ -14193,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;
         }