canvu-react 0.3.31 → 0.3.33

package/dist/react.js

@@ -284,17 +284,154 @@ function svgNumber(value) {
   const rounded = Math.round(value * 100) / 100;
   return Number.isInteger(rounded) ? String(rounded) : String(rounded);
 }
-function approximateEllipsePerimeter(rx, ry) {
-  if (rx <= 0 || ry <= 0) return 0;
-  return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
-}
-function architecturalCloudScallopCount(rx, ry, amplitude) {
-  const perimeter = approximateEllipsePerimeter(rx, ry);
-  const targetScallopLength = Math.max(10, amplitude * 2);
+function architecturalCloudScallopCount(perimeter, amplitude) {
+  const targetScallopLength = Math.max(18, amplitude * 2.45);
   let count = Math.max(12, Math.round(perimeter / targetScallopLength));
   if (count % 2 === 1) count += 1;
   return count;
 }
+function roundedRectMetrics(width, height, inset, radius) {
+  const left = inset;
+  const top = inset;
+  const right = width - inset;
+  const bottom = height - inset;
+  const rectWidth = Math.max(0, right - left);
+  const rectHeight = Math.max(0, bottom - top);
+  const normalizedRadius = Math.max(
+    0,
+    Math.min(radius, rectWidth / 2, rectHeight / 2)
+  );
+  const centerX = width / 2;
+  const topHalfLength = Math.max(0, right - normalizedRadius - centerX);
+  const horizontalLength = Math.max(0, rectWidth - normalizedRadius * 2);
+  const verticalLength = Math.max(0, rectHeight - normalizedRadius * 2);
+  const arcLength = normalizedRadius * (Math.PI / 2);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    radius: normalizedRadius,
+    centerX,
+    topHalfLength,
+    horizontalLength,
+    verticalLength,
+    arcLength,
+    perimeter: horizontalLength * 2 + verticalLength * 2 + Math.PI * 2 * normalizedRadius
+  };
+}
+function pointOnLine(startX, startY, endX, endY, t) {
+  return [startX + (endX - startX) * t, startY + (endY - startY) * t];
+}
+function pointOnArc(centerX, centerY, radius, startAngle, endAngle, t) {
+  const theta = startAngle + (endAngle - startAngle) * t;
+  return [centerX + Math.cos(theta) * radius, centerY + Math.sin(theta) * radius];
+}
+function pointOnRoundedRectPath(metrics, distance) {
+  if (metrics.perimeter <= 0) return [metrics.centerX, metrics.top];
+  let remaining = (distance % metrics.perimeter + metrics.perimeter) % metrics.perimeter;
+  const consume = (length) => {
+    if (length <= 1e-9) return null;
+    if (remaining <= length) return remaining / length;
+    remaining -= length;
+    return null;
+  };
+  let t = consume(metrics.topHalfLength);
+  if (t != null) {
+    return pointOnLine(
+      metrics.centerX,
+      metrics.top,
+      metrics.right - metrics.radius,
+      metrics.top,
+      t
+    );
+  }
+  t = consume(metrics.arcLength);
+  if (t != null) {
+    return pointOnArc(
+      metrics.right - metrics.radius,
+      metrics.top + metrics.radius,
+      metrics.radius,
+      -Math.PI / 2,
+      0,
+      t
+    );
+  }
+  t = consume(metrics.verticalLength);
+  if (t != null) {
+    return pointOnLine(
+      metrics.right,
+      metrics.top + metrics.radius,
+      metrics.right,
+      metrics.bottom - metrics.radius,
+      t
+    );
+  }
+  t = consume(metrics.arcLength);
+  if (t != null) {
+    return pointOnArc(
+      metrics.right - metrics.radius,
+      metrics.bottom - metrics.radius,
+      metrics.radius,
+      0,
+      Math.PI / 2,
+      t
+    );
+  }
+  t = consume(metrics.horizontalLength);
+  if (t != null) {
+    return pointOnLine(
+      metrics.right - metrics.radius,
+      metrics.bottom,
+      metrics.left + metrics.radius,
+      metrics.bottom,
+      t
+    );
+  }
+  t = consume(metrics.arcLength);
+  if (t != null) {
+    return pointOnArc(
+      metrics.left + metrics.radius,
+      metrics.bottom - metrics.radius,
+      metrics.radius,
+      Math.PI / 2,
+      Math.PI,
+      t
+    );
+  }
+  t = consume(metrics.verticalLength);
+  if (t != null) {
+    return pointOnLine(
+      metrics.left,
+      metrics.bottom - metrics.radius,
+      metrics.left,
+      metrics.top + metrics.radius,
+      t
+    );
+  }
+  t = consume(metrics.arcLength);
+  if (t != null) {
+    return pointOnArc(
+      metrics.left + metrics.radius,
+      metrics.top + metrics.radius,
+      metrics.radius,
+      Math.PI,
+      Math.PI * 1.5,
+      t
+    );
+  }
+  t = consume(metrics.topHalfLength);
+  if (t != null) {
+    return pointOnLine(
+      metrics.left + metrics.radius,
+      metrics.top,
+      metrics.centerX,
+      metrics.top,
+      t
+    );
+  }
+  return [metrics.centerX, metrics.top];
+}
 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)} />`;
 }
@@ -308,33 +445,34 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
   const h = Math.max(0, height);
   if (w <= 0 || h <= 0) return "";
   const inset = Math.max(0.5, strokeWidth / 2);
-  const outerRx = Math.max(0, w / 2 - inset);
-  const outerRy = Math.max(0, h / 2 - inset);
-  if (outerRx <= 0 || outerRy <= 0) return "";
+  const outerWidth = Math.max(0, w - inset * 2);
+  const outerHeight = Math.max(0, h - inset * 2);
+  if (outerWidth <= 0 || outerHeight <= 0) return "";
   const amplitude = Math.min(
-    outerRx * 0.45,
-    outerRy * 0.45,
-    Math.max(2, Math.min(8, Math.min(w, h) * 0.04))
+    outerWidth * 0.12,
+    outerHeight * 0.12,
+    Math.max(5, Math.min(14, Math.min(w, h) * 0.07))
   );
-  const innerRx = Math.max(0, outerRx - amplitude);
-  const innerRy = Math.max(0, outerRy - amplitude);
-  const scallopCount = architecturalCloudScallopCount(innerRx, innerRy, amplitude);
-  const angleStep = Math.PI * 2 / scallopCount;
-  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 radius = Math.min(
+    outerWidth / 2,
+    outerHeight / 2,
+    Math.max(amplitude * 2.5, outerHeight * 0.43)
+  );
+  const outer = roundedRectMetrics(w, h, inset, radius);
+  const inner = roundedRectMetrics(
+    w,
+    h,
+    inset + amplitude,
+    Math.max(0, radius - amplitude)
+  );
+  const scallopCount = architecturalCloudScallopCount(outer.perimeter, amplitude);
+  const [startX, startY] = pointOnRoundedRectPath(inner, 0);
   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 controlDistance = (index + 0.5) / scallopCount * outer.perimeter;
+    const endDistance = (index + 1) / scallopCount * inner.perimeter;
+    const [controlX, controlY] = pointOnRoundedRectPath(outer, controlDistance);
+    const [endX, endY] = pointOnRoundedRectPath(inner, endDistance);
     segments.push(
       `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
     );
@@ -3096,7 +3234,7 @@ function ShapeContextMenu({
   }
   return createPortal(menu, document.body);
 }
-var architecturalCloudIconPath = "M12 8.28 Q14.33 7.17 15.86 8.78 Q18.36 8.46 18.69 10.14 Q20.69 10.71 19.72 12 Q20.69 13.29 18.69 13.86 Q18.36 15.54 15.86 15.22 Q14.33 16.83 12 15.72 Q9.67 16.83 8.14 15.22 Q5.64 15.54 5.31 13.86 Q3.31 13.29 4.28 12 Q3.31 10.71 5.31 10.14 Q5.64 8.46 8.14 8.78 Q9.67 7.17 12 8.28 Z";
+var architecturalCloudIconPath = "M11 2.44 Q13.3 1 14.84 2.44 Q17.84 1.4 18.41 3.47 Q20.8 4.72 19.56 7 Q20.8 9.28 18.41 10.53 Q17.84 12.6 14.84 11.56 Q13.3 13 11 11.56 Q8.7 13 7.16 11.56 Q4.16 12.6 3.59 10.53 Q1.2 9.28 2.44 7 Q1.2 4.72 3.59 3.47 Q4.16 1.4 7.16 2.44 Q8.7 1 11 2.44 Z";
 var base = {
   width: 20,
   height: 20,
@@ -3128,7 +3266,7 @@ function IconEllipse(props) {
   return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
 }
 function IconArchitecturalCloud(props) {
-  return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: architecturalCloudIconPath, transform: "translate(0 4)" }) });
+  return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: architecturalCloudIconPath, transform: "translate(1 5)" }) });
 }
 function IconLine(props) {
   return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });