@inweb/markup 26.5.2 → 26.5.4

package/dist/markup.module.js

@@ -1345,7 +1345,10 @@ class KonvaCloud {
                 };
             }
         }
-        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,
@@ -1357,63 +1360,76 @@ class KonvaCloud {
             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(),
+                    x: 0 + width,
                     y: 0
                 }, {
-                    x: 0 + this._ref.width(),
-                    y: 0 + this._ref.height()
+                    x: 0 + width,
+                    y: 0 + height
                 }, {
                     x: 0,
-                    y: 0 + this._ref.height()
+                    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();
+                    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();
+                    context.fillStrokeShape(shape);
                 }
-                context.closePath();
-                context.fillStrokeShape(shape);
             }
         });
         this._ref.className = "Cloud";
@@ -1433,10 +1449,8 @@ class KonvaCloud {
             if (scaleByX) newWidth *= attrs.scaleX;
             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);
             }