diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx
index dfba56ef..1197ef06 100644
--- a/examples/vite-app/src/examples/Basic/index.tsx
+++ b/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}
>
diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index 2f98a453..b784c5bd 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/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);
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index 6b9fbacc..0afc251d 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -157,6 +157,7 @@ const ReactFlow = forwardRef(
attributionPosition,
proOptions,
defaultEdgeOptions,
+ elevateNodesOnSelect = true,
elevateEdgesOnSelect = false,
disableKeyboardA11y = false,
style,
@@ -261,6 +262,7 @@ const ReactFlow = forwardRef(
nodesFocusable={nodesFocusable}
edgesFocusable={edgesFocusable}
elementsSelectable={elementsSelectable}
+ elevateNodesOnSelect={elevateNodesOnSelect}
minZoom={minZoom}
maxZoom={maxZoom}
nodeExtent={nodeExtent}
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 09bc66d2..5ff9bf05 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -24,8 +24,8 @@ const createRFStore = () =>
createStore((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 });
}
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 6a92b777..f8cc369d 100644
--- a/packages/core/src/store/initialState.ts
+++ b/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,
diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts
index d0d976fc..0224e656 100644
--- a/packages/core/src/store/utils.ts
+++ b/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();
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 = {
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index 68b2cdab..0441ecdf 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -136,6 +136,7 @@ export type ReactFlowProps = HTMLAttributes & {
connectOnClick?: boolean;
attributionPosition?: PanelPosition;
proOptions?: ProOptions;
+ elevateNodesOnSelect?: boolean;
elevateEdgesOnSelect?: boolean;
disableKeyboardA11y?: boolean;
};
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 6bcd06fc..9d60e839 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -171,6 +171,7 @@ export type ReactFlowStore = {
nodesFocusable: boolean;
edgesFocusable: boolean;
elementsSelectable: boolean;
+ elevateNodesOnSelect: boolean;
multiSelectionActive: boolean;