Feat: Add div based renderer for edge labels

.changeset/few-donkeys-eat.md

@@ -0,0 +1,6 @@
+---
+'@reactflow/core': minor
+'reactflow': minor
+---
+
+Feat: Add edge label renderer

examples/vite-app/src/App/index.tsx

@@ -10,6 +10,7 @@ import DefaultNodes from '../examples/DefaultNodes';
 import DragHandle from '../examples/DragHandle';
 import DragNDrop from '../examples/DragNDrop';
 import Edges from '../examples/Edges';
+import EdgeRenderer from '../examples/EdgeRenderer';
 import EdgeTypes from '../examples/EdgeTypes';
 import Empty from '../examples/Empty';
 import FloatingEdges from '../examples/FloatingEdges';
@@ -95,6 +96,11 @@ const routes: IRoute[] = [
     path: '/edges',
     component: Edges,
   },
+  {
+    name: 'Edge Renderer',
+    path: '/edge-renderer',
+    component: EdgeRenderer,
+  },
   {
     name: 'Edge Types',
     path: '/edge-types',

examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx

@@ -0,0 +1,61 @@
+import { FC, MouseEvent } from 'react';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore, ReactFlowStore } from 'reactflow';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const isConnectedNodeDragging = useStore((s) =>
+    Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
+  );
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const onClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    console.log('click', data.text);
+  };
+
+  return (
+    <>
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
+
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            background: '#ffcc00',
+            padding: 10,
+            zIndex: isConnectedNodeDragging ? 10 : 0,
+            pointerEvents: 'all',
+          }}
+          className="nodrag nopan"
+        >
+          {data.text}
+          <input style={{ display: 'block' }} />
+          <button onClick={onClick}>send</button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default CustomEdge;

examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const isConnectedNodeDragging = useStore((s) =>
+    Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
+  );
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
+
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            background: 'white',
+            border: '1px solid #555',
+            padding: 5,
+            zIndex: isConnectedNodeDragging ? 10 : 0,
+          }}
+        >
+          {data.text}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default CustomEdge;

examples/vite-app/src/examples/EdgeRenderer/index.tsx

@@ -0,0 +1,206 @@
+import React, { MouseEvent, useCallback } from 'react';
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  addEdge,
+  Connection,
+  Edge,
+  EdgeTypes,
+  MarkerType,
+  Node,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow';
+
+import CustomEdge from './CustomEdge';
+import CustomEdge2 from './CustomEdge2';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input 1' },
+    position: { x: 250, y: 0 },
+  },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'Output 6' },
+    position: { x: 50, y: 550 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Output 7' },
+    position: { x: 250, y: 550 },
+  },
+  {
+    id: '8',
+    type: 'output',
+    data: { label: 'Output 8' },
+    position: { x: 525, y: 600 },
+  },
+  {
+    id: '9',
+    type: 'output',
+    data: { label: 'Output 9' },
+    position: { x: 675, y: 500 },
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    label: 'bezier edge (default)',
+    className: 'normal-edge',
+  },
+  {
+    id: 'e2-2a',
+    source: '2',
+    target: '2a',
+    type: 'smoothstep',
+    label: 'smoothstep edge',
+  },
+  {
+    id: 'e2a-2b',
+    source: '2a',
+    target: '2b',
+    type: 'simplebezier',
+    label: 'simple bezier edge',
+  },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    type: 'straight',
+    label: 'straight edge',
+  },
+  {
+    id: 'e3-3a',
+    source: '3',
+    target: '3a',
+    type: 'straight',
+    label: 'label only edge',
+    style: { stroke: 'none' },
+  },
+  {
+    id: 'e3-5',
+    source: '4',
+    target: '5',
+    animated: true,
+    label: 'animated styled edge',
+    style: { stroke: 'red' },
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: (
+      <>
+        <tspan>i am using</tspan>
+        <tspan dy={10} x={0}>
+          {'<tspan>'}
+        </tspan>
+      </>
+    ),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: MarkerType.Arrow,
+      color: '#FFCC00',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: MarkerType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
+  },
+];
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge,
+  custom2: CustomEdge2,
+};
+
+const EdgesFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      snapToGrid={true}
+      edgeTypes={edgeTypes}
+      onEdgeClick={onEdgeClick}
+      onEdgeDoubleClick={onEdgeDoubleClick}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeMouseLeave={onEdgeMouseLeave}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};
+
+export default EdgesFlow;

packages/core/package.json

@@ -58,6 +58,7 @@
     "@reactflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "typescript": "^4.8.3"
   },

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

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+function EdgeLabelRenderer({ children }: { children: ReactNode }) {
+  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+
+  if (!wrapperRef.current) {
+    return null;
+  }
+
+  return createPortal(children, wrapperRef.current);
+}
+
+export default EdgeLabelRenderer;

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

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

packages/core/src/index.ts

@@ -24,6 +24,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
+export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

packages/core/src/styles/init.css

@@ -220,3 +220,10 @@
     stroke-dashoffset: 10;
   }
 }
+
+.react-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}