canvu-react 0.3.31 → 0.3.33

package/dist/tldraw.js

@@ -222,17 +222,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)} />`;
 }
@@ -246,33 +383,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 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 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 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)}`
     );