@inweb/viewer-visualize 26.5.1 → 26.5.3

package/dist/viewer-visualize.js

@@ -17086,7 +17086,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;
@@ -17119,6 +17119,10 @@
                 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); else params.radius.x = params.radius.y;
             } else {
@@ -17128,8 +17132,8 @@
                 };
             }
             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",
@@ -17565,13 +17569,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() {};
@@ -17790,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,
@@ -17802,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";
@@ -17878,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);
                 }