@inweb/viewer-three 26.4.0 → 26.5.0

package/dist/viewer-three.js

@@ -68,25 +68,22 @@
 
     class DraggersRegistry {
         constructor() {
-            this._draggers = new Map;
+            this._providers = new Map;
         }
         registerDragger(name, provider) {
-            this._draggers.set(name, provider);
+            this._providers.set(name, provider);
         }
         registerDraggerAlias(name, alias) {
-            const provider = this.getDragger(name);
+            const provider = this._providers.get(name);
             if (provider) this.registerDragger(alias, (viewer => provider(viewer)));
         }
-        getDragger(name) {
-            return this._draggers.get(name);
-        }
         getDraggers() {
             const map = new Map;
-            this._draggers.forEach(((value, key) => map.set(key, value)));
+            this._providers.forEach(((value, key) => map.set(key, value)));
             return map;
         }
         createDragger(name, viewer) {
-            const provider = this.getDragger(name);
+            const provider = this._providers.get(name);
             if (!provider) return null;
             const dragger = provider(viewer);
             dragger.name = name;
@@ -114,25 +111,22 @@
 
     class Components {
         constructor() {
-            this._components = new Map;
+            this._providers = new Map;
         }
         registerComponent(name, provider) {
-            this._components.set(name, provider);
+            this._providers.set(name, provider);
         }
         registerComponentAlias(name, alias) {
-            const provider = this.getComponent(name);
+            const provider = this._providers.get(name);
             if (provider) this.registerComponent(alias, (viewer => provider(viewer)));
         }
-        getComponent(name) {
-            return this._components.get(name);
-        }
         getComponents() {
             const map = new Map;
-            this._components.forEach(((value, key) => map.set(key, value)));
+            this._providers.forEach(((value, key) => map.set(key, value)));
             return map;
         }
         createComponent(name, viewer) {
-            const provider = this.getComponent(name);
+            const provider = this._providers.get(name);
             if (!provider) return null;
             const component = provider(viewer);
             component.name = name;
@@ -12410,10 +12404,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 +12438,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 +12462,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 +12580,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 +12642,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 +12669,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 +12737,10 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
         }
         getFontSize() {
             return this._ref.fontSize();
@@ -12623,13 +12748,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 +12791,24 @@
                 x: 0,
                 y: 0
             };
+            if (params.position2) {
+                params.width = params.position2.x - params.position.x;
+                params.height = params.position2.y - params.position.y;
+            } else {
+                if (!params.width || !params.height) {
+                    params.position2 = {
+                        x: 200,
+                        y: 200
+                    };
+                    params.width = 200;
+                    params.height = 200;
+                } else {
+                    params.position2 = {
+                        x: params.position.x + params.width,
+                        y: params.position.y + params.height
+                    };
+                }
+            }
             this._ref = new Konva.Rect({
                 stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
                 strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
@@ -12650,9 +12822,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 +12853,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 +12892,37 @@
         }
         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
+            }));
+            const rightLowerPoint = {
+                x: x + this._ref.width(),
+                y: y + this._ref.y()
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         ref() {
             return this._ref;
@@ -12737,13 +12964,53 @@
         getLineWidth() {
             return this._ref.strokeWidth();
         }
+        updateScreenCoordinates() {
+            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            let invert = this._ref.getStage().getAbsoluteTransform().copy();
+            invert = invert.invert();
+            const positionStart = invert.point(screenPositionStart);
+            const positionEnd = invert.point(screenPositionEnd);
+            this._ref.position({
+                x: positionStart.x,
+                y: positionStart.y
+            });
+            this._ref.width(Math.abs(positionEnd.x - positionStart.x));
+            this._ref.height(Math.abs(positionEnd.y - positionStart.y));
+        }
+    }
+
+    function getDistanceIn2D(p1, p2) {
+        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
     }
 
     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 = {};
@@ -12751,10 +13018,15 @@
                 x: 0,
                 y: 0
             };
-            if (!params.radius) params.radius = {
-                x: 25,
-                y: 25
-            };
+            if (params.position2) {
+                params.radius.x = getDistanceIn2D(params.position, params.position2);
+                if (params.position3) params.radius.y = getDistanceIn2D(params.position, params.position3); else params.radius.x = params.radius.y;
+            } else {
+                if (!params.radius) params.radius = {
+                    x: 25,
+                    y: 25
+                };
+            }
             this._ref = new Konva.Ellipse({
                 stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
                 strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
@@ -12768,6 +13040,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 +13088,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 +13134,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 +13199,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 +13258,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 +13345,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 +13366,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 +13381,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 +13418,24 @@
                 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");
+                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 = {};
@@ -12998,6 +13444,10 @@
                 y: 0
             };
             if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
+            if (params.position2) {
+                params.width = params.position2.x - params.position.x;
+                params.height = params.position2.y - params.position.y;
+            }
             this._canvasImage = new Image;
             this._canvasImage.onload = () => {
                 this._ref.image(this._canvasImage);
@@ -13015,6 +13465,11 @@
                             this._ref.width(params.maxHeight / this._ratio);
                             this._ref.height(params.maxHeight);
                         }
+                        const wcsEnd = this._worldTransformer.screenToWorld({
+                            x: params.position.x + this._ref.width(),
+                            y: params.position.y + this._ref.height()
+                        });
+                        this._ref.setAttr("wcsEnd", wcsEnd);
                     }
                 }
             };
@@ -13031,6 +13486,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 +13520,30 @@
                     y: 1
                 });
             }));
+            this._ref.on("transformend", (e => {
+                const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
+                const position = absoluteTransform.point({
+                    x: this._ref.x(),
+                    y: this._ref.y()
+                });
+                this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+                this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
+                    x: position.x + this._ref.width(),
+                    y: position.y + this._ref.height()
+                }));
+            }));
+            this._ref.on("dragend", (e => {
+                const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
+                const position = absoluteTransform.point({
+                    x: this._ref.x(),
+                    y: this._ref.y()
+                });
+                this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+                this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
+                    x: position.x + this._ref.width(),
+                    y: position.y + this._ref.height()
+                }));
+            }));
             this._ref.id(this._ref._id.toString());
         }
         getSrc() {
@@ -13075,6 +13558,12 @@
         setWidth(w) {
             this._ref.width(w);
             this._ref.height(w * this._ratio);
+            const rightLowerPoint = {
+                x: this._ref.x() + w,
+                y: this._ref.y() + this._ref.height()
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         getHeight() {
             return this._ref.height();
@@ -13082,6 +13571,12 @@
         setHeight(h) {
             this._ref.height(h);
             this._ref.width(h / this._ratio);
+            const rightLowerPoint = {
+                x: this._ref.x() + this._ref.width(),
+                y: this._ref.y() + h
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         ref() {
             return this._ref;
@@ -13119,14 +13614,57 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
+            const rightLowerPoint = {
+                x: x + this._ref.width(),
+                y: y + this._ref.y()
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
+        }
+        updateScreenCoordinates() {
+            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            let invert = this._ref.getStage().getAbsoluteTransform().copy();
+            invert = invert.invert();
+            const positionStart = invert.point(screenPositionStart);
+            const positionEnd = invert.point(screenPositionEnd);
+            this._ref.position({
+                x: positionStart.x,
+                y: positionStart.y
+            });
+            this._ref.width(Math.abs(positionEnd.x - positionStart.x));
+            this._ref.height(Math.abs(positionEnd.y - positionStart.y));
         }
     }
 
     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 +13672,25 @@
                 x: 0,
                 y: 0
             };
-            const arcRadius = 16;
+            if (params.position2) {
+                params.width = params.position2.x - params.position.x;
+                params.height = params.position2.y - params.position.y;
+            } else {
+                if (!params.width || !params.height) {
+                    params.position2 = {
+                        x: 200,
+                        y: 200
+                    };
+                    params.width = 200;
+                    params.height = 200;
+                } else {
+                    params.position2 = {
+                        x: params.position.x + params.width,
+                        y: params.position.y + params.height
+                    };
+                }
+            }
+            const ARC_RADIUS = 16;
             this._ref = new Konva.Shape({
                 x: params.position.x,
                 y: params.position.y,
@@ -13193,9 +13749,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 +13762,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 +13793,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 +13869,40 @@
                 x: x,
                 y: y
             });
+            this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
+                x: x,
+                y: y
+            }));
+            const rightLowerPoint = {
+                x: x + this._ref.width(),
+                y: y + this._ref.y()
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         getWidth() {
             return this._ref.width();
         }
         setWidth(w) {
             this._ref.width(w);
+            const rightLowerPoint = {
+                x: this._ref.x() + w,
+                y: this._ref.y() + this._ref.height()
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         getHeigth() {
             return this._ref.height();
         }
         setHeight(h) {
             this._ref.height(h);
+            const rightLowerPoint = {
+                x: this._ref.x() + this._ref.width(),
+                y: this._ref.y() + h
+            };
+            const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+            this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         getLineWidth() {
             return this._ref.strokeWidth();
@@ -13299,6 +13910,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 +13933,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 +13994,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 +14033,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 +14042,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,11 +14137,14 @@
             }));
             (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect => {
                 const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-                this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+                const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
+                this.addRectangle(screenPoint, screenPoint2, rect.width, rect.height, rect.line_width, rect.color, rect.id);
             }));
             (_e = viewpoint.ellipses) === null || _e === undefined ? undefined : _e.forEach((ellipse => {
                 const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
-                this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+                const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
+                const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
+                this.addEllipse(screenPoint, screenPoint2, screenPoint3, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
             }));
             (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow => {
                 const startPoint = this._worldTransformer.worldToScreen(arrow.start);
@@ -13511,11 +14153,13 @@
             }));
             (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud => {
                 const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-                this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+                const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
+                this.addCloud(screenPoint, screenPoint2, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
             }));
             (_h = viewpoint.images) === null || _h === undefined ? undefined : _h.forEach((image => {
                 const screenPoint = this._worldTransformer.worldToScreen(image.position);
-                this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+                const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
+                this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
             }));
         }
         getViewpoint(viewpoint) {
@@ -13552,7 +14196,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 +14204,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 +14213,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,12 +14289,12 @@
                             this.addRectangle({
                                 x: startX,
                                 y: startY
-                            }, dX, dY);
+                            }, null, dX, dY);
                         } else if (this._markupMode === "Ellipse") {
                             this.addEllipse({
                                 x: startX,
                                 y: startY
-                            }, {
+                            }, null, null, {
                                 x: dX / 2,
                                 y: dY / 2
                             });
@@ -13666,7 +14310,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 +14349,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);
@@ -13714,7 +14358,7 @@
                     } else lastObj = this.addEllipse({
                         x: startX,
                         y: startY
-                    }, {
+                    }, null, null, {
                         x: dX,
                         y: dY
                     });
@@ -13726,7 +14370,7 @@
                     } else lastObj = this.addCloud({
                         x: startX,
                         y: startY
-                    }, dX, dY);
+                    }, null, dX, dY);
                 }
             }));
             stage.on("click tap", (e => {
@@ -13741,7 +14385,7 @@
                         if (this._imageInputRef && this._imageInputRef.value) this.addImage({
                             x: this._imageInputPos.x,
                             y: this._imageInputPos.y
-                        }, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
+                        }, null, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
                             const pos = this.getRelativePointerPosition(stage);
                             this.createImageInput(pos);
                         }
@@ -13762,7 +14406,7 @@
                 }
                 if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
                     if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
-                        if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
+                        if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0); else this.createImageInput({
                             x: e.target.attrs.x,
                             y: e.target.attrs.y
                         });
@@ -13818,22 +14462,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 +14481,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 +14500,17 @@
         getMarkupRectangles() {
             const rectangles = [];
             this.konvaLayerFind("Rectangle").forEach((ref => {
-                const position = ref.position();
-                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-                const atPoint = stageAbsoluteTransform.point({
-                    x: position.x,
-                    y: position.y
-                });
-                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-                const scale = stageAbsoluteTransform.getMatrix()[0];
-                const shape = new KonvaRectangle(null, ref);
+                const wcsStart = ref.getAttr("wcsStart");
+                const wcsEnd = ref.getAttr("wcsEnd");
+                const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+                const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
+                const shape = new KonvaRectangle(null, ref, this._worldTransformer);
                 const rectangle = {
                     id: shape.id(),
-                    position: worldPoint,
-                    width: shape.getWidth() * scale,
-                    height: shape.getHeigth() * scale,
+                    position: wcsStart,
+                    position2: wcsEnd,
+                    width: Math.abs(screenStart.x - screenEnd.x),
+                    height: Math.abs(screenStart.y - screenEnd.y),
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -13895,18 +14521,17 @@
         getMarkupEllipses() {
             const ellipses = [];
             this.konvaLayerFind("Ellipse").forEach((ref => {
-                const position = ref.position();
+                const wcsPosition = ref.getAttr("wcsPosition");
+                const wcsPosition2 = ref.getAttr("wcsRadiusX");
+                const wcsPosition3 = ref.getAttr("wcsRadiusY");
                 const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-                const atPoint = stageAbsoluteTransform.point({
-                    x: position.x,
-                    y: position.y
-                });
-                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 const scale = stageAbsoluteTransform.getMatrix()[0];
-                const shape = new KonvaEllipse(null, ref);
+                const shape = new KonvaEllipse(null, ref, this._worldTransformer);
                 const ellipse = {
                     id: shape.id(),
-                    position: worldPoint,
+                    position: wcsPosition,
+                    position2: wcsPosition2,
+                    position3: wcsPosition3,
                     radius: {
                         x: ref.getRadiusX() * scale,
                         y: ref.getRadiusY() * scale
@@ -13921,22 +14546,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 +14562,15 @@
         getMarkupImages() {
             const images = [];
             this.konvaLayerFind("Image").forEach((ref => {
-                const position = ref.position();
+                const wcsStart = ref.getAttr("wcsStart");
+                const wcsEnd = ref.getAttr("wcsEnd");
                 const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-                const atPoint = stageAbsoluteTransform.point({
-                    x: position.x,
-                    y: position.y
-                });
-                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 const scale = stageAbsoluteTransform.getMatrix()[0];
-                const shape = new KonvaImage(null, ref);
+                const shape = new KonvaImage(null, ref, this._worldTransformer);
                 const image = {
                     id: shape.id(),
-                    position: worldPoint,
+                    position: wcsStart,
+                    position2: wcsEnd,
                     src: shape.getSrc(),
                     width: shape.getWidth() * scale,
                     height: shape.getHeight() * scale
@@ -13969,20 +14582,17 @@
         getMarkupClouds() {
             const clouds = [];
             this.konvaLayerFind("Cloud").forEach((ref => {
-                const position = ref.position();
-                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-                const atPoint = stageAbsoluteTransform.point({
-                    x: position.x,
-                    y: position.y
-                });
-                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-                const scale = stageAbsoluteTransform.getMatrix()[0];
-                const shape = new KonvaCloud(null, ref);
+                const wcsStart = ref.getAttr("wcsStart");
+                const wcsEnd = ref.getAttr("wcsEnd");
+                const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+                const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
+                const shape = new KonvaCloud(null, ref, this._worldTransformer);
                 const cloud = {
                     id: shape.id(),
-                    position: worldPoint,
-                    width: shape.getWidth() * scale,
-                    height: shape.getHeigth() * scale,
+                    position: wcsStart,
+                    position2: wcsEnd,
+                    width: Math.abs(screenStart.x - screenEnd.x),
+                    height: Math.abs(screenStart.y - screenEnd.y),
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -14019,7 +14629,7 @@
                 width: width || this.lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaLine);
             return konvaLine;
         }
@@ -14085,7 +14695,7 @@
                     this.addImage({
                         x: this._imageInputPos.x,
                         y: this._imageInputPos.y
-                    }, base64.toString(), 0, 0);
+                    }, null, base64.toString(), 0, 0);
                 };
                 this._imageInputRef.oncancel = event => {
                     this.removeImageInput();
@@ -14126,32 +14736,35 @@
                 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;
         }
-        addEllipse(position, radius, lineWidth, color, id) {
+        addEllipse(position, position2, position3, radius, lineWidth, color, id) {
             if (!position) return;
             const konvaEllipse = new KonvaEllipse({
                 position: position,
+                position2: position2,
+                position3: position3,
                 radius: radius,
                 lineWidth: lineWidth,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaEllipse);
             return konvaEllipse;
         }
@@ -14162,24 +14775,25 @@
                 end: end,
                 color: color || this._markupColor.asHex(),
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaArrow);
             return konvaArrow;
         }
-        addCloud(position, width, height, lineWidth, color, id) {
+        addCloud(position, position2, width, height, lineWidth, color, id) {
             if (!position || !width || !height) return;
             const konvaCloud = new KonvaCloud({
                 position: position,
+                position2: position2,
                 width: width,
                 height: height,
                 color: color || this._markupColor.asHex(),
                 lineWidth: lineWidth || this.lineWidth,
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaCloud);
             return konvaCloud;
         }
-        addImage(position, src, width, height, id) {
+        addImage(position, position2, src, width, height, id) {
             var _a;
             if (!position || !src) return;
             (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
@@ -14187,13 +14801,14 @@
             this.removeImageInput();
             const konvaImage = new KonvaImage({
                 position: position,
+                position2: position2,
                 src: src,
                 width: width,
                 height: height,
                 maxWidth: this._konvaStage.width() - position.x,
                 maxHeight: this._konvaStage.height() - position.y,
                 id: id
-            });
+            }, null, this._worldTransformer);
             this.addObject(konvaImage);
             return konvaImage;
         }
@@ -57514,7 +58129,7 @@ void main() {
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
     /**
-     * A commands registry. Use this registry to register custom commands.
+     * Viewer commands registry. Use this registry to register custom commands.
      *
      * To implement custom command:
      *
@@ -57588,6 +58203,45 @@ void main() {
     commands.registerCommandAlias("ne", "k3DViewNE");
     commands.registerCommandAlias("nw", "k3DViewNW");
 
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class BackgroundComponent {
+        constructor(viewer) {
+            this.syncOptions = () => {
+                this.backgroundColor.setHex(0xffffff);
+            };
+            this.viewer = viewer;
+            this.backgroundColor = new Color(0xffffff);
+            this.viewer.renderer.setClearColor(this.backgroundColor);
+            this.viewer.scene.background = this.backgroundColor;
+            this.viewer.addEventListener("optionschange", this.syncOptions);
+        }
+        dispose() {
+            this.viewer.removeEventListener("optionschange", this.syncOptions);
+            this.viewer.scene.background = undefined;
+        }
+    }
+
     /**
      * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts
      */
@@ -57744,25 +58398,16 @@ void main() {
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    class BackgroundComponent {
+    class RoomEnvironmentComponent {
         constructor(viewer) {
-            this.syncOptions = () => {
-                this.backgroundColor.setHex(0xffffff);
-            };
             this.viewer = viewer;
-            this.backgroundColor = new Color(0xffffff);
             const environment = new RoomEnvironment();
             const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
-            this.viewer.renderer.setClearColor(this.backgroundColor);
-            this.viewer.scene.background = this.backgroundColor;
             this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
-            this.viewer.addEventListener("optionschange", this.syncOptions);
             environment.dispose();
         }
         dispose() {
-            this.viewer.removeEventListener("optionschange", this.syncOptions);
             this.viewer.scene.environment = undefined;
-            this.viewer.scene.background = undefined;
         }
     }
 
@@ -57791,9 +58436,11 @@ void main() {
     class CameraComponent {
         constructor(viewer) {
             this.geometryEnd = () => {
+                const extentsCenter = this.viewer.extents.getCenter(new Vector3());
                 const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
                 const rendererSize = this.viewer.renderer.getSize(new Vector2());
                 const aspect = rendererSize.x / rendererSize.y;
+                // TODO: do not change the camera and target after opening the second model in "append" mode
                 let sceneCamera;
                 this.viewer.scene.traverse((object) => {
                     if (object.isCamera)
@@ -57821,6 +58468,7 @@ void main() {
                     camera.far = extentsSize * 100;
                     camera.updateProjectionMatrix();
                 }
+                this.viewer.target.copy(extentsCenter);
                 if (!sceneCamera) {
                     this.viewer.executeCommand("setDefaultViewPosition");
                 }
@@ -57861,7 +58509,6 @@ void main() {
                 const extents = new Box3();
                 this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
                 this.viewer.extents.copy(extents);
-                this.viewer.target.copy(extents.getCenter(new Vector3()));
             };
             this.viewer = viewer;
             this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -58166,6 +58813,7 @@ void main() {
     components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
     components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
     components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
+    components.registerComponent("RoomEnvironmentComponent", (viewer) => new RoomEnvironmentComponent(viewer));
     // components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
     components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
     components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));