@inweb/markup 26.5.2 → 26.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "26.5.2",
+  "version": "26.5.3",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~26.5.2",
-    "@inweb/viewer-core": "~26.5.2"
+    "@inweb/eventemitter2": "~26.5.3",
+    "@inweb/viewer-core": "~26.5.3"
   },
   "devDependencies": {
     "konva": "^9.3.18"

package/src/markup/Konva/KonvaCloud.ts

@@ -65,7 +65,10 @@ export class KonvaCloud implements IMarkupCloud {
       }
     }
 
-    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,
@@ -78,57 +81,77 @@ export class KonvaCloud implements IMarkupCloud {
       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();
 
-            pX += dx / arcCount;
-            pY += dy / arcCount;
+        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;
+            }
           }
+
+          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);
+        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);
+        }
       },
     });
 
@@ -148,11 +171,8 @@ export class KonvaCloud implements IMarkupCloud {
       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);