Merge branch 'main' into feat/interactive-minimap

examples/vite-app/src/App/index.tsx

@@ -37,6 +37,7 @@ import UseKeyPress from '../examples/UseKeyPress';
 import EdgeRouting from '../examples/EdgeRouting';
 import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
+import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 
 interface IRoute {
   name: string;
@@ -205,6 +206,11 @@ const routes: IRoute[] = [
     path: '/update-node',
     component: UpdateNode,
   },
+  {
+    name: 'useOnSelectionChange',
+    path: '/use-on-selection-change',
+    component: UseOnSelectionChange,
+  },
   {
     name: 'useReactFlow',
     path: '/usereactflow',

examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx

@@ -0,0 +1,36 @@
+import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+
+const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  const [handleCount, setHandleCount] = useState(1);
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  const handles = useMemo(
+    () =>
+      Array.from({ length: handleCount }, (x, i) => {
+        const handleId = `handle-${i}`;
+        return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
+      }),
+    [handleCount]
+  );
+
+  return (
+    <div style={nodeStyles}>
+      <Handle type="target" position={Position.Left} />
+      <div>output handle count: {handleCount}</div>
+      <button
+        onClick={() => {
+          setHandleCount((c) => c + 1);
+          updateNodeInternals(id);
+        }}
+      >
+        add handle
+      </button>
+      {handles}
+    </div>
+  );
+};
+
+export default memo(CustomNode);

examples/vite-app/src/examples/UseOnSelectionChange/index.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import ReactFlow, {
+  addEdge,
+  ReactFlowProvider,
+  Node,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  useOnSelectionChange,
+  OnSelectionChangeParams,
+} from 'reactflow';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'default',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+];
+
+const SelectionLogger = () => {
+  const onChange = useCallback(({ nodes, edges }: OnSelectionChangeParams) => {
+    console.log(nodes, edges);
+  }, []);
+
+  useOnSelectionChange({
+    onChange,
+  });
+
+  return null;
+};
+
+const Flow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+    />
+  );
+};
+
+const WrappedFlow = () => (
+  <ReactFlowProvider>
+    <Flow />
+    <SelectionLogger />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlow;