fix legend

This commit is contained in:
Alexander Wang 2025-03-04 12:05:39 -07:00
parent 7f3984a8e2
commit 4b911ffd15
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
3 changed files with 366 additions and 0 deletions

View file

@ -20,6 +20,7 @@ import (
"oss.terrastruct.com/d2/d2parser"
"oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/lib/color"
"oss.terrastruct.com/d2/lib/geo"
"oss.terrastruct.com/d2/lib/textmeasure"
)
@ -135,9 +136,18 @@ func (c *compiler) compileLegend(g *d2graph.Graph, m *d2ir.Map) {
continue
}
}
obj.Box = &geo.Box{}
obj.TopLeft = geo.NewPoint(0, 0)
objects = append(objects, obj)
}
for _, edge := range legendGraph.Edges {
edge.Route = []*geo.Point{
{X: 0, Y: 0},
{X: 0, Y: 0},
}
}
legend := &d2graph.Legend{
Objects: objects,
Edges: legendGraph.Edges,

View file

@ -39,6 +39,7 @@ func TestExport(t *testing.T) {
t.Run("connection", testConnection)
t.Run("label", testLabel)
t.Run("theme", testTheme)
t.Run("legend", testLegend)
}
func testShape(t *testing.T) {
@ -204,6 +205,30 @@ func testTheme(t *testing.T) {
runa(t, tcs)
}
func testLegend(t *testing.T) {
tcs := []testCase{
{
name: "basic_legend",
dsl: `vars: {
d2-legend: {
legend: {
l1: Rectangles {shape: rectangle}
l2: Ovals {shape: oval}
l1 -> l2: Connection
}
}
}
x: {shape: rectangle}
y: {shape: oval}
x -> y: connects
`,
},
}
runa(t, tcs)
}
func runa(t *testing.T, tcs []testCase) {
for _, tc := range tcs {
tc := tc

View file

@ -0,0 +1,331 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "oval",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"dst": "y",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "connects",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
},
"legend": {
"shapes": [
{
"id": "legend",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "legend",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 1
},
{
"id": "legend.l1",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Rectangles",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 2
},
{
"id": "legend.l2",
"type": "oval",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Ovals",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 2
}
],
"connections": [
{
"id": "legend.(l1 -> l2)[0]",
"src": "legend.l1",
"srcArrow": "none",
"dst": "legend.l2",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "Connection",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 0,
"y": 0
},
{
"x": 0,
"y": 0
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}
}