refactor: access edge-label-renderer by storing the root element

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

@@ -1,19 +1,26 @@
-import { useRef } from 'react';
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { useStoreApi } from '../../hooks/useStore';
-import { getEdgeLabelRendererId } from '../../utils/graph';
+import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component';
 
 function EdgeLabelRenderer({ children }: { children: ReactNode }) {
-  const store = useStoreApi()
-  const state = store.getState()
-  const wrapperRef = useRef(document.getElementById(getEdgeLabelRendererId(state.rfId)));
+  const store = useStoreApi();
+  const {
+    rootElementRef: { current: rootElement },
+  } = store.getState();
 
-  if (!wrapperRef.current) {
+  if (!rootElement) {
     return null;
   }
 
-  return createPortal(children, wrapperRef.current);
+  const collection = rootElement.getElementsByClassName(EDGE_LABEL_RENDERER_MAIN_CLASS);
+
+  const edgeLabelRendererElement = collection.item(0);
+  if (!edgeLabelRendererElement) {
+    return null;
+  }
+
+  return createPortal(children, edgeLabelRendererElement);
 }
 
 export default EdgeLabelRenderer;

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

@@ -3,7 +3,15 @@ import { StoreApi } from 'zustand';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types';
+import type {
+  Node,
+  Edge,
+  ReactFlowState,
+  CoordinateExtent,
+  ReactFlowProps,
+  ReactFlowStore,
+  RootElementRef,
+} from '../../types';
 
 type StoreUpdaterProps = Pick<
   ReactFlowProps,
@@ -44,7 +52,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
-> & { rfId: string };
+> & { rfId: string; rootElementRef: RootElementRef };
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
@@ -117,6 +125,7 @@ const StoreUpdater = ({
   noPanClassName,
   nodeOrigin,
   rfId,
+  rootElementRef,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -169,6 +178,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
   useDirectStoreUpdater('rfId', rfId, store.setState);
+  useDirectStoreUpdater('rootElementRef', rootElementRef, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);