diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 5ea2ca695..ccfbc47de 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -2,6 +2,7 @@ - Diagram padding can now can be configured in the CLI (default 100px). [https://github.com/terrastruct/d2/pull/431](https://github.com/terrastruct/d2/pull/431) +- Connection label backgrounds can now be set with the `style.fill` keyword. [https://github.com/terrastruct/d2/pull/452](https://github.com/terrastruct/d2/pull/452) #### Improvements 🧹 diff --git a/d2exporter/export.go b/d2exporter/export.go index 1f2a15b8d..96900ff01 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -200,6 +200,10 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection connection.StrokeWidth, _ = strconv.Atoi(edge.Attributes.Style.StrokeWidth.Value) } + if edge.Attributes.Style.Fill != nil { + connection.Fill = edge.Attributes.Style.Fill.Value + } + connection.FontSize = text.FontSize if edge.Attributes.Style.FontSize != nil { connection.FontSize, _ = strconv.Atoi(edge.Attributes.Style.FontSize.Value) diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 022fcf66d..6e31221c8 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -432,6 +432,11 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co if connection.Color != "" { fontColor = connection.Color } + + if connection.Fill != "" { + fmt.Fprintf(writer, ``, + labelTL.X, labelTL.Y, connection.LabelWidth, connection.LabelHeight, connection.Fill) + } textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", connection.FontSize, fontColor) x := labelTL.X + float64(connection.LabelWidth)/2 y := labelTL.Y + float64(connection.FontSize) diff --git a/d2target/d2target.go b/d2target/d2target.go index 41dc4c718..ae098fd28 100644 --- a/d2target/d2target.go +++ b/d2target/d2target.go @@ -207,6 +207,7 @@ type Connection struct { StrokeDash float64 `json:"strokeDash"` StrokeWidth int `json:"strokeWidth"` Stroke string `json:"stroke"` + Fill string `json:"fill,omitempty"` Text LabelPosition string `json:"labelPosition"` diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 29eeb130b..be9381938 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -917,12 +917,13 @@ y: { } } -x -> y: { +x -> y: in style { style: { stroke: green opacity: 0.5 stroke-width: 2 stroke-dash: 5 + fill: lavender } } `, @@ -1041,6 +1042,7 @@ size S -> size M: custom 15 { } size XXXL -> custom 64: custom 48 { style.font-size: 48 + style.fill: lavender } `, }, { diff --git a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json index 3a91ea14e..0579a08d9 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json @@ -591,6 +591,7 @@ "strokeDash": 0, "strokeWidth": 2, "stroke": "#0D32B2", + "fill": "lavender", "label": "custom 48", "fontSize": 48, "fontFamily": "DEFAULT", diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg index 578b7397c..0d98903f7 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg @@ -18,7 +18,7 @@ width="2360" height="632" viewBox="-100 -100 2360 632">size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 diff --git a/e2etests/testdata/stable/font_sizes/elk/board.exp.json b/e2etests/testdata/stable/font_sizes/elk/board.exp.json index 2d5446e61..9658ee501 100644 --- a/e2etests/testdata/stable/font_sizes/elk/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/elk/board.exp.json @@ -573,6 +573,7 @@ "strokeDash": 0, "strokeWidth": 2, "stroke": "#0D32B2", + "fill": "lavender", "label": "custom 48", "fontSize": 48, "fontFamily": "DEFAULT", diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg index cb9321042..9c69d48ce 100644 --- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg @@ -18,7 +18,7 @@ width="1965" height="793" viewBox="-88 -88 1965 793">size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 diff --git a/e2etests/testdata/stable/stylish/dagre/board.exp.json b/e2etests/testdata/stable/stylish/dagre/board.exp.json index d85374df4..7dce7c5ce 100644 --- a/e2etests/testdata/stable/stylish/dagre/board.exp.json +++ b/e2etests/testdata/stable/stylish/dagre/board.exp.json @@ -95,7 +95,8 @@ "strokeDash": 5, "strokeWidth": 2, "stroke": "green", - "label": "", + "fill": "lavender", + "label": "in style", "fontSize": 16, "fontFamily": "DEFAULT", "language": "", @@ -103,9 +104,9 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 0, - "labelHeight": 0, - "labelPosition": "", + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg index 1b54d4d17..8283749e7 100644 --- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg @@ -28,11 +28,21 @@ width="314" height="552" viewBox="-100 -100 314 552"> \ No newline at end of file diff --git a/e2etests/testdata/stable/stylish/elk/board.exp.json b/e2etests/testdata/stable/stylish/elk/board.exp.json index 0cd252c22..f2da4deeb 100644 --- a/e2etests/testdata/stable/stylish/elk/board.exp.json +++ b/e2etests/testdata/stable/stylish/elk/board.exp.json @@ -46,7 +46,7 @@ "type": "", "pos": { "x": 12, - "y": 238 + "y": 359 }, "width": 114, "height": 126, @@ -95,7 +95,8 @@ "strokeDash": 5, "strokeWidth": 2, "stroke": "green", - "label": "", + "fill": "lavender", + "label": "in style", "fontSize": 16, "fontFamily": "DEFAULT", "language": "", @@ -103,9 +104,9 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 0, - "labelHeight": 0, - "labelPosition": "", + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { @@ -114,7 +115,7 @@ }, { "x": 69, - "y": 238 + "y": 359 } ], "animated": false, diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg index eff681d67..ec024fa78 100644 --- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg @@ -2,7 +2,7 @@ \ No newline at end of file