From 55cf7560c0713cf4b499e142ed9fa2b96f440af4 Mon Sep 17 00:00:00 2001
From: GeoffreyLiu <geoffrey@iscoollab.com>
Date: Tue, 8 Nov 2022 13:53:48 +0800
Subject: [PATCH] fix: access the edge-label-renderer by reactflow's id

---
 packages/core/src/components/EdgeLabelRenderer/index.tsx | 6 +++++-
 packages/core/src/container/GraphView/index.tsx          | 3 ++-
 packages/core/src/utils/graph.ts                         | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx
index 0647364a..772a8372 100644
--- a/packages/core/src/components/EdgeLabelRenderer/index.tsx
+++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx
@@ -1,9 +1,13 @@
 import { useRef } from 'react';
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+import { useStoreApi } from '../../hooks/useStore';
+import { getEdgeLabelRendererId } from '../../utils/graph';
 
 function EdgeLabelRenderer({ children }: { children: ReactNode }) {
-  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+  const store = useStoreApi()
+  const state = store.getState()
+  const wrapperRef = useRef(document.getElementById(getEdgeLabelRendererId(state.rfId)));
 
   if (!wrapperRef.current) {
     return null;
diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx
index 4190bed0..47be5bfc 100644
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -6,6 +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';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<
@@ -158,7 +159,7 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
+        <div className="react-flow__edgelabel-renderer" id={getEdgeLabelRendererId(rfId)} />
 
         <NodeRenderer
           nodeTypes={nodeTypes}
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 78569276..95feec38 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -223,3 +223,7 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
+
+export function getEdgeLabelRendererId(id: string) {
+  return `edgelabel-portal-${id}`
+}