Merge pull request #5217 from xyflow/refactor/selection-changes

Refactor/selection changes

.changeset/flat-crabs-attack.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Keep node seleciton on pane click if elementsSelectable=false

examples/react/src/examples/UseOnSelectionChange/index.tsx

@@ -10,6 +10,7 @@ import {
   useEdgesState,
   useOnSelectionChange,
   OnSelectionChangeParams,
+  Panel,
 } from '@xyflow/react';
 
 const initialNodes: Node[] = [
@@ -51,6 +52,12 @@ const Flow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
+  const [elementsSelectable, setElementsSelectable] = useState<boolean>(true);
+  const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(true);
+
+  const toggleSecondLogger = () => {
+    setSecondLoggerActive(!secondLoggerActive);
+  };
 
   return (
     <ReactFlow
@@ -59,27 +66,17 @@ const Flow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
-    />
-  );
-};
+      elementsSelectable={elementsSelectable}
+    >
+      <Panel>
+        <button onClick={toggleSecondLogger}>{secondLoggerActive ? 'Disable' : 'Enable'} Logger 2</button>
+        <button onClick={() => setElementsSelectable((s) => !s)}>toggle selectable</button>
+      </Panel>
 
-const WrappedFlow = () => {
-  const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(true);
-
-  const toggleSecondLogger = () => {
-    setSecondLoggerActive(!secondLoggerActive);
-  };
-
-  return (
-    <ReactFlowProvider>
-      <Flow />
       <SelectionLogger id="Logger 1" />
       {secondLoggerActive && <SelectionLogger id="Logger 2" />}
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={toggleSecondLogger}>{secondLoggerActive ? 'Disable' : 'Enable'} Logger 2</button>
-      </div>
-    </ReactFlowProvider>
+    </ReactFlow>
   );
 };
 
-export default WrappedFlow;
+export default Flow;

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

@@ -19,13 +19,13 @@ const selector = (s: ReactFlowState) => {
   const selectedEdges = [];
 
   for (const [, node] of s.nodeLookup) {
-    if (node.selected && (s.elementsSelectable || node.selectable)) {
+    if (node.selected) {
       selectedNodes.push(node.internals.userNode);
     }
   }
 
   for (const [, edge] of s.edgeLookup) {
-    if (edge.selected && (s.elementsSelectable || edge.selectable)) {
+    if (edge.selected) {
       selectedEdges.push(edge);
     }
   }

packages/react/src/store/index.ts

@@ -316,7 +316,11 @@ const createStore = ({
         get().panZoom?.setClickDistance(clickDistance);
       },
       resetSelectedElements: () => {
-        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
+
+        if (!elementsSelectable) {
+          return;
+        }
 
         const nodeChanges = nodes.reduce<NodeSelectionChange[]>(
           (res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res),