Merge pull request #2326 from alixander/fix-connection-gradient

d2svg: parse connection label fill gradients
terrastruct · Feb 3, 2025 · 5778bb9 · 5778bb9
2 parents 7b140e7 + 5978587
commit 5778bb9
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 180 deletions.
diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
@@ -28,3 +28,4 @@
 - Globs: fixes edge case where globs with imported boards would create empty boards [#2247](https://github.com/terrastruct/d2/pull/2247)
 - Sequence diagrams: fixes alignment of notes when self messages are above it [#2264](https://github.com/terrastruct/d2/pull/2264)
 - Null: fixes `null`ing a connection with absolute syntax [#2318](https://github.com/terrastruct/d2/issues/2318)
+- Gradients: works with connection fills [#2326](https://github.com/terrastruct/d2/pull/2326)
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
@@ -1906,6 +1906,9 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 		if color.IsGradient(c.Stroke) {
 			defineGradients(buf, c.Stroke)
 		}
+		if color.IsGradient(c.Fill) {
+			defineGradients(buf, c.Fill)
+		}
 	}
 
 	// Apply hash on IDs for targeting, to be specific for this diagram

diff --git a/e2etests/testdata/txtar/gradient/dagre/board.exp.json b/e2etests/testdata/txtar/gradient/dagre/board.exp.json
diff --git a/e2etests/testdata/txtar/gradient/dagre/sketch.exp.svg b/e2etests/testdata/txtar/gradient/dagre/sketch.exp.svg
diff --git a/e2etests/testdata/txtar/gradient/elk/board.exp.json b/e2etests/testdata/txtar/gradient/elk/board.exp.json
diff --git a/e2etests/testdata/txtar/gradient/elk/sketch.exp.svg b/e2etests/testdata/txtar/gradient/elk/sketch.exp.svg
diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt
@@ -468,7 +468,7 @@ colors: {
   style.stroke: "linear-gradient(to right, red, blue, green)"
   style.font-color: "linear-gradient(to bottom right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%)"
 }
-gradient -> colors
+gradient -> colors: foobar {style.font-color: red; style.stroke: red; style.fill: "radial-gradient(#ffffff, #000000)"}
 
 -- var_in_markdown --
 vars: {