Merge branch 'main' into feat/nodes-html-attributes

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';
@@ -197,6 +198,34 @@
       store.moveSelectedNodes(arrowKeyDiffs[event.key], event.shiftKey ? 4 : 1);
     }
   }
+
+  const onFocus = () => {
+    if (
+      store.disableKeyboardA11y ||
+      !store.autoPanOnNodeFocus ||
+      !nodeRef?.matches(':focus-visible')
+    ) {
+      return;
+    }
+
+    const { width, height, viewport } = store;
+
+    const withinViewport =
+      getNodesInside(
+        new Map([[id, node]]),
+        { x: 0, y: 0, width, height },
+        [viewport.x, viewport.y, viewport.zoom],
+        true
+      ).length > 0;
+
+    if (!withinViewport) {
+      store.setCenter(
+        node.position.x + (node.measured.width ?? 0) / 2,
+        node.position.y + (node.measured.height ?? 0) / 2,
+        { zoom: viewport.zoom }
+      );
+    }
+  };
 </script>
 
 {#if !hidden}
@@ -252,6 +281,7 @@
       ? (event) => onnodecontextmenu({ node: userNode, event })
       : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
+    onfocus={focusable ? onFocus : undefined}
     tabIndex={focusable ? 0 : undefined}
     role={node.ariaRole ?? (focusable ? 'group' : undefined)}
     aria-roledescription="node"

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

@@ -84,6 +84,7 @@
     elevateNodesOnSelect,
     elevateEdgesOnSelect,
     nodesDraggable,
+    autoPanOnNodeFocus,
     nodesConnectable,
     elementsSelectable,
     nodesFocusable,
@@ -100,6 +101,16 @@
   type OnlyDivAttributes<T> = {
     [K in keyof T]: K extends keyof HTMLAttributes<HTMLDivElement> ? T[K] : never;
   };
+
+  // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
+  function wrapperOnScroll(e: UIEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+    e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+
+    // Forward the event to any existing onscroll handler if needed
+    if (rest.onscroll) {
+      rest.onscroll(e);
+    }
+  }
 </script>
 
 <div
@@ -111,6 +122,7 @@
   class={['svelte-flow', 'svelte-flow__container', className, colorMode]}
   data-testid="svelte-flow__wrapper"
   role="application"
+  onscroll={wrapperOnScroll}
   {...divAttributes satisfies OnlyDivAttributes<typeof divAttributes>}
 >
   {@render children?.()}

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 true
+     */
+    autoPanOnNodeFocus?: boolean;
     /**
      * Controls if all nodes should be connectable to each other
      * @default true

packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts

@@ -366,28 +366,8 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
       return Promise.resolve(true);
     },
     getViewport: () => $state.snapshot(store.viewport),
-    setCenter: async (x, y, options) => {
-      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom;
-      const currentPanZoom = store.panZoom;
-
-      if (!currentPanZoom) {
-        return Promise.resolve(false);
-      }
-
-      await currentPanZoom.setViewport(
-        {
-          x: store.width / 2 - x * nextZoom,
-          y: store.height / 2 - y * nextZoom,
-          zoom: nextZoom
-        },
-        { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
-      );
-
-      return Promise.resolve(true);
-    },
-    fitView: (options?: FitViewOptions) => {
-      return store.fitView(options);
-    },
+    setCenter: async (x, y, options) => store.setCenter(x, y, options),
+    fitView: (options?: FitViewOptions) => store.fitView(options),
     fitBounds: async (bounds: Rect, options?: FitBoundsOptions) => {
       if (!store.panZoom) {
         return Promise.resolve(false);

packages/svelte/src/lib/store/index.ts

@@ -14,7 +14,8 @@ import {
   type ConnectionState,
   updateAbsolutePositions,
   snapPosition,
-  calculateNodePosition
+  calculateNodePosition,
+  type SetCenterOptions
 } from '@xyflow/system';
 
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -126,6 +127,26 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
     return fitViewResolver.promise;
   }
 
+  async function setCenter(x: number, y: number, options?: SetCenterOptions) {
+    const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom;
+    const currentPanZoom = store.panZoom;
+
+    if (!currentPanZoom) {
+      return Promise.resolve(false);
+    }
+
+    await currentPanZoom.setViewport(
+      {
+        x: store.width / 2 - x * nextZoom,
+        y: store.height / 2 - y * nextZoom,
+        zoom: nextZoom
+      },
+      { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
+    );
+
+    return Promise.resolve(true);
+  }
+
   function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
     const panZoom = store.panZoom;
     if (!panZoom) {
@@ -372,6 +393,7 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
     zoomIn,
     zoomOut,
     fitView,
+    setCenter,
     setMinZoom,
     setMaxZoom,
     setTranslateExtent,

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

@@ -266,6 +266,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     nodeDragThreshold: number = $derived(signals.props.nodeDragThreshold ?? 1);
     autoPanOnNodeDrag: boolean = $derived(signals.props.autoPanOnNodeDrag ?? true);
     autoPanOnConnect: boolean = $derived(signals.props.autoPanOnConnect ?? true);
+    autoPanOnNodeFocus: boolean = $derived(signals.props.autoPanOnNodeFocus ?? true);
 
     fitViewQueued: boolean = signals.props.fitView ?? false;
     fitViewOptions: FitViewOptions | undefined = signals.props.fitViewOptions;

packages/svelte/src/lib/store/types.ts

@@ -6,7 +6,8 @@ import type {
   UpdateNodePositions,
   CoordinateExtent,
   UpdateConnection,
-  Viewport
+  Viewport,
+  SetCenter
 } from '@xyflow/system';
 
 import type { getInitialStore } from './initial-store.svelte';
@@ -24,6 +25,7 @@ export type SvelteFlowStoreActions<NodeType extends Node = Node, EdgeType extend
   setTranslateExtent: (extent: CoordinateExtent) => void;
   setPaneClickDistance: (distance: number) => void;
   fitView: (options?: FitViewOptions) => Promise<boolean>;
+  setCenter: SetCenter;
   updateNodePositions: UpdateNodePositions;
   updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;
   unselectNodesAndEdges: (params?: { nodes?: NodeType[]; edges?: EdgeType[] }) => void;