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

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

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useState } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -8,15 +8,10 @@ import {
   ReactFlowProvider,
   Node,
   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',
@@ -32,20 +27,39 @@ const initialNodes: Node[] = [
   {
     id: '2',
     data: { label: 'Node 2' },
-    position: { x: 100, y: 100 },
-    className: 'light',
+    position: { x: 1000, y: 100 },
   },
   {
     id: '3',
     data: { label: 'Node 3' },
-    position: { x: 400, y: 100 },
+    position: { x: 100, y: 100 },
     className: 'light',
+    ariaRoleDescription: 'custom node role',
+    ariaRole: 'button',
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 300, y: 100 },
+  },
+  {
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 400, y: 200 },
+  },
+  {
+    id: '6',
+    data: { label: 'Node 6' },
+    position: { x: -1000, y: 200 },
   },
 ];
 
 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> = {
@@ -63,19 +77,13 @@ const ariaLabelConfig: Partial<AriaLabelConfig> = {
 };
 
 const A11y = () => {
+  const [autoPanOnNodeFocus, setAutoPanOnNodeFocus] = 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={0.2}
-      maxZoom={4}
-      fitView
+      autoPanOnNodeFocus={autoPanOnNodeFocus}
       selectNodesOnDrag={false}
       elevateEdgesOnSelect
       elevateNodesOnSelect={false}
@@ -85,6 +93,20 @@ const A11y = () => {
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
       <Controls />
+      <Panel position="top-right">
+        <div>
+          <label htmlFor="focusPannable">
+            <input
+              id="focusPannable"
+              type="checkbox"
+              checked={autoPanOnNodeFocus}
+              onChange={(event) => setAutoPanOnNodeFocus(event.target.checked)}
+              className="xy-theme__checkbox"
+            />
+            autoPanOnNodeFocus
+          </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,17 +19,19 @@
 		{ id: 'A-C', source: 'A', target: 'C' },
 		{ id: 'A-D', source: 'A', target: 'D' }
 	]);
-</script>
-
-<SvelteFlow
-	bind:nodes
-	bind:edges
-	fitView
-	ariaLabelConfig={{
+	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 }) =>
-			`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',
@@ -37,9 +39,24 @@
 		// '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 {autoPanOnNodeFocus} {ariaLabelConfig}>
 	<Controls />
 	<Background />
 	<MiniMap />
+	<Panel class="panel top-right">
+		<div>
+			<label for="focusPannable">
+				Enable Pan on Focus
+				<input
+					id="focusPannable"
+					type="checkbox"
+					bind:checked={autoPanOnNodeFocus}
+					class="svelte-flow__zoomonscroll"
+				/>
+			</label>
+		</div>
+	</Panel>
 </SvelteFlow>