canvu-react 0.4.72 → 0.4.74

package/dist/react.d.cts

@@ -205,6 +205,10 @@ type ImagesMenuCollapsedButtonRenderProps = {
      */
     buttonProps: ImagesMenuCollapsedButtonProps;
 };
+/**
+ * Built-in action ids available in each row of {@link ImagesMenu}.
+ */
+type ImagesMenuActionId = "duplicate" | "rotate" | "delete";
 type ImagesMenuProps = {
     items: readonly VectorSceneItem[];
     onItemsChange: (items: VectorSceneItem[]) => void;
@@ -214,6 +218,22 @@ type ImagesMenuProps = {
      */
     onFocusItem?: (item: VectorSceneItem) => void;
     labels?: ImagesMenuLabels;
+    /**
+     * Built-in row actions to omit from the managed images menu UI.
+     *
+     * Use this when an app needs to keep the managed image behavior available in
+     * code while preventing specific actions from being shown to users.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   hiddenActions={["duplicate"]}
+     * />
+     * ```
+     */
+    hiddenActions?: readonly ImagesMenuActionId[];
     /**
      * Whether the menu starts expanded. Defaults to `false` (collapsed), showing
      * only the floating toggle button until the user opens it.
@@ -269,7 +289,7 @@ type ImagesMenuProps = {
  * drag-to-reorder actions. Managed images are also `locked`, so they do not
  * respond to direct canvas interaction.
  */
-declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, hiddenActions, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 type NavMenuMinimapProps = {
     className?: string;
@@ -825,4 +845,4 @@ type VectorToolbarWithStatics = ((props: VectorToolbarProps) => ReactElement) &
  */
 declare const VectorToolbar: VectorToolbarWithStatics;
 
-export { BoardComponentPosition, CanvasPlugin, CanvuAfterInteractionHook, CanvuBeforeInteractionHook, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };
+export { BoardComponentPosition, CanvasPlugin, CanvuAfterInteractionHook, CanvuBeforeInteractionHook, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuActionId, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };

package/dist/react.d.ts

@@ -205,6 +205,10 @@ type ImagesMenuCollapsedButtonRenderProps = {
      */
     buttonProps: ImagesMenuCollapsedButtonProps;
 };
+/**
+ * Built-in action ids available in each row of {@link ImagesMenu}.
+ */
+type ImagesMenuActionId = "duplicate" | "rotate" | "delete";
 type ImagesMenuProps = {
     items: readonly VectorSceneItem[];
     onItemsChange: (items: VectorSceneItem[]) => void;
@@ -214,6 +218,22 @@ type ImagesMenuProps = {
      */
     onFocusItem?: (item: VectorSceneItem) => void;
     labels?: ImagesMenuLabels;
+    /**
+     * Built-in row actions to omit from the managed images menu UI.
+     *
+     * Use this when an app needs to keep the managed image behavior available in
+     * code while preventing specific actions from being shown to users.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   hiddenActions={["duplicate"]}
+     * />
+     * ```
+     */
+    hiddenActions?: readonly ImagesMenuActionId[];
     /**
      * Whether the menu starts expanded. Defaults to `false` (collapsed), showing
      * only the floating toggle button until the user opens it.
@@ -269,7 +289,7 @@ type ImagesMenuProps = {
  * drag-to-reorder actions. Managed images are also `locked`, so they do not
  * respond to direct canvas interaction.
  */
-declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, hiddenActions, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 type NavMenuMinimapProps = {
     className?: string;
@@ -825,4 +845,4 @@ type VectorToolbarWithStatics = ((props: VectorToolbarProps) => ReactElement) &
  */
 declare const VectorToolbar: VectorToolbarWithStatics;
 
-export { BoardComponentPosition, CanvasPlugin, CanvuAfterInteractionHook, CanvuBeforeInteractionHook, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };
+export { BoardComponentPosition, CanvasPlugin, CanvuAfterInteractionHook, CanvuBeforeInteractionHook, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuActionId, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };

package/dist/react.js

@@ -2253,6 +2253,7 @@ function ImagesMenu({
   onItemsChange,
   onFocusItem,
   labels,
+  hiddenActions,
   defaultOpen = false,
   collapsedButtonClassName,
   collapsedButtonStyle,
@@ -2268,6 +2269,10 @@ function ImagesMenu({
   useEffect(() => {
     ensureOpenKeyframe();
   }, []);
+  const hiddenActionSet = useMemo(
+    () => new Set(hiddenActions ?? []),
+    [hiddenActions]
+  );
   if (managed.length === 0) {
     return null;
   }
@@ -2342,6 +2347,7 @@ function ImagesMenu({
               {
                 item,
                 labels: resolvedLabels,
+                hiddenActionSet,
                 onFocus: onFocusItem ? () => onFocusItem(item) : void 0,
                 onCopy: () => onItemsChange(copyManagedImage(items, item.id)),
                 onRotate: () => onItemsChange(rotateManagedImage(items, item.id)),
@@ -2358,6 +2364,7 @@ function ImagesMenu({
 function ImagesMenuRow({
   item,
   labels,
+  hiddenActionSet,
   onFocus,
   onCopy,
   onRotate,
@@ -2397,9 +2404,9 @@ function ImagesMenuRow({
     ),
     /* @__PURE__ */ jsx(FocusTarget, { label: labels.focus, onFocus, children: /* @__PURE__ */ jsx("div", { style: thumbBoxStyle, children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", style: thumbImgStyle, draggable: false }) : null }) }),
     /* @__PURE__ */ jsxs("div", { style: actionsColumnStyle, children: [
-      /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.duplicate, onClick: onCopy, children: /* @__PURE__ */ jsx(CopyPlus, { size: 18 }) }),
-      /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.rotate, onClick: onRotate, children: /* @__PURE__ */ jsx(RotateCw, { size: 18 }) }),
-      /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.delete, onClick: onDelete, danger: true, children: /* @__PURE__ */ jsx(Trash2, { size: 18 }) })
+      !hiddenActionSet.has("duplicate") ? /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.duplicate, onClick: onCopy, children: /* @__PURE__ */ jsx(CopyPlus, { size: 18 }) }) : null,
+      !hiddenActionSet.has("rotate") ? /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.rotate, onClick: onRotate, children: /* @__PURE__ */ jsx(RotateCw, { size: 18 }) }) : null,
+      !hiddenActionSet.has("delete") ? /* @__PURE__ */ jsx(ImagesMenuAction, { label: labels.delete, onClick: onDelete, danger: true, children: /* @__PURE__ */ jsx(Trash2, { size: 18 }) }) : null
     ] })
   ] });
 }
@@ -8547,6 +8554,11 @@ function shallowEqualStringArray(a, b) {
 
 // src/react/stroke-input.ts
 var MAX_INTERPOLATED_POINTS_PER_SAMPLE = 192;
+var MIN_CURVED_INTERPOLATION_DOT = -0.15;
+var MAX_STRAIGHT_INTERPOLATION_DOT = 0.985;
+var CURVED_INTERPOLATION_TENSION = 0.22;
+var MAX_CURVED_CONTROL_DISTANCE_RATIO = 0.5;
+var MIN_POINT_DISTANCE_SQUARED = 1e-12;
 function getPointerEventSamples(event) {
   if (typeof event.getCoalescedEvents !== "function") {
     return [event];
@@ -8561,6 +8573,62 @@ var resolveInterpolatedPressure = (lastPoint, nextPoint, ratio) => {
   return ratio === 1 ? nextPoint.pressure : void 0;
 };
 var resolveMaxStepWorld = (maxStepWorld) => Number.isFinite(maxStepWorld) && maxStepWorld > 0 ? maxStepWorld : Number.POSITIVE_INFINITY;
+var squaredDistance = (firstPoint, secondPoint) => {
+  const deltaX = secondPoint.x - firstPoint.x;
+  const deltaY = secondPoint.y - firstPoint.y;
+  return deltaX * deltaX + deltaY * deltaY;
+};
+var resolvePreviousDistinctPoint = (points, lastPoint) => {
+  for (let index = points.length - 2; index >= 0; index--) {
+    const candidatePoint = points[index];
+    if (candidatePoint && squaredDistance(candidatePoint, lastPoint) > MIN_POINT_DISTANCE_SQUARED) {
+      return candidatePoint;
+    }
+  }
+  return void 0;
+};
+var shouldUseCurvedInterpolation = (previousPoint, lastPoint, nextPoint) => {
+  if (!previousPoint) return false;
+  const incomingX = lastPoint.x - previousPoint.x;
+  const incomingY = lastPoint.y - previousPoint.y;
+  const outgoingX = nextPoint.x - lastPoint.x;
+  const outgoingY = nextPoint.y - lastPoint.y;
+  const incomingLengthSquared = incomingX * incomingX + incomingY * incomingY;
+  const outgoingLengthSquared = outgoingX * outgoingX + outgoingY * outgoingY;
+  if (incomingLengthSquared <= MIN_POINT_DISTANCE_SQUARED || outgoingLengthSquared <= MIN_POINT_DISTANCE_SQUARED) {
+    return false;
+  }
+  const directionDot = (incomingX * outgoingX + incomingY * outgoingY) / Math.sqrt(incomingLengthSquared * outgoingLengthSquared);
+  return directionDot >= MIN_CURVED_INTERPOLATION_DOT && directionDot <= MAX_STRAIGHT_INTERPOLATION_DOT;
+};
+var resolveCurvedControlPoint = (previousPoint, lastPoint, nextPoint, distance) => {
+  const tangentX = nextPoint.x - previousPoint.x;
+  const tangentY = nextPoint.y - previousPoint.y;
+  const tangentLength = Math.sqrt(tangentX * tangentX + tangentY * tangentY);
+  if (tangentLength <= MIN_POINT_DISTANCE_SQUARED) return void 0;
+  const controlDistance = Math.min(
+    distance * MAX_CURVED_CONTROL_DISTANCE_RATIO,
+    tangentLength * CURVED_INTERPOLATION_TENSION
+  );
+  const scale = controlDistance / tangentLength;
+  return {
+    x: lastPoint.x + tangentX * scale,
+    y: lastPoint.y + tangentY * scale
+  };
+};
+var resolveInterpolatedPosition = (lastPoint, nextPoint, controlPoint, ratio) => {
+  if (!controlPoint) {
+    return {
+      x: lastPoint.x + (nextPoint.x - lastPoint.x) * ratio,
+      y: lastPoint.y + (nextPoint.y - lastPoint.y) * ratio
+    };
+  }
+  const inverseRatio = 1 - ratio;
+  return {
+    x: inverseRatio * inverseRatio * lastPoint.x + 2 * inverseRatio * ratio * controlPoint.x + ratio * ratio * nextPoint.x,
+    y: inverseRatio * inverseRatio * lastPoint.y + 2 * inverseRatio * ratio * controlPoint.y + ratio * ratio * nextPoint.y
+  };
+};
 function appendInterpolatedStrokePoint(points, nextPoint, maxStepWorld) {
   if (points.length === 0) return [nextPoint];
   const lastPoint = points[points.length - 1];
@@ -8568,19 +8636,31 @@ function appendInterpolatedStrokePoint(points, nextPoint, maxStepWorld) {
   const deltaX = nextPoint.x - lastPoint.x;
   const deltaY = nextPoint.y - lastPoint.y;
   const distanceSquared = deltaX * deltaX + deltaY * deltaY;
-  if (distanceSquared < 1e-12) return points;
+  if (distanceSquared < MIN_POINT_DISTANCE_SQUARED) return points;
   const distance = Math.sqrt(distanceSquared);
   const stepCount = Math.min(
     MAX_INTERPOLATED_POINTS_PER_SAMPLE,
     Math.max(1, Math.ceil(distance / resolveMaxStepWorld(maxStepWorld)))
   );
   if (stepCount === 1) return [...points, nextPoint];
+  const previousPoint = resolvePreviousDistinctPoint(points, lastPoint);
+  const controlPoint = shouldUseCurvedInterpolation(
+    previousPoint,
+    lastPoint,
+    nextPoint
+  ) ? resolveCurvedControlPoint(previousPoint, lastPoint, nextPoint, distance) : void 0;
   const interpolatedPoints = Array.from({ length: stepCount }, (_, index) => {
     const ratio = (index + 1) / stepCount;
     const pressure = resolveInterpolatedPressure(lastPoint, nextPoint, ratio);
+    const position = resolveInterpolatedPosition(
+      lastPoint,
+      nextPoint,
+      controlPoint,
+      ratio
+    );
     return {
-      x: lastPoint.x + deltaX * ratio,
-      y: lastPoint.y + deltaY * ratio,
+      x: position.x,
+      y: position.y,
       ...pressure != null ? { pressure } : {}
     };
   });