Added seperate portal to put dom elements inside the flow

This commit is contained in:
peterkogo
2023-12-14 13:51:25 +01:00
parent 58ad111ec3
commit cc7c49223b
5 changed files with 34 additions and 1 deletions
@@ -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;
@@ -180,7 +180,7 @@ const GraphView = ({
/>
</EdgeRenderer>
<div className="react-flow__edgelabel-renderer" />
<div className="react-flow__view-portal" />
<NodeRenderer
nodeTypes={nodeTypesWrapped}
onNodeClick={onNodeClick}