refactor(edgetext): catch pointer events closes #1121

example/src/Overview/index.tsx

@@ -192,7 +192,7 @@ const OverviewFlow = () => {
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />
-      <Background color="#aaa" gap={20} size={1} />
+      <Background color="#aaa" gap={20} />
     </ReactFlow>
   );
 };

src/components/Edges/EdgeText.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useRef, useState, useEffect, FC } from 'react';
+import cc from 'classcat';
 
 import { EdgeTextProps, Rect } from '../../types';
 
@@ -12,10 +13,12 @@ const EdgeText: FC<EdgeTextProps> = ({
   labelBgPadding = [2, 4],
   labelBgBorderRadius = 2,
   children,
+  className,
   ...rest
 }) => {
   const edgeRef = useRef<SVGTextElement>(null);
   const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
 
   useEffect(() => {
     if (edgeRef.current) {
@@ -35,7 +38,11 @@ const EdgeText: FC<EdgeTextProps> = ({
   }
 
   return (
-    <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`} {...rest}>
+    <g
+      transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}
+      className={edgeTextClasses}
+      {...rest}
+    >
       {labelShowBg && (
         <rect
           width={edgeTextBbox.width + 2 * labelBgPadding[0]}

src/style.css

@@ -59,6 +59,10 @@
   fill: none;
 }
 
+.react-flow__edge-textwrapper {
+  pointer-events: all;
+}
+
 .react-flow__edge-text {
   pointer-events: none;
   user-select: none;