@particle-academy/fancy-flow 0.30.0 → 0.31.0

package/dist/index.d.cts

@@ -38,6 +38,18 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
     validateConnections?: boolean | ConnectionValidatorOptions;
     /** Show alignment guide lines while dragging, and snap to them. Default off. */
     showHelperLines?: boolean;
+    /**
+     * A bare mouse wheel over the canvas zooms it. Default **true**.
+     *
+     * Turn it off for a canvas embedded mid-page, where a reader scrolling past
+     * would otherwise get trapped zooming. With it off the wheel scrolls the page
+     * and **Shift+wheel** zooms instead.
+     *
+     * Either way, a wheel gesture that zooms never also scrolls the page — the
+     * two happening at once is the thing that makes an embedded canvas feel
+     * broken.
+     */
+    zoomOnWheel?: boolean;
     /** Optional toolbar / palette etc. rendered above the canvas. */
     toolbar?: ReactNode;
     className?: string;
@@ -52,7 +64,7 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  * (xyflow's standard pattern). The surrounding `useFlowState` hook in
  * `runtime/use-flow-state.ts` is a convenience that wires those for you.
  */
-declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
+declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, zoomOnWheel, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
 /**
  * Clone a set of nodes AND the edges internal to that set, remapping every id.

package/dist/index.d.ts

@@ -38,6 +38,18 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
     validateConnections?: boolean | ConnectionValidatorOptions;
     /** Show alignment guide lines while dragging, and snap to them. Default off. */
     showHelperLines?: boolean;
+    /**
+     * A bare mouse wheel over the canvas zooms it. Default **true**.
+     *
+     * Turn it off for a canvas embedded mid-page, where a reader scrolling past
+     * would otherwise get trapped zooming. With it off the wheel scrolls the page
+     * and **Shift+wheel** zooms instead.
+     *
+     * Either way, a wheel gesture that zooms never also scrolls the page — the
+     * two happening at once is the thing that makes an embedded canvas feel
+     * broken.
+     */
+    zoomOnWheel?: boolean;
     /** Optional toolbar / palette etc. rendered above the canvas. */
     toolbar?: ReactNode;
     className?: string;
@@ -52,7 +64,7 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  * (xyflow's standard pattern). The surrounding `useFlowState` hook in
  * `runtime/use-flow-state.ts` is a convenience that wires those for you.
  */
-declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
+declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, zoomOnWheel, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
 /**
  * Clone a set of nodes AND the edges internal to that set, remapping every id.

package/dist/index.js

@@ -357,6 +357,16 @@ function HelperLines({ horizontal, vertical }) {
     )
   ] });
 }
+function preventScrollWhileZooming(event) {
+  if (event.shiftKey) event.preventDefault();
+}
+function wheelZoomProps(zoomOnWheel) {
+  return zoomOnWheel ? { zoomActivationKeyCode: null, preventScrolling: true } : {
+    zoomActivationKeyCode: "Shift",
+    preventScrolling: false,
+    onWheelCapture: preventScrollWhileZooming
+  };
+}
 var DEFAULT_FIT_VIEW = { padding: 0.2 };
 var DEFAULT_EDGE_OPTIONS = {
   type: "smoothstep",
@@ -373,6 +383,7 @@ function FlowCanvas({
   isValidConnection,
   colorMode,
   showHelperLines = false,
+  zoomOnWheel = true,
   onNodesChange,
   toolbar,
   nodeTypes,
@@ -445,8 +456,7 @@ function FlowCanvas({
             fitViewOptions: DEFAULT_FIT_VIEW,
             defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
             proOptions: { hideAttribution: true },
-            zoomActivationKeyCode: "Shift",
-            preventScrolling: false,
+            ...wheelZoomProps(zoomOnWheel),
             isValidConnection: resolvedIsValidConnection,
             ...rest,
             children: [