canvu-react 0.3.32 → 0.3.34

package/dist/react.js

@@ -284,25 +284,198 @@ 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);
-  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);
+function architecturalCloudCenterCount(edgeLength, radius) {
+  const targetSpacing = Math.min(
+    ARCHITECTURAL_CLOUD_TARGET_SPACING,
+    Math.max(1, radius * 1.3)
+  );
+  return Math.max(2, Math.round(edgeLength / targetSpacing) + 1);
+}
+function distributeRange(start, end, count) {
+  if (count <= 1) return [start];
+  const step = (end - start) / (count - 1);
+  return Array.from({ length: count }, (_, index) => start + step * index);
+}
+function lineCloudPathSegment(start, end) {
+  const dx = end[0] - start[0];
+  const dy = end[1] - start[1];
+  const length = Math.hypot(dx, dy);
+  return {
+    length,
+    pointAt: (t) => [start[0] + dx * t, start[1] + dy * t]
+  };
+}
+function ellipsePoint(centerX, centerY, radiusX, radiusY, angle) {
+  return [centerX + Math.cos(angle) * radiusX, centerY + Math.sin(angle) * radiusY];
+}
+function approximateEllipseArcLength(radiusX, radiusY, startAngle, endAngle) {
+  const steps = Math.max(
+    4,
+    Math.ceil(Math.abs(endAngle - startAngle) / (Math.PI / 16))
+  );
+  let length = 0;
+  let previous = ellipsePoint(0, 0, radiusX, radiusY, startAngle);
+  for (let index = 1; index <= steps; index += 1) {
+    const angle = startAngle + (endAngle - startAngle) * index / steps;
+    const next = ellipsePoint(0, 0, radiusX, radiusY, angle);
+    length += Math.hypot(next[0] - previous[0], next[1] - previous[1]);
+    previous = next;
+  }
+  return length;
+}
+function ellipseCloudPathSegment(centerX, centerY, radiusX, radiusY, startAngle, endAngle) {
+  return {
+    length: approximateEllipseArcLength(radiusX, radiusY, startAngle, endAngle),
+    pointAt: (t) => ellipsePoint(
+      centerX,
+      centerY,
+      radiusX,
+      radiusY,
+      startAngle + (endAngle - startAngle) * t
+    )
+  };
+}
+function cloudPathPerimeter(segments) {
+  const usableSegments = segments.filter((segment) => segment.length > 1e-9);
+  return usableSegments.reduce((sum, segment) => sum + segment.length, 0);
+}
+function pointOnCloudPath(segments, distance) {
+  const perimeter = cloudPathPerimeter(segments);
+  if (perimeter <= 0) return [0, 0];
+  let remaining = (distance % perimeter + perimeter) % perimeter;
+  for (const segment of segments) {
+    if (segment.length <= 1e-9) continue;
+    if (remaining <= segment.length) {
+      const t = remaining / segment.length;
+      return segment.pointAt(t);
+    }
+    remaining -= segment.length;
+  }
+  const fallback = segments.find((segment) => segment.length > 1e-9);
+  return fallback?.pointAt(0) ?? [0, 0];
+}
+function buildRoundedCapsulePathSegments(width, height, inset) {
+  const left = inset;
+  const top = inset;
+  const right = width - inset;
+  const bottom = height - inset;
+  const capsuleWidth = Math.max(0, right - left);
+  const capsuleHeight = Math.max(0, bottom - top);
+  const radius = Math.min(capsuleWidth, capsuleHeight) / 2;
+  if (radius <= 0) return [];
+  const leftCenterX = left + radius;
+  const rightCenterX = right - radius;
+  const topCenterY = top + radius;
+  const bottomCenterY = bottom - radius;
   return [
-    centerX + Math.sign(cosTheta) * radiusX * Math.abs(cosTheta) ** (2 / exponent),
-    centerY + Math.sign(sinTheta) * radiusY * Math.abs(sinTheta) ** (2 / exponent)
+    lineCloudPathSegment([leftCenterX, top], [rightCenterX, top]),
+    ellipseCloudPathSegment(
+      rightCenterX,
+      topCenterY,
+      radius,
+      radius,
+      -Math.PI / 2,
+      0
+    ),
+    lineCloudPathSegment([right, topCenterY], [right, bottomCenterY]),
+    ellipseCloudPathSegment(
+      rightCenterX,
+      bottomCenterY,
+      radius,
+      radius,
+      0,
+      Math.PI / 2
+    ),
+    lineCloudPathSegment([rightCenterX, bottom], [leftCenterX, bottom]),
+    ellipseCloudPathSegment(
+      leftCenterX,
+      bottomCenterY,
+      radius,
+      radius,
+      Math.PI / 2,
+      Math.PI
+    ),
+    lineCloudPathSegment([left, bottomCenterY], [left, topCenterY]),
+    ellipseCloudPathSegment(
+      leftCenterX,
+      topCenterY,
+      radius,
+      radius,
+      Math.PI,
+      Math.PI * 1.5
+    )
   ];
 }
+function buildRoundedArcCloudPathD(cloudWidth, cloudHeight, center) {
+  const minDimension = Math.min(cloudWidth, cloudHeight);
+  const radius = Math.min(
+    ARCHITECTURAL_CLOUD_ROUNDED_RADIUS,
+    Math.max(ARCHITECTURAL_CLOUD_ROUNDED_MIN_RADIUS, minDimension * 0.16)
+  );
+  const centerPath = buildRoundedCapsulePathSegments(
+    cloudWidth,
+    cloudHeight,
+    radius
+  );
+  const centerPerimeter = cloudPathPerimeter(centerPath);
+  if (centerPerimeter <= 0) return "";
+  const lobeCount = Math.max(
+    8,
+    Math.round(centerPerimeter / ARCHITECTURAL_CLOUD_ROUNDED_TARGET_SPACING)
+  );
+  const centers = Array.from(
+    { length: lobeCount },
+    (_, index) => pointOnCloudPath(centerPath, centerPerimeter * index / lobeCount)
+  );
+  const points = centers.map((point, index) => {
+    const previous = centers[(index - 1 + centers.length) % centers.length] ?? point;
+    return cloudCircleIntersection(previous, point, radius, center);
+  });
+  const [startX, startY] = points[0] ?? [0, 0];
+  const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
+  for (const [endX, endY] of points.slice(1)) {
+    segments.push(
+      `A ${svgNumber(radius)} ${svgNumber(radius)} 0 0 1 ${svgNumber(endX)} ${svgNumber(endY)}`
+    );
+  }
+  segments.push(
+    `A ${svgNumber(radius)} ${svgNumber(radius)} 0 0 1 ${svgNumber(startX)} ${svgNumber(startY)}`
+  );
+  segments.push("Z");
+  return segments.join(" ");
+}
+function cloudCircleIntersection(a, b, radius, center) {
+  const midX = (a[0] + b[0]) / 2;
+  const midY = (a[1] + b[1]) / 2;
+  const dx = b[0] - a[0];
+  const dy = b[1] - a[1];
+  const distance = Math.hypot(dx, dy);
+  if (distance <= 1e-9) return [midX, midY];
+  const halfDistance = distance / 2;
+  const offset = Math.sqrt(
+    Math.max(0, radius * radius - halfDistance * halfDistance)
+  );
+  const normalX = -dy / distance;
+  const normalY = dx / distance;
+  const first = [midX + normalX * offset, midY + normalY * offset];
+  const second = [
+    midX - normalX * offset,
+    midY - normalY * offset
+  ];
+  const firstDistance = (first[0] - center[0]) * (first[0] - center[0]) + (first[1] - center[1]) * (first[1] - center[1]);
+  const secondDistance = (second[0] - center[0]) * (second[0] - center[0]) + (second[1] - center[1]) * (second[1] - center[1]);
+  return firstDistance >= secondDistance ? first : second;
+}
+function cloudEllipseIntersection(a, b, radiusX, radiusY, center) {
+  const scaleY = radiusX / radiusY;
+  const [x, y] = cloudCircleIntersection(
+    [a[0], a[1] * scaleY],
+    [b[0], b[1] * scaleY],
+    radiusX,
+    [center[0], center[1] * scaleY]
+  );
+  return [x, y / scaleY];
+}
 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)} />`;
 }
@@ -315,40 +488,63 @@ 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.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 padding = Math.max(0, strokeWidth * 2);
+  const cloudWidth = Math.max(0, w - padding);
+  const cloudHeight = Math.max(0, h - padding);
+  if (cloudWidth <= 0 || cloudHeight <= 0) return "";
+  const radiusX = Math.min(
+    ARCHITECTURAL_CLOUD_RADIUS,
+    cloudWidth * ARCHITECTURAL_CLOUD_FLAT_RADIUS_RATIO
   );
-  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 radiusY = Math.min(
+    ARCHITECTURAL_CLOUD_RADIUS,
+    cloudHeight * ARCHITECTURAL_CLOUD_FLAT_RADIUS_RATIO
+  );
+  if (radiusX <= 0 || radiusY <= 0) return "";
+  const center = [cloudWidth / 2, cloudHeight / 2];
+  const leftCenterX = radiusX;
+  const rightCenterX = cloudWidth - radiusX;
+  const topCenterY = radiusY;
+  const bottomCenterY = cloudHeight - radiusY;
+  const horizontalCenters = distributeRange(
+    leftCenterX,
+    rightCenterX,
+    architecturalCloudCenterCount(Math.max(0, rightCenterX - leftCenterX), radiusX)
+  );
+  const verticalCenters = distributeRange(
+    topCenterY,
+    bottomCenterY,
+    architecturalCloudCenterCount(Math.max(0, bottomCenterY - topCenterY), radiusY)
+  );
+  if (horizontalCenters.length > 3 && verticalCenters.length > 3) {
+    const roundedArcCloudPath = buildRoundedArcCloudPathD(
+      cloudWidth,
+      cloudHeight,
+      center
     );
-    const [endX, endY] = pointOnArchitecturalCloud(segmentEnd, innerRx, innerRy);
+    if (roundedArcCloudPath !== "") return roundedArcCloudPath;
+  }
+  const rectangularCenters = [
+    ...horizontalCenters.map((x) => [x, topCenterY]),
+    ...verticalCenters.slice(1).map((y) => [rightCenterX, y]),
+    ...horizontalCenters.slice(0, -1).reverse().map((x) => [x, bottomCenterY]),
+    ...verticalCenters.slice(1, -1).reverse().map((y) => [leftCenterX, y])
+  ];
+  const centers = rectangularCenters;
+  const points = centers.map((point, index) => {
+    const previous = centers[(index - 1 + centers.length) % centers.length] ?? point;
+    return cloudEllipseIntersection(previous, point, radiusX, radiusY, center);
+  });
+  const [startX, startY] = points[0] ?? [0, 0];
+  const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
+  for (const [endX, endY] of points.slice(1)) {
     segments.push(
-      `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
+      `A ${svgNumber(radiusX)} ${svgNumber(radiusY)} 0 0 1 ${svgNumber(endX)} ${svgNumber(endY)}`
     );
   }
+  segments.push(
+    `A ${svgNumber(radiusX)} ${svgNumber(radiusY)} 0 0 1 ${svgNumber(startX)} ${svgNumber(startY)}`
+  );
   segments.push("Z");
   return segments.join(" ");
 }
@@ -786,7 +982,7 @@ function createImageFromVectorTrace(id, bounds, imageVectorInnerSvg, imageVector
     childrenSvg
   };
 }
-var DEFAULT_STROKE_STYLE, TOOL_FREEHAND_DEFAULTS;
+var DEFAULT_STROKE_STYLE, TOOL_FREEHAND_DEFAULTS, ARCHITECTURAL_CLOUD_RADIUS, ARCHITECTURAL_CLOUD_TARGET_SPACING, ARCHITECTURAL_CLOUD_FLAT_RADIUS_RATIO, ARCHITECTURAL_CLOUD_ROUNDED_RADIUS, ARCHITECTURAL_CLOUD_ROUNDED_MIN_RADIUS, ARCHITECTURAL_CLOUD_ROUNDED_TARGET_SPACING;
 var init_shape_builders = __esm({
   "src/scene/shape-builders.ts"() {
     init_rect();
@@ -802,6 +998,12 @@ var init_shape_builders = __esm({
       brush: { strokeWidth: 10 },
       marker: { stroke: "#fde047", strokeWidth: 16, strokeOpacity: 0.5 }
     };
+    ARCHITECTURAL_CLOUD_RADIUS = 38;
+    ARCHITECTURAL_CLOUD_TARGET_SPACING = 50;
+    ARCHITECTURAL_CLOUD_FLAT_RADIUS_RATIO = 0.38;
+    ARCHITECTURAL_CLOUD_ROUNDED_RADIUS = 72;
+    ARCHITECTURAL_CLOUD_ROUNDED_MIN_RADIUS = 44;
+    ARCHITECTURAL_CLOUD_ROUNDED_TARGET_SPACING = 98;
   }
 });
 
@@ -3106,7 +3308,7 @@ function ShapeContextMenu({
   }
   return 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 architecturalCloudIconPath = "M1.5 12 A 4.94 5.23 0 0 1 9.07 6 A 4.94 5.23 0 0 1 14.93 6 A 4.94 5.23 0 0 1 22.5 12 A 4.94 5.23 0 0 1 14.93 18 A 4.94 5.23 0 0 1 9.07 18 A 4.94 5.23 0 0 1 1.5 12 Z";
 var base = {
   width: 20,
   height: 20,
@@ -3138,7 +3340,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(1 5)" }) });
+  return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: architecturalCloudIconPath }) });
 }
 function IconLine(props) {
   return /* @__PURE__ */ jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });