luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #512 from alixander/group-label

Browse source 
sequence diagrams: Fix group label position
This commit is contained in:
Alexander Wang 2022-12-23 13:28:02 -08:00 committed by GitHub
commit 906998be5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 369 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ci/release/changelogs/next.md
View file

@ -8,6 +8,7 @@
#### Improvements 🧹
- Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474)
- Sequence diagram edge group labels have more reasonable padding. [#512](https://github.com/terrastruct/d2/pull/512)
#### Bugfixes ⛑️

22
d2exporter/export_test.go
View file

@ -8,12 +8,15 @@ import (
"cdr.dev/slog"
tassert "github.com/stretchr/testify/assert"
"oss.terrastruct.com/util-go/assert"
"oss.terrastruct.com/util-go/diff"
"oss.terrastruct.com/d2/d2compiler"
"oss.terrastruct.com/d2/d2exporter"
"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
"oss.terrastruct.com/d2/d2layouts/d2sequence"
"oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/d2themes/d2themescatalog"
"oss.terrastruct.com/d2/lib/geo"
@ -80,6 +83,23 @@ y: {shape: square}
}
},
},
{
name: "sequence_group_position",
dsl: `hey {
shape: sequence_diagram
a
b
group: {
a -> b
}
}
`,
assertions: func(t *testing.T, d *d2target.Diagram) {
tassert.Equal(t, "hey.group", d.Shapes[3].ID)
tassert.Equal(t, "INSIDE_TOP_LEFT", d.Shapes[3].LabelPosition)
},
},
}
runa(t, tcs)
@ -219,7 +239,7 @@ func run(t *testing.T, tc testCase) {
err = g.SetDimensions(nil, ruler, nil)
assert.JSON(t, nil, err)
err = d2dagrelayout.Layout(ctx, g)
err = d2sequence.Layout(ctx, g, d2dagrelayout.Layout)
if err != nil {
t.Fatal(err)
}

1
d2layouts/d2sequence/sequence_diagram.go
View file

@ -74,6 +74,7 @@ func newSequenceDiagram(objects []*d2graph.Object, messages []*d2graph.Edge) *se
// Groups may have more nested groups
for len(queue) > 0 {
curr := queue[0]
curr.LabelPosition = go2.Pointer(string(label.InsideTopLeft))
groups = append(groups, curr)
queue = queue[1:]
queue = append(queue, curr.ChildrenArray...)

5
e2etests/testdata/stable/sequence_diagram_groups/dagre/board.exp.json generated vendored
View file

@ -198,6 +198,7 @@
"underline": false,
"labelWidth": 30,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -237,6 +238,7 @@
"underline": false,
"labelWidth": 57,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -276,6 +278,7 @@
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -315,6 +318,7 @@
"underline": false,
"labelWidth": 58,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -394,6 +398,7 @@
"underline": false,
"labelWidth": 38,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},

12
e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 477 KiB

After

Width:  |  Height:  |  Size: 477 KiB

5
e2etests/testdata/stable/sequence_diagram_groups/elk/board.exp.json generated vendored
View file

@ -198,6 +198,7 @@
"underline": false,
"labelWidth": 30,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -237,6 +238,7 @@
"underline": false,
"labelWidth": 57,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -276,6 +278,7 @@
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -315,6 +318,7 @@
"underline": false,
"labelWidth": 58,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -394,6 +398,7 @@
"underline": false,
"labelWidth": 38,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},

12
e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 477 KiB

After

Width:  |  Height:  |  Size: 477 KiB

10
e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json generated vendored
View file

@ -158,6 +158,7 @@
"underline": false,
"labelWidth": 160,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -197,6 +198,7 @@
"underline": false,
"labelWidth": 238,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -236,6 +238,7 @@
"underline": false,
"labelWidth": 173,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 3
},
@ -275,6 +278,7 @@
"underline": false,
"labelWidth": 77,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 4
},
@ -354,6 +358,7 @@
"underline": false,
"labelWidth": 41,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 5
},
@ -393,6 +398,7 @@
"underline": false,
"labelWidth": 24,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -432,6 +438,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -471,6 +478,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -510,6 +518,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -549,6 +558,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},

22
e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 335 KiB

10
e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json generated vendored
View file

@ -158,6 +158,7 @@
"underline": false,
"labelWidth": 160,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -197,6 +198,7 @@
"underline": false,
"labelWidth": 238,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -236,6 +238,7 @@
"underline": false,
"labelWidth": 173,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 3
},
@ -275,6 +278,7 @@
"underline": false,
"labelWidth": 77,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 4
},
@ -354,6 +358,7 @@
"underline": false,
"labelWidth": 41,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 5
},
@ -393,6 +398,7 @@
"underline": false,
"labelWidth": 24,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -432,6 +438,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -471,6 +478,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -510,6 +518,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -549,6 +558,7 @@
"underline": false,
"labelWidth": 47,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},

22
e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 335 KiB

1
e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json generated vendored
View file

@ -478,6 +478,7 @@
"underline": false,
"labelWidth": 185,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},

4
e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 481 KiB

After

Width:  |  Height:  |  Size: 481 KiB

1
e2etests/testdata/stable/sequence_diagram_real/elk/board.exp.json generated vendored
View file

@ -478,6 +478,7 @@
"underline": false,
"labelWidth": 185,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},

4
e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 481 KiB

After

Width:  |  Height:  |  Size: 481 KiB

5
e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/board.exp.json generated vendored
View file

@ -158,6 +158,7 @@
"underline": false,
"labelWidth": 160,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -197,6 +198,7 @@
"underline": false,
"labelWidth": 238,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -236,6 +238,7 @@
"underline": false,
"labelWidth": 173,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 3
},
@ -275,6 +278,7 @@
"underline": false,
"labelWidth": 21,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 4
},
@ -314,6 +318,7 @@
"underline": false,
"labelWidth": 21,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 5
}

12
e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 330 KiB

5
e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/board.exp.json generated vendored
View file

@ -158,6 +158,7 @@
"underline": false,
"labelWidth": 160,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 1
},
@ -197,6 +198,7 @@
"underline": false,
"labelWidth": 238,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 2
},
@ -236,6 +238,7 @@
"underline": false,
"labelWidth": 173,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 3
},
@ -275,6 +278,7 @@
"underline": false,
"labelWidth": 21,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 4
},
@ -314,6 +318,7 @@
"underline": false,
"labelWidth": 21,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_LEFT",
"zIndex": 3,
"level": 5
}

12
e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 330 KiB

254
testdata/d2exporter/TestExport/shape/sequence_group_position.exp.json generated vendored Normal file
View file

@ -0,0 +1,254 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "hey",
"type": "sequence_diagram",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "hey",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 1
},
{
"id": "hey.a",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "a",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 2
},
{
"id": "hey.b",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "b",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 2
},
{
"id": "hey.group",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "#DEE1EB",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": true,
"fields": null,
"methods": null,
"columns": null,
"label": "group",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 3,
"level": 2
}
],
"connections": [
{
"id": "hey.(a -> b)[0]",
"src": "hey.a",
"srcArrow": "none",
"srcLabel": "",
"dst": "hey.b",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(hey.a -- )[0]",
"src": "hey.a",
"srcArrow": "none",
"srcLabel": "",
"dst": "a-lifeline-end-2251863791",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 6,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(hey.b -- )[0]",
"src": "hey.b",
"srcArrow": "none",
"srcLabel": "",
"dst": "b-lifeline-end-668380428",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 6,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
}
]
}