@inweb/markup 26.4.1 → 26.5.0

package/dist/markup.module.js

@@ -443,8 +443,8 @@ class KonvaRectangle {
             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 = {
@@ -568,6 +568,12 @@ class KonvaRectangle {
             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;
@@ -625,6 +631,10 @@ class KonvaRectangle {
     }
 }
 
+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;
@@ -659,10 +669,15 @@ class KonvaEllipse {
             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,
@@ -1055,12 +1070,23 @@ class KonvaImage {
             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 = {};
@@ -1069,6 +1095,10 @@ class KonvaImage {
             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);
@@ -1086,6 +1116,11 @@ class KonvaImage {
                         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);
                 }
             }
         };
@@ -1143,6 +1178,10 @@ class KonvaImage {
                 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();
@@ -1151,6 +1190,10 @@ class KonvaImage {
                 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());
     }
@@ -1166,6 +1209,12 @@ class KonvaImage {
     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();
@@ -1173,6 +1222,12 @@ class KonvaImage {
     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;
@@ -1214,16 +1269,26 @@ class KonvaImage {
             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));
     }
 }
 
@@ -1259,8 +1324,8 @@ class KonvaCloud {
             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 = {
@@ -1459,6 +1524,12 @@ class KonvaCloud {
             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();
@@ -1717,11 +1788,14 @@ class KonvaMarkup {
         }));
         (_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);
@@ -1730,11 +1804,13 @@ class KonvaMarkup {
         }));
         (_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) {
@@ -1869,7 +1945,7 @@ class KonvaMarkup {
                         this.addEllipse({
                             x: startX,
                             y: startY
-                        }, {
+                        }, null, null, {
                             x: dX / 2,
                             y: dY / 2
                         });
@@ -1933,7 +2009,7 @@ class KonvaMarkup {
                 } else lastObj = this.addEllipse({
                     x: startX,
                     y: startY
-                }, {
+                }, null, null, {
                     x: dX,
                     y: dY
                 });
@@ -1960,7 +2036,7 @@ class KonvaMarkup {
                     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);
                     }
@@ -1981,7 +2057,7 @@ class KonvaMarkup {
             }
             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
                     });
@@ -2083,6 +2159,7 @@ class KonvaMarkup {
             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(),
@@ -2096,12 +2173,16 @@ class KonvaMarkup {
         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
@@ -2133,12 +2214,14 @@ class KonvaMarkup {
         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
@@ -2158,6 +2241,7 @@ class KonvaMarkup {
             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(),
@@ -2262,7 +2346,7 @@ class KonvaMarkup {
                 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();
@@ -2321,10 +2405,12 @@ class KonvaMarkup {
         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(),
@@ -2358,7 +2444,7 @@ class KonvaMarkup {
         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();
@@ -2366,6 +2452,7 @@ class KonvaMarkup {
         this.removeImageInput();
         const konvaImage = new KonvaImage({
             position: position,
+            position2: position2,
             src: src,
             width: width,
             height: height,