@inweb/viewer-visualize 26.4.1 → 26.5.0

package/dist/viewer-visualize.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;
@@ -12798,8 +12792,8 @@
                 y: 0
             };
             if (params.position2) {
-                params.width = params.position.x - params.position2.x;
-                params.height = params.position.y - params.position2.y;
+                params.width = params.position2.x - params.position.x;
+                params.height = params.position2.y - params.position.y;
             } else {
                 if (!params.width || !params.height) {
                     params.position2 = {
@@ -12923,6 +12917,12 @@
                 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;
@@ -12980,6 +12980,10 @@
         }
     }
 
+    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, worldTransformer = new WorldTransform) {
             var _a, _b;
@@ -13014,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,
@@ -13410,12 +13419,23 @@
                 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 = {};
@@ -13424,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);
@@ -13441,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);
                     }
                 }
             };
@@ -13498,6 +13527,10 @@
                     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();
@@ -13506,6 +13539,10 @@
                     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());
         }
@@ -13521,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();
@@ -13528,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;
@@ -13569,16 +13618,26 @@
                 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));
         }
     }
 
@@ -13614,8 +13673,8 @@
                 y: 0
             };
             if (params.position2) {
-                params.width = params.position.x - params.position2.x;
-                params.height = params.position.y - params.position2.y;
+                params.width = params.position2.x - params.position.x;
+                params.height = params.position2.y - params.position.y;
             } else {
                 if (!params.width || !params.height) {
                     params.position2 = {
@@ -13814,6 +13873,12 @@
                 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();
@@ -14072,11 +14137,14 @@
             }));
             (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect => {
                 const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-                this.addRectangle(screenPoint, null, 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);
@@ -14085,11 +14153,13 @@
             }));
             (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud => {
                 const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-                this.addCloud(screenPoint, null, 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) {
@@ -14224,7 +14294,7 @@
                             this.addEllipse({
                                 x: startX,
                                 y: startY
-                            }, {
+                            }, null, null, {
                                 x: dX / 2,
                                 y: dY / 2
                             });
@@ -14288,7 +14358,7 @@
                     } else lastObj = this.addEllipse({
                         x: startX,
                         y: startY
-                    }, {
+                    }, null, null, {
                         x: dX,
                         y: dY
                     });
@@ -14315,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);
                         }
@@ -14336,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
                         });
@@ -14438,6 +14508,7 @@
                 const rectangle = {
                     id: shape.id(),
                     position: wcsStart,
+                    position2: wcsEnd,
                     width: Math.abs(screenStart.x - screenEnd.x),
                     height: Math.abs(screenStart.y - screenEnd.y),
                     line_width: shape.getLineWidth(),
@@ -14451,12 +14522,16 @@
             const ellipses = [];
             this.konvaLayerFind("Ellipse").forEach((ref => {
                 const wcsPosition = ref.getAttr("wcsPosition");
+                const wcsPosition2 = ref.getAttr("wcsRadiusX");
+                const wcsPosition3 = ref.getAttr("wcsRadiusY");
                 const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
                 const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaEllipse(null, ref, this._worldTransformer);
                 const ellipse = {
                     id: shape.id(),
                     position: wcsPosition,
+                    position2: wcsPosition2,
+                    position3: wcsPosition3,
                     radius: {
                         x: ref.getRadiusX() * scale,
                         y: ref.getRadiusY() * scale
@@ -14488,12 +14563,14 @@
             const images = [];
             this.konvaLayerFind("Image").forEach((ref => {
                 const wcsStart = ref.getAttr("wcsStart");
+                const wcsEnd = ref.getAttr("wcsEnd");
                 const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
                 const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaImage(null, ref, this._worldTransformer);
                 const image = {
                     id: shape.id(),
                     position: wcsStart,
+                    position2: wcsEnd,
                     src: shape.getSrc(),
                     width: shape.getWidth() * scale,
                     height: shape.getHeight() * scale
@@ -14513,6 +14590,7 @@
                 const cloud = {
                     id: shape.id(),
                     position: wcsStart,
+                    position2: wcsEnd,
                     width: Math.abs(screenStart.x - screenEnd.x),
                     height: Math.abs(screenStart.y - screenEnd.y),
                     line_width: shape.getLineWidth(),
@@ -14617,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();
@@ -14676,10 +14754,12 @@
             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(),
@@ -14713,7 +14793,7 @@
             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();
@@ -14721,6 +14801,7 @@
             this.removeImageInput();
             const konvaImage = new KonvaImage({
                 position: position,
+                position2: position2,
                 src: src,
                 width: width,
                 height: height,
@@ -17575,7 +17656,7 @@
     // 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:
      *