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

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

@@ -6,7 +6,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
 import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
-import { getEdgeLabelRendererId } from '../../utils/graph';
+import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<
@@ -159,7 +159,7 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <div className="react-flow__edgelabel-renderer" id={getEdgeLabelRendererId(rfId)} />
+        <div className={EDGE_LABEL_RENDERER_MAIN_CLASS} />
 
         <NodeRenderer
           nodeTypes={nodeTypes}

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import cc from 'classcat';
 
@@ -164,11 +164,26 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
     const rfId = id || '1';
 
+    const rootElementRef = useRef<HTMLDivElement | null>(null);
+
+    function setRootRef(element: HTMLDivElement | null) {
+      rootElementRef.current = element;
+
+      if (typeof ref === 'function') {
+        ref(element);
+        return;
+      }
+
+      if (ref) {
+        ref.current = element;
+      }
+    }
+
     return (
       <div
         {...rest}
         style={{ ...style, ...wrapperStyle }}
-        ref={ref}
+        ref={setRootRef}
         className={cc(['react-flow', className])}
         data-testid="rf__wrapper"
         id={id}
@@ -275,6 +290,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
             rfId={rfId}
+            rootElementRef={rootElementRef}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}