diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index 696b490e..c8085ecf 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/node-toolbar/src/NodeToolbar.tsx @@ -1,5 +1,14 @@ import { useCallback, CSSProperties } from 'react'; -import { Node, ReactFlowState, useStore, getRectOfNodes, Transform, Rect, Position } from '@reactflow/core'; +import { + Node, + ReactFlowState, + useStore, + getRectOfNodes, + Transform, + Rect, + Position, + internalsSymbol, +} from '@reactflow/core'; import cc from 'classcat'; import shallow from 'zustand/shallow'; @@ -13,7 +22,8 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) => a?.positionAbsolute?.y === b?.positionAbsolute?.y && a?.width === b?.width && a?.height === b?.height && - a?.selected === b?.selected; + a?.selected === b?.selected && + a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z; const transformSelector = (state: ReactFlowState) => state.transform; @@ -68,6 +78,7 @@ function NodeToolbar({ const wrapperStyle: CSSProperties = { transform: getTransform(nodeRect, transform, position, offset), + zIndex: node[internalsSymbol]?.z, ...style, }; diff --git a/packages/node-toolbar/src/NodeToolbarPortal.tsx b/packages/node-toolbar/src/NodeToolbarPortal.tsx index fa1509a4..f899352f 100644 --- a/packages/node-toolbar/src/NodeToolbarPortal.tsx +++ b/packages/node-toolbar/src/NodeToolbarPortal.tsx @@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'; import { ReactFlowState, useStore } from '@reactflow/core'; function NodeToolbarPortal({ children }: { children: ReactNode }) { - const wrapperRef = useStore((state: ReactFlowState) => state.domNode?.querySelector('.react-flow__pane')); + const wrapperRef = useStore((state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer')); if (!wrapperRef) { return null;