@inweb/markup 26.5.1 → 26.5.3

package/dist/markup.module.js

@@ -637,7 +637,7 @@ function getDistanceIn2D(p1, p2) {
 
 class KonvaEllipse {
     constructor(params, ref = null, worldTransformer = new WorldTransform) {
-        var _a, _b;
+        var _a, _b, _c;
         this._worldTransformer = worldTransformer;
         if (ref) {
             this._ref = ref;
@@ -670,6 +670,10 @@ class KonvaEllipse {
             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 {
@@ -679,8 +683,8 @@ class KonvaEllipse {
             };
         }
         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",
@@ -1116,13 +1120,13 @@ class KonvaImage {
                         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() {};
@@ -1341,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,
@@ -1353,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";
@@ -1429,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);
             }