diff --git a/packages/react/src/components/ViewPortal/index.tsx b/packages/react/src/components/ViewPortal/index.tsx new file mode 100644 index 00000000..5560c803 --- /dev/null +++ b/packages/react/src/components/ViewPortal/index.tsx @@ -0,0 +1,19 @@ +import type { ReactNode } from 'react'; +import { createPortal } from 'react-dom'; + +import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; + +const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__view-portal'); + +function ViewPortal({ children }: { children: ReactNode }) { + const viewPortalDiv = useStore(selector); + + if (!viewPortalDiv) { + return null; + } + + return createPortal(children, viewPortalDiv); +} + +export default ViewPortal; diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx index 014d754f..e7d0f83f 100644 --- a/packages/react/src/container/GraphView/index.tsx +++ b/packages/react/src/container/GraphView/index.tsx @@ -180,7 +180,7 @@ const GraphView = ({ />
- +