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

Merge pull request #484 from gavin-ts/dagre-min-spacing

Browse source 
render: dagre layout min spacing
This commit is contained in:
gavin-ts 2022-12-20 16:59:34 -08:00 committed by GitHub
commit ddcd6b5d54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 1084 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,3 +9,4 @@
- `d2 fmt` only rewrites if it has changes, instead of always rewriting. [#470](https://github.com/terrastruct/d2/pull/470) - `d2 fmt` only rewrites if it has changes, instead of always rewriting. [#470](https://github.com/terrastruct/d2/pull/470)
- Fixed an issue where text could overflow in sql_table shapes. [#458](https://github.com/terrastruct/d2/pull/458) - Fixed an issue where text could overflow in sql_table shapes. [#458](https://github.com/terrastruct/d2/pull/458)
- Fixed an issue with elk layouts accounting for edge labels as if they were placed on the side of the edge. [#483](https://github.com/terrastruct/d2/pull/483) - Fixed an issue with elk layouts accounting for edge labels as if they were placed on the side of the edge. [#483](https://github.com/terrastruct/d2/pull/483)
- Fixed an issue where dagre layouts may not have enough spacing for all edge labels. [#484](https://github.com/terrastruct/d2/pull/484)

15
d2layouts/d2dagrelayout/layout.go
View file

@ -64,22 +64,35 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
} }
rootAttrs := dagreGraphAttrs{ rootAttrs := dagreGraphAttrs{
ranksep: 100,
edgesep: 40, edgesep: 40,
nodesep: 60, nodesep: 60,
} }
isHorizontal := false
switch g.Root.Attributes.Direction.Value { switch g.Root.Attributes.Direction.Value {
case "down": case "down":
rootAttrs.rankdir = "TB" rootAttrs.rankdir = "TB"
case "right": case "right":
rootAttrs.rankdir = "LR" rootAttrs.rankdir = "LR"
isHorizontal = true
case "left": case "left":
rootAttrs.rankdir = "RL" rootAttrs.rankdir = "RL"
isHorizontal = true
case "up": case "up":
rootAttrs.rankdir = "BT" rootAttrs.rankdir = "BT"
default: default:
rootAttrs.rankdir = "TB" rootAttrs.rankdir = "TB"
} }
maxLabelSize := 0
for _, edge := range g.Edges {
size := edge.LabelDimensions.Width
if !isHorizontal {
size = edge.LabelDimensions.Height
}
maxLabelSize = go2.Max(maxLabelSize, size)
}
rootAttrs.ranksep = go2.Max(100, maxLabelSize+40)
configJS := setGraphAttrs(rootAttrs) configJS := setGraphAttrs(rootAttrs)
if _, err := vm.RunString(configJS); err != nil { if _, err := vm.RunString(configJS); err != nil {
return err return err

23
e2etests/regression_test.go
View file

@ -148,6 +148,29 @@ apollo_workflow: apollo-deploy.yaml {
style.font-size: 20 style.font-size: 20
} }
} }
`,
},
{
name: "dagre_edge_label_spacing",
script: `direction: right
build_workflow: lambda-build.yaml {
push: Push to main branch {
style.font-size: 25
}
GHA: GitHub Actions {
style.font-size: 25
}
S3.style.font-size: 25
Terraform.style.font-size: 25
AWS.style.font-size: 25
push -> GHA: Triggers
GHA -> S3: Builds zip & pushes it
S3 <-> Terraform: Pulls zip to deploy
Terraform -> AWS: Changes the live lambdas
}
`, `,
}, },
} }

439
e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,439 @@
{
"name": "",
"shapes": [
{
"id": "build_workflow",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 2148,
"height": 237,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "lambda-build.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 226,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "build_workflow.push",
"type": "",
"pos": {
"x": 105,
"y": 50
},
"width": 330,
"height": 137,
"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": "Push to main branch",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 230,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.GHA",
"type": "",
"pos": {
"x": 644,
"y": 50
},
"width": 269,
"height": 137,
"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": "GitHub Actions",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 169,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.S3",
"type": "",
"pos": {
"x": 1122,
"y": 50
},
"width": 131,
"height": 137,
"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": "S3",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 31,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.Terraform",
"type": "",
"pos": {
"x": 1462,
"y": 50
},
"width": 218,
"height": 137,
"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": "Terraform",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 118,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.AWS",
"type": "",
"pos": {
"x": 1889,
"y": 50
},
"width": 155,
"height": 137,
"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": "AWS",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 55,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [
{
"id": "build_workflow.(push -> GHA)[0]",
"src": "build_workflow.push",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Triggers",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 54,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 435.5,
"y": 118.5
},
{
"x": 518.3,
"y": 118.5
},
{
"x": 559.9,
"y": 118.5
},
{
"x": 643.5,
"y": 118.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(GHA -> S3)[0]",
"src": "build_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.S3",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Builds zip & pushes it",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 138,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 913.5,
"y": 118.5
},
{
"x": 996.3,
"y": 118.5
},
{
"x": 1037.9,
"y": 118.5
},
{
"x": 1121.5,
"y": 118.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(S3 <-> Terraform)[0]",
"src": "build_workflow.S3",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "build_workflow.Terraform",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Pulls zip to deploy",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 119,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1253.5,
"y": 118.5
},
{
"x": 1336.3,
"y": 118.5
},
{
"x": 1377.9,
"y": 118.5
},
{
"x": 1461.5,
"y": 118.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(Terraform -> AWS)[0]",
"src": "build_workflow.Terraform",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Changes the live lambdas",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 169,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1680.5,
"y": 118.5
},
{
"x": 1763.3,
"y": 118.5
},
{
"x": 1804.9,
"y": 118.5
},
{
"x": 1888.5,
"y": 118.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

48
e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 794 KiB

403
e2etests/testdata/regression/dagre_edge_label_spacing/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,403 @@
{
"name": "",
"shapes": [
{
"id": "build_workflow",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 1893,
"height": 287,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "lambda-build.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 226,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "build_workflow.push",
"type": "",
"pos": {
"x": 87,
"y": 87
},
"width": 330,
"height": 137,
"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": "Push to main branch",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 230,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.GHA",
"type": "",
"pos": {
"x": 511,
"y": 87
},
"width": 269,
"height": 137,
"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": "GitHub Actions",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 169,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.S3",
"type": "",
"pos": {
"x": 958,
"y": 87
},
"width": 131,
"height": 137,
"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": "S3",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 31,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.Terraform",
"type": "",
"pos": {
"x": 1248,
"y": 87
},
"width": 218,
"height": 137,
"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": "Terraform",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 118,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "build_workflow.AWS",
"type": "",
"pos": {
"x": 1675,
"y": 87
},
"width": 155,
"height": 137,
"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": "AWS",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 55,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [
{
"id": "build_workflow.(push -> GHA)[0]",
"src": "build_workflow.push",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Triggers",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 54,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 417,
"y": 155.5
},
{
"x": 511,
"y": 155.5
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(GHA -> S3)[0]",
"src": "build_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.S3",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Builds zip & pushes it",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 138,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 780,
"y": 155.5
},
{
"x": 958,
"y": 155.5
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(S3 <-> Terraform)[0]",
"src": "build_workflow.S3",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "build_workflow.Terraform",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Pulls zip to deploy",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 119,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1089,
"y": 155.5
},
{
"x": 1248,
"y": 155.5
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "build_workflow.(Terraform -> AWS)[0]",
"src": "build_workflow.Terraform",
"srcArrow": "none",
"srcLabel": "",
"dst": "build_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Changes the live lambdas",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 169,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1466,
"y": 155.5
},
{
"x": 1675,
"y": 155.5
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

48
e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 794 KiB

92
e2etests/testdata/regression/elk_alignment/dagre/board.exp.json generated vendored
View file

@ -9,7 +9,7 @@
"y": 0 "y": 0
}, },
"width": 430, "width": 430,
"height": 1235, "height": 1488,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -46,7 +46,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 50, "x": 50,
"y": 50 "y": 73
}, },
"width": 330, "width": 330,
"height": 137, "height": 137,
@ -86,7 +86,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 81, "x": 81,
"y": 287 "y": 356
}, },
"width": 269, "width": 269,
"height": 137, "height": 137,
@ -126,7 +126,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 150, "x": 150,
"y": 524 "y": 639
}, },
"width": 131, "width": 131,
"height": 137, "height": 137,
@ -166,7 +166,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 106, "x": 106,
"y": 811 "y": 995
}, },
"width": 218, "width": 218,
"height": 137, "height": 137,
@ -206,7 +206,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 138, "x": 138,
"y": 1048 "y": 1278
}, },
"width": 155, "width": 155,
"height": 137, "height": 137,
@ -249,7 +249,7 @@
"y": 0 "y": 0
}, },
"width": 371, "width": 371,
"height": 711, "height": 849,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -286,7 +286,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 520, "x": 520,
"y": 50 "y": 73
}, },
"width": 271, "width": 271,
"height": 137, "height": 137,
@ -326,7 +326,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 521, "x": 521,
"y": 287 "y": 356
}, },
"width": 269, "width": 269,
"height": 137, "height": 137,
@ -366,7 +366,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 578, "x": 578,
"y": 524 "y": 639
}, },
"width": 155, "width": 155,
"height": 137, "height": 137,
@ -409,7 +409,7 @@
"y": 0 "y": 0
}, },
"width": 369, "width": 369,
"height": 711, "height": 849,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -446,7 +446,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 947, "x": 947,
"y": 50 "y": 73
}, },
"width": 238, "width": 238,
"height": 137, "height": 137,
@ -486,7 +486,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 931, "x": 931,
"y": 287 "y": 356
}, },
"width": 269, "width": 269,
"height": 137, "height": 137,
@ -526,7 +526,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 988, "x": 988,
"y": 524 "y": 639
}, },
"width": 155, "width": 155,
"height": 137, "height": 137,
@ -590,19 +590,19 @@
"route": [ "route": [
{ {
"x": 215, "x": 215,
"y": 187 "y": 210
}, },
{ {
"x": 215, "x": 215,
"y": 227 "y": 268.4
}, },
{ {
"x": 215, "x": 215,
"y": 247 "y": 297.6
}, },
{ {
"x": 215, "x": 215,
"y": 287 "y": 356
} }
], ],
"isCurve": true, "isCurve": true,
@ -638,19 +638,19 @@
"route": [ "route": [
{ {
"x": 215, "x": 215,
"y": 424 "y": 493
}, },
{ {
"x": 215, "x": 215,
"y": 464 "y": 551.4
}, },
{ {
"x": 215, "x": 215,
"y": 484 "y": 580.6
}, },
{ {
"x": 215, "x": 215,
"y": 524 "y": 639
} }
], ],
"isCurve": true, "isCurve": true,
@ -686,19 +686,19 @@
"route": [ "route": [
{ {
"x": 215, "x": 215,
"y": 661 "y": 776
}, },
{ {
"x": 215, "x": 215,
"y": 701 "y": 834.4
}, },
{ {
"x": 215, "x": 215,
"y": 771 "y": 936.6
}, },
{ {
"x": 215, "x": 215,
"y": 811 "y": 995
} }
], ],
"isCurve": true, "isCurve": true,
@ -734,19 +734,19 @@
"route": [ "route": [
{ {
"x": 215, "x": 215,
"y": 948 "y": 1132
}, },
{ {
"x": 215, "x": 215,
"y": 988 "y": 1190.4
}, },
{ {
"x": 215, "x": 215,
"y": 1008 "y": 1219.6
}, },
{ {
"x": 215, "x": 215,
"y": 1048 "y": 1278
} }
], ],
"isCurve": true, "isCurve": true,
@ -782,19 +782,19 @@
"route": [ "route": [
{ {
"x": 655.5, "x": 655.5,
"y": 187 "y": 210
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 227 "y": 268.4
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 247 "y": 297.6
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 287 "y": 356
} }
], ],
"isCurve": true, "isCurve": true,
@ -830,19 +830,19 @@
"route": [ "route": [
{ {
"x": 655.5, "x": 655.5,
"y": 424 "y": 493
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 464 "y": 551.4
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 484 "y": 580.6
}, },
{ {
"x": 655.5, "x": 655.5,
"y": 524 "y": 639
} }
], ],
"isCurve": true, "isCurve": true,
@ -878,19 +878,19 @@
"route": [ "route": [
{ {
"x": 1065.5, "x": 1065.5,
"y": 187 "y": 210
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 227 "y": 268.4
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 247 "y": 297.6
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 287 "y": 356
} }
], ],
"isCurve": true, "isCurve": true,
@ -926,19 +926,19 @@
"route": [ "route": [
{ {
"x": 1065.5, "x": 1065.5,
"y": 424 "y": 493
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 464 "y": 551.4
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 484 "y": 580.6
}, },
{ {
"x": 1065.5, "x": 1065.5,
"y": 524 "y": 639
} }
], ],
"isCurve": true, "isCurve": true,

22
e2etests/testdata/regression/elk_alignment/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: 799 KiB

After

Width:  |  Height:  |  Size: 799 KiB

24
e2etests/testdata/stable/font_sizes/dagre/board.exp.json generated vendored
View file

@ -6,7 +6,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 1293, "x": 1293,
"y": 278 "y": 279
}, },
"width": 145, "width": 145,
"height": 122, "height": 122,
@ -86,7 +86,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 0, "x": 0,
"y": 276 "y": 277
}, },
"width": 147, "width": 147,
"height": 126, "height": 126,
@ -446,7 +446,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 840, "x": 840,
"y": 246 "y": 247
}, },
"width": 393, "width": 393,
"height": 186, "height": 186,
@ -514,15 +514,15 @@
}, },
{ {
"x": 1365, "x": 1365,
"y": 183 "y": 183.4
}, },
{ {
"x": 1365, "x": 1365,
"y": 212.4 "y": 213.1
}, },
{ {
"x": 1365, "x": 1365,
"y": 278 "y": 279.5
} }
], ],
"isCurve": true, "isCurve": true,
@ -562,15 +562,15 @@
}, },
{ {
"x": 73.5, "x": 73.5,
"y": 183.9 "y": 184.3
}, },
{ {
"x": 73.5, "x": 73.5,
"y": 212 "y": 212.7
}, },
{ {
"x": 73.5, "x": 73.5,
"y": 276 "y": 277.5
} }
], ],
"isCurve": true, "isCurve": true,
@ -611,15 +611,15 @@
}, },
{ {
"x": 1036, "x": 1036,
"y": 186 "y": 186.4
}, },
{ {
"x": 1036, "x": 1036,
"y": 206 "y": 206.7
}, },
{ {
"x": 1036, "x": 1036,
"y": 246 "y": 247.5
} }
], ],
"isCurve": true, "isCurve": true,

10
e2etests/testdata/stable/font_sizes/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: 471 KiB

After

Width:  |  Height:  |  Size: 471 KiB

38
e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json generated vendored
View file

@ -46,7 +46,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 216, "x": 216,
"y": 216 "y": 258
}, },
"width": 157, "width": 157,
"height": 126, "height": 126,
@ -86,7 +86,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 171, "x": 171,
"y": 442 "y": 526
}, },
"width": 247, "width": 247,
"height": 146, "height": 146,
@ -126,7 +126,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 108, "x": 108,
"y": 688 "y": 814
}, },
"width": 374, "width": 374,
"height": 186, "height": 186,
@ -166,7 +166,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 0, "x": 0,
"y": 974 "y": 1142
}, },
"width": 589, "width": 589,
"height": 230, "height": 230,
@ -234,15 +234,15 @@
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 156 "y": 172.8
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 176 "y": 201.2
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 216 "y": 258
} }
], ],
"isCurve": true, "isCurve": true,
@ -278,19 +278,19 @@
"route": [ "route": [
{ {
"x": 294.5, "x": 294.5,
"y": 342 "y": 384
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 382 "y": 440.8
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 402 "y": 469.2
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 442 "y": 526
} }
], ],
"isCurve": true, "isCurve": true,
@ -326,19 +326,19 @@
"route": [ "route": [
{ {
"x": 294.5, "x": 294.5,
"y": 588 "y": 672
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 628 "y": 728.8
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 648 "y": 757.2
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 688 "y": 814
} }
], ],
"isCurve": true, "isCurve": true,
@ -374,19 +374,19 @@
"route": [ "route": [
{ {
"x": 294.5, "x": 294.5,
"y": 874 "y": 1000
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 914 "y": 1056.8
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 934 "y": 1085.2
}, },
{ {
"x": 294.5, "x": 294.5,
"y": 974 "y": 1142
} }
], ],
"isCurve": true, "isCurve": true,

14
e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg <svg
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="789" height="1404" viewBox="-100 -100 789 1404"><style type="text/css"> width="789" height="1572" viewBox="-100 -100 789 1572"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -18,12 +18,12 @@ width="789" height="1404" viewBox="-100 -100 789 1404"><style type="text/css">
} }
]]> ]]>
</style><g id="eight"><g class="shape" ><rect x="233" y="0" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="58.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="216" y="216" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="282.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="171" y="442" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="524.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="108" y="688" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="802.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="0" y="974" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="1123.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 294.500000 118.000000 C 294.500000 156.000000 294.500000 176.000000 294.500000 212.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#795176927)"/><text class="text-italic" x="294.500000" y="170.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 294.500000 344.000000 C 294.500000 382.000000 294.500000 402.000000 294.500000 438.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#795176927)"/><text class="text-italic" x="295.000000" y="401.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 294.500000 590.000000 C 294.500000 628.000000 294.500000 648.000000 294.500000 684.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#795176927)"/><text class="text-italic" x="295.000000" y="656.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 294.500000 876.000000 C 294.500000 914.000000 294.500000 934.000000 294.500000 970.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#795176927)"/><text class="text-italic" x="294.500000" y="954.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="795176927" maskUnits="userSpaceOnUse" x="0" y="0" width="789" height="1404"> </style><g id="eight"><g class="shape" ><rect x="233" y="0" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="58.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="216" y="258" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="324.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="171" y="526" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="608.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="108" y="814" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="928.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="0" y="1142" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="1291.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 294.500000 118.000000 C 294.500000 172.800000 294.500000 201.200000 294.500000 254.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="191.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 294.500000 386.000000 C 294.500000 440.800000 294.500000 469.200000 294.500000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="464.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 294.500000 674.000000 C 294.500000 728.800000 294.500000 757.200000 294.500000 810.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="761.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 294.500000 1002.000000 C 294.500000 1056.800000 294.500000 1085.200000 294.500000 1138.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="1101.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="1163247064" maskUnits="userSpaceOnUse" x="0" y="0" width="789" height="1572">
<rect x="0" y="0" width="789" height="1404" fill="white"></rect> <rect x="0" y="0" width="789" height="1572" fill="white"></rect>
<rect x="278.000000" y="158.000000" width="33" height="16" fill="black"></rect> <rect x="278.000000" y="179.000000" width="33" height="16" fill="black"></rect>
<rect x="238.000000" y="377.000000" width="114" height="31" fill="black"></rect> <rect x="238.000000" y="440.000000" width="114" height="31" fill="black"></rect>
<rect x="194.000000" y="608.000000" width="202" height="61" fill="black"></rect> <rect x="194.000000" y="713.000000" width="202" height="61" fill="black"></rect>
<rect x="124.000000" y="873.000000" width="341" height="102" fill="black"></rect> <rect x="124.000000" y="1020.000000" width="341" height="102" fill="black"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB

8
e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json generated vendored
View file

@ -46,7 +46,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 0, "x": 0,
"y": 226 "y": 299
}, },
"width": 113, "width": 113,
"height": 126, "height": 126,
@ -114,15 +114,15 @@
}, },
{ {
"x": 56.5, "x": 56.5,
"y": 166 "y": 195.2
}, },
{ {
"x": 56.5, "x": 56.5,
"y": 186 "y": 229.9
}, },
{ {
"x": 56.5, "x": 56.5,
"y": 226 "y": 299.5
} }
], ],
"isCurve": true, "isCurve": true,

8
e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg <svg
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css"> width="313" height="625" viewBox="-100 -100 313 625"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -18,9 +18,9 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
} }
]]> ]]>
</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1362542815)"/><text class="text-italic" x="57.000000" y="126.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="57.000000" dy="0.000000">There</tspan><tspan x="57.000000" dy="16.625000">once</tspan><tspan x="57.000000" dy="16.625000">was</tspan><tspan x="57.000000" dy="16.625000">a</tspan><tspan x="57.000000" dy="16.625000">very</tspan><tspan x="57.000000" dy="16.625000">tall</tspan><tspan x="57.000000" dy="16.625000">edge</tspan><tspan x="57.000000" dy="16.625000">label</tspan></text></g><mask id="1362542815" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="552"> </style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="299" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="365.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 195.200000 56.500000 229.900000 56.500000 295.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3435886913)"/><text class="text-italic" x="57.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="57.000000" dy="0.000000">There</tspan><tspan x="57.000000" dy="16.625000">once</tspan><tspan x="57.000000" dy="16.625000">was</tspan><tspan x="57.000000" dy="16.625000">a</tspan><tspan x="57.000000" dy="16.625000">very</tspan><tspan x="57.000000" dy="16.625000">tall</tspan><tspan x="57.000000" dy="16.625000">edge</tspan><tspan x="57.000000" dy="16.625000">label</tspan></text></g><mask id="3435886913" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="625">
<rect x="0" y="0" width="313" height="552" fill="white"></rect> <rect x="0" y="0" width="313" height="625" fill="white"></rect>
<rect x="38.000000" y="110.000000" width="38" height="133" fill="black"></rect> <rect x="38.000000" y="146.000000" width="38" height="133" fill="black"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 468 KiB