feat(nodes): add prop to disable automatic elevation of nodes on select

packages/core/src/store/index.ts

@@ -24,8 +24,8 @@ const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({
     ...initialState,
     setNodes: (nodes: Node[]) => {
-      const { nodeInternals, nodeOrigin } = get();
-      set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
+      const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get();
+      set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect) });
     },
     getNodes: () => {
       return Array.from(get().nodeInternals.values());
@@ -38,7 +38,9 @@ const createRFStore = () =>
       const hasDefaultNodes = typeof nodes !== 'undefined';
       const hasDefaultEdges = typeof edges !== 'undefined';
 
-      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map(), get().nodeOrigin) : new Map();
+      const nodeInternals = hasDefaultNodes
+        ? createNodeInternals(nodes, new Map(), get().nodeOrigin, get().elevateNodesOnSelect)
+        : new Map();
       const nextEdges = hasDefaultEdges ? edges : [];
 
       set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
@@ -128,12 +130,12 @@ const createRFStore = () =>
     },
 
     triggerNodeChanges: (changes: NodeChange[]) => {
-      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes } = get();
+      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes, elevateNodesOnSelect } = get();
 
       if (changes?.length) {
         if (hasDefaultNodes) {
           const nodes = applyNodeChanges(changes, getNodes());
-          const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
+          const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect);
           set({ nodeInternals: nextNodeInternals });
         }
 

packages/core/src/store/initialState.ts

@@ -45,6 +45,7 @@ const initialState: ReactFlowStore = {
   nodesFocusable: true,
   edgesFocusable: true,
   elementsSelectable: true,
+  elevateNodesOnSelect: true,
   fitViewOnInit: false,
   fitViewOnInitDone: false,
   fitViewOnInitOptions: undefined,

packages/core/src/store/utils.ts

@@ -46,13 +46,15 @@ function calculateXYZPosition(
 export function createNodeInternals(
   nodes: Node[],
   nodeInternals: NodeInternals,
-  nodeOrigin: NodeOrigin
+  nodeOrigin: NodeOrigin,
+  elevateNodesOnSelect: boolean
 ): NodeInternals {
   const nextNodeInternals = new Map<string, Node>();
   const parentNodes: ParentNodes = {};
+  const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0;
 
   nodes.forEach((node) => {
-    const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1000 : 0);
+    const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
     const currInternals = nodeInternals.get(node.id);
 
     const internals: Node = {