@inweb/markup 26.5.2 → 26.5.3

package/dist/markup.js

@@ -13195,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,
@@ -13207,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";
@@ -13267,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);
 	            }