From ad24108446132936bb7aa87607c002693af98d53 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 9 Feb 2023 14:14:31 -0800 Subject: [PATCH 1/4] label fill --- d2exporter/export.go | 9 ++++++++- d2renderers/d2svg/d2svg.go | 11 +++++++++++ d2target/d2target.go | 5 +++-- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/d2exporter/export.go b/d2exporter/export.go index 418e71370..4aa15f976 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -129,6 +129,11 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape { shape.Color = text.GetColor(theme, shape.Italic) applyStyles(shape, obj) + if obj.IsSequenceDiagramGroup() { + shape.StrokeWidth = 0 + shape.Blend = true + } + switch obj.Attributes.Shape.Value { case d2target.ShapeCode, d2target.ShapeText: shape.Language = obj.Attributes.Language @@ -147,6 +152,9 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape { shape.LabelHeight = text.Dimensions.Height if obj.LabelPosition != nil { shape.LabelPosition = *obj.LabelPosition + if obj.IsSequenceDiagramGroup() { + shape.LabelFill = shape.Fill + } } shape.Tooltip = obj.Attributes.Tooltip @@ -163,7 +171,6 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection connection := d2target.BaseConnection() connection.ID = edge.AbsID() connection.ZIndex = edge.ZIndex - // edge.Edge.ID = go2.StringToIntHash(connection.ID) text := edge.Text() if edge.SrcArrow { diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 546ec2740..c3faf9f23 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -986,9 +986,20 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske fontColor = targetShape.Color } textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", targetShape.FontSize, fontColor) + x := labelTL.X + float64(targetShape.LabelWidth)/2. // text is vertically positioned at its baseline which is at labelTL+FontSize y := labelTL.Y + float64(targetShape.FontSize) + + // background does not exist for , so draw a rectangle behind it + if targetShape.LabelFill != "" { + fmt.Fprintf(writer, ``, + labelTL.X, labelTL.Y, + targetShape.LabelWidth, targetShape.LabelHeight, + targetShape.LabelFill, + ) + } + fmt.Fprintf(writer, `%s`, fontClass, x, y, diff --git a/d2target/d2target.go b/d2target/d2target.go index b5325d07e..a9647f8e8 100644 --- a/d2target/d2target.go +++ b/d2target/d2target.go @@ -236,8 +236,9 @@ type Text struct { Bold bool `json:"bold"` Underline bool `json:"underline"` - LabelWidth int `json:"labelWidth"` - LabelHeight int `json:"labelHeight"` + LabelWidth int `json:"labelWidth"` + LabelHeight int `json:"labelHeight"` + LabelFill string `json:"labelFill,omitempty"` } func BaseShape() *Shape { From 8736a16f8f3f43b4053daada519b063b02d83930 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 9 Feb 2023 14:16:20 -0800 Subject: [PATCH 2/4] cleanup --- d2exporter/export.go | 5 ----- d2renderers/d2svg/d2svg.go | 3 +-- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/d2exporter/export.go b/d2exporter/export.go index 4aa15f976..0237d554a 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -129,11 +129,6 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape { shape.Color = text.GetColor(theme, shape.Italic) applyStyles(shape, obj) - if obj.IsSequenceDiagramGroup() { - shape.StrokeWidth = 0 - shape.Blend = true - } - switch obj.Attributes.Shape.Value { case d2target.ShapeCode, d2target.ShapeText: shape.Language = obj.Attributes.Language diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index c3faf9f23..91cc687a8 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -986,12 +986,11 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske fontColor = targetShape.Color } textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", targetShape.FontSize, fontColor) - x := labelTL.X + float64(targetShape.LabelWidth)/2. // text is vertically positioned at its baseline which is at labelTL+FontSize y := labelTL.Y + float64(targetShape.FontSize) - // background does not exist for , so draw a rectangle behind it + // background style does not exist for , so draw a rectangle behind it to emulate if targetShape.LabelFill != "" { fmt.Fprintf(writer, ``, labelTL.X, labelTL.Y, From b096ebdb970bda36acf47dca2890116d1acf634c Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 9 Feb 2023 14:16:43 -0800 Subject: [PATCH 3/4] changelog --- ci/release/changelogs/next.md | 1 + 1 file changed, 1 insertion(+) diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 532aa4df1..fd95f04a1 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -29,6 +29,7 @@ - `--force-appendix` flag adds an appendix to SVG outputs with tooltips or links. [#761](https://github.com/terrastruct/d2/pull/761) - `d2 themes` subcommand to list themes. [#760](https://github.com/terrastruct/d2/pull/760) - `sql_table` header left-aligned with column [#769](https://github.com/terrastruct/d2/pull/769) +- Sequence diagram edge group labels are clearer [#782](https://github.com/terrastruct/d2/pull/782) #### Bugfixes ⛑️ From 675e2ea6ec8d3a55d56661164774d9366c3fcd10 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 9 Feb 2023 14:30:38 -0800 Subject: [PATCH 4/4] tests --- .../diagram_wider_than_tooltip/sketch.exp.svg | 2 +- .../dagre/board.exp.json | 11 +++++++++++ .../dagre/sketch.exp.svg | 2 +- .../elk/board.exp.json | 11 +++++++++++ .../elk/sketch.exp.svg | 2 +- .../sequence_diagram_groups/dagre/board.exp.json | 5 +++++ .../sequence_diagram_groups/dagre/sketch.exp.svg | 2 +- .../stable/sequence_diagram_groups/elk/board.exp.json | 5 +++++ .../stable/sequence_diagram_groups/elk/sketch.exp.svg | 2 +- .../dagre/board.exp.json | 10 ++++++++++ .../dagre/sketch.exp.svg | 2 +- .../sequence_diagram_nested_groups/elk/board.exp.json | 10 ++++++++++ .../sequence_diagram_nested_groups/elk/sketch.exp.svg | 2 +- .../stable/sequence_diagram_real/dagre/board.exp.json | 1 + .../stable/sequence_diagram_real/dagre/sketch.exp.svg | 2 +- .../stable/sequence_diagram_real/elk/board.exp.json | 1 + .../stable/sequence_diagram_real/elk/sketch.exp.svg | 2 +- .../dagre/board.exp.json | 5 +++++ .../dagre/sketch.exp.svg | 2 +- .../elk/board.exp.json | 5 +++++ .../elk/sketch.exp.svg | 2 +- .../dagre/board.exp.json | 3 +++ .../dagre/sketch.exp.svg | 2 +- .../elk/board.exp.json | 3 +++ .../elk/sketch.exp.svg | 2 +- .../TestExport/shape/sequence_group_position.exp.json | 1 + 26 files changed, 84 insertions(+), 13 deletions(-) diff --git a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg index 41c015af4..f174f6658 100644 --- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg +++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg @@ -39,7 +39,7 @@ width="1932" height="2282" viewBox="-134 -49 1932 2282">