Merge branch 'prevent-multiple-edge-label-renderers-collide-with-each-other' of github.com:liuruenshen/react-flow into liuruenshen-prevent-multiple-edge-label-renderers-collide-with-each-other

packages/core/src/components/EdgeLabelRenderer/index.tsx

@@ -1,15 +1,20 @@
-import { useRef } from 'react';
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+import { useStore } from '../../hooks/useStore';
+import { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => ({
+  edgeLabelRenderer: s.domNode?.querySelector('.react-flow__edgelabel-renderer'),
+});
 
 function EdgeLabelRenderer({ children }: { children: ReactNode }) {
-  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+  const { edgeLabelRenderer } = useStore(selector);
 
-  if (!wrapperRef.current) {
+  if (!edgeLabelRenderer) {
     return null;
   }
 
-  return createPortal(children, wrapperRef.current);
+  return createPortal(children, edgeLabelRenderer);
 }
 
 export default EdgeLabelRenderer;

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

@@ -158,7 +158,7 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
+        <div className="react-flow__edgelabel-renderer" />
 
         <NodeRenderer
           nodeTypes={nodeTypes}

packages/core/src/utils/graph.ts

@@ -223,3 +223,4 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
+