Merge pull request #452 from gavin-ts/connection-label-fill

render: add connection label fill

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 🧹
 

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)

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, `<rect x="%f" y="%f" width="%d" height="%d" style="fill:%s" />`,
+				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)

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"`

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
 }
 `,
 		}, {

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",

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",

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,
+      "labelWidth": 47,
-      "labelHeight": 0,
+      "labelHeight": 21,
-      "labelPosition": "",
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
       "labelPercentage": 0,
       "route": [
         {

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,
+      "labelWidth": 47,
-      "labelHeight": 0,
+      "labelHeight": 21,
-      "labelPosition": "",
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
       "labelPercentage": 0,
       "route": [
         {
@@ -114,7 +115,7 @@
         },
         {
           "x": 69,
-          "y": 238
+          "y": 359
         }
       ],
       "animated": false,