@inweb/markup 26.5.1 → 26.5.3

package/dist/markup.js

@@ -12573,7 +12573,7 @@
 	///////////////////////////////////////////////////////////////////////////////
 	class KonvaEllipse {
 	    constructor(params, ref = null, worldTransformer = new WorldTransform()) {
-	        var _a, _b;
+	        var _a, _b, _c;
 	        this._worldTransformer = worldTransformer;
 	        if (ref) {
 	            this._ref = ref;
@@ -12596,6 +12596,7 @@
 	        if (!params.position)
 	            params.position = { x: 0, y: 0 };
 	        if (params.position2) {
+	            (_a = params.radius) !== null && _a !== undefined ? _a : (params.radius = { x: 0, y: 0 });
 	            params.radius.x = getDistanceIn2D(params.position, params.position2);
 	            if (params.position3)
 	                params.radius.y = getDistanceIn2D(params.position, params.position3);
@@ -12607,8 +12608,8 @@
 	                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,
+	            stroke: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
+	            strokeWidth: (_c = params.lineWidth) !== null && _c !== undefined ? _c : 4,
 	            globalCompositeOperation: "source-over",
 	            lineCap: "round",
 	            lineJoin: "round",
@@ -12992,13 +12993,13 @@
 	                        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);
 	                }
 	            }
+	            const wcsEnd = this._worldTransformer.screenToWorld({
+	                x: params.position.x + this._ref.width(),
+	                y: params.position.y + this._ref.height(),
+	            });
+	            this._ref.setAttr("wcsEnd", wcsEnd);
 	        };
 	        this._canvasImage.onerror = () => {
 	            this._canvasImage.onerror = function () { };
@@ -13194,7 +13195,10 @@
 	                params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
 	            }
 	        }
-	        const ARC_RADIUS = 16;
+	        const ARC_RADIUS = 8;
+	        const ARC_LENGTH = 15;
+	        const MIN_CLOUD_WIDTH = 50;
+	        const MIN_CLOUD_HEIGHT = 50;
 	        this._ref = new Konva.Shape({
 	            x: params.position.x,
 	            y: params.position.y,
@@ -13206,51 +13210,71 @@
 	            strokeScaleEnabled: false,
 	            globalCompositeOperation: "source-over",
 	            sceneFunc: (context, shape) => {
-	                function calculateMidpoint(position, width, height) {
-	                    const midX = position.x + width / 2;
-	                    const midY = position.y + height / 2;
-	                    return { x: midX, y: midY };
-	                }
+	                const width = this._ref.width();
+	                const height = this._ref.height();
 	                const points = [
 	                    { x: 0, y: 0 },
-	                    { x: 0 + this._ref.width(), y: 0 },
-	                    { x: 0 + this._ref.width(), y: 0 + this._ref.height() },
-	                    { x: 0, y: 0 + this._ref.height() },
+	                    { x: 0 + width, y: 0 },
+	                    { x: 0 + width, y: 0 + height },
+	                    { x: 0, y: 0 + height },
 	                    { x: 0, y: 0 },
 	                ];
-	                const midPoint = calculateMidpoint({ x: 0, y: 0 }, this._ref.width(), this._ref.height());
-	                const baseArcLength = 30;
-	                context.beginPath();
-	                for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
-	                    let approxArcLength = baseArcLength;
-	                    const dx = points[iPoint + 1].x - points[iPoint].x;
-	                    const dy = points[iPoint + 1].y - points[iPoint].y;
-	                    const length = Math.sqrt(dx * dx + dy * dy);
-	                    const arcCount = Math.floor(length / approxArcLength);
-	                    const lengthMod = length % approxArcLength;
-	                    approxArcLength = baseArcLength + arcCount / lengthMod;
-	                    let pX = points[iPoint].x + dx / arcCount / 2;
-	                    let pY = points[iPoint].y + dy / arcCount / 2;
-	                    const pEndX = points[iPoint + 1].x;
-	                    const pEndY = points[iPoint + 1].y;
-	                    const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
-	                    const startAngle = endAngle + Math.PI;
-	                    const counterClockwise = pX > midPoint.x && pY > midPoint.y;
-	                    for (let iArc = 0; iArc < arcCount; iArc++) {
-	                        if (counterClockwise) {
-	                            context.arc(pX, pY, ARC_RADIUS, endAngle, startAngle);
-	                        }
-	                        else {
-	                            context.arc(pX, pY, ARC_RADIUS, startAngle, endAngle);
+	                if (width >= MIN_CLOUD_WIDTH - 1 || height >= MIN_CLOUD_HEIGHT - 1)
+	                    drawCloud(ARC_RADIUS, ARC_LENGTH);
+	                else if (width >= MIN_CLOUD_WIDTH / 2 || height >= MIN_CLOUD_HEIGHT / 2)
+	                    drawCloud(ARC_RADIUS / 2, ARC_LENGTH / 2);
+	                else
+	                    drawRectangle();
+	                function calculateMidpoint(position) {
+	                    const midX = position.x + width / 2;
+	                    const midY = position.y + height / 2;
+	                    return { x: midX, y: midY };
+	                }
+	                function drawCloud(arcRadius, arcLength) {
+	                    const midPoint = calculateMidpoint({ x: 0, y: 0 });
+	                    context.beginPath();
+	                    for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
+	                        let approxArcLength = arcLength;
+	                        const dx = points[iPoint + 1].x - points[iPoint].x;
+	                        const dy = points[iPoint + 1].y - points[iPoint].y;
+	                        const length = Math.sqrt(dx * dx + dy * dy);
+	                        const arcCount = Math.floor(length / approxArcLength);
+	                        const lengthMod = length % approxArcLength;
+	                        approxArcLength = arcLength + arcCount / lengthMod;
+	                        let pX = points[iPoint].x + dx / arcCount / 2;
+	                        let pY = points[iPoint].y + dy / arcCount / 2;
+	                        const pEndX = points[iPoint + 1].x;
+	                        const pEndY = points[iPoint + 1].y;
+	                        const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
+	                        const startAngle = endAngle + Math.PI;
+	                        const counterClockwise = pX > midPoint.x && pY > midPoint.y;
+	                        for (let iArc = 0; iArc < arcCount; iArc++) {
+	                            if (counterClockwise) {
+	                                context.arc(pX, pY, arcRadius, endAngle, startAngle);
+	                            }
+	                            else {
+	                                context.arc(pX, pY, arcRadius, startAngle, endAngle);
+	                            }
+	                            pX += dx / arcCount;
+	                            pY += dy / arcCount;
 	                        }
-	                        pX += dx / arcCount;
-	                        pY += dy / arcCount;
 	                    }
+	                    context.closePath();
+	                    // (!) Konva specific method, it is very important
+	                    // it will apply are required styles
+	                    context.fillStrokeShape(shape);
+	                }
+	                function drawRectangle() {
+	                    context.beginPath();
+	                    context.lineTo(points[1].x, points[1].y);
+	                    context.lineTo(points[2].x, points[2].y);
+	                    context.lineTo(points[3].x, points[3].y);
+	                    context.lineTo(points[4].x, points[4].y);
+	                    context.closePath();
+	                    // (!) Konva specific method, it is very important
+	                    // it will apply are required styles
+	                    context.fillStrokeShape(shape);
 	                }
-	                context.closePath();
-	                // (!) Konva specific method, it is very important
-	                // it will apply are required styles
-	                context.fillStrokeShape(shape);
 	            },
 	        });
 	        this._ref.className = "Cloud";
@@ -13266,12 +13290,10 @@
 	            let newHeight = this._ref.height();
 	            if (scaleByY)
 	                newHeight *= attrs.scaleY;
-	            const minWidth = 100;
-	            const minHeight = 100;
-	            if (newWidth < minWidth)
-	                newWidth = minWidth;
-	            if (newHeight < minHeight)
-	                newHeight = minHeight;
+	            if (newWidth < MIN_CLOUD_WIDTH)
+	                newWidth = MIN_CLOUD_WIDTH;
+	            if (newHeight < MIN_CLOUD_HEIGHT)
+	                newHeight = MIN_CLOUD_HEIGHT;
 	            if (scaleByX) {
 	                this._ref.width(newWidth);
 	            }