diff --git a/README.md b/README.md index 49df1fad..1ebc6c88 100644 --- a/README.md +++ b/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 diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js index 55a08d47..fd9f7990 100644 --- a/example/src/Edges/index.js +++ b/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' }, ]; diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 59b93399..2c62f718 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/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; diff --git a/src/components/Edges/EdgeText.tsx b/src/components/Edges/EdgeText.tsx index e10e84d2..3292b0e1 100644 --- a/src/components/Edges/EdgeText.tsx +++ b/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(null); const [edgeTextBbox, setEdgeTextBbox] = useState({ 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} /> )} diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx index 989ccaf3..4df73ac9 100644 --- a/src/components/Edges/SmoothStepEdge.tsx +++ b/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; diff --git a/src/components/Edges/StraightEdge.tsx b/src/components/Edges/StraightEdge.tsx index 17ebcb8b..1bd3dedf 100644 --- a/src/components/Edges/StraightEdge.tsx +++ b/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; diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 5fd3b728..e1c0c357 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/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) => { labelShowBg, labelBgStyle, labelBgPadding, + labelBgBorderRadius, className, isHidden, data, @@ -80,6 +82,7 @@ export default (EdgeComponent: ComponentType) => { labelShowBg={labelShowBg} labelBgStyle={labelBgStyle} labelBgPadding={labelBgPadding} + labelBgBorderRadius={labelBgBorderRadius} data={data} {...rest} /> diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 7b6efe86..e3de10c1 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/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} diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts index b03c33d5..22a3c156 100644 --- a/src/hooks/useElementUpdater.ts +++ b/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; } diff --git a/src/types/index.ts b/src/types/index.ts index a84d56fc..89486696 100644 --- a/src/types/index.ts +++ b/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 = {