Merge pull request #3723 from xyflow/viewport-portal

Added seperate portal to put dom elements inside the flow

packages/react/src/components/ViewportPortal/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__viewport-portal');
+
+function ViewportPortal({ children }: { children: ReactNode }) {
+  const viewPortalDiv = useStore(selector);
+
+  if (!viewPortalDiv) {
+    return null;
+  }
+
+  return createPortal(children, viewPortalDiv);
+}
+
+export default ViewportPortal;

packages/react/src/container/GraphView/index.tsx

@@ -174,7 +174,7 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-
+        <div className="react-flow__viewport-portal" />
         <NodeRenderer
           nodeTypes={nodeTypes}
           onNodeClick={onNodeClick}

packages/react/src/index.ts

@@ -10,6 +10,7 @@ export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { default as ViewportPortal } from './components/ViewportPortal';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';