@inweb/viewer-visualize 26.5.2 → 26.5.3

package/dist/viewer-visualize.js

@@ -17794,7 +17794,10 @@
                     };
                 }
             }
-            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,
@@ -17806,63 +17809,76 @@
                 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";
@@ -17882,10 +17898,8 @@
                 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);
                 }