From 19cd285458d7120aeb8776c1b8abb9a143d101e2 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 5 Jun 2025 19:37:14 +0200 Subject: [PATCH] chore(autoFocus): rename to autoPanOnNodeFocus --- examples/react/src/examples/A11y/index.tsx | 12 +++---- .../src/routes/examples/a11y/+page.svelte | 32 +++++++++---------- .../src/components/NodeWrapper/index.tsx | 4 +-- .../src/components/StoreUpdater/index.tsx | 2 +- .../src/container/NodeRenderer/index.tsx | 10 +++--- .../react/src/container/ReactFlow/index.tsx | 4 +-- packages/react/src/store/initialState.ts | 3 +- packages/react/src/types/component-props.ts | 2 +- packages/react/src/types/nodes.ts | 2 +- packages/react/src/types/store.ts | 2 +- .../components/NodeWrapper/NodeWrapper.svelte | 2 +- .../lib/container/SvelteFlow/Wrapper.svelte | 4 +-- .../src/lib/container/SvelteFlow/types.ts | 2 +- .../src/lib/store/initial-store.svelte.ts | 2 +- 14 files changed, 41 insertions(+), 42 deletions(-) diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx index 344a20e4..389b275c 100644 --- a/examples/react/src/examples/A11y/index.tsx +++ b/examples/react/src/examples/A11y/index.tsx @@ -8,7 +8,6 @@ import { ReactFlowProvider, Node, Edge, - OnNodeDrag, AriaLabelConfig, Panel, } from '@xyflow/react'; @@ -73,12 +72,13 @@ const ariaLabelConfig: Partial = { }; const A11y = () => { - const [isFocusPannable, setEnablePanOnFocus] = useState(true); + const [autoPanOnNodeFocus, setAutoPanOnNodeFocus] = useState(true); + return ( { setEnablePanOnFocus(event.target.checked)} + checked={autoPanOnNodeFocus} + onChange={(event) => setAutoPanOnNodeFocus(event.target.checked)} className="xy-theme__checkbox" /> - enablePanOnFocus + autoPanOnNodeFocus diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte index 962cd726..aa7dc938 100644 --- a/examples/svelte/src/routes/examples/a11y/+page.svelte +++ b/examples/svelte/src/routes/examples/a11y/+page.svelte @@ -19,13 +19,19 @@ { id: 'A-C', source: 'A', target: 'C' }, { id: 'A-D', source: 'A', target: 'D' } ]); - let isFocusPannable = $state(true); - const ariaLabelConfig = $state( - { + let autoPanOnNodeFocus = $state(true); + const ariaLabelConfig = $state({ 'node.a11yDescription.default': 'Svelte Custom Node Desc.', 'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.', - 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) => - `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${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', 'controls.zoomIn.ariaLabel': 'Svelte Custom Zoom in', @@ -33,30 +39,24 @@ // 'controls.fitView.ariaLabel': 'Svelte Custom Fit View', 'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity', 'minimap.ariaLabel': 'Svelte Custom Minimap' - } - ); + }); - + - +
- + diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index 14cf3d54..6d3b17b0 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -29,7 +29,7 @@ export function NodeWrapper({ onContextMenu, onDoubleClick, nodesDraggable, - enablePanOnFocus, + autoPanOnNodeFocus, elementsSelectable, nodesConnectable, nodesFocusable, @@ -162,7 +162,7 @@ export function NodeWrapper({ }; const onFocus = () => { - if (disableKeyboardA11y || !enablePanOnFocus || !nodeRef.current?.matches(':focus-visible')) { + if (disableKeyboardA11y || !autoPanOnNodeFocus || !nodeRef.current?.matches(':focus-visible')) { return; } diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index ba0d66bf..5a5878c3 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -23,7 +23,7 @@ const reactFlowFieldsToTrack = [ 'onClickConnectStart', 'onClickConnectEnd', 'nodesDraggable', - 'enablePanOnFocus', + 'autoPanOnNodeFocus', 'nodesConnectable', 'nodesFocusable', 'edgesFocusable', diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx index 093e3f95..22d7a54f 100644 --- a/packages/react/src/container/NodeRenderer/index.tsx +++ b/packages/react/src/container/NodeRenderer/index.tsx @@ -29,7 +29,7 @@ export type NodeRendererProps = Pick< const selector = (s: ReactFlowState) => ({ nodesDraggable: s.nodesDraggable, - enablePanOnFocus: s.enablePanOnFocus, + autoPanOnNodeFocus: s.autoPanOnNodeFocus, nodesConnectable: s.nodesConnectable, nodesFocusable: s.nodesFocusable, elementsSelectable: s.elementsSelectable, @@ -37,10 +37,8 @@ const selector = (s: ReactFlowState) => ({ }); function NodeRendererComponent(props: NodeRendererProps) { - const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, enablePanOnFocus, onError } = useStore( - selector, - shallow - ); + const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, autoPanOnNodeFocus, onError } = + useStore(selector, shallow); const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements); const resizeObserver = useResizeObserver(); @@ -90,7 +88,7 @@ function NodeRendererComponent(props: NodeRendererProps( onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, - enablePanOnFocus, + autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, @@ -262,7 +262,7 @@ function ReactFlow( onClickConnectStart={onClickConnectStart} onClickConnectEnd={onClickConnectEnd} nodesDraggable={nodesDraggable} - enablePanOnFocus={enablePanOnFocus} + autoPanOnNodeFocus={autoPanOnNodeFocus} nodesConnectable={nodesConnectable} nodesFocusable={nodesFocusable} edgesFocusable={edgesFocusable} diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index 77d10769..2532b5ad 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -112,7 +112,6 @@ const getInitialState = ({ snapToGrid: false, nodesDraggable: true, - enablePanOnFocus: false, nodesConnectable: true, nodesFocusable: true, edgesFocusable: true, @@ -135,7 +134,9 @@ const getInitialState = ({ ariaLiveMessage: '', autoPanOnConnect: true, autoPanOnNodeDrag: true, + autoPanOnNodeFocus: true, autoPanSpeed: 15, + connectionRadius: 20, onError: devWarn, isValidConnection: undefined, diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index f09995bf..7168e334 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -387,7 +387,7 @@ export interface ReactFlowProps = { nodesConnectable: boolean; elementsSelectable: boolean; nodesDraggable: boolean; - enablePanOnFocus: boolean; + autoPanOnNodeFocus: boolean; nodesFocusable: boolean; onClick?: NodeMouseHandler; onDoubleClick?: NodeMouseHandler; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index fd9eb91e..d5e8902b 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -89,7 +89,7 @@ export type ReactFlowStore { if ( store.disableKeyboardA11y || - !store.enablePanOnFocus || + !store.autoPanOnNodeFocus || !nodeRef?.matches(':focus-visible') ) { return; diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte index bd42d658..206fdc8c 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte @@ -84,7 +84,7 @@ elevateNodesOnSelect, elevateEdgesOnSelect, nodesDraggable, - enablePanOnFocus, + autoPanOnNodeFocus, nodesConnectable, elementsSelectable, nodesFocusable, @@ -105,7 +105,7 @@ // 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); diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 0d67197c..b3dcb6cb 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -236,7 +236,7 @@ export type SvelteFlowProps< * When `true`, the viewport will pan when a node is focused. * @default false */ - enablePanOnFocus?: boolean; + autoPanOnNodeFocus?: boolean; /** * Controls if all nodes should be connectable to each other * @default true diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts index bedb2e2d..90b251a6 100644 --- a/packages/svelte/src/lib/store/initial-store.svelte.ts +++ b/packages/svelte/src/lib/store/initial-store.svelte.ts @@ -247,7 +247,6 @@ export function getInitialStore