canvu-react 0.4.54 → 0.4.56

package/dist/tldraw.js

@@ -374,203 +374,6 @@ function svgNumber(value) {
   return Number.isInteger(rounded) ? String(rounded) : String(rounded);
 }
 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)
-  );
-  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 [
-    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)} />`;
 }
@@ -579,67 +382,42 @@ function buildEllipseSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   const ry = height / 2;
   return `<ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
 }
-function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROKE_STYLE.strokeWidth) {
-  const w = Math.max(0, width);
-  const h = Math.max(0, height);
-  if (w <= 0 || h <= 0) return "";
+function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROKE_STYLE.strokeWidth, arcRadius = ARCHITECTURAL_CLOUD_RADIUS, bulge = 1) {
   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 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
-    );
-    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 cloudWidth = Math.max(0, width - padding);
+  const cloudHeight = Math.max(0, height - padding);
+  if (cloudWidth <= 0 || cloudHeight <= 0 || arcRadius <= 0 || bulge <= 0) return "";
+  const offset = padding / 2;
+  const corners = [
+    [offset, offset],
+    [offset + cloudWidth, offset],
+    [offset + cloudWidth, offset + cloudHeight],
+    [offset, offset + cloudHeight]
   ];
-  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 points = [];
+  for (let index = 0; index < corners.length; index += 1) {
+    const [startX2, startY2] = corners[index] ?? [0, 0];
+    const [endX, endY] = corners[(index + 1) % corners.length] ?? [0, 0];
+    const edgeLength = Math.hypot(endX - startX2, endY - startY2);
+    const arcCount = Math.max(1, Math.round(edgeLength / (2 * arcRadius)));
+    const chord = edgeLength / arcCount;
+    for (let arcIndex = 1; arcIndex <= arcCount; arcIndex += 1) {
+      const t = arcIndex / arcCount;
+      points.push([
+        startX2 + (endX - startX2) * t,
+        startY2 + (endY - startY2) * t,
+        chord
+      ]);
+    }
+  }
+  const [startX, startY] = corners[0] ?? [0, 0];
   const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
-  for (const [endX, endY] of points.slice(1)) {
+  for (const [pointX, pointY, chord] of points) {
+    const radius = chord / 2 * bulge;
     segments.push(
-      `A ${svgNumber(radiusX)} ${svgNumber(radiusY)} 0 0 1 ${svgNumber(endX)} ${svgNumber(endY)}`
+      `A ${svgNumber(radius)} ${svgNumber(radius)} 0 0 1 ${svgNumber(pointX)} ${svgNumber(pointY)}`
     );
   }
-  segments.push(
-    `A ${svgNumber(radiusX)} ${svgNumber(radiusY)} 0 0 1 ${svgNumber(startX)} ${svgNumber(startY)}`
-  );
   segments.push("Z");
   return segments.join(" ");
 }