canvu-react 0.4.55 → 0.4.56

package/dist/react.d.cts

@@ -4,16 +4,16 @@ import { I as IndexedDbImageStore } from './asset-hydration-F6aM5C7x.cjs';
 export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-F6aM5C7x.cjs';
 import { V as VectorViewportAssetKind, a as VectorViewportAssetStore } from './asset-store-35ysK28r.cjs';
 export { b as VectorViewportAssetHydrationRequest, c as VectorViewportAssetResolveRequest, d as VectorViewportAssetResolveResult, e as VectorViewportAssetUploadRequest, f as VectorViewportAssetUploadResult } from './asset-store-35ysK28r.cjs';
-import { B as BoardComponentPosition, V as VectorToolDefinition, C as CustomShapePlacementOptions, a as CanvasPlugin, b as VectorSelectionInspector } from './types-uzeExFkd.cjs';
-export { c as CanvasPluginComponentProps, d as CanvasPluginContribution, e as CanvasPluginItemsChangeMiddlewareContext, f as CanvasPluginRenderContext, g as CanvuChromeActiveToolStyle, h as CanvuChromeContext, i as CanvuChromeContextValue, j as CanvuChromeSelectionStyleChange, k as CanvuPluginContext, l as CanvuPluginContextValue, m as CanvuPluginViewportSnapshot, P as PlacementPreview, S as SelectModeItemClickDetail, n as SelectModeItemClickResult, o as VectorCanvasSpacePosition, p as VectorSelectionInspectorProps, q as VectorViewport, r as VectorViewportHandle, s as VectorViewportProps, W as WorldPointerDownDetail, t as createCanvuPlugin, u as getBoardPositionStyle, v as useCanvuChromeContext, w as useCanvuDocumentContext, x as useCanvuPluginContext, y as useCanvuPluginContribution, z as useCanvuResolvedTools, A as useCanvuViewportContext } from './types-uzeExFkd.cjs';
+import { B as BoardComponentPosition, V as VectorToolDefinition, C as CustomShapePlacementOptions, a as CanvasPlugin, b as VectorSelectionInspector } from './types-BFZpRGyr.cjs';
+export { c as CanvasPluginComponentProps, d as CanvasPluginContribution, e as CanvasPluginItemsChangeMiddlewareContext, f as CanvasPluginRenderContext, g as CanvuChromeActiveToolStyle, h as CanvuChromeContext, i as CanvuChromeContextValue, j as CanvuChromeSelectionStyleChange, k as CanvuPluginContext, l as CanvuPluginContextValue, m as CanvuPluginViewportSnapshot, P as PlacementPreview, S as SelectModeItemClickDetail, n as SelectModeItemClickResult, o as VectorCanvasSpacePosition, p as VectorSelectionInspectorProps, q as VectorViewport, r as VectorViewportHandle, s as VectorViewportProps, W as WorldPointerDownDetail, t as createCanvuPlugin, u as getBoardPositionStyle, v as useCanvuChromeContext, w as useCanvuDocumentContext, x as useCanvuPluginContext, y as useCanvuPluginContribution, z as useCanvuResolvedTools, A as useCanvuViewportContext } from './types-BFZpRGyr.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';
-import { C as Camera2D } from './shape-builders-BmLS8CNh.cjs';
+import { C as Camera2D } from './shape-builders-DzhCOuzo.cjs';
 import { V as VectorCanvasPersistenceAdapter, a as VectorCanvasRemoteAdapter } from './types-6HszqSa5.cjs';
 export { b as VectorCanvasSnapshot } from './types-6HszqSa5.cjs';
 import './link-item-BMV3VUCr.cjs';
-import './types-BOQLWyCw.cjs';
+import './types-DqsqQQVf.cjs';
 
 /**
  * Extra context for each item created by {@link ingestAssetFilesToSceneItems}.

package/dist/react.d.ts

@@ -4,16 +4,16 @@ import { I as IndexedDbImageStore } from './asset-hydration-BSjiek7Q.js';
 export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-BSjiek7Q.js';
 import { V as VectorViewportAssetKind, a as VectorViewportAssetStore } from './asset-store-D_FjW_CN.js';
 export { b as VectorViewportAssetHydrationRequest, c as VectorViewportAssetResolveRequest, d as VectorViewportAssetResolveResult, e as VectorViewportAssetUploadRequest, f as VectorViewportAssetUploadResult } from './asset-store-D_FjW_CN.js';
-import { B as BoardComponentPosition, V as VectorToolDefinition, C as CustomShapePlacementOptions, a as CanvasPlugin, b as VectorSelectionInspector } from './types-BAEHaIYO.js';
-export { c as CanvasPluginComponentProps, d as CanvasPluginContribution, e as CanvasPluginItemsChangeMiddlewareContext, f as CanvasPluginRenderContext, g as CanvuChromeActiveToolStyle, h as CanvuChromeContext, i as CanvuChromeContextValue, j as CanvuChromeSelectionStyleChange, k as CanvuPluginContext, l as CanvuPluginContextValue, m as CanvuPluginViewportSnapshot, P as PlacementPreview, S as SelectModeItemClickDetail, n as SelectModeItemClickResult, o as VectorCanvasSpacePosition, p as VectorSelectionInspectorProps, q as VectorViewport, r as VectorViewportHandle, s as VectorViewportProps, W as WorldPointerDownDetail, t as createCanvuPlugin, u as getBoardPositionStyle, v as useCanvuChromeContext, w as useCanvuDocumentContext, x as useCanvuPluginContext, y as useCanvuPluginContribution, z as useCanvuResolvedTools, A as useCanvuViewportContext } from './types-BAEHaIYO.js';
+import { B as BoardComponentPosition, V as VectorToolDefinition, C as CustomShapePlacementOptions, a as CanvasPlugin, b as VectorSelectionInspector } from './types-D2zesNI8.js';
+export { c as CanvasPluginComponentProps, d as CanvasPluginContribution, e as CanvasPluginItemsChangeMiddlewareContext, f as CanvasPluginRenderContext, g as CanvuChromeActiveToolStyle, h as CanvuChromeContext, i as CanvuChromeContextValue, j as CanvuChromeSelectionStyleChange, k as CanvuPluginContext, l as CanvuPluginContextValue, m as CanvuPluginViewportSnapshot, P as PlacementPreview, S as SelectModeItemClickDetail, n as SelectModeItemClickResult, o as VectorCanvasSpacePosition, p as VectorSelectionInspectorProps, q as VectorViewport, r as VectorViewportHandle, s as VectorViewportProps, W as WorldPointerDownDetail, t as createCanvuPlugin, u as getBoardPositionStyle, v as useCanvuChromeContext, w as useCanvuDocumentContext, x as useCanvuPluginContext, y as useCanvuPluginContribution, z as useCanvuResolvedTools, A as useCanvuViewportContext } from './types-D2zesNI8.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';
-import { C as Camera2D } from './shape-builders-BCOAG0pS.js';
+import { C as Camera2D } from './shape-builders-xG3A66sv.js';
 import { V as VectorCanvasPersistenceAdapter, a as VectorCanvasRemoteAdapter } from './types-BtWbGOqh.js';
 export { b as VectorCanvasSnapshot } from './types-BtWbGOqh.js';
 import './link-item-COoNNvCu.js';
-import './types-BMMPUak7.js';
+import './types-BXa2CIrc.js';
 
 /**
  * Extra context for each item created by {@link ingestAssetFilesToSceneItems}.

package/dist/react.js

@@ -446,198 +446,6 @@ function svgNumber(value) {
   const rounded = Math.round(value * 100) / 100;
   return Number.isInteger(rounded) ? String(rounded) : String(rounded);
 }
-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)} />`;
 }
@@ -646,67 +454,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(" ");
 }
@@ -1186,7 +969,7 @@ function createImageFromVectorTrace(id, bounds, imageVectorInnerSvg, imageVector
     childrenSvg
   };
 }
-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 DEFAULT_STROKE_STYLE, TOOL_FREEHAND_DEFAULTS, ARCHITECTURAL_CLOUD_RADIUS;
 var init_shape_builders = __esm({
   "src/scene/shape-builders.ts"() {
     init_rect();
@@ -1204,11 +987,6 @@ var init_shape_builders = __esm({
       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;
   }
 });