canvu-react 0.3.30 → 0.3.32

package/dist/tldraw.js

@@ -217,40 +217,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)}`
-    );
-  }
+  const rounded = Math.round(value * 100) / 100;
+  return Number.isInteger(rounded) ? String(rounded) : String(rounded);
 }
-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)}`
-    );
-  }
+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)} />`;
@@ -264,53 +253,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) {