canvu-react 0.3.31 → 0.3.32

package/dist/index.cjs

@@ -1061,6 +1061,14 @@ function architecturalCloudScallopCount(rx, ry, amplitude) {
   if (count % 2 === 1) count += 1;
   return count;
 }
+function pointOnSuperellipse(centerX, centerY, radiusX, radiusY, theta, exponent) {
+  const cosTheta = Math.cos(theta);
+  const sinTheta = Math.sin(theta);
+  return [
+    centerX + Math.sign(cosTheta) * radiusX * Math.abs(cosTheta) ** (2 / exponent),
+    centerY + Math.sign(sinTheta) * radiusY * Math.abs(sinTheta) ** (2 / exponent)
+  ];
+}
 function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
 }
@@ -1077,10 +1085,11 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
   const outerRx = Math.max(0, w / 2 - inset);
   const outerRy = Math.max(0, h / 2 - inset);
   if (outerRx <= 0 || outerRy <= 0) return "";
+  const baseExponent = 3.6;
   const amplitude = Math.min(
     outerRx * 0.45,
     outerRy * 0.45,
-    Math.max(2, Math.min(8, Math.min(w, h) * 0.04))
+    Math.max(2, Math.min(7, Math.min(w, h) * 0.035))
   );
   const innerRx = Math.max(0, outerRx - amplitude);
   const innerRy = Math.max(0, outerRy - amplitude);
@@ -1089,18 +1098,19 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
   const cx = w / 2;
   const cy = h / 2;
   const startAngle = -Math.PI / 2;
-  const pointOnEllipse = (theta, radiusX, radiusY) => [
-    cx + Math.cos(theta) * radiusX,
-    cy + Math.sin(theta) * radiusY
-  ];
-  const [startX, startY] = pointOnEllipse(startAngle, innerRx, innerRy);
+  const pointOnArchitecturalCloud = (theta, radiusX, radiusY) => pointOnSuperellipse(cx, cy, radiusX, radiusY, theta, baseExponent);
+  const [startX, startY] = pointOnArchitecturalCloud(startAngle, innerRx, innerRy);
   const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
   for (let index = 0; index < scallopCount; index += 1) {
     const segmentStart = startAngle + index * angleStep;
     const segmentMid = segmentStart + angleStep / 2;
     const segmentEnd = segmentStart + angleStep;
-    const [controlX, controlY] = pointOnEllipse(segmentMid, outerRx, outerRy);
-    const [endX, endY] = pointOnEllipse(segmentEnd, innerRx, innerRy);
+    const [controlX, controlY] = pointOnArchitecturalCloud(
+      segmentMid,
+      outerRx,
+      outerRy
+    );
+    const [endX, endY] = pointOnArchitecturalCloud(segmentEnd, innerRx, innerRy);
     segments.push(
       `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
     );