feat(edges): add labelBgBorderRadius option closes #421

README.md

@@ -284,6 +284,7 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
 - `labelShowBg`: boolean - default: `true`
 - `labelBgStyle`: css properties for the text background
 - `labelBgPadding`: [number, number] background rectangle padding - default: `[2, 4]`
+- `labelBgBorderRadius`: number - default 2
 - `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,9 +38,10 @@ const initialElements = [
     source: '5',
     target: '7',
     label: 'label with styled bg',
-    labelBgStyle: { fill: '#555', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: 'arrowclosed',
     labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    arrowHeadType: 'arrowclosed',
   },
   { id: 'e5-8', source: '5', target: '8', type: 'custom', data: { text: 'custom edge' }, arrowHeadType: 'arrowclosed' },
 ];

src/components/Edges/BezierEdge.tsx

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

src/components/Edges/EdgeText.tsx

@@ -3,7 +3,16 @@ import React, { memo, useRef, useState, useEffect } from 'react';
 import { EdgeTextProps, Rect } from '../../types';
 
 export default memo(
-  ({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4] }: EdgeTextProps) => {
+  ({
+    x,
+    y,
+    label,
+    labelStyle = {},
+    labelShowBg = true,
+    labelBgStyle = {},
+    labelBgPadding = [2, 4],
+    labelBgBorderRadius = 2,
+  }: EdgeTextProps) => {
     const edgeRef = useRef<SVGTextElement>(null);
     const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
 
@@ -34,6 +43,8 @@ export default memo(
             height={edgeTextBbox.height + 2 * labelBgPadding[1]}
             className="react-flow__edge-textbg"
             style={labelBgStyle}
+            rx={labelBgBorderRadius}
+            ry={labelBgBorderRadius}
           />
         )}
         <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>

src/components/Edges/SmoothStepEdge.tsx

@@ -132,6 +132,7 @@ export default memo(
     labelShowBg,
     labelBgStyle,
     labelBgPadding,
+    labelBgBorderRadius,
     style,
     sourcePosition = Position.Bottom,
     targetPosition = Position.Top,
@@ -162,6 +163,7 @@ export default memo(
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
         labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
       />
     ) : null;
 

src/components/Edges/StraightEdge.tsx

@@ -15,6 +15,7 @@ export default memo(
     labelShowBg,
     labelBgStyle,
     labelBgPadding,
+    labelBgBorderRadius,
     style,
     arrowHeadType,
     markerEndId,
@@ -35,6 +36,7 @@ export default memo(
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
         labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
       />
     ) : null;
 

src/components/Edges/wrapEdge.tsx

@@ -14,6 +14,7 @@ interface EdgeWrapperProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
   className?: string;
   onClick?: (event: React.MouseEvent, edge: Edge) => void;
   animated?: boolean;
@@ -38,6 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
     labelShowBg,
     labelBgStyle,
     labelBgPadding,
+    labelBgBorderRadius,
     className,
     isHidden,
     data,
@@ -80,6 +82,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
           labelShowBg={labelShowBg}
           labelBgStyle={labelBgStyle}
           labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
           data={data}
           {...rest}
         />

src/container/EdgeRenderer/index.tsx

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

src/hooks/useElementUpdater.ts

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

src/types/index.ts

@@ -63,6 +63,7 @@ export interface Edge {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
   style?: CSSProperties;
   animated?: boolean;
   arrowHeadType?: ArrowHeadType;
@@ -98,6 +99,7 @@ export interface EdgeProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
   style?: CSSProperties;
   arrowHeadType?: ArrowHeadType;
   markerEndId?: string;
@@ -238,6 +240,7 @@ export interface EdgeCompProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
   onClick?: (event: ReactMouseEvent, edge: Edge) => void;
   animated?: boolean;
   selected?: boolean;
@@ -252,6 +255,7 @@ export interface EdgeTextProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
 }
 
 export type NodePosUpdate = {