Merge pull request #2487 from wbkd/fix/onSelectionChange

Fix/on selection change

.changeset/smooth-rabbits-own.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+repair useOnSelectionChange hook

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

@@ -36,6 +36,7 @@ import Validation from '../examples/Validation';
 import UseKeyPress from '../examples/UseKeyPress';
 import EdgeRouting from '../examples/EdgeRouting';
 import CancelConnection from '../examples/CancelConnection';
+import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 
 interface IRoute {
   name: string;
@@ -199,6 +200,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;

packages/core/src/components/SelectionListener/index.tsx

@@ -4,9 +4,9 @@ import shallow from 'zustand/shallow';
 import { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 
-interface SelectionListenerProps {
-  onSelectionChange: OnSelectionChangeFunc;
-}
+type SelectionListenerProps = {
+  onSelectionChange?: OnSelectionChangeFunc;
+};
 
 const selector = (s: ReactFlowState) => ({
   selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected),
@@ -15,30 +15,42 @@ const selector = (s: ReactFlowState) => ({
 
 type SelectorSlice = ReturnType<typeof selector>;
 
-function areEqual(objA: SelectorSlice, objB: SelectorSlice) {
-  const selectedNodeIdsA = objA.selectedNodes.map((n: Node) => n.id);
-  const selectedNodeIdsB = objB.selectedNodes.map((n: Node) => n.id);
+const selectId = (obj: Node | Edge) => obj.id;
 
-  const selectedEdgeIdsA = objA.selectedEdges.map((e: Edge) => e.id);
-  const selectedEdgeIdsB = objB.selectedEdges.map((e: Edge) => e.id);
-
-  return shallow(selectedNodeIdsA, selectedNodeIdsB) && shallow(selectedEdgeIdsA, selectedEdgeIdsB);
+function areEqual(a: SelectorSlice, b: SelectorSlice) {
+  return (
+    shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
+    shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId))
+  );
 }
 
 // This is just a helper component for calling the onSelectionChange listener.
 // @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?
-function SelectionListener({ onSelectionChange }: SelectionListenerProps) {
+const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) => {
   const store = useStoreApi();
   const { selectedNodes, selectedEdges } = useStore(selector, areEqual);
 
   useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
-
-    onSelectionChange(params);
+    onSelectionChange?.(params);
     store.getState().onSelectionChange?.(params);
-  }, [selectedNodes, selectedEdges]);
+  }, [selectedNodes, selectedEdges, onSelectionChange]);
+
+  return null;
+});
+
+SelectionListener.displayName = 'SelectionListener';
+
+const changeSelector = (s: ReactFlowState) => !!s.onSelectionChange;
+
+function Wrapper({ onSelectionChange }: SelectionListenerProps) {
+  const storeHasSelectionChange = useStore(changeSelector);
+
+  if (onSelectionChange || storeHasSelectionChange) {
+    return <SelectionListener onSelectionChange={onSelectionChange} />;
+  }
 
   return null;
 }
 
-export default memo(SelectionListener);
+export default Wrapper;

packages/core/src/container/ReactFlow/index.tsx

@@ -275,7 +275,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             nodeOrigin={nodeOrigin}
             id={id}
           />
-          {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
+          <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
           {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}