feat(edge-options): add labelBgPadding #421

src/components/Edges/BezierEdge.tsx

@@ -53,6 +53,7 @@ export default memo(
     style,
     arrowHeadType,
     markerEndId,
+    labelBgPadding,
   }: EdgeBezierProps) => {
     const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
     const path = getBezierPath({
@@ -72,6 +73,7 @@ export default memo(
         labelStyle={labelStyle}
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
       />
     ) : null;
 

src/components/Edges/EdgeText.tsx

@@ -2,44 +2,44 @@ import React, { memo, useRef, useState, useEffect } from 'react';
 
 import { EdgeTextProps, Rect } from '../../types';
 
-const textBgPadding = 2;
+export default memo(
+  ({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4] }: EdgeTextProps) => {
+    const edgeRef = useRef<SVGTextElement>(null);
+    const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
 
-export default memo(({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {} }: EdgeTextProps) => {
-  const edgeRef = useRef<SVGTextElement>(null);
-  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+    useEffect(() => {
+      if (edgeRef.current) {
+        const textBbox = edgeRef.current.getBBox();
 
-  useEffect(() => {
-    if (edgeRef.current) {
-      const textBbox = edgeRef.current.getBBox();
+        setEdgeTextBbox({
+          x: textBbox.x,
+          y: textBbox.y,
+          width: textBbox.width,
+          height: textBbox.height,
+        });
+      }
+    }, []);
 
-      setEdgeTextBbox({
-        x: textBbox.x,
-        y: textBbox.y,
-        width: textBbox.width,
-        height: textBbox.height,
-      });
+    if (typeof label === 'undefined' || !label) {
+      return null;
     }
-  }, []);
 
-  if (typeof label === 'undefined' || !label) {
-    return null;
+    return (
+      <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}>
+        {labelShowBg && (
+          <rect
+            width={edgeTextBbox.width + 2 * labelBgPadding[0]}
+            x={-labelBgPadding[0]}
+            y={-labelBgPadding[1]}
+            height={edgeTextBbox.height + 2 * labelBgPadding[1]}
+            className="react-flow__edge-textbg"
+            style={labelBgStyle}
+          />
+        )}
+        <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
+          {label}
+        </text>
+      </g>
+    );
   }
-
-  return (
-    <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}>
-      {labelShowBg && (
-        <rect
-          width={edgeTextBbox.width + 2 * textBgPadding}
-          x={-textBgPadding}
-          y={-textBgPadding}
-          height={edgeTextBbox.height + 2 * textBgPadding}
-          className="react-flow__edge-textbg"
-          style={labelBgStyle}
-        />
-      )}
-      <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
-        {label}
-      </text>
-    </g>
-  );
-});
+);

src/components/Edges/SmoothStepEdge.tsx

@@ -131,6 +131,7 @@ export default memo(
     labelStyle,
     labelShowBg,
     labelBgStyle,
+    labelBgPadding,
     style,
     sourcePosition = Position.Bottom,
     targetPosition = Position.Top,
@@ -160,6 +161,7 @@ export default memo(
         labelStyle={labelStyle}
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
       />
     ) : null;
 

src/components/Edges/StraightEdge.tsx

@@ -14,6 +14,7 @@ export default memo(
     labelStyle,
     labelShowBg,
     labelBgStyle,
+    labelBgPadding,
     style,
     arrowHeadType,
     markerEndId,
@@ -33,6 +34,7 @@ export default memo(
         labelStyle={labelStyle}
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
       />
     ) : null;
 

src/components/Edges/wrapEdge.tsx

@@ -12,7 +12,8 @@ interface EdgeWrapperProps {
   label?: string;
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
-  labelBgStyle: CSSProperties;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
   className?: string;
   onClick?: (event: React.MouseEvent, edge: Edge) => void;
   animated?: boolean;
@@ -36,6 +37,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
     labelStyle,
     labelShowBg,
     labelBgStyle,
+    labelBgPadding,
     className,
     isHidden,
     data,
@@ -77,6 +79,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
           labelStyle={labelStyle}
           labelShowBg={labelShowBg}
           labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
           data={data}
           {...rest}
         />