canvu-react 0.3.33 → 0.3.35

package/dist/tldraw.js

@@ -222,153 +222,203 @@ function svgNumber(value) {
   const rounded = Math.round(value * 100) / 100;
   return Number.isInteger(rounded) ? String(rounded) : String(rounded);
 }
-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)
+var ARCHITECTURAL_CLOUD_RADIUS = 38;
+var ARCHITECTURAL_CLOUD_TARGET_SPACING = 50;
+var ARCHITECTURAL_CLOUD_FLAT_RADIUS_RATIO = 0.38;
+var ARCHITECTURAL_CLOUD_ROUNDED_RADIUS = 72;
+var ARCHITECTURAL_CLOUD_ROUNDED_MIN_RADIUS = 44;
+var ARCHITECTURAL_CLOUD_ROUNDED_TARGET_SPACING = 98;
+function architecturalCloudCenterCount(edgeLength, radius) {
+  const targetSpacing = Math.min(
+    ARCHITECTURAL_CLOUD_TARGET_SPACING,
+    Math.max(1, radius * 1.3)
   );
-  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 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 {
-    left,
-    top,
-    right,
-    bottom,
-    radius: normalizedRadius,
-    centerX,
-    topHalfLength,
-    horizontalLength,
-    verticalLength,
-    arcLength,
-    perimeter: horizontalLength * 2 + verticalLength * 2 + Math.PI * 2 * normalizedRadius
+    length,
+    pointAt: (t) => [start[0] + dx * t, start[1] + dy * t]
   };
 }
-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;
+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
+    )
   };
-  let t = consume(metrics.topHalfLength);
-  if (t != null) {
-    return pointOnLine(
-      metrics.centerX,
-      metrics.top,
-      metrics.right - metrics.radius,
-      metrics.top,
-      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;
   }
-  t = consume(metrics.arcLength);
-  if (t != null) {
-    return pointOnArc(
-      metrics.right - metrics.radius,
-      metrics.top + metrics.radius,
-      metrics.radius,
+  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 [
+    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,
-      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
+    ),
+    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,
-      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
+      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)}`
     );
   }
-  return [metrics.centerX, metrics.top];
+  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)} />`;
@@ -382,39 +432,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 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(
-    outerWidth * 0.12,
-    outerHeight * 0.12,
-    Math.max(5, Math.min(14, Math.min(w, h) * 0.07))
+  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 radius = Math.min(
-    outerWidth / 2,
-    outerHeight / 2,
-    Math.max(amplitude * 2.5, outerHeight * 0.43)
+  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 outer = roundedRectMetrics(w, h, inset, radius);
-  const inner = roundedRectMetrics(
-    w,
-    h,
-    inset + amplitude,
-    Math.max(0, radius - amplitude)
+  const verticalCenters = distributeRange(
+    topCenterY,
+    bottomCenterY,
+    architecturalCloudCenterCount(Math.max(0, bottomCenterY - topCenterY), radiusY)
   );
-  const scallopCount = architecturalCloudScallopCount(outer.perimeter, amplitude);
-  const [startX, startY] = pointOnRoundedRectPath(inner, 0);
+  if (horizontalCenters.length > 3 && verticalCenters.length > 3) {
+    const roundedArcCloudPath = buildRoundedArcCloudPathD(
+      cloudWidth,
+      cloudHeight,
+      center
+    );
+    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 (let index = 0; index < scallopCount; index += 1) {
-    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);
+  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(" ");
 }