feat: create enablePanOnFocus prop, update onFocus func

examples/react/src/examples/A11y/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useState } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -10,13 +10,9 @@ import {
   Edge,
   OnNodeDrag,
   AriaLabelConfig,
+  Panel,
 } from '@xyflow/react';
 
-const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-const onNodeDragStart = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
-const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-
 const initialNodes: Node[] = [
   {
     id: '1',
@@ -41,9 +37,16 @@ const initialNodes: Node[] = [
     id: '4',
     data: { label: 'Node 4' },
     position: { x: 300, y: 100 },
-    className: 'light',
+  },
-    ariaRoleDescription: 'custom node role',
+  {
-    ariaRole: 'button',
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 400, y: 200 },
+  },
+  {
+    id: '6',
+    data: { label: 'Node 6' },
+    position: { x: -1000, y: 200 },
   },
 ];
 
@@ -51,6 +54,8 @@ const initialEdges: Edge[] = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e1-4', source: '1', target: '4' },
+  { id: 'e1-5', source: '4', target: '5' },
+  { id: 'e1-6', source: '3', target: '6' },
 ];
 
 const ariaLabelConfig: Partial<AriaLabelConfig> = {
@@ -68,19 +73,14 @@ const ariaLabelConfig: Partial<AriaLabelConfig> = {
 };
 
 const A11y = () => {
+  const [isFocusPannable, setEnablePanOnFocus] = useState(true);
   return (
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
-      onNodesChange={console.log}
-      onNodeClick={onNodeClick}
-      onNodeDragStop={onNodeDragStop}
-      onNodeDragStart={onNodeDragStart}
-      onNodeDrag={onNodeDrag}
-      className="react-flow-basic-example"
       minZoom={2}
       maxZoom={4}
-      // fitView
+      enablePanOnFocus={isFocusPannable}
       selectNodesOnDrag={false}
       elevateEdgesOnSelect
       elevateNodesOnSelect={false}
@@ -90,6 +90,20 @@ const A11y = () => {
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
       <Controls />
+      <Panel position="top-right">
+        <div>
+          <label htmlFor="focusPannable">
+            <input
+              id="focusPannable"
+              type="checkbox"
+              checked={isFocusPannable}
+              onChange={(event) => setEnablePanOnFocus(event.target.checked)}
+              className="xy-theme__checkbox"
+            />
+            enablePanOnFocus
+          </label>
+        </div>
+      </Panel>
     </ReactFlow>
   );
 };

examples/svelte/src/routes/examples/a11y/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { SvelteFlow, Controls, Background, MiniMap } from '@xyflow/svelte';
+	import { SvelteFlow, Controls, Background, MiniMap, Panel } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -10,7 +10,7 @@
 			data: { label: 'A' }
 		},
 		{ id: 'B', position: { x: -100, y: 150 }, data: { label: 'B' } },
-		{ id: 'C', position: { x: 100, y: 150 }, data: { label: 'C' } },
+		{ id: 'C', position: { x: 1000, y: 150 }, data: { label: 'C' } },
 		{ id: 'D', position: { x: 0, y: 260 }, data: { label: 'D' } }
 	]);
 
@@ -19,16 +19,12 @@
 		{ id: 'A-C', source: 'A', target: 'C' },
 		{ id: 'A-D', source: 'A', target: 'D' }
 	]);
-</script>
+	let isFocusPannable = $state(true);
-
+	const ariaLabelConfig = $state(
-<SvelteFlow
+		{
-	bind:nodes
-	bind:edges
-	fitView
-	ariaLabelConfig={{
 		'node.a11yDescription.default': 'Svelte Custom Node Desc.',
 		'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
-		'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
+		'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) =>
 			`Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
 		'edge.a11yDescription.default': 'Svelte Custom Edge Desc.',
 		'controls.ariaLabel': 'Svelte Custom Control Aria Label',
@@ -37,9 +33,30 @@
 		// 'controls.fitView.ariaLabel': 'Svelte Custom Fit View',
 		'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity',
 		'minimap.ariaLabel': 'Svelte Custom Minimap'
-	}}
+	}
+	);
+</script>
+
+<SvelteFlow
+	bind:nodes
+	bind:edges
+	enablePanOnFocus={isFocusPannable}
+	ariaLabelConfig={ariaLabelConfig}
 >
 	<Controls />
 	<Background />
 	<MiniMap />
+	  <Panel class="panel top-right">
+		<div>
+			<label for="focusPannable">
+				Enable Pan on Focus
+				<input
+					id="focusPannable"
+					type="checkbox"
+					bind:checked={isFocusPannable}
+					class="svelte-flow__zoomonscroll"
+				/>
+			</label>
+		</div>
+  </Panel>
 </SvelteFlow>

packages/react/src/components/NodeWrapper/index.tsx

@@ -7,6 +7,7 @@ import {
   getNodeDimensions,
   isInputDOMNode,
   nodeHasDimensions,
+  getNodesInside,
 } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -29,6 +30,7 @@ export function NodeWrapper<NodeType extends Node>({
   onContextMenu,
   onDoubleClick,
   nodesDraggable,
+  enablePanOnFocus,
   elementsSelectable,
   nodesConnectable,
   nodesFocusable,
@@ -163,28 +165,26 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   const onFocus = () => {
-    if (disableKeyboardA11y) {
+    if (disableKeyboardA11y || !enablePanOnFocus) {
       return;
     }
 
-    // Return early if focus is not from keyboard navigation (i.e., was clicked)
     if (!nodeRef.current?.matches(':focus-visible')) {
       return;
     }
-    const { x, y, zoom } = getViewport();
 
-    const isNodeVisible =
+    const { transform, width, height } = store.getState();
-      node.position.x >= x &&
+    const visibleNodes = getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, transform, true);
-      node.position.x <= x + window.innerWidth &&
+
-      node.position.y >= y &&
+    const isNodeVisible = visibleNodes.length > 0;
-      node.position.y <= y + window.innerHeight;
 
     if (!isNodeVisible) {
+      const zoomLevel = transform[2];
       fitView({
         nodes: [{ id }],
         duration: 100,
-        minZoom: zoom,
+        minZoom: zoomLevel,
-        maxZoom: zoom,
+        maxZoom: zoomLevel,
       });
     }
   };

packages/react/src/components/StoreUpdater/index.tsx

@@ -23,6 +23,7 @@ const reactFlowFieldsToTrack = [
   'onClickConnectStart',
   'onClickConnectEnd',
   'nodesDraggable',
+  'enablePanOnFocus',
   'nodesConnectable',
   'nodesFocusable',
   'edgesFocusable',

packages/react/src/container/NodeRenderer/index.tsx

@@ -29,6 +29,7 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
+  enablePanOnFocus: s.enablePanOnFocus,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
@@ -36,7 +37,10 @@ const selector = (s: ReactFlowState) => ({
 });
 
 function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, enablePanOnFocus, onError } = useStore(
+    selector,
+    shallow
+  );
   const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
   const resizeObserver = useResizeObserver();
 
@@ -86,6 +90,7 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
             disableKeyboardA11y={props.disableKeyboardA11y}
             resizeObserver={resizeObserver}
             nodesDraggable={nodesDraggable}
+            enablePanOnFocus={enablePanOnFocus}
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             elementsSelectable={elementsSelectable}

packages/react/src/container/ReactFlow/index.tsx

@@ -77,6 +77,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     onlyRenderVisibleElements = false,
     selectNodesOnDrag,
     nodesDraggable,
+    enablePanOnFocus,
     nodesConnectable,
     nodesFocusable,
     nodeOrigin = defaultNodeOrigin,
@@ -261,6 +262,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onClickConnectStart={onClickConnectStart}
           onClickConnectEnd={onClickConnectEnd}
           nodesDraggable={nodesDraggable}
+          enablePanOnFocus={enablePanOnFocus}
           nodesConnectable={nodesConnectable}
           nodesFocusable={nodesFocusable}
           edgesFocusable={edgesFocusable}

packages/react/src/store/initialState.ts

@@ -112,6 +112,7 @@ const getInitialState = ({
     snapToGrid: false,
 
     nodesDraggable: true,
+    enablePanOnFocus: false,
     nodesConnectable: true,
     nodesFocusable: true,
     edgesFocusable: true,

packages/react/src/types/component-props.ts

@@ -383,6 +383,11 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default true
    */
   nodesDraggable?: boolean;
+  /**
+   * When `true`, the viewport will pan when a node is focused.
+   * @default false
+   */
+  enablePanOnFocus?: boolean;
   /**
    * Controls whether all nodes should be connectable or not. Individual nodes can override this
    * setting by setting their `connectable` prop.

packages/react/src/types/nodes.ts

@@ -48,6 +48,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodesConnectable: boolean;
   elementsSelectable: boolean;
   nodesDraggable: boolean;
+  enablePanOnFocus: boolean;
   nodesFocusable: boolean;
   onClick?: NodeMouseHandler<NodeType>;
   onDoubleClick?: NodeMouseHandler<NodeType>;

packages/react/src/types/store.ts

@@ -88,6 +88,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   snapGrid: SnapGrid;
 
   nodesDraggable: boolean;
+  enablePanOnFocus: boolean;
   nodesConnectable: boolean;
   nodesFocusable: boolean;
   edgesFocusable: boolean;

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -5,7 +5,8 @@
     errorMessages,
     isInputDOMNode,
     nodeHasDimensions,
-    Position
+    Position,
+    getNodesInside,
   } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
@@ -198,26 +199,37 @@
     }
   }
 
-  function onFocus() {
+  const onFocus = () => {
-    if (store.disableKeyboardA11y) {
+    console.log('before', store.enablePanOnFocus);
+    if (store.disableKeyboardA11y || !store.enablePanOnFocus) {
+      console.log("should return early", store.enablePanOnFocus);
       return;
     }
 
-    const zoom = store.panZoom?.getViewport().zoom ?? 1;
+    if (!nodeRef?.matches(':focus-visible')) {
+      return;
+    }
+    const width = store.width;
+    const height = store.height;
+    const viewport: [number, number, number] = [store.viewport.x, store.viewport.y, store.viewport.zoom];
+    const zoom = store.viewport.zoom;
   
-    // Get node dimensions 
+    const visibleNodes = getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, viewport, true);
-    const nodeWidth = nodeRef?.offsetWidth || 0;
-    const nodeHeight = nodeRef?.offsetHeight || 0;
 
-    store.panZoom?.setViewport(
+    const isNodeVisible = visibleNodes.length > 0;
-      {
+
-        x: -(positionX + nodeWidth / 2) * zoom + window.innerWidth / 2,
+    if (!isNodeVisible) {
-        y: -(positionY + nodeHeight / 2) * zoom + window.innerHeight / 2,
+      console.log('About to call fitView - this should NOT happen when enablePanOnFocus is false');
-        zoom: zoom,
+
-      },
+      console.log('after', store.enablePanOnFocus);
-      { duration: 100 }
+      store.fitView({
-    );
+        nodes: [{ id }],
-  }
+        duration: 100,
+        minZoom: zoom,
+        maxZoom: zoom,
+      });
+    }
+  };
 </script>
 
 {#if !hidden}

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -84,6 +84,7 @@
     elevateNodesOnSelect,
     elevateEdgesOnSelect,
     nodesDraggable,
+    enablePanOnFocus,
     nodesConnectable,
     elementsSelectable,
     nodesFocusable,

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -232,6 +232,11 @@ export type SvelteFlowProps<
      * @default true
      */
     nodesDraggable?: boolean;
+    /**
+     * When `true`, the viewport will pan when a node is focused.
+     * @default false
+     */
+    enablePanOnFocus?: boolean;
     /**
      * Controls if all nodes should be connectable to each other
      * @default true

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -247,6 +247,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     });
 
     nodesDraggable: boolean = $derived(signals.props.nodesDraggable ?? true);
+    enablePanOnFocus: boolean = $derived(signals.props.enablePanOnFocus ?? true);
     nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
     elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
     nodesFocusable: boolean = $derived(signals.props.nodesFocusable ?? true);