@inweb/markup 26.4.1 → 26.5.0

package/dist/markup.js

@@ -12395,8 +12395,8 @@
 	        if (!params.position)
 	            params.position = { x: 0, 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) {
@@ -12488,6 +12488,9 @@
 	    setPosition(x, y) {
 	        this._ref.setPosition({ x, y });
 	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, 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;
@@ -12542,6 +12545,10 @@
 	    }
 	}
 
+	function getDistanceIn2D(p1, p2) {
+	    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+	}
+
 	///////////////////////////////////////////////////////////////////////////////
 	// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
 	// All rights reserved.
@@ -12588,8 +12595,17 @@
 	            params = {};
 	        if (!params.position)
 	            params.position = { 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,
@@ -12931,9 +12947,14 @@
 	                    ? 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)
@@ -12942,6 +12963,10 @@
 	            params.position = { x: 0, 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);
@@ -12967,6 +12992,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);
 	                }
 	            }
 	        };
@@ -13020,11 +13050,13 @@
 	            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());
 	    }
@@ -13040,6 +13072,9 @@
 	    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();
@@ -13047,6 +13082,9 @@
 	    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;
@@ -13082,13 +13120,20 @@
 	    setPosition(x, y) {
 	        this._ref.setPosition({ x, y });
 	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, 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));
 	    }
 	}
 
@@ -13136,8 +13181,8 @@
 	        if (!params.position)
 	            params.position = { x: 0, 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) {
@@ -13300,6 +13345,9 @@
 	    setPosition(x, y) {
 	        this._ref.position({ x, y });
 	        this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, 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();
@@ -13569,11 +13617,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);
@@ -13582,11 +13633,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) {
@@ -13737,7 +13790,7 @@
 	                        this.addRectangle({ x: startX, y: startY }, null, dX, dY);
 	                    }
 	                    else if (this._markupMode === "Ellipse") {
-	                        this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+	                        this.addEllipse({ x: startX, y: startY }, null, null, { x: dX / 2, y: dY / 2 });
 	                    }
 	                    else if (this._markupMode === "Arrow") {
 	                        this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y });
@@ -13789,7 +13842,7 @@
 	                    lastObj.setRadiusY(dY);
 	                }
 	                else
-	                    lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+	                    lastObj = this.addEllipse({ x: startX, y: startY }, null, null, { x: dX, y: dY });
 	            }
 	            else if (this._markupMode === "Cloud") {
 	                if (lastObj) {
@@ -13817,7 +13870,7 @@
 	                }
 	                else if (this._markupMode === "Image") {
 	                    if (this._imageInputRef && this._imageInputRef.value)
-	                        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
+	                        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
 	                    else if (transformer.nodes().length === 0) {
 	                        const pos = this.getRelativePointerPosition(stage);
 	                        this.createImageInput(pos);
@@ -13841,7 +13894,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);
+	                        this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0);
 	                    else
 	                        this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
 	                    return;
@@ -13959,6 +14012,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(),
@@ -13972,12 +14026,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,
@@ -14010,12 +14068,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,
@@ -14035,6 +14095,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(),
@@ -14137,7 +14198,7 @@
 	            this._imageInputRef.onchange = async (event) => {
 	                const file = event.target.files[0];
 	                const base64 = await convertBase64(file);
-	                this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+	                this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, base64.toString(), 0, 0);
 	            };
 	            this._imageInputRef.oncancel = (event) => {
 	                this.removeImageInput();
@@ -14198,11 +14259,13 @@
 	        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,
+	            position2,
+	            position3,
 	            radius,
 	            lineWidth,
 	            color: color || this._markupColor.asHex(),
@@ -14238,7 +14301,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;
@@ -14248,6 +14311,7 @@
 	        this.removeImageInput();
 	        const konvaImage = new KonvaImage({
 	            position,
+	            position2,
 	            src,
 	            width,
 	            height,