feat(edge-options): add labelBgPadding #421

README.md

@@ -283,6 +283,7 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
 - `labelStyle`: css properties for the text
 - `labelShowBg`: boolean - default: `true`
 - `labelBgStyle`: css properties for the text background
+- `labelBgPadding`: [number, number] background rectangle padding - default: `[2, 4]`
 - `arrowHeadType`: 'arrow' or 'arrowclosed' - defines the arrowhead of the edge
 - `markerEndId`: custom marker end url - if this is used `arrowHeadType` gets ignored
 - `isHidden`: if `true`, the edge will not be rendered

example/src/Edges/index.js

@@ -38,8 +38,9 @@ const initialElements = [
     source: '5',
     target: '7',
     label: 'label with styled bg',
-    labelBgStyle: { fill: '#eee', fillOpacity: 0.7 },
+    labelBgStyle: { fill: '#555', color: '#fff', fillOpacity: 0.7 },
     arrowHeadType: 'arrowclosed',
+    labelBgPadding: [8, 4],
   },
   { id: 'e5-8', source: '5', target: '8', type: 'custom', data: { text: 'custom edge' }, arrowHeadType: 'arrowclosed' },
 ];

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}
         />

src/container/EdgeRenderer/index.tsx

@@ -171,6 +171,7 @@ function renderEdge(
       labelStyle={edge.labelStyle}
       labelShowBg={edge.labelShowBg}
       labelBgStyle={edge.labelBgStyle}
+      labelBgPadding={edge.labelBgPadding}
       style={edge.style}
       arrowHeadType={edge.arrowHeadType}
       source={sourceId}

src/hooks/useElementUpdater.ts

@@ -94,6 +94,10 @@ const useElementUpdater = (propElements: Elements): void => {
             edgeProps.labelShowBg = propEdge.labelShowBg;
           }
 
+          if (typeof propEdge.labelBgPadding !== 'undefined') {
+            edgeProps.labelBgPadding = propEdge.labelBgPadding;
+          }
+
           if (typeof labelBgStyle !== 'undefined') {
             edgeProps.labelBgStyle = labelBgStyle;
           }

src/types/index.ts

@@ -62,6 +62,7 @@ export interface Edge {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
   style?: CSSProperties;
   animated?: boolean;
   arrowHeadType?: ArrowHeadType;
@@ -96,6 +97,7 @@ export interface EdgeProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
   style?: CSSProperties;
   arrowHeadType?: ArrowHeadType;
   markerEndId?: string;
@@ -235,6 +237,7 @@ export interface EdgeCompProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
   onClick?: (event: ReactMouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
@@ -248,6 +251,7 @@ export interface EdgeTextProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
 }
 
 export type NodePosUpdate = {