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

Merge pull request #483 from gavin-ts/use-elk-edge-label-positioning

Browse source 
render: use elk edge label positioning
This commit is contained in:
gavin-ts 2022-12-20 15:49:58 -08:00 committed by GitHub
commit e69d476b66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 2278 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,3 +8,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)

5
d2layouts/d2elklayout/layout.go
View file

@ -48,6 +48,7 @@ type ELKLabel struct {
Y float64 `json:"y"` Y float64 `json:"y"`
Width float64 `json:"width"` Width float64 `json:"width"`
Height float64 `json:"height"` Height float64 `json:"height"`
LayoutOptions *ELKLayoutOptions `json:"layoutOptions,omitempty"`
} }
type ELKPoint struct { type ELKPoint struct {
@ -85,6 +86,7 @@ type ELKLayoutOptions struct {
EdgeNodeSpacing float64 `json:"spacing.edgeNodeBetweenLayers,omitempty"` EdgeNodeSpacing float64 `json:"spacing.edgeNodeBetweenLayers,omitempty"`
Direction string `json:"elk.direction"` Direction string `json:"elk.direction"`
SelfLoopSpacing float64 `json:"elk.spacing.nodeSelfLoop"` SelfLoopSpacing float64 `json:"elk.spacing.nodeSelfLoop"`
InlineEdgeLabels bool `json:"elk.edgeLabels.inline,omitempty"`
} }
func Layout(ctx context.Context, g *d2graph.Graph) (err error) { func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
@ -186,6 +188,9 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
Text: edge.Attributes.Label.Value, Text: edge.Attributes.Label.Value,
Width: float64(edge.LabelDimensions.Width), Width: float64(edge.LabelDimensions.Width),
Height: float64(edge.LabelDimensions.Height), Height: float64(edge.LabelDimensions.Height),
LayoutOptions: &ELKLayoutOptions{
InlineEdgeLabels: true,
},
}) })
} }
elkGraph.Edges = append(elkGraph.Edges, e) elkGraph.Edges = append(elkGraph.Edges, e)

79
e2etests/regression_test.go
View file

@ -69,6 +69,85 @@ table_constrained: sql_table_constrained_overflow {
constraint: foreign_key constraint: foreign_key
} }
} }
`,
},
{
name: "elk_alignment",
script: `
direction: down
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 {
style.font-size: 20
}
GHA -> S3: Builds zip and pushes it {
style.font-size: 20
}
S3 <-> Terraform: Pulls zip to deploy {
style.font-size: 20
}
Terraform -> AWS: Changes live lambdas {
style.font-size: 20
}
}
deploy_workflow: lambda-deploy.yaml {
manual: Manual Trigger {
style.font-size: 25
}
GHA: GitHub Actions {
style.font-size: 25
}
AWS.style.font-size: 25
Manual -> GHA: Launches {
style.font-size: 20
}
GHA -> AWS: Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform {
style.font-size: 20
}
}
apollo_workflow: apollo-deploy.yaml {
apollo: Apollo Repo {
style.font-size: 25
}
GHA: GitHub Actions {
style.font-size: 25
}
AWS.style.font-size: 25
apollo -> GHA: Triggered manually/push to master test test test test test test test {
style.font-size: 20
}
GHA -> AWS: test {
style.font-size: 20
}
}
`, `,
}, },
} }

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

@ -0,0 +1,951 @@
{
"name": "",
"shapes": [
{
"id": "build_workflow",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 430,
"height": 1235,
"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": 50,
"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": 81,
"y": 287
},
"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": 150,
"y": 524
},
"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": 106,
"y": 811
},
"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": 138,
"y": 1048
},
"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
},
{
"id": "deploy_workflow",
"type": "",
"pos": {
"x": 470,
"y": 0
},
"width": 371,
"height": 711,
"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-deploy.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 247,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "deploy_workflow.manual",
"type": "",
"pos": {
"x": 520,
"y": 50
},
"width": 271,
"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": "Manual Trigger",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 171,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "deploy_workflow.GHA",
"type": "",
"pos": {
"x": 521,
"y": 287
},
"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": "deploy_workflow.AWS",
"type": "",
"pos": {
"x": 578,
"y": 524
},
"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
},
{
"id": "apollo_workflow",
"type": "",
"pos": {
"x": 881,
"y": 0
},
"width": 369,
"height": 711,
"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": "apollo-deploy.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 232,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "apollo_workflow.apollo",
"type": "",
"pos": {
"x": 947,
"y": 50
},
"width": 238,
"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": "Apollo Repo",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 138,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "apollo_workflow.GHA",
"type": "",
"pos": {
"x": 931,
"y": 287
},
"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": "apollo_workflow.AWS",
"type": "",
"pos": {
"x": 988,
"y": 524
},
"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": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 215,
"y": 187
},
{
"x": 215,
"y": 227
},
{
"x": 215,
"y": 247
},
{
"x": 215,
"y": 287
}
],
"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 and pushes it",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 192,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 215,
"y": 424
},
{
"x": 215,
"y": 464
},
{
"x": 215,
"y": 484
},
{
"x": 215,
"y": 524
}
],
"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": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 149,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 215,
"y": 661
},
{
"x": 215,
"y": 701
},
{
"x": 215,
"y": 771
},
{
"x": 215,
"y": 811
}
],
"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 live lambdas",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 179,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 215,
"y": 948
},
{
"x": 215,
"y": 988
},
{
"x": 215,
"y": 1008
},
{
"x": 215,
"y": 1048
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "deploy_workflow.(manual -> GHA)[0]",
"src": "deploy_workflow.manual",
"srcArrow": "none",
"srcLabel": "",
"dst": "deploy_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Launches",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 655.5,
"y": 187
},
{
"x": 655.5,
"y": 227
},
{
"x": 655.5,
"y": 247
},
{
"x": 655.5,
"y": 287
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "deploy_workflow.(GHA -> AWS)[0]",
"src": "deploy_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "deploy_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 153,
"labelHeight": 106,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 655.5,
"y": 424
},
{
"x": 655.5,
"y": 464
},
{
"x": 655.5,
"y": 484
},
{
"x": 655.5,
"y": 524
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "apollo_workflow.(apollo -> GHA)[0]",
"src": "apollo_workflow.apollo",
"srcArrow": "none",
"srcLabel": "",
"dst": "apollo_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Triggered manually/push to master test test test test test test test",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 533,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1065.5,
"y": 187
},
{
"x": 1065.5,
"y": 227
},
{
"x": 1065.5,
"y": 247
},
{
"x": 1065.5,
"y": 287
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "apollo_workflow.(GHA -> AWS)[0]",
"src": "apollo_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "apollo_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "test",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 31,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1065.5,
"y": 424
},
{
"x": 1065.5,
"y": 464
},
{
"x": 1065.5,
"y": 484
},
{
"x": 1065.5,
"y": 524
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

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

879
e2etests/testdata/regression/elk_alignment/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,879 @@
{
"name": "",
"shapes": [
{
"id": "build_workflow",
"type": "",
"pos": {
"x": 716,
"y": 12
},
"width": 480,
"height": 1099,
"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": 791,
"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": 822,
"y": 290
},
"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": 891,
"y": 493
},
"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": 847,
"y": 696
},
"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": 879,
"y": 899
},
"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
},
{
"id": "deploy_workflow",
"type": "",
"pos": {
"x": 1216,
"y": 175
},
"width": 421,
"height": 773,
"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-deploy.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 247,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "deploy_workflow.manual",
"type": "",
"pos": {
"x": 1291,
"y": 250
},
"width": 271,
"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": "Manual Trigger",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 171,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "deploy_workflow.GHA",
"type": "",
"pos": {
"x": 1292,
"y": 453
},
"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": "deploy_workflow.AWS",
"type": "",
"pos": {
"x": 1349,
"y": 736
},
"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
},
{
"id": "apollo_workflow",
"type": "",
"pos": {
"x": 12,
"y": 215
},
"width": 684,
"height": 693,
"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": "apollo-deploy.yaml",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 232,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "apollo_workflow.apollo",
"type": "",
"pos": {
"x": 235,
"y": 290
},
"width": 238,
"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": "Apollo Repo",
"fontSize": 25,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 138,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "apollo_workflow.GHA",
"type": "",
"pos": {
"x": 219,
"y": 493
},
"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": "apollo_workflow.AWS",
"type": "",
"pos": {
"x": 276,
"y": 696
},
"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": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 956,
"y": 224
},
{
"x": 956,
"y": 290
}
],
"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 and pushes it",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 192,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 956,
"y": 427
},
{
"x": 956,
"y": 493
}
],
"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": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 149,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 956,
"y": 630
},
{
"x": 956,
"y": 696
}
],
"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 live lambdas",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 179,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 956,
"y": 833
},
{
"x": 956,
"y": 899
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "deploy_workflow.(manual -> GHA)[0]",
"src": "deploy_workflow.manual",
"srcArrow": "none",
"srcLabel": "",
"dst": "deploy_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Launches",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1426.5,
"y": 387
},
{
"x": 1426.5,
"y": 453
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "deploy_workflow.(GHA -> AWS)[0]",
"src": "deploy_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "deploy_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 153,
"labelHeight": 106,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1426.5,
"y": 590
},
{
"x": 1426.5,
"y": 736
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "apollo_workflow.(apollo -> GHA)[0]",
"src": "apollo_workflow.apollo",
"srcArrow": "none",
"srcLabel": "",
"dst": "apollo_workflow.GHA",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "Triggered manually/push to master test test test test test test test",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 533,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 353.5,
"y": 427
},
{
"x": 353.5,
"y": 493
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "apollo_workflow.(GHA -> AWS)[0]",
"src": "apollo_workflow.GHA",
"srcArrow": "none",
"srcLabel": "",
"dst": "apollo_workflow.AWS",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "test",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 31,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 353.5,
"y": 630
},
{
"x": 353.5,
"y": 696
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

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

8
e2etests/testdata/stable/arrowhead_labels/elk/board.exp.json generated vendored
View file

@ -5,7 +5,7 @@
"id": "a", "id": "a",
"type": "", "type": "",
"pos": { "pos": {
"x": 159, "x": 56,
"y": 12 "y": 12
}, },
"width": 113, "width": 113,
@ -45,7 +45,7 @@
"id": "b", "id": "b",
"type": "", "type": "",
"pos": { "pos": {
"x": 159, "x": 56,
"y": 359 "y": 359
}, },
"width": 113, "width": 113,
@ -109,11 +109,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 215, "x": 112.5,
"y": 138 "y": 138
}, },
{ {
"x": 215, "x": 112.5,
"y": 359 "y": 359
} }
], ],

6
e2etests/testdata/stable/arrowhead_labels/elk/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="401" height="673" viewBox="14 -88 401 673"><style type="text/css"> width="401" height="673" viewBox="-88 -88 401 673"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -18,9 +18,9 @@ width="401" height="673" viewBox="14 -88 401 673"><style type="text/css">
} }
]]> ]]>
</style><g id="a"><g class="shape" ><rect x="159" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="159" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 215.000000 140.000000 L 215.000000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3190324998)"/><text class="text-italic" x="215.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="229.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="229.000000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3190324998" maskUnits="userSpaceOnUse" x="0" y="0" width="401" height="673"> </style><g id="a"><g class="shape" ><rect x="56" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="56" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 112.500000 140.000000 L 112.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3116495848)"/><text class="text-italic" x="112.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="126.500000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="126.500000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3116495848" maskUnits="userSpaceOnUse" x="0" y="0" width="401" height="673">
<rect x="0" y="0" width="401" height="673" fill="white"></rect> <rect x="0" y="0" width="401" height="673" fill="white"></rect>
<rect x="115.000000" y="238.000000" width="201" height="21" fill="black"></rect> <rect x="12.000000" y="238.000000" width="201" height="21" 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

134
e2etests/testdata/stable/chaos2/elk/board.exp.json generated vendored
View file

@ -8,7 +8,7 @@
"x": 12, "x": 12,
"y": 12 "y": 12
}, },
"width": 892, "width": 880,
"height": 1707, "height": 1707,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
@ -45,7 +45,7 @@
"id": "aa.bb", "id": "aa.bb",
"type": "", "type": "",
"pos": { "pos": {
"x": 144, "x": 132,
"y": 445 "y": 445
}, },
"width": 685, "width": 685,
@ -85,7 +85,7 @@
"id": "aa.bb.cc", "id": "aa.bb.cc",
"type": "", "type": "",
"pos": { "pos": {
"x": 290, "x": 278,
"y": 841 "y": 841
}, },
"width": 464, "width": 464,
@ -125,7 +125,7 @@
"id": "aa.bb.cc.dd", "id": "aa.bb.cc.dd",
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 376, "x": 364,
"y": 916 "y": 916
}, },
"width": 303, "width": 303,
@ -165,7 +165,7 @@
"id": "aa.bb.cc.dd.ee", "id": "aa.bb.cc.dd.ee",
"type": "text", "type": "text",
"pos": { "pos": {
"x": 588, "x": 576,
"y": 1093 "y": 1093
}, },
"width": 16, "width": 16,
@ -204,7 +204,7 @@
"id": "aa.bb.cc.dd.ff", "id": "aa.bb.cc.dd.ff",
"type": "", "type": "",
"pos": { "pos": {
"x": 451, "x": 439,
"y": 991 "y": 991
}, },
"width": 117, "width": 117,
@ -244,7 +244,7 @@
"id": "aa.bb.cc.gg", "id": "aa.bb.cc.gg",
"type": "text", "type": "text",
"pos": { "pos": {
"x": 585, "x": 573,
"y": 1258 "y": 1258
}, },
"width": 17, "width": 17,
@ -283,7 +283,7 @@
"id": "aa.bb.cc.hh", "id": "aa.bb.cc.hh",
"type": "", "type": "",
"pos": { "pos": {
"x": 532, "x": 520,
"y": 1343 "y": 1343
}, },
"width": 123, "width": 123,
@ -323,7 +323,7 @@
"id": "aa.bb.ii", "id": "aa.bb.ii",
"type": "package", "type": "package",
"pos": { "pos": {
"x": 376, "x": 364,
"y": 520 "y": 520
}, },
"width": 265, "width": 265,
@ -363,7 +363,7 @@
"id": "aa.bb.ii.jj", "id": "aa.bb.ii.jj",
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 451, "x": 439,
"y": 595 "y": 595
}, },
"width": 115, "width": 115,
@ -403,7 +403,7 @@
"id": "aa.bb.kk", "id": "aa.bb.kk",
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 219, "x": 207,
"y": 595 "y": 595
}, },
"width": 126, "width": 126,
@ -443,7 +443,7 @@
"id": "aa.ll", "id": "aa.ll",
"type": "", "type": "",
"pos": { "pos": {
"x": 357, "x": 355,
"y": 233 "y": 233
}, },
"width": 114, "width": 114,
@ -483,7 +483,7 @@
"id": "aa.mm", "id": "aa.mm",
"type": "cylinder", "type": "cylinder",
"pos": { "pos": {
"x": 462, "x": 446,
"y": 87 "y": 87
}, },
"width": 131, "width": 131,
@ -523,7 +523,7 @@
"id": "aa.nn", "id": "aa.nn",
"type": "text", "type": "text",
"pos": { "pos": {
"x": 424, "x": 408,
"y": 138 "y": 138
}, },
"width": 18, "width": 18,
@ -562,7 +562,7 @@
"id": "aa.oo", "id": "aa.oo",
"type": "", "type": "",
"pos": { "pos": {
"x": 613, "x": 597,
"y": 87 "y": 87
}, },
"width": 123, "width": 123,
@ -626,11 +626,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 596, "x": 584,
"y": 1117 "y": 1117
}, },
{ {
"x": 596, "x": 584,
"y": 1258 "y": 1258
} }
], ],
@ -665,11 +665,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 593.1666666666666, "x": 581.1666666666666,
"y": 1282 "y": 1282
}, },
{ {
"x": 593.1666666666666, "x": 581.1666666666666,
"y": 1343 "y": 1343
} }
], ],
@ -704,19 +704,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 553, "x": 541,
"y": 796 "y": 796
}, },
{ {
"x": 552.6666666666666, "x": 540.6666666666666,
"y": 816 "y": 816
}, },
{ {
"x": 451, "x": 439,
"y": 816 "y": 816
}, },
{ {
"x": 451, "x": 439.00000000000006,
"y": 916 "y": 916
} }
], ],
@ -751,19 +751,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 424.9000000000001, "x": 422.9000000000001,
"y": 359 "y": 359
}, },
{ {
"x": 424.9000000000001, "x": 422.9000000000001,
"y": 420 "y": 420
}, },
{ {
"x": 345.00000000000006, "x": 333.00000000000006,
"y": 420 "y": 420
}, },
{ {
"x": 345.00000000000006, "x": 333.00000000000006,
"y": 445 "y": 445
} }
], ],
@ -798,27 +798,27 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 567, "x": 551,
"y": 209 "y": 209
}, },
{ {
"x": 566.5, "x": 550.5,
"y": 420 "y": 420
}, },
{ {
"x": 651, "x": 639,
"y": 420 "y": 420
}, },
{ {
"x": 651, "x": 639,
"y": 826 "y": 826
}, },
{ {
"x": 461.00000000000006, "x": 449.00000000000006,
"y": 826 "y": 826
}, },
{ {
"x": 461.00000000000006, "x": 449.00000000000006,
"y": 841 "y": 841
} }
], ],
@ -853,19 +853,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 488, "x": 472,
"y": 209 "y": 209
}, },
{ {
"x": 487.90000000000003, "x": 471.90000000000003,
"y": 223 "y": 223
}, },
{ {
"x": 413.50000000000006, "x": 411.50000000000006,
"y": 223 "y": 223
}, },
{ {
"x": 413.50000000000006, "x": 411.50000000000006,
"y": 233 "y": 233
} }
], ],
@ -900,27 +900,27 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 540, "x": 524,
"y": 213 "y": 213
}, },
{ {
"x": 540.3000000000001, "x": 524.3000000000001,
"y": 223 "y": 223
}, },
{ {
"x": 537.5, "x": 523.5,
"y": 223 "y": 223
}, },
{ {
"x": 537.5, "x": 523.5,
"y": 420 "y": 420
}, },
{ {
"x": 518.5, "x": 506.50000000000006,
"y": 420 "y": 420
}, },
{ {
"x": 518.5, "x": 506.50000000000006,
"y": 445 "y": 445
} }
], ],
@ -955,27 +955,27 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 447.70000000000005, "x": 445.70000000000005,
"y": 359 "y": 359
}, },
{ {
"x": 447.70000000000005, "x": 445.70000000000005,
"y": 430 "y": 430
}, },
{ {
"x": 365.00000000000006, "x": 353.00000000000006,
"y": 430 "y": 430
}, },
{ {
"x": 365.00000000000006, "x": 353.00000000000006,
"y": 1248 "y": 1248
}, },
{ {
"x": 590.3333333333334, "x": 578.3333333333334,
"y": 1248 "y": 1248
}, },
{ {
"x": 590.3333333333334, "x": 578.3333333333334,
"y": 1258 "y": 1258
} }
], ],
@ -1010,19 +1010,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 514, "x": 498,
"y": 213 "y": 213
}, },
{ {
"x": 514.1, "x": 498.1,
"y": 223 "y": 223
}, },
{ {
"x": 508.50000000000006, "x": 496.50000000000006,
"y": 223 "y": 223
}, },
{ {
"x": 509, "x": 497,
"y": 575 "y": 575
} }
], ],
@ -1057,27 +1057,27 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 461.00000000000006, "x": 449,
"y": 1544 "y": 1544
}, },
{ {
"x": 461.0000000000001, "x": 449.0000000000001,
"y": 1644 "y": 1644
}, },
{ {
"x": 105.00000000000006, "x": 95.00000000000011,
"y": 1644 "y": 1644
}, },
{ {
"x": 105.00000000000006, "x": 95.00000000000011,
"y": 369 "y": 369
}, },
{ {
"x": 379.3000000000001, "x": 377.3000000000001,
"y": 369 "y": 369
}, },
{ {
"x": 379.3000000000001, "x": 377.3000000000001,
"y": 359 "y": 359
} }
], ],
@ -1112,35 +1112,35 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 464, "x": 452,
"y": 796 "y": 796
}, },
{ {
"x": 464.33333333333337, "x": 452.3333333333333,
"y": 806 "y": 806
}, },
{ {
"x": 279.00000000000006, "x": 267,
"y": 806 "y": 806
}, },
{ {
"x": 279.0000000000001, "x": 267.0000000000001,
"y": 1634 "y": 1634
}, },
{ {
"x": 134.0000000000001, "x": 122.00000000000011,
"y": 1634 "y": 1634
}, },
{ {
"x": 134.0000000000001, "x": 122.00000000000011,
"y": 379 "y": 379
}, },
{ {
"x": 402.10000000000014, "x": 400.10000000000014,
"y": 379 "y": 379
}, },
{ {
"x": 402.10000000000014, "x": 400.10000000000014,
"y": 359 "y": 359
} }
], ],

28
e2etests/testdata/stable/chaos2/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: 813 KiB

After

Width:  |  Height:  |  Size: 813 KiB

214
e2etests/testdata/stable/investigate/elk/board.exp.json generated vendored
View file

@ -5,7 +5,7 @@
"id": "aa", "id": "aa",
"type": "step", "type": "step",
"pos": { "pos": {
"x": 435, "x": 429,
"y": 12 "y": 12
}, },
"width": 122, "width": 122,
@ -45,7 +45,7 @@
"id": "bb", "id": "bb",
"type": "step", "type": "step",
"pos": { "pos": {
"x": 292, "x": 286,
"y": 238 "y": 238
}, },
"width": 123, "width": 123,
@ -85,7 +85,7 @@
"id": "cc", "id": "cc",
"type": "step", "type": "step",
"pos": { "pos": {
"x": 314, "x": 307,
"y": 464 "y": 464
}, },
"width": 121, "width": 121,
@ -125,7 +125,7 @@
"id": "dd", "id": "dd",
"type": "", "type": "",
"pos": { "pos": {
"x": 238, "x": 231,
"y": 816 "y": 816
}, },
"width": 415, "width": 415,
@ -165,7 +165,7 @@
"id": "dd.ee", "id": "dd.ee",
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 456, "x": 449,
"y": 891 "y": 891
}, },
"width": 122, "width": 122,
@ -205,7 +205,7 @@
"id": "ll", "id": "ll",
"type": "", "type": "",
"pos": { "pos": {
"x": 253, "x": 246,
"y": 3120 "y": 3120
}, },
"width": 425, "width": 425,
@ -245,7 +245,7 @@
"id": "ll.mm", "id": "ll.mm",
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 472, "x": 465,
"y": 3195 "y": 3195
}, },
"width": 131, "width": 131,
@ -285,7 +285,7 @@
"id": "ff", "id": "ff",
"type": "", "type": "",
"pos": { "pos": {
"x": 254, "x": 247,
"y": 2462 "y": 2462
}, },
"width": 424, "width": 424,
@ -325,7 +325,7 @@
"id": "ff.mm", "id": "ff.mm",
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 472, "x": 465,
"y": 2537 "y": 2537
}, },
"width": 131, "width": 131,
@ -365,7 +365,7 @@
"id": "ff.gg", "id": "ff.gg",
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 329, "x": 322,
"y": 2539 "y": 2539
}, },
"width": 123, "width": 123,
@ -405,7 +405,7 @@
"id": "dd.hh", "id": "dd.hh",
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 313, "x": 306,
"y": 891 "y": 891
}, },
"width": 123, "width": 123,
@ -445,7 +445,7 @@
"id": "ww", "id": "ww",
"type": "queue", "type": "queue",
"pos": { "pos": {
"x": 127, "x": 120,
"y": 2195 "y": 2195
}, },
"width": 131, "width": 131,
@ -496,7 +496,7 @@
"id": "yy", "id": "yy",
"type": "", "type": "",
"pos": { "pos": {
"x": 75, "x": 68,
"y": 3657 "y": 3657
}, },
"width": 273, "width": 273,
@ -536,7 +536,7 @@
"id": "yy.zz", "id": "yy.zz",
"type": "queue", "type": "queue",
"pos": { "pos": {
"x": 152, "x": 145,
"y": 3732 "y": 3732
}, },
"width": 120, "width": 120,
@ -587,7 +587,7 @@
"id": "ad", "id": "ad",
"type": "parallelogram", "type": "parallelogram",
"pos": { "pos": {
"x": 333, "x": 327,
"y": 4606 "y": 4606
}, },
"width": 123, "width": 123,
@ -627,7 +627,7 @@
"id": "nn", "id": "nn",
"type": "cylinder", "type": "cylinder",
"pos": { "pos": {
"x": 117, "x": 110,
"y": 4225 "y": 4225
}, },
"width": 557, "width": 557,
@ -667,7 +667,7 @@
"id": "ii", "id": "ii",
"type": "", "type": "",
"pos": { "pos": {
"x": 460, "x": 453,
"y": 1197 "y": 1197
}, },
"width": 114, "width": 114,
@ -707,7 +707,7 @@
"id": "jj", "id": "jj",
"type": "", "type": "",
"pos": { "pos": {
"x": 459, "x": 453,
"y": 1503 "y": 1503
}, },
"width": 115, "width": 115,
@ -747,7 +747,7 @@
"id": "kk", "id": "kk",
"type": "", "type": "",
"pos": { "pos": {
"x": 456, "x": 449,
"y": 1914 "y": 1914
}, },
"width": 122, "width": 122,
@ -787,7 +787,7 @@
"id": "nn.oo", "id": "nn.oo",
"type": "", "type": "",
"pos": { "pos": {
"x": 476, "x": 469,
"y": 4300 "y": 4300
}, },
"width": 123, "width": 123,
@ -827,7 +827,7 @@
"id": "ff.pp", "id": "ff.pp",
"type": "", "type": "",
"pos": { "pos": {
"x": 329, "x": 322,
"y": 2688 "y": 2688
}, },
"width": 123, "width": 123,
@ -867,7 +867,7 @@
"id": "ll.qq", "id": "ll.qq",
"type": "", "type": "",
"pos": { "pos": {
"x": 328, "x": 321,
"y": 3198 "y": 3198
}, },
"width": 124, "width": 124,
@ -907,7 +907,7 @@
"id": "ll.rr", "id": "ll.rr",
"type": "", "type": "",
"pos": { "pos": {
"x": 331, "x": 324,
"y": 3346 "y": 3346
}, },
"width": 118, "width": 118,
@ -947,7 +947,7 @@
"id": "ss", "id": "ss",
"type": "", "type": "",
"pos": { "pos": {
"x": 37, "x": 30,
"y": 1428 "y": 1428
}, },
"width": 268, "width": 268,
@ -987,7 +987,7 @@
"id": "ss.tt", "id": "ss.tt",
"type": "", "type": "",
"pos": { "pos": {
"x": 112, "x": 105,
"y": 1503 "y": 1503
}, },
"width": 118, "width": 118,
@ -1027,7 +1027,7 @@
"id": "uu", "id": "uu",
"type": "", "type": "",
"pos": { "pos": {
"x": 34, "x": 28,
"y": 1814 "y": 1814
}, },
"width": 273, "width": 273,
@ -1067,7 +1067,7 @@
"id": "uu.vv", "id": "uu.vv",
"type": "", "type": "",
"pos": { "pos": {
"x": 109, "x": 103,
"y": 1889 "y": 1889
}, },
"width": 123, "width": 123,
@ -1107,7 +1107,7 @@
"id": "rm", "id": "rm",
"type": "", "type": "",
"pos": { "pos": {
"x": 109, "x": 102,
"y": 3321 "y": 3321
}, },
"width": 124, "width": 124,
@ -1147,7 +1147,7 @@
"id": "nn.xx", "id": "nn.xx",
"type": "", "type": "",
"pos": { "pos": {
"x": 192, "x": 185,
"y": 4300 "y": 4300
}, },
"width": 122, "width": 122,
@ -1187,7 +1187,7 @@
"id": "yy.ab", "id": "yy.ab",
"type": "", "type": "",
"pos": { "pos": {
"x": 150, "x": 143,
"y": 3904 "y": 3904
}, },
"width": 123, "width": 123,
@ -1227,7 +1227,7 @@
"id": "nn.ac", "id": "nn.ac",
"type": "", "type": "",
"pos": { "pos": {
"x": 334, "x": 327,
"y": 4300 "y": 4300
}, },
"width": 122, "width": 122,
@ -1291,19 +1291,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 476, "x": 470,
"y": 138 "y": 138
}, },
{ {
"x": 476, "x": 469.5,
"y": 188 "y": 188
}, },
{ {
"x": 353.66666666666663, "x": 347.16666666666663,
"y": 188 "y": 188
}, },
{ {
"x": 354, "x": 347,
"y": 238 "y": 238
} }
], ],
@ -1338,11 +1338,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 374, "x": 368,
"y": 364 "y": 364
}, },
{ {
"x": 374, "x": 368,
"y": 464 "y": 464
} }
], ],
@ -1377,11 +1377,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 517, "x": 510,
"y": 138 "y": 138
}, },
{ {
"x": 517, "x": 510,
"y": 891 "y": 891
} }
], ],
@ -1416,28 +1416,28 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 333, "x": 327,
"y": 364 "y": 364
}, },
{ {
"x": 333.16666666666663, "x": 326.66666666666663,
"y": 414 "y": 414
}, },
{ {
"x": 23, "x": 16.5,
"y": 414 "y": 414
}, },
{ {
"x": 23, "x": 16.5,
"y": 2407 "y": 2407
}, },
{ {
"x": 369.5, "x": 363,
"y": 2407 "y": 2407
}, },
{ {
"x": 369, "x": 363,
"y": 2560 "y": 2559
} }
], ],
"animated": false, "animated": false,
@ -1471,11 +1471,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 374, "x": 368,
"y": 590 "y": 590
}, },
{ {
"x": 374, "x": 368,
"y": 891 "y": 891
} }
], ],
@ -1510,11 +1510,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 517, "x": 510,
"y": 1017 "y": 1017
}, },
{ {
"x": 516.6666666666666, "x": 510.16666666666663,
"y": 1197 "y": 1197
} }
], ],
@ -1549,11 +1549,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 516.6666666666666, "x": 510.16666666666663,
"y": 1323 "y": 1323
}, },
{ {
"x": 516.6666666666666, "x": 510.16666666666663,
"y": 1503 "y": 1503
} }
], ],
@ -1588,11 +1588,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 516.6666666666666, "x": 510.16666666666663,
"y": 1629 "y": 1629
}, },
{ {
"x": 516.6666666666666, "x": 510.16666666666663,
"y": 1914 "y": 1914
} }
], ],
@ -1627,11 +1627,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 537, "x": 530.5,
"y": 2040 "y": 2040
}, },
{ {
"x": 537, "x": 531,
"y": 2537 "y": 2537
} }
], ],
@ -1666,11 +1666,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 537, "x": 531,
"y": 2668 "y": 2668
}, },
{ {
"x": 537, "x": 531,
"y": 3195 "y": 3195
} }
], ],
@ -1705,11 +1705,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 537, "x": 531,
"y": 3326 "y": 3326
}, },
{ {
"x": 537, "x": 530.5,
"y": 4300 "y": 4300
} }
], ],
@ -1744,11 +1744,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 391, "x": 384,
"y": 2665 "y": 2665
}, },
{ {
"x": 390.5, "x": 383.5,
"y": 2688 "y": 2688
} }
], ],
@ -1783,19 +1783,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 390, "x": 383.5,
"y": 2814 "y": 2814
}, },
{ {
"x": 390, "x": 383.5,
"y": 2944 "y": 2944
}, },
{ {
"x": 389.5, "x": 383,
"y": 2944 "y": 2944
}, },
{ {
"x": 389.5, "x": 383,
"y": 3197.5 "y": 3197.5
} }
], ],
@ -1830,11 +1830,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 390, "x": 383,
"y": 3323.5 "y": 3323.5
}, },
{ {
"x": 390, "x": 383,
"y": 3346 "y": 3346
} }
], ],
@ -1869,19 +1869,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 374, "x": 368,
"y": 1017 "y": 1017
}, },
{ {
"x": 374.16666666666663, "x": 367.66666666666663,
"y": 1147 "y": 1147
}, },
{ {
"x": 170.49999999999997, "x": 163.99999999999997,
"y": 1147 "y": 1147
}, },
{ {
"x": 170.49999999999997, "x": 163.99999999999997,
"y": 1503 "y": 1503
} }
], ],
@ -1916,11 +1916,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 170.5, "x": 164,
"y": 1629 "y": 1629
}, },
{ {
"x": 170.5, "x": 164,
"y": 1889 "y": 1889
} }
], ],
@ -1955,19 +1955,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 496.3333333333333, "x": 489.8333333333333,
"y": 2040 "y": 2040
}, },
{ {
"x": 496.3333333333333, "x": 489.8333333333333,
"y": 2145 "y": 2145
}, },
{ {
"x": 214.16666666666669, "x": 207.66666666666669,
"y": 2145 "y": 2145
}, },
{ {
"x": 214, "x": 208,
"y": 2195 "y": 2195
} }
], ],
@ -2002,11 +2002,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 170.5, "x": 164,
"y": 2015 "y": 2015
}, },
{ {
"x": 171, "x": 164,
"y": 2195 "y": 2195
} }
], ],
@ -2041,11 +2041,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 170, "x": 164,
"y": 2347 "y": 2347
}, },
{ {
"x": 170.5, "x": 164,
"y": 3320.6666666666665 "y": 3320.6666666666665
} }
], ],
@ -2080,27 +2080,27 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 149.83333333333331, "x": 143.33333333333331,
"y": 3446.6666666666665 "y": 3446.6666666666665
}, },
{ {
"x": 149.83333333333331, "x": 143.33333333333331,
"y": 3602 "y": 3602
}, },
{ {
"x": 63.666666666666664, "x": 57.166666666666664,
"y": 3602 "y": 3602
}, },
{ {
"x": 63.666666666666664, "x": 57.166666666666664,
"y": 4170 "y": 4170
}, },
{ {
"x": 252.5, "x": 246,
"y": 4170 "y": 4170
}, },
{ {
"x": 252.5, "x": 246,
"y": 4300 "y": 4300
} }
], ],
@ -2135,19 +2135,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 389.5, "x": 383,
"y": 3472 "y": 3472
}, },
{ {
"x": 389.5, "x": 383,
"y": 3602 "y": 3602
}, },
{ {
"x": 231.16666666666666, "x": 224.66666666666666,
"y": 3602 "y": 3602
}, },
{ {
"x": 231, "x": 225,
"y": 3732 "y": 3732
} }
], ],
@ -2182,11 +2182,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 191.16666666666666, "x": 184.66666666666666,
"y": 3446.6666666666665 "y": 3446.6666666666665
}, },
{ {
"x": 191, "x": 185,
"y": 3732 "y": 3732
} }
], ],
@ -2221,11 +2221,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 211, "x": 204,
"y": 3884 "y": 3884
}, },
{ {
"x": 211.5, "x": 204.5,
"y": 3904 "y": 3904
} }
], ],
@ -2260,19 +2260,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 211.16666666666666, "x": 204.66666666666666,
"y": 4030 "y": 4030
}, },
{ {
"x": 211.16666666666666, "x": 204.66666666666666,
"y": 4160 "y": 4160
}, },
{ {
"x": 394.5, "x": 388,
"y": 4160 "y": 4160
}, },
{ {
"x": 394.5, "x": 388,
"y": 4300 "y": 4300
} }
], ],
@ -2307,11 +2307,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 394.5, "x": 388,
"y": 4426 "y": 4426
}, },
{ {
"x": 395, "x": 388,
"y": 4606 "y": 4606
} }
], ],
@ -2346,20 +2346,20 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 214, "x": 208,
"y": 2347 "y": 2347
}, },
{ {
"x": 214.16666666666669, "x": 207.66666666666669,
"y": 2397 "y": 2397
}, },
{ {
"x": 410.5, "x": 404,
"y": 2397 "y": 2397
}, },
{ {
"x": 411, "x": 404,
"y": 2558 "y": 2559
} }
], ],
"animated": false, "animated": false,

18
e2etests/testdata/stable/investigate/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: 809 KiB

After

Width:  |  Height:  |  Size: 809 KiB

16
e2etests/testdata/stable/overlapping_image_container_labels/elk/board.exp.json generated vendored
View file

@ -720,6 +720,14 @@
}, },
{ {
"x": 343.6666666666667, "x": 343.6666666666667,
"y": 805
},
{
"x": 393,
"y": 805
},
{
"x": 393,
"y": 846 "y": 846
}, },
{ {
@ -806,6 +814,14 @@
}, },
{ {
"x": 939.6666666666667, "x": 939.6666666666667,
"y": 805
},
{
"x": 989,
"y": 805
},
{
"x": 989,
"y": 846 "y": 846
}, },
{ {

2
e2etests/testdata/stable/overlapping_image_container_labels/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: 798 KiB

After

Width:  |  Height:  |  Size: 798 KiB

18
e2etests/testdata/todo/container_child_edge/elk/board.exp.json generated vendored
View file

@ -8,7 +8,7 @@
"x": 12, "x": 12,
"y": 12 "y": 12
}, },
"width": 336, "width": 334,
"height": 463, "height": 463,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
@ -45,7 +45,7 @@
"id": "container.first", "id": "container.first",
"type": "", "type": "",
"pos": { "pos": {
"x": 138, "x": 136,
"y": 87 "y": 87
}, },
"width": 135, "width": 135,
@ -85,7 +85,7 @@
"id": "container.second", "id": "container.second",
"type": "", "type": "",
"pos": { "pos": {
"x": 102, "x": 100,
"y": 274 "y": 274
}, },
"width": 155, "width": 155,
@ -149,11 +149,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 205.5, "x": 203.5,
"y": 213 "y": 213
}, },
{ {
"x": 205.5, "x": 203.5,
"y": 274 "y": 274
} }
], ],
@ -188,19 +188,19 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 117, "x": 101,
"y": 12 "y": 12
}, },
{ {
"x": 117, "x": 101,
"y": 264 "y": 264
}, },
{ {
"x": 153.83333333333334, "x": 151.83333333333334,
"y": 264 "y": 264
}, },
{ {
"x": 153.83333333333334, "x": 151.83333333333334,
"y": 274 "y": 274
} }
], ],

10
e2etests/testdata/todo/container_child_edge/elk/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="536" height="663" viewBox="-88 -88 536 663"><style type="text/css"> width="534" height="663" viewBox="-88 -88 534 663"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -18,10 +18,10 @@ width="536" height="663" viewBox="-88 -88 536 663"><style type="text/css">
} }
]]> ]]>
</style><g id="container"><g class="shape" ><rect x="12" y="12" width="336" height="463" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="180.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="138" y="87" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="205.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="102" y="274" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="179.500000" y="340.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[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 205.500000 215.000000 L 205.500000 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#186667576)"/><text class="text-italic" x="205.500000" y="249.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 117.000000 14.000000 L 117.000000 254.000000 S 117.000000 264.000000 127.000000 264.000000 L 148.833333 264.000000 S 153.833333 264.000000 153.833333 269.000000 L 153.833333 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#186667576)"/><text class="text-italic" x="117.000000" y="167.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="186667576" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="663"> </style><g id="container"><g class="shape" ><rect x="12" y="12" width="334" height="463" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="179.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="136" y="87" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="203.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="100" y="274" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="177.500000" y="340.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[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 203.500000 215.000000 L 203.500000 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="203.500000" y="249.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 101.000000 14.000000 L 101.000000 254.000000 S 101.000000 264.000000 111.000000 264.000000 L 146.833333 264.000000 S 151.833333 264.000000 151.833333 269.000000 L 151.833333 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="101.000000" y="174.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2171115784" maskUnits="userSpaceOnUse" x="0" y="0" width="534" height="663">
<rect x="0" y="0" width="536" height="663" fill="white"></rect> <rect x="0" y="0" width="534" height="663" fill="white"></rect>
<rect x="191.000000" y="233.000000" width="29" height="21" fill="black"></rect> <rect x="189.000000" y="233.000000" width="29" height="21" fill="black"></rect>
<rect x="103.000000" y="151.000000" width="28" height="21" fill="black"></rect> <rect x="87.000000" y="158.000000" width="28" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {
font-family: "font-regular"; font-family: "font-regular";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 792 KiB

After

Width:  |  Height:  |  Size: 792 KiB

26
e2etests/testdata/todo/font_sizes_large/elk/board.exp.json generated vendored
View file

@ -5,7 +5,7 @@
"id": "eight", "id": "eight",
"type": "", "type": "",
"pos": { "pos": {
"x": 293, "x": 245,
"y": 12 "y": 12
}, },
"width": 124, "width": 124,
@ -45,7 +45,7 @@
"id": "sixteen", "id": "sixteen",
"type": "", "type": "",
"pos": { "pos": {
"x": 277, "x": 228,
"y": 344 "y": 344
}, },
"width": 157, "width": 157,
@ -85,7 +85,7 @@
"id": "thirty two", "id": "thirty two",
"type": "", "type": "",
"pos": { "pos": {
"x": 232, "x": 183,
"y": 701 "y": 701
}, },
"width": 247, "width": 247,
@ -125,7 +125,7 @@
"id": "sixty four", "id": "sixty four",
"type": "", "type": "",
"pos": { "pos": {
"x": 168, "x": 120,
"y": 1108 "y": 1108
}, },
"width": 374, "width": 374,
@ -165,7 +165,7 @@
"id": "ninety nine", "id": "ninety nine",
"type": "", "type": "",
"pos": { "pos": {
"x": 61, "x": 12,
"y": 1596 "y": 1596
}, },
"width": 589, "width": 589,
@ -229,11 +229,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 355, "x": 306.5,
"y": 128 "y": 128
}, },
{ {
"x": 355, "x": 306.5,
"y": 344 "y": 344
} }
], ],
@ -268,11 +268,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 355, "x": 306.5,
"y": 470 "y": 470
}, },
{ {
"x": 355, "x": 306.5,
"y": 701 "y": 701
} }
], ],
@ -307,11 +307,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 355, "x": 306.5,
"y": 847 "y": 847
}, },
{ {
"x": 355, "x": 306.5,
"y": 1108 "y": 1108
} }
], ],
@ -346,11 +346,11 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 355, "x": 306.5,
"y": 1294 "y": 1294
}, },
{ {
"x": 355, "x": 306.5,
"y": 1596 "y": 1596
} }
], ],

12
e2etests/testdata/todo/font_sizes_large/elk/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="2014" viewBox="-39 -88 789 2014"><style type="text/css"> width="789" height="2014" viewBox="-88 -88 789 2014"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -18,12 +18,12 @@ width="789" height="2014" viewBox="-39 -88 789 2014"><style type="text/css">
} }
]]> ]]>
</style><g id="eight"><g class="shape" ><rect x="293" y="12" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.000000" y="70.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="277" y="344" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.500000" y="410.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="232" y="701" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.500000" y="783.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="168" y="1108" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.000000" y="1222.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="61" y="1596" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.500000" y="1745.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 355.000000 130.000000 L 355.000000 340.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2715138097)"/><text class="text-italic" x="355.500000" y="240.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 355.000000 472.000000 L 355.000000 697.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2715138097)"/><text class="text-italic" x="355.000000" y="594.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 355.000000 849.000000 L 355.000000 1104.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2715138097)"/><text class="text-italic" x="355.000000" y="995.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 355.000000 1296.000000 L 355.000000 1592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2715138097)"/><text class="text-italic" x="355.500000" y="1475.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="2715138097" maskUnits="userSpaceOnUse" x="0" y="0" width="789" height="2014"> </style><g id="eight"><g class="shape" ><rect x="245" y="12" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="307.000000" y="70.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="228" y="344" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="410.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="183" y="701" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="783.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="120" y="1108" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="307.000000" y="1222.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="12" y="1596" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="1745.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 306.500000 130.000000 L 306.500000 340.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255163469)"/><text class="text-italic" x="306.500000" y="240.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 306.500000 472.000000 L 306.500000 697.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255163469)"/><text class="text-italic" x="307.000000" y="594.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 306.500000 849.000000 L 306.500000 1104.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255163469)"/><text class="text-italic" x="307.000000" y="995.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 306.500000 1296.000000 L 306.500000 1592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255163469)"/><text class="text-italic" x="306.500000" y="1475.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="255163469" maskUnits="userSpaceOnUse" x="0" y="0" width="789" height="2014">
<rect x="0" y="0" width="789" height="2014" fill="white"></rect> <rect x="0" y="0" width="789" height="2014" fill="white"></rect>
<rect x="339.000000" y="228.000000" width="33" height="16" fill="black"></rect> <rect x="290.000000" y="228.000000" width="33" height="16" fill="black"></rect>
<rect x="298.000000" y="570.000000" width="114" height="31" fill="black"></rect> <rect x="250.000000" y="570.000000" width="114" height="31" fill="black"></rect>
<rect x="254.000000" y="947.000000" width="202" height="61" fill="black"></rect> <rect x="206.000000" y="947.000000" width="202" height="61" fill="black"></rect>
<rect x="185.000000" y="1394.000000" width="341" height="102" fill="black"></rect> <rect x="136.000000" y="1394.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