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;