canvu-react 0.3.30 → 0.3.32

package/dist/react.cjs

@@ -286,40 +286,29 @@ function resolveStrokeStyle(item) {
 function strokeOpacityAttr(style) {
   return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
 }
-function clampNumber(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
 function svgNumber(value) {
   if (!Number.isFinite(value)) return "0";
-  return Number(value.toFixed(3)).toString();
-}
-function architecturalCloudScallopCount(length, depth) {
-  if (length <= 1e-6) return 0;
-  return Math.max(1, Math.round(length / Math.max(depth * 2.05, 8)));
-}
-function appendHorizontalScallops(segments, startX, endX, y, controlY, count) {
-  if (count <= 0) return;
-  const step = (endX - startX) / count;
-  for (let index = 1; index <= count; index += 1) {
-    const x0 = startX + step * (index - 1);
-    const x1 = index === count ? endX : startX + step * index;
-    const cx = (x0 + x1) / 2;
-    segments.push(
-      `Q${svgNumber(cx)} ${svgNumber(controlY)} ${svgNumber(x1)} ${svgNumber(y)}`
-    );
-  }
-}
-function appendVerticalScallops(segments, startY, endY, x, controlX, count) {
-  if (count <= 0) return;
-  const step = (endY - startY) / count;
-  for (let index = 1; index <= count; index += 1) {
-    const y0 = startY + step * (index - 1);
-    const y1 = index === count ? endY : startY + step * index;
-    const cy = (y0 + y1) / 2;
-    segments.push(
-      `Q${svgNumber(controlX)} ${svgNumber(cy)} ${svgNumber(x)} ${svgNumber(y1)}`
-    );
-  }
+  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);
+  let count = Math.max(12, Math.round(perimeter / targetScallopLength));
+  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)} />`;
@@ -333,53 +322,41 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
   const w = Math.max(0, width);
   const h = Math.max(0, height);
   if (w <= 0 || h <= 0) return "";
-  const inset = Math.min(w / 2, h / 2, Math.max(0.5, strokeWidth / 2));
-  const x0 = inset;
-  const y0 = inset;
-  const x1 = Math.max(x0, w - inset);
-  const y1 = Math.max(y0, h - inset);
-  const innerW = Math.max(0, x1 - x0);
-  const innerH = Math.max(0, y1 - y0);
-  if (innerW <= 0 || innerH <= 0) return "";
-  const maxDepth = Math.max(0.5, Math.min(innerW, innerH) * 0.18);
-  const depth = clampNumber(Math.min(w, h) * 0.08, 2, Math.min(12, maxDepth));
-  const corner = Math.min(depth * 1.2, innerW / 2, innerH / 2);
-  const topStart = x0 + corner;
-  const topEnd = x1 - corner;
-  const rightStart = y0 + corner;
-  const rightEnd = y1 - corner;
-  const bottomStart = x1 - corner;
-  const bottomEnd = x0 + corner;
-  const leftStart = y1 - corner;
-  const leftEnd = y0 + corner;
-  const topCount = architecturalCloudScallopCount(topEnd - topStart, depth);
-  const rightCount = architecturalCloudScallopCount(rightEnd - rightStart, depth);
-  const bottomCount = architecturalCloudScallopCount(bottomStart - bottomEnd, depth);
-  const leftCount = architecturalCloudScallopCount(leftStart - leftEnd, depth);
-  const segments = [`M${svgNumber(topStart)} ${svgNumber(y0)}`];
-  appendHorizontalScallops(segments, topStart, topEnd, y0, y0 + depth, topCount);
-  segments.push(
-    `Q${svgNumber(x1)} ${svgNumber(y0)} ${svgNumber(x1)} ${svgNumber(rightStart)}`
-  );
-  appendVerticalScallops(segments, rightStart, rightEnd, x1, x1 - depth, rightCount);
-  segments.push(
-    `Q${svgNumber(x1)} ${svgNumber(y1)} ${svgNumber(bottomStart)} ${svgNumber(y1)}`
-  );
-  appendHorizontalScallops(
-    segments,
-    bottomStart,
-    bottomEnd,
-    y1,
-    y1 - depth,
-    bottomCount
-  );
-  segments.push(
-    `Q${svgNumber(x0)} ${svgNumber(y1)} ${svgNumber(x0)} ${svgNumber(leftStart)}`
-  );
-  appendVerticalScallops(segments, leftStart, leftEnd, x0, x0 + depth, leftCount);
-  segments.push(
-    `Q${svgNumber(x0)} ${svgNumber(y0)} ${svgNumber(topStart)} ${svgNumber(y0)} Z`
+  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 baseExponent = 3.6;
+  const amplitude = Math.min(
+    outerRx * 0.45,
+    outerRy * 0.45,
+    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);
+  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 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] = pointOnArchitecturalCloud(
+      segmentMid,
+      outerRx,
+      outerRy
+    );
+    const [endX, endY] = pointOnArchitecturalCloud(segmentEnd, innerRx, innerRy);
+    segments.push(
+      `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
+    );
+  }
+  segments.push("Z");
   return segments.join(" ");
 }
 function buildArchitecturalCloudSvg(width, height, style = DEFAULT_STROKE_STYLE) {
@@ -3136,6 +3113,7 @@ function ShapeContextMenu({
   }
   return reactDom.createPortal(menu, document.body);
 }
+var architecturalCloudIconPath = "M11 3 Q15.72 1.11 16.44 3.31 Q19.25 2.05 18.39 4.28 Q20.81 4.17 19 7 Q20.81 9.83 18.39 9.72 Q19.25 11.95 16.44 10.69 Q15.72 12.89 11 11 Q6.28 12.89 5.56 10.69 Q2.75 11.95 3.61 9.72 Q1.19 9.83 3 7 Q1.19 4.17 3.61 4.28 Q2.75 2.05 5.56 3.31 Q6.28 1.11 11 3 Z";
 var base = {
   width: 20,
   height: 20,
@@ -3167,7 +3145,7 @@ function IconEllipse(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
 }
 function IconArchitecturalCloud(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 7.5Q4.4 7.5 4.4 9.4Q3 9.9 3 11.6Q3 13.5 5.2 13.5Q5.8 16 8.3 15.2Q9.2 17.2 11.3 15.7Q12.8 17 14.3 15.5Q16.5 16.4 17 14Q20.7 13.7 20.2 10.9Q21 8.5 18 8.3Q17.2 5.9 14.8 6.7Q13.2 5.2 11.5 6.5Q9.1 5.1 7.8 7.2Q7.2 7.2 6.5 7.5Z" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: architecturalCloudIconPath, transform: "translate(1 5)" }) });
 }
 function IconLine(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });