alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create enablePanOnFocus prop, update onFocus func

Browse Source
This commit is contained in:
Abbey Yacoe
2025-06-05 12:22:06 +02:00
parent 343ed4364b
commit 6693c7300e
14 changed files with 125 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
examples/react/src/examples/A11y/index.tsx
View File

@@ -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>
);
};

39
examples/svelte/src/routes/examples/a11y/+page.svelte
View File

@@ -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>
<SvelteFlow
bind:nodes
bind:edges
fitView
ariaLabelConfig={{
let isFocusPannable = $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 }) =>
'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>

20
packages/react/src/components/NodeWrapper/index.tsx
View File

@@ -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 =
node.position.x >= x &&
node.position.x <= x + window.innerWidth &&
node.position.y >= y &&
node.position.y <= y + window.innerHeight;
const { transform, width, height } = store.getState();
const visibleNodes = getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, transform, true);
const isNodeVisible = visibleNodes.length > 0;
if (!isNodeVisible) {
const zoomLevel = transform[2];
fitView({
nodes: [{ id }],
duration: 100,
minZoom: zoom,
maxZoom: zoom,
minZoom: zoomLevel,
maxZoom: zoomLevel,
});
}
};

1
packages/react/src/components/StoreUpdater/index.tsx
View File

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

11
packages/react/src/container/NodeRenderer/index.tsx
View File

@@ -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();
@@ -48,13 +52,13 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
* The split of responsibilities between NodeRenderer and
* NodeComponentWrapper may appear weird. However, it’s designed to
* minimize the cost of updates when individual nodes change.
*
*
* For example, when you’re dragging a single node, that node gets
* updated multiple times per second. If `NodeRenderer` were to update
* every time, it would have to re-run the `nodes.map()` loop every
* time. This gets pricey with hundreds of nodes, especially if every
* loop cycle does more than just rendering a JSX element!
*
*
* As a result of this choice, we took the following implementation
* decisions:
* - NodeRenderer subscribes *only* to node IDs – and therefore
@@ -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}

2
packages/react/src/container/ReactFlow/index.tsx
View File

@@ -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}

1
packages/react/src/store/initialState.ts
View File

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

5
packages/react/src/types/component-props.ts
View File

@@ -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.

1
packages/react/src/types/nodes.ts
View File

@@ -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>;

1
packages/react/src/types/store.ts
View File

@@ -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;

50
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -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() {
if (store.disableKeyboardA11y) {
const onFocus = () => {
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;
// Get node dimensions
const nodeWidth = nodeRef?.offsetWidth || 0;
const nodeHeight = nodeRef?.offsetHeight || 0;
store.panZoom?.setViewport(
{
x: -(positionX + nodeWidth / 2) * zoom + window.innerWidth / 2,
y: -(positionY + nodeHeight / 2) * zoom + window.innerHeight / 2,
zoom: zoom,
},
{ duration: 100 }
);
}
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;
const visibleNodes = getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, viewport, true);
const isNodeVisible = visibleNodes.length > 0;
if (!isNodeVisible) {
console.log('About to call fitView - this should NOT happen when enablePanOnFocus is false');
console.log('after', store.enablePanOnFocus);
store.fitView({
nodes: [{ id }],
duration: 100,
minZoom: zoom,
maxZoom: zoom,
});
}
};
</script>
{#if !hidden}

1
packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
View File

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

5
packages/svelte/src/lib/container/SvelteFlow/types.ts
View File

@@ -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

1
packages/svelte/src/lib/store/initial-store.svelte.ts
View File

@@ -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);