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

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

@@ -50,7 +50,7 @@ const initialEdges: Edge[] = [
 
 const nodeOrigin: NodeOrigin = [0.5, 0.5];
 
-const defaultEdgeOptions = { zIndex: 0 };
+const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
   const instance = useReactFlow();
@@ -94,6 +94,8 @@ const BasicFlow = () => {
       fitView
       defaultEdgeOptions={defaultEdgeOptions}
       selectNodesOnDrag={false}
+      elevateEdgesOnSelect
+      elevateNodesOnSelect={false}
       // nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />

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

@@ -44,6 +44,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
+  | 'elevateNodesOnSelect'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -92,6 +93,7 @@ const StoreUpdater = ({
   nodesConnectable,
   nodesFocusable,
   edgesFocusable,
+  elevateNodesOnSelect,
   minZoom,
   maxZoom,
   nodeExtent,
@@ -151,6 +153,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState);
   useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState);
   useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
+  useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
   useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);
   useDirectStoreUpdater('snapGrid', snapGrid, store.setState);
   useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);

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

@@ -157,6 +157,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       attributionPosition,
       proOptions,
       defaultEdgeOptions,
+      elevateNodesOnSelect = true,
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
       style,
@@ -261,6 +262,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             nodesFocusable={nodesFocusable}
             edgesFocusable={edgesFocusable}
             elementsSelectable={elementsSelectable}
+            elevateNodesOnSelect={elevateNodesOnSelect}
             minZoom={minZoom}
             maxZoom={maxZoom}
             nodeExtent={nodeExtent}

packages/core/src/store/index.ts

@@ -24,8 +24,8 @@ const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({
     ...initialState,
     setNodes: (nodes: Node[]) => {
-      const { nodeInternals, nodeOrigin } = get();
+      const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get();
-      set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
+      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 = {

packages/core/src/types/component-props.ts

@@ -136,6 +136,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   connectOnClick?: boolean;
   attributionPosition?: PanelPosition;
   proOptions?: ProOptions;
+  elevateNodesOnSelect?: boolean;
   elevateEdgesOnSelect?: boolean;
   disableKeyboardA11y?: boolean;
 };

packages/core/src/types/general.ts

@@ -171,6 +171,7 @@ export type ReactFlowStore = {
   nodesFocusable: boolean;
   edgesFocusable: boolean;
   elementsSelectable: boolean;
+  elevateNodesOnSelect: boolean;
 
   multiSelectionActive: boolean;