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

Merge pull request #618 from alixander/dagre-edge-labels

Browse source 
Prevent dagre edge label overlaps
This commit is contained in:
Alexander Wang 2023-01-06 12:32:44 -08:00 committed by GitHub
commit 6da246f38c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 2257 additions and 910 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,8 @@
#### Improvements 🧹
- Dagre edges are spaced apart to prevent label overlap. [#618](https://github.com/terrastruct/d2/pull/618)
#### Bugfixes ⛑️
- Appendix seperator line no longer added to PNG export when appendix doesn't exist. [#582](https://github.com/terrastruct/d2/pull/582)

7
d2layouts/d2dagrelayout/layout.go
View file

@ -149,7 +149,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
// for `b <- a`, edge.Edge is `a -> b` and we expect this routing result
src, dst = dst, src
}
loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID())
loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID(), edge.LabelDimensions.Width, edge.LabelDimensions.Height)
}
if debugJS {
@ -320,7 +320,6 @@ func generateAddParentLine(childID, parentID string) string {
return fmt.Sprintf("g.setParent(`%s`, `%s`);\n", escapeID(childID), escapeID(parentID))
}
func generateAddEdgeLine(fromID, toID, edgeID string) string {
// in dagre v is from, w is to, name is to uniquely identify
return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s` });\n", escapeID(fromID), escapeID(toID), escapeID(edgeID))
func generateAddEdgeLine(fromID, toID, edgeID string, width, height int) string {
return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s`}, { width:%d, height:%d, labelpos: `c` });\n", escapeID(fromID), escapeID(toID), escapeID(edgeID), width, height)
}

8
d2renderers/d2sketch/testdata/connection_label/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: 246 KiB

After

Width:  |  Height:  |  Size: 246 KiB

22
d2renderers/d2sketch/testdata/twitter/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: 385 KiB

After

Width:  |  Height:  |  Size: 385 KiB

20
e2etests/regression_test.go
View file

@ -282,6 +282,26 @@ table with short col: RefreshAuthorizationPolicyCache {
}
class -> table -> table with short col
`,
},
{
name: "overlapping-edge-label",
script: `k8s: Kubernetes
k8s.m1: k8s-master1
k8s.m2: k8s-master2
k8s.m3: k8s-master3
k8s.w1: k8s-worker1
k8s.w2: k8s-worker2
k8s.w3: k8s-worker3
osvc: opensvc
osvc.vm1: VM1
osvc.vm2: VM2
k8s -> osvc: keycloak
k8s -> osvc: heptapod
k8s -> osvc: harbor
k8s -> osvc: vault
`,
},
}

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 2148,
"width": 2628,
"height": 237,
"opacity": 1,
"strokeDash": 0,
@ -86,7 +86,7 @@
"id": "build_workflow.GHA",
"type": "",
"pos": {
"x": 644,
"x": 698,
"y": 50
},
"width": 269,
@ -126,7 +126,7 @@
"id": "build_workflow.S3",
"type": "",
"pos": {
"x": 1122,
"x": 1314,
"y": 50
},
"width": 131,
@ -166,7 +166,7 @@
"id": "build_workflow.Terraform",
"type": "",
"pos": {
"x": 1462,
"x": 1773,
"y": 50
},
"width": 218,
@ -206,7 +206,7 @@
"id": "build_workflow.AWS",
"type": "",
"pos": {
"x": 1889,
"x": 2369,
"y": 50
},
"width": 155,
@ -274,15 +274,15 @@
"y": 118.5
},
{
"x": 518.3,
"x": 539.9,
"y": 118.5
},
{
"x": 559.9,
"x": 592.3,
"y": 118.5
},
{
"x": 643.5,
"x": 697.5,
"y": 118.5
}
],
@ -318,19 +318,19 @@
"labelPercentage": 0,
"route": [
{
"x": 913.5,
"x": 966.5,
"y": 118.5
},
{
"x": 996.3,
"x": 1105.3,
"y": 118.5
},
{
"x": 1037.9,
"x": 1174.7,
"y": 118.5
},
{
"x": 1121.5,
"x": 1313.5,
"y": 118.5
}
],
@ -366,19 +366,19 @@
"labelPercentage": 0,
"route": [
{
"x": 1253.5,
"x": 1445.5,
"y": 118.5
},
{
"x": 1336.3,
"x": 1575.9,
"y": 118.5
},
{
"x": 1377.9,
"x": 1641.3,
"y": 118.5
},
{
"x": 1461.5,
"x": 1772.5,
"y": 118.5
}
],
@ -414,19 +414,19 @@
"labelPercentage": 0,
"route": [
{
"x": 1680.5,
"x": 1991.5,
"y": 118.5
},
{
"x": 1763.3,
"x": 2141.9,
"y": 118.5
},
{
"x": 1804.9,
"x": 2217.3,
"y": 118.5
},
{
"x": 1888.5,
"x": 2368.5,
"y": 118.5
}
],

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

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="2352" height="441" viewBox="-102 -102 2352 441"><style type="text/css">
width="2832" height="441" viewBox="-102 -102 2832 441"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,12 +39,12 @@ width="2352" height="441" viewBox="-102 -102 2352 441"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2148" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="644" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1122" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1187.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1462" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1571.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1889" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1966.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[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 437.500000 118.500000 C 518.300000 118.500000 559.900000 118.500000 639.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="540.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 915.500000 118.500000 C 996.300000 118.500000 1037.900000 118.500000 1117.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1018.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1257.500000 118.500000 C 1336.300000 118.500000 1377.900000 118.500000 1457.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1357.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1682.500000 118.500000 C 1763.300000 118.500000 1804.900000 118.500000 1884.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1784.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2571260716" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2352" height="441">
<rect x="-100" y="-100" width="2352" height="441" fill="white"></rect>
<rect x="513.000000" y="108.000000" width="54" height="21" fill="black"></rect>
<rect x="949.000000" y="108.000000" width="138" height="21" fill="black"></rect>
<rect x="1298.000000" y="108.000000" width="119" height="21" fill="black"></rect>
<rect x="1700.000000" y="108.000000" width="169" height="21" fill="black"></rect>
]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2628" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1314.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="698" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="832.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1314" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1379.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1773" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1882.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2369" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2446.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[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 437.500000 118.500000 C 539.900000 118.500000 592.300000 118.500000 693.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="567.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 968.500000 118.500000 C 1105.300000 118.500000 1174.700000 118.500000 1309.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1140.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1449.500000 118.500000 C 1575.900000 118.500000 1641.300000 118.500000 1768.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1609.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1993.500000 118.500000 C 2141.900000 118.500000 2217.300000 118.500000 2364.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="2180.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2839978883" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2832" height="441">
<rect x="-100" y="-100" width="2832" height="441" fill="white"></rect>
<rect x="540.000000" y="108.000000" width="54" height="21" fill="black"></rect>
<rect x="1071.000000" y="108.000000" width="138" height="21" fill="black"></rect>
<rect x="1550.000000" y="108.000000" width="119" height="21" fill="black"></rect>
<rect x="2096.000000" y="108.000000" width="169" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text {
font-family: "font-regular";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 795 KiB

After

Width:  |  Height:  |  Size: 795 KiB

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

@ -10,7 +10,7 @@
"y": 0
},
"width": 430,
"height": 1488,
"height": 1672,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -87,7 +87,7 @@
"type": "",
"pos": {
"x": 81,
"y": 356
"y": 382
},
"width": 269,
"height": 137,
@ -127,7 +127,7 @@
"type": "",
"pos": {
"x": 150,
"y": 639
"y": 771
},
"width": 131,
"height": 137,
@ -167,7 +167,7 @@
"type": "",
"pos": {
"x": 106,
"y": 995
"y": 1153
},
"width": 218,
"height": 137,
@ -207,7 +207,7 @@
"type": "",
"pos": {
"x": 138,
"y": 1278
"y": 1462
},
"width": 155,
"height": 137,
@ -250,7 +250,7 @@
"y": 0
},
"width": 371,
"height": 849,
"height": 981,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -327,7 +327,7 @@
"type": "",
"pos": {
"x": 521,
"y": 356
"y": 382
},
"width": 269,
"height": 137,
@ -367,7 +367,7 @@
"type": "",
"pos": {
"x": 578,
"y": 639
"y": 771
},
"width": 155,
"height": 137,
@ -409,8 +409,8 @@
"x": 881,
"y": 0
},
"width": 369,
"height": 849,
"width": 613,
"height": 981,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -446,7 +446,7 @@
"id": "apollo_workflow.apollo",
"type": "",
"pos": {
"x": 947,
"x": 1069,
"y": 73
},
"width": 238,
@ -486,8 +486,8 @@
"id": "apollo_workflow.GHA",
"type": "",
"pos": {
"x": 931,
"y": 356
"x": 1053,
"y": 382
},
"width": 269,
"height": 137,
@ -526,8 +526,8 @@
"id": "apollo_workflow.AWS",
"type": "",
"pos": {
"x": 988,
"y": 639
"x": 1110,
"y": 771
},
"width": 155,
"height": 137,
@ -595,15 +595,15 @@
},
{
"x": 215,
"y": 268.4
"y": 278.8
},
{
"x": 215,
"y": 297.6
"y": 313.2
},
{
"x": 215,
"y": 356
"y": 382
}
],
"isCurve": true,
@ -639,19 +639,19 @@
"route": [
{
"x": 215,
"y": 493
"y": 519
},
{
"x": 215,
"y": 551.4
"y": 619.8
},
{
"x": 215,
"y": 580.6
"y": 670.2
},
{
"x": 215,
"y": 639
"y": 771
}
],
"isCurve": true,
@ -687,19 +687,19 @@
"route": [
{
"x": 215,
"y": 776
"y": 908
},
{
"x": 215,
"y": 834.4
"y": 966.4
},
{
"x": 215,
"y": 936.6
"y": 1084.2
},
{
"x": 215,
"y": 995
"y": 1153
}
],
"isCurve": true,
@ -735,19 +735,19 @@
"route": [
{
"x": 215,
"y": 1132
"y": 1290
},
{
"x": 215,
"y": 1190.4
"y": 1358.8
},
{
"x": 215,
"y": 1219.6
"y": 1393.2
},
{
"x": 215,
"y": 1278
"y": 1462
}
],
"isCurve": true,
@ -787,15 +787,15 @@
},
{
"x": 655.5,
"y": 268.4
"y": 278.8
},
{
"x": 655.5,
"y": 297.6
"y": 313.2
},
{
"x": 655.5,
"y": 356
"y": 382
}
],
"isCurve": true,
@ -831,19 +831,19 @@
"route": [
{
"x": 655.5,
"y": 493
"y": 519
},
{
"x": 655.5,
"y": 551.4
"y": 619.8
},
{
"x": 655.5,
"y": 580.6
"y": 670.2
},
{
"x": 655.5,
"y": 639
"y": 771
}
],
"isCurve": true,
@ -878,20 +878,20 @@
"labelPercentage": 0,
"route": [
{
"x": 1065.5,
"x": 1187.5,
"y": 210
},
{
"x": 1065.5,
"y": 268.4
"x": 1187.5,
"y": 278.8
},
{
"x": 1065.5,
"y": 297.6
"x": 1187.5,
"y": 313.2
},
{
"x": 1065.5,
"y": 356
"x": 1187.5,
"y": 382
}
],
"isCurve": true,
@ -926,20 +926,20 @@
"labelPercentage": 0,
"route": [
{
"x": 1065.5,
"y": 493
"x": 1187.5,
"y": 519
},
{
"x": 1065.5,
"y": 551.4
"x": 1187.5,
"y": 619.8
},
{
"x": 1065.5,
"y": 580.6
"x": 1187.5,
"y": 670.2
},
{
"x": 1065.5,
"y": 639
"x": 1187.5,
"y": 771
}
],
"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: 800 KiB

After

Width:  |  Height:  |  Size: 800 KiB

600
e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,600 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "k8s",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 1621,
"height": 226,
"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": "Kubernetes",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 138,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "k8s.m1",
"type": "",
"pos": {
"x": 116,
"y": 50
},
"width": 192,
"height": 126,
"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": "k8s-master1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.m2",
"type": "",
"pos": {
"x": 368,
"y": 50
},
"width": 192,
"height": 126,
"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": "k8s-master2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.m3",
"type": "",
"pos": {
"x": 620,
"y": 50
},
"width": 192,
"height": 126,
"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": "k8s-master3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w1",
"type": "",
"pos": {
"x": 872,
"y": 50
},
"width": 193,
"height": 126,
"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": "k8s-worker1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w2",
"type": "",
"pos": {
"x": 1125,
"y": 50
},
"width": 193,
"height": 126,
"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": "k8s-worker2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w3",
"type": "",
"pos": {
"x": 1378,
"y": 50
},
"width": 193,
"height": 126,
"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": "k8s-worker3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "osvc",
"type": "",
"pos": {
"x": 0,
"y": 347
},
"width": 555,
"height": 226,
"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": "opensvc",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 102,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "osvc.vm1",
"type": "",
"pos": {
"x": 171,
"y": 397
},
"width": 136,
"height": 126,
"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": "VM1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "osvc.vm2",
"type": "",
"pos": {
"x": 369,
"y": 397
},
"width": 136,
"height": 126,
"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": "VM2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [
{
"id": "(k8s -> osvc)[0]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "keycloak",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 59,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 99,
"y": 226
},
{
"x": 99,
"y": 274.4
},
{
"x": 99,
"y": 298.7
},
{
"x": 99,
"y": 347.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[1]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "heptapod",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 65,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 201,
"y": 226
},
{
"x": 201,
"y": 274.4
},
{
"x": 201,
"y": 298.7
},
{
"x": 201,
"y": 347.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[2]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "harbor",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 47,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 297,
"y": 226
},
{
"x": 297,
"y": 274.4
},
{
"x": 297,
"y": 298.7
},
{
"x": 297,
"y": 347.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[3]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "vault",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 378,
"y": 226
},
{
"x": 378,
"y": 274.4
},
{
"x": 378,
"y": 298.7
},
{
"x": 378,
"y": 347.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

69
e2etests/testdata/regression/overlapping-edge-label/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: 796 KiB

588
e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,588 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "k8s",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 1405,
"height": 276,
"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": "Kubernetes",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 138,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "k8s.m1",
"type": "",
"pos": {
"x": 87,
"y": 87
},
"width": 192,
"height": 126,
"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": "k8s-master1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.m2",
"type": "",
"pos": {
"x": 299,
"y": 87
},
"width": 192,
"height": 126,
"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": "k8s-master2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.m3",
"type": "",
"pos": {
"x": 511,
"y": 87
},
"width": 192,
"height": 126,
"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": "k8s-master3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 92,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w1",
"type": "",
"pos": {
"x": 723,
"y": 87
},
"width": 193,
"height": 126,
"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": "k8s-worker1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w2",
"type": "",
"pos": {
"x": 936,
"y": 87
},
"width": 193,
"height": 126,
"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": "k8s-worker2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "k8s.w3",
"type": "",
"pos": {
"x": 1149,
"y": 87
},
"width": 193,
"height": 126,
"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": "k8s-worker3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 93,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "osvc",
"type": "",
"pos": {
"x": 397,
"y": 519
},
"width": 442,
"height": 276,
"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": "opensvc",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 102,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "osvc.vm1",
"type": "",
"pos": {
"x": 472,
"y": 594
},
"width": 136,
"height": 126,
"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": "VM1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "osvc.vm2",
"type": "",
"pos": {
"x": 628,
"y": 594
},
"width": 136,
"height": 126,
"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": "VM2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [
{
"id": "(k8s -> osvc)[0]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "keycloak",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 59,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 293,
"y": 288
},
{
"x": 293,
"y": 459
},
{
"x": 485.6,
"y": 459
},
{
"x": 485.6,
"y": 519
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[1]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "heptapod",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 65,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 574,
"y": 288
},
{
"x": 574,
"y": 519
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[2]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "harbor",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 47,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 855,
"y": 288
},
{
"x": 855,
"y": 459
},
{
"x": 662.4000000000001,
"y": 459
},
{
"x": 662.4000000000001,
"y": 519
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(k8s -> osvc)[3]",
"src": "k8s",
"srcArrow": "none",
"srcLabel": "",
"dst": "osvc",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "vault",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1136,
"y": 288
},
{
"x": 1136,
"y": 469
},
{
"x": 750.8,
"y": 469
},
{
"x": 750.8,
"y": 519
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

69
e2etests/testdata/regression/overlapping-edge-label/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: 796 KiB

8
e2etests/testdata/sanity/connection_label/dagre/board.exp.json generated vendored
View file

@ -47,7 +47,7 @@
"type": "",
"pos": {
"x": 0,
"y": 226
"y": 247
},
"width": 113,
"height": 126,
@ -115,15 +115,15 @@
},
{
"x": 56.5,
"y": 166
"y": 174.4
},
{
"x": 56.5,
"y": 186
"y": 198.7
},
{
"x": 56.5,
"y": 226
"y": 247.5
}
],
"isCurve": true,

8
e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
width="317" height="577" viewBox="-102 -102 317 577"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,9 +39,9 @@ width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><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(#894944389)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="894944389" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
<rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
<rect x="40.000000" y="166.000000" width="33" height="21" fill="black"></rect>
]]></script><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="247" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="313.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 174.400000 56.500000 198.700000 56.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2864276101)"/><text class="text-italic" x="56.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2864276101" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="577">
<rect x="-100" y="-100" width="317" height="577" fill="white"></rect>
<rect x="40.000000" y="176.000000" width="33" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 468 KiB

20
e2etests/testdata/stable/arrowhead_labels/dagre/board.exp.json generated vendored
View file

@ -6,7 +6,7 @@
"id": "a",
"type": "",
"pos": {
"x": 0,
"x": 44,
"y": 0
},
"width": 113,
@ -46,8 +46,8 @@
"id": "b",
"type": "",
"pos": {
"x": 0,
"y": 226
"x": 44,
"y": 247
},
"width": 113,
"height": 126,
@ -110,20 +110,20 @@
"labelPercentage": 0,
"route": [
{
"x": 56.5,
"x": 100.5,
"y": 126
},
{
"x": 56.5,
"y": 166
"x": 100.5,
"y": 174.4
},
{
"x": 56.5,
"y": 186
"x": 100.5,
"y": 198.7
},
{
"x": 56.5,
"y": 226
"x": 100.5,
"y": 247.5
}
],
"isCurve": true,

8
e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="401" height="556" viewBox="-144 -102 401 556"><style type="text/css">
width="401" height="577" viewBox="-100 -102 401 577"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,9 +39,9 @@ width="401" height="556" viewBox="-144 -102 401 556"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><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-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 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-1247258845)" mask="url(#2296324013)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="2296324013" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="556">
<rect x="-100" y="-100" width="401" height="556" fill="white"></rect>
<rect x="-44.000000" y="166.000000" width="201" height="21" fill="black"></rect>
]]></script><g id="a"><g class="shape" ><rect x="44" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="100.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="44" y="247" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="100.500000" y="313.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 100.500000 128.000000 C 100.500000 174.400000 100.500000 198.700000 100.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3431639921)"/><text class="text-italic" x="100.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="114.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="114.500000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3431639921" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="577">
<rect x="-100" y="-100" width="401" height="577" fill="white"></rect>
<rect x="0.000000" y="176.000000" width="201" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 469 KiB

40
e2etests/testdata/stable/chaos1/dagre/board.exp.json generated vendored
View file

@ -9,8 +9,8 @@
"x": 0,
"y": 0
},
"width": 251,
"height": 452,
"width": 263,
"height": 473,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -47,7 +47,7 @@
"type": "callout",
"pos": {
"x": 50,
"y": 276
"y": 297
},
"width": 132,
"height": 126,
@ -86,7 +86,7 @@
"id": "ddd",
"type": "cylinder",
"pos": {
"x": 301,
"x": 313,
"y": 50
},
"width": 133,
@ -126,8 +126,8 @@
"id": "eee",
"type": "document",
"pos": {
"x": 301,
"y": 276
"x": 313,
"y": 297
},
"width": 130,
"height": 126,
@ -166,7 +166,7 @@
"id": "aaa.ccc",
"type": "",
"pos": {
"x": 72,
"x": 84,
"y": 50
},
"width": 128,
@ -230,20 +230,20 @@
"labelPercentage": 0,
"route": [
{
"x": 124.84955752212389,
"x": 131.67611336032388,
"y": 176
},
{
"x": 117.76991150442478,
"y": 216
"x": 119.13522267206477,
"y": 224.4
},
{
"x": 116,
"y": 236
"y": 248.6
},
{
"x": 116,
"y": 276
"y": 297
}
],
"isCurve": true,
@ -278,20 +278,20 @@
"labelPercentage": 0,
"route": [
{
"x": 301,
"y": 301
"x": 313,
"y": 320
},
{
"x": 199.39999999999998,
"y": 241
"x": 206.6,
"y": 253.2
},
{
"x": 170.6,
"y": 216
"x": 176.8,
"y": 224.3
},
{
"x": 157,
"y": 176
"x": 164,
"y": 175.5
}
],
"isCurve": true,

10
e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="638" height="656" viewBox="-102 -102 638 656"><style type="text/css">
width="650" height="677" viewBox="-102 -102 650 677"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,10 +39,10 @@ width="638" height="656" viewBox="-102 -102 638 656"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3990951543)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3990951543)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3990951543" maskUnits="userSpaceOnUse" x="-100" y="-100" width="638" height="656">
<rect x="-100" y="-100" width="638" height="656" fill="white"></rect>
<rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect>
<rect x="203.000000" y="240.000000" width="25" height="21" fill="black"></rect>
]]></script><g id="aaa"><g class="shape" ><rect x="0" y="0" width="263" height="473" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="131.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 313 74 C 313 50 372.85 50 379.5 50 C 386.15 50 446 50 446 74 V 152 C 446 176 386.15 176 379.5 176 C 372.85 176 313 176 313 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 313 74 C 313 98 372.85 98 379.5 98 C 386.15 98 446 98 446 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="379.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 313 405.5231 L 313 297 L 443 297 L 443 405.5231 C 421.3333 382.2206 399.6667 382.2206 378 405.5231 C 356.3333 428.8256 334.6667 428.8256 313 405.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="378.000000" y="363.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 297 V 378 H 116 V 423 L 146 378 H 182 V 297 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="340.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="84" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="148.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 131.174461 177.936064 C 119.135223 224.400000 116.000000 248.600000 116.000000 295.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1809564108)"/><text class="text-italic" x="117.500000" y="241.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 309.612307 317.873140 C 206.600000 253.200000 176.800000 224.300000 164.507425 177.434559" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1809564108)"/><text class="text-italic" x="220.500000" y="268.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="1809564108" maskUnits="userSpaceOnUse" x="-100" y="-100" width="650" height="677">
<rect x="-100" y="-100" width="650" height="677" fill="white"></rect>
<rect x="106.000000" y="225.000000" width="23" height="21" fill="black"></rect>
<rect x="208.000000" y="252.000000" width="25" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text {
font-family: "font-regular";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 794 KiB

After

Width:  |  Height:  |  Size: 794 KiB

316
e2etests/testdata/stable/chaos2/dagre/board.exp.json generated vendored
View file

@ -9,8 +9,8 @@
"x": 0,
"y": 0
},
"width": 1115,
"height": 1651,
"width": 1127,
"height": 1735,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -49,8 +49,8 @@
"x": 40,
"y": 50
},
"width": 776,
"height": 1551,
"width": 788,
"height": 1635,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -87,10 +87,10 @@
"type": "",
"pos": {
"x": 80,
"y": 878
"y": 920
},
"width": 510,
"height": 673,
"width": 522,
"height": 715,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -127,9 +127,9 @@
"type": "rectangle",
"pos": {
"x": 120,
"y": 928
"y": 970
},
"width": 355,
"width": 366,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -166,8 +166,8 @@
"id": "aa.bb.cc.dd.ee",
"type": "text",
"pos": {
"x": 232,
"y": 1031
"x": 241,
"y": 1073
},
"width": 16,
"height": 21,
@ -205,8 +205,8 @@
"id": "aa.bb.cc.dd.ff",
"type": "",
"pos": {
"x": 308,
"y": 978
"x": 320,
"y": 1020
},
"width": 117,
"height": 126,
@ -245,8 +245,8 @@
"id": "aa.bb.cc.gg",
"type": "text",
"pos": {
"x": 409,
"y": 1254
"x": 426,
"y": 1317
},
"width": 17,
"height": 21,
@ -284,8 +284,8 @@
"id": "aa.bb.cc.hh",
"type": "",
"pos": {
"x": 356,
"y": 1375
"x": 373,
"y": 1459
},
"width": 123,
"height": 126,
@ -327,7 +327,7 @@
"x": 106,
"y": 100
},
"width": 367,
"width": 408,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -364,7 +364,7 @@
"id": "aa.bb.ii.jj",
"type": "diamond",
"pos": {
"x": 243,
"x": 263,
"y": 150
},
"width": 115,
@ -404,8 +404,8 @@
"id": "aa.bb.kk",
"type": "oval",
"pos": {
"x": 641,
"y": 1375
"x": 652,
"y": 1459
},
"width": 126,
"height": 126,
@ -444,8 +444,8 @@
"id": "aa.ll",
"type": "",
"pos": {
"x": 914,
"y": 652
"x": 925,
"y": 673
},
"width": 114,
"height": 126,
@ -484,8 +484,8 @@
"id": "aa.mm",
"type": "cylinder",
"pos": {
"x": 901,
"y": 426
"x": 912,
"y": 447
},
"width": 131,
"height": 126,
@ -524,8 +524,8 @@
"id": "aa.nn",
"type": "text",
"pos": {
"x": 867,
"y": 1428
"x": 878,
"y": 1512
},
"width": 16,
"height": 21,
@ -563,8 +563,8 @@
"id": "aa.oo",
"type": "",
"pos": {
"x": 943,
"y": 1375
"x": 954,
"y": 1459
},
"width": 123,
"height": 126,
@ -627,20 +627,20 @@
"labelPercentage": 0,
"route": [
{
"x": 240,
"y": 1052.5
"x": 248.5,
"y": 1094.5
},
{
"x": 240,
"y": 1133.7
"x": 248.5,
"y": 1175.7
},
{
"x": 273.8,
"y": 1215.6
"x": 284.1,
"y": 1270.1
},
{
"x": 409,
"y": 1262
"x": 426.5,
"y": 1324.5
}
],
"isCurve": true,
@ -675,20 +675,20 @@
"labelPercentage": 0,
"route": [
{
"x": 417.5,
"y": 1275
"x": 434.5,
"y": 1338
},
{
"x": 417.5,
"y": 1315
"x": 434.5,
"y": 1386.4
},
{
"x": 417.5,
"y": 1335
"x": 434.5,
"y": 1410.7
},
{
"x": 417.5,
"y": 1375
"x": 434.5,
"y": 1459.5
}
],
"isCurve": true,
@ -728,63 +728,63 @@
},
{
"x": 200,
"y": 366
"y": 374.4
},
{
"x": 200,
"y": 398.6
"y": 411.2
},
{
"x": 200,
"y": 432.5
"y": 448.25
},
{
"x": 200,
"y": 466.4
"y": 485.3
},
{
"x": 200,
"y": 511.6
"y": 532.6
},
{
"x": 200,
"y": 545.5
"y": 566.5
},
{
"x": 200,
"y": 579.4
"y": 600.4
},
{
"x": 200,
"y": 624.6
"y": 645.6
},
{
"x": 200,
"y": 658.5
"y": 679.5
},
{
"x": 200,
"y": 692.4
"y": 713.4
},
{
"x": 200,
"y": 737.6
"y": 760.7
},
{
"x": 200,
"y": 771.5
"y": 797.75
},
{
"x": 200,
"y": 805.4
"y": 834.8
},
{
"x": 200,
"y": 888
"y": 930
},
{
"x": 200,
"y": 928
"y": 970
}
],
"isCurve": true,
@ -819,20 +819,20 @@
"labelPercentage": 0,
"route": [
{
"x": 913.5,
"y": 723.8172484599589
"x": 925,
"y": 745.597137014315
},
{
"x": 835.9,
"y": 735.8172484599589
"x": 847.4,
"y": 758.3971370143149
},
{
"x": 894.1,
"y": 726.8172484599589
"x": 905.6,
"y": 748.797137014315
},
{
"x": 816.5,
"y": 738.8172484599589
"x": 828,
"y": 761.597137014315
}
],
"isCurve": true,
@ -867,32 +867,32 @@
"labelPercentage": 0,
"route": [
{
"x": 901,
"y": 500
"x": 912,
"y": 521
},
{
"x": 404.2,
"y": 581.6
"x": 420,
"y": 602.6
},
{
"x": 280,
"y": 624.6
"x": 297,
"y": 645.6
},
{
"x": 280,
"y": 658.5
"x": 297,
"y": 679.5
},
{
"x": 280,
"y": 692.4
"x": 297,
"y": 713.4
},
{
"x": 280,
"y": 838
"x": 297,
"y": 871.7
},
{
"x": 280,
"y": 878
"x": 297,
"y": 920.5
}
],
"isCurve": true,
@ -927,20 +927,20 @@
"labelPercentage": 0,
"route": [
{
"x": 969,
"y": 552
"x": 980,
"y": 573
},
{
"x": 970.2,
"y": 592
"x": 981.6,
"y": 613
},
{
"x": 970.5,
"y": 612
"x": 982,
"y": 633
},
{
"x": 970.5,
"y": 652
"x": 982,
"y": 673
}
],
"isCurve": true,
@ -975,20 +975,20 @@
"labelPercentage": 0,
"route": [
{
"x": 901,
"y": 500
"x": 912,
"y": 522
},
{
"x": 833.6,
"y": 512.3623984526112
"x": 845,
"y": 533.8777110844337
},
{
"x": 884.15,
"y": 503.0905996131528
"x": 895.25,
"y": 524.9694277711085
},
{
"x": 816.75,
"y": 515.452998065764
"x": 828.25,
"y": 536.8471388555422
}
],
"isCurve": true,
@ -1023,68 +1023,68 @@
"labelPercentage": 0,
"route": [
{
"x": 913.5,
"y": 729.1405049396268
"x": 925,
"y": 751.4544456641054
},
{
"x": 594.7,
"y": 808.2281009879254
"x": 606.2,
"y": 837.890889132821
},
{
"x": 515,
"y": 838
"x": 526.5,
"y": 871.6
},
{
"x": 515,
"y": 853
"x": 526.5,
"y": 889.75
},
{
"x": 515,
"y": 868
"x": 526.5,
"y": 907.9
},
{
"x": 515,
"y": 888
"x": 526.5,
"y": 930
},
{
"x": 515,
"y": 903
"x": 526.5,
"y": 945
},
{
"x": 515,
"y": 918
"x": 526.5,
"y": 960
},
{
"x": 515,
"y": 950.6
"x": 526.5,
"y": 992.6
},
{
"x": 515,
"y": 984.5
"x": 526.5,
"y": 1026.5
},
{
"x": 515,
"y": 1018.4
"x": 526.5,
"y": 1060.4
},
{
"x": 515,
"y": 1063.6
"x": 526.5,
"y": 1105.6
},
{
"x": 515,
"y": 1097.5
"x": 526.5,
"y": 1139.5
},
{
"x": 515,
"y": 1131.4
"x": 526.5,
"y": 1173.4
},
{
"x": 497.2,
"y": 1215
"x": 509.7,
"y": 1269.3
},
{
"x": 426,
"y": 1259
"x": 442.5,
"y": 1320.5
}
],
"isCurve": true,
@ -1119,19 +1119,19 @@
"labelPercentage": 0,
"route": [
{
"x": 901,
"y": 476
"x": 912,
"y": 495
},
{
"x": 500.2,
"y": 396
"x": 535.2,
"y": 408.2
},
{
"x": 400,
"y": 366
"x": 441,
"y": 374.4
},
{
"x": 400,
"x": 441,
"y": 326
}
],
@ -1167,20 +1167,20 @@
"labelPercentage": 0,
"route": [
{
"x": 377.5,
"y": 878
"x": 401,
"y": 920
},
{
"x": 377.5,
"y": 838
"x": 401,
"y": 871.6
},
{
"x": 484.7,
"y": 807.5723440134907
"x": 505.8,
"y": 837.3
},
{
"x": 913.5,
"y": 725.8617200674536
"x": 925,
"y": 748.5
}
],
"isCurve": true,
@ -1215,32 +1215,32 @@
"labelPercentage": 0,
"route": [
{
"x": 360,
"x": 393,
"y": 326
},
{
"x": 360,
"y": 366
"x": 393,
"y": 374.4
},
{
"x": 360,
"y": 398.6
"x": 393,
"y": 411.2
},
{
"x": 360,
"y": 432.5
"x": 393,
"y": 448.25
},
{
"x": 360,
"y": 466.4
"x": 393,
"y": 485.3
},
{
"x": 470.7,
"y": 622.4899262899263
"x": 499.4,
"y": 643.4
},
{
"x": 913.5,
"y": 704.4496314496314
"x": 925,
"y": 725
}
],
"isCurve": true,

22
e2etests/testdata/stable/chaos2/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: 812 KiB

After

Width:  |  Height:  |  Size: 812 KiB

80
e2etests/testdata/stable/child_parent_edges/dagre/board.exp.json generated vendored
View file

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 524,
"width": 494,
"height": 426,
"opacity": 1,
"strokeDash": 0,
@ -49,7 +49,7 @@
"x": 40,
"y": 50
},
"width": 444,
"width": 414,
"height": 326,
"opacity": 1,
"strokeDash": 0,
@ -89,7 +89,7 @@
"x": 80,
"y": 100
},
"width": 364,
"width": 334,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -191,55 +191,55 @@
"route": [
{
"x": 244,
"y": 174.66192170818505
"y": 173.24723247232473
},
{
"x": 273.33333333333337,
"y": 154.932384341637
"x": 270.66666666666663,
"y": 154.64944649446494
},
{
"x": 282.5,
"x": 279,
"y": 150
},
{
"x": 285.25,
"x": 281.5,
"y": 150
},
{
"x": 288,
"x": 284,
"y": 150
},
{
"x": 291.66666666666663,
"x": 287.33333333333337,
"y": 162.6
},
{
"x": 294.41666666666663,
"x": 289.83333333333337,
"y": 181.5
},
{
"x": 297.1666666666667,
"x": 292.3333333333333,
"y": 200.4
},
{
"x": 297.1666666666667,
"x": 292.3333333333333,
"y": 225.6
},
{
"x": 294.41666666666663,
"x": 289.83333333333337,
"y": 244.5
},
{
"x": 291.66666666666663,
"x": 287.33333333333337,
"y": 263.4
},
{
"x": 273.33333333333337,
"y": 271.06761565836297
"x": 270.66666666666663,
"y": 271.35055350553506
},
{
"x": 244,
"y": 251.33807829181495
"y": 252.75276752767527
}
],
"isCurve": true,
@ -275,55 +275,55 @@
"route": [
{
"x": 244,
"y": 184.7244094488189
"y": 182.30769230769232
},
{
"x": 300,
"y": 156.9448818897638
"x": 292,
"y": 156.46153846153845
},
{
"x": 317.5,
"x": 307,
"y": 150
},
{
"x": 322.75,
"x": 311.5,
"y": 150
},
{
"x": 328,
"x": 316,
"y": 150
},
{
"x": 335,
"x": 322,
"y": 162.6
},
{
"x": 340.25,
"x": 326.5,
"y": 181.5
},
{
"x": 345.5,
"x": 331,
"y": 200.4
},
{
"x": 345.5,
"x": 331,
"y": 225.6
},
{
"x": 340.25,
"x": 326.5,
"y": 244.5
},
{
"x": 335,
"x": 322,
"y": 263.4
},
{
"x": 300,
"y": 269.0551181102362
"x": 292,
"y": 269.53846153846155
},
{
"x": 244,
"y": 241.2755905511811
"y": 243.69230769230768
}
],
"isCurve": true,
@ -358,20 +358,20 @@
"labelPercentage": 0,
"route": [
{
"x": 244.33333333333331,
"y": 235
"x": 243.66666666666669,
"y": 238
},
{
"x": 244.06666666666666,
"y": 235.3176715176715
"x": 243.93333333333334,
"y": 237.99628770301624
},
{
"x": 244.26666666666665,
"y": 235.0794178794179
"x": 243.73333333333335,
"y": 237.99907192575407
},
{
"x": 244,
"y": 235.3970893970894
"y": 237.9953596287703
}
],
"isCurve": true,

6
e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="728" height="630" viewBox="-102 -102 728 630"><style type="text/css">
width="698" height="630" viewBox="-102 -102 698 630"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="728" height="630" viewBox="-102 -102 728 630"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[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 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><mask id="3367121272" maskUnits="userSpaceOnUse" x="-100" y="-100" width="728" height="630">
<rect x="-100" y="-100" width="728" height="630" fill="white"></rect>
]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="494" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="247.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="414" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="247.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="334" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="247.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[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 245.640452 172.103153 C 270.666667 154.649446 279.000000 150.000000 281.500000 150.000000 C 284.000000 150.000000 287.333333 162.600000 289.833333 181.500000 C 292.333333 200.400000 292.333333 225.600000 289.833333 244.500000 C 287.333333 263.400000 270.666667 271.350554 247.280904 255.040926" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3168013246)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.760942 181.359493 C 292.000000 156.461538 307.000000 150.000000 311.500000 150.000000 C 316.000000 150.000000 322.000000 162.600000 326.500000 181.500000 C 331.000000 200.400000 331.000000 225.600000 326.500000 244.500000 C 322.000000 263.400000 292.000000 269.538462 247.521884 245.588707" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3168013246)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 245.666473 237.972160 C 243.933333 237.996288 243.733333 237.999072 240.000388 238.051039" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3168013246)"/></g><mask id="3168013246" maskUnits="userSpaceOnUse" x="-100" y="-100" width="698" height="630">
<rect x="-100" y="-100" width="698" height="630" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 KiB

After

Width:  |  Height:  |  Size: 650 KiB

8
e2etests/testdata/stable/font_colors/dagre/board.exp.json generated vendored
View file

@ -47,7 +47,7 @@
"type": "",
"pos": {
"x": 5,
"y": 226
"y": 247
},
"width": 136,
"height": 126,
@ -115,15 +115,15 @@
},
{
"x": 72.5,
"y": 166
"y": 174.4
},
{
"x": 72.5,
"y": 186
"y": 198.7
},
{
"x": 72.5,
"y": 226
"y": 247.5
}
],
"isCurve": true,

8
e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="349" height="556" viewBox="-102 -102 349 556"><style type="text/css">
width="349" height="577" viewBox="-102 -102 349 577"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,9 +39,9 @@ width="349" height="556" viewBox="-102 -102 349 556"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="alpha"><g class="shape" ><rect x="0" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="226" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[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 72.500000 128.000000 C 72.500000 166.000000 72.500000 186.000000 72.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1328439792)"/><text class="text-italic" x="73.000000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1328439792" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="556">
<rect x="-100" y="-100" width="349" height="556" fill="white"></rect>
<rect x="47.000000" y="166.000000" width="52" height="21" fill="black"></rect>
]]></script><g id="alpha"><g class="shape" ><rect x="0" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="247" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[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 72.500000 128.000000 C 72.500000 174.400000 72.500000 198.700000 72.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3972734510)"/><text class="text-italic" x="73.000000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="3972734510" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="577">
<rect x="-100" y="-100" width="349" height="577" fill="white"></rect>
<rect x="47.000000" y="176.000000" width="52" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 468 KiB

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

@ -7,7 +7,7 @@
"type": "",
"pos": {
"x": 1293,
"y": 279
"y": 340
},
"width": 145,
"height": 122,
@ -87,7 +87,7 @@
"type": "",
"pos": {
"x": 0,
"y": 277
"y": 338
},
"width": 147,
"height": 126,
@ -447,7 +447,7 @@
"type": "",
"pos": {
"x": 840,
"y": 247
"y": 308
},
"width": 393,
"height": 186,
@ -515,15 +515,15 @@
},
{
"x": 1365,
"y": 183.4
"y": 207.8
},
{
"x": 1365,
"y": 213.1
"y": 249.6
},
{
"x": 1365,
"y": 279.5
"y": 340
}
],
"isCurve": true,
@ -563,15 +563,15 @@
},
{
"x": 73.5,
"y": 184.3
"y": 208.7
},
{
"x": 73.5,
"y": 212.7
"y": 249.2
},
{
"x": 73.5,
"y": 277.5
"y": 338
}
],
"isCurve": true,
@ -612,15 +612,15 @@
},
{
"x": 1036,
"y": 186.4
"y": 210.8
},
{
"x": 1036,
"y": 206.7
"y": 243.2
},
{
"x": 1036,
"y": 247.5
"y": 308
}
],
"isCurve": true,

12
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: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB

630
e2etests/testdata/stable/investigate/dagre/board.exp.json generated vendored
View file

File diff suppressed because it is too large Load diff

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

After

Width:  |  Height:  |  Size: 814 KiB

8
e2etests/testdata/stable/latex/dagre/board.exp.json generated vendored
View file

@ -204,7 +204,7 @@
"type": "",
"pos": {
"x": 393,
"y": 603
"y": 624
},
"width": 164,
"height": 126,
@ -512,15 +512,15 @@
},
{
"x": 474.5,
"y": 543
"y": 551.4
},
{
"x": 474.5,
"y": 563
"y": 575.7
},
{
"x": 474.5,
"y": 603
"y": 624.5
}
],
"isCurve": true,

8
e2etests/testdata/stable/latex/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: 507 KiB

After

Width:  |  Height:  |  Size: 507 KiB

90
e2etests/testdata/stable/overlapping_image_container_labels/dagre/board.exp.json generated vendored
View file

@ -61,7 +61,7 @@
"y": 254
},
"width": 1112,
"height": 962,
"height": 1004,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -149,10 +149,10 @@
"type": "",
"pos": {
"x": 40,
"y": 558
"y": 579
},
"width": 496,
"height": 608,
"height": 629,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -189,7 +189,7 @@
"type": "image",
"pos": {
"x": 224,
"y": 608
"y": 629
},
"width": 128,
"height": 128,
@ -240,7 +240,7 @@
"type": "",
"pos": {
"x": 80,
"y": 862
"y": 904
},
"width": 416,
"height": 254,
@ -280,7 +280,7 @@
"type": "image",
"pos": {
"x": 130,
"y": 912
"y": 954
},
"width": 128,
"height": 128,
@ -331,7 +331,7 @@
"type": "image",
"pos": {
"x": 318,
"y": 912
"y": 954
},
"width": 128,
"height": 128,
@ -382,10 +382,10 @@
"type": "",
"pos": {
"x": 576,
"y": 558
"y": 579
},
"width": 496,
"height": 608,
"height": 629,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -422,7 +422,7 @@
"type": "image",
"pos": {
"x": 760,
"y": 608
"y": 629
},
"width": 128,
"height": 128,
@ -473,7 +473,7 @@
"type": "",
"pos": {
"x": 616,
"y": 862
"y": 904
},
"width": 416,
"height": 254,
@ -513,7 +513,7 @@
"type": "image",
"pos": {
"x": 666,
"y": 912
"y": 954
},
"width": 128,
"height": 128,
@ -564,7 +564,7 @@
"type": "image",
"pos": {
"x": 854,
"y": 912
"y": 954
},
"width": 128,
"height": 128,
@ -686,20 +686,20 @@
"labelPercentage": 0,
"route": [
{
"x": 231.00787401574803,
"y": 762
"x": 235.36,
"y": 783
},
{
"x": 201.4015748031496,
"y": 802
"x": 202.272,
"y": 831.4
},
{
"x": 194,
"y": 872
"y": 914
},
{
"x": 194,
"y": 912
"y": 954
}
],
"isCurve": true,
@ -734,20 +734,20 @@
"labelPercentage": 0,
"route": [
{
"x": 344.99212598425197,
"y": 762
"x": 340.64,
"y": 783
},
{
"x": 374.59842519685037,
"y": 802
"x": 373.728,
"y": 831.4
},
{
"x": 382,
"y": 872
"y": 914
},
{
"x": 382,
"y": 912
"y": 954
}
],
"isCurve": true,
@ -782,20 +782,20 @@
"labelPercentage": 0,
"route": [
{
"x": 767.007874015748,
"y": 762
"x": 771.36,
"y": 783
},
{
"x": 737.4015748031496,
"y": 802
"x": 738.272,
"y": 831.4
},
{
"x": 730,
"y": 872
"y": 914
},
{
"x": 730,
"y": 912
"y": 954
}
],
"isCurve": true,
@ -830,20 +830,20 @@
"labelPercentage": 0,
"route": [
{
"x": 880.992125984252,
"y": 762
"x": 876.64,
"y": 783
},
{
"x": 910.5984251968504,
"y": 802
"x": 909.728,
"y": 831.4
},
{
"x": 918,
"y": 872
"y": 914
},
{
"x": 918,
"y": 912
"y": 954
}
],
"isCurve": true,
@ -879,19 +879,19 @@
"route": [
{
"x": 492,
"y": 411.32835820895525
"y": 413.8358208955224
},
{
"x": 328.79999999999995,
"y": 488.66567164179105
"y": 497.56716417910445
},
{
"x": 288,
"y": 568
"y": 589
},
{
"x": 288,
"y": 608
"y": 629
}
],
"isCurve": true,
@ -927,19 +927,19 @@
"route": [
{
"x": 620,
"y": 411.32835820895525
"y": 413.8358208955224
},
{
"x": 783.2,
"y": 488.66567164179105
"y": 497.56716417910445
},
{
"x": 824,
"y": 568
"y": 589
},
{
"x": 824,
"y": 608
"y": 629
}
],
"isCurve": true,

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

After

Width:  |  Height:  |  Size: 798 KiB

118
e2etests/testdata/stable/self-referencing/dagre/board.exp.json generated vendored
View file

@ -46,7 +46,7 @@
"id": "y",
"type": "",
"pos": {
"x": 136,
"x": 126,
"y": 226
},
"width": 114,
@ -86,7 +86,7 @@
"id": "z",
"type": "",
"pos": {
"x": 273,
"x": 253,
"y": 0
},
"width": 112,
@ -151,55 +151,55 @@
"route": [
{
"x": 113,
"y": 24.794275491949918
"y": 23.37662337662337
},
{
"x": 142.33333333333334,
"y": 4.958855098389982
"x": 139.66666666666666,
"y": 4.675324675324674
},
{
"x": 151.5,
"x": 148,
"y": 0
},
{
"x": 154.25,
"x": 150.5,
"y": 0
},
{
"x": 157,
"x": 153,
"y": 0
},
{
"x": 160.66666666666666,
"x": 156.33333333333334,
"y": 12.600000000000001
},
{
"x": 163.41666666666666,
"x": 158.83333333333334,
"y": 31.5
},
{
"x": 166.16666666666666,
"x": 161.33333333333334,
"y": 50.400000000000006
},
{
"x": 166.16666666666666,
"x": 161.33333333333334,
"y": 75.6
},
{
"x": 163.41666666666666,
"x": 158.83333333333334,
"y": 94.5
},
{
"x": 160.66666666666666,
"x": 156.33333333333334,
"y": 113.4
},
{
"x": 142.33333333333334,
"y": 121.04114490161001
"x": 139.66666666666666,
"y": 121.32467532467533
},
{
"x": 113,
"y": 101.20572450805008
"y": 102.62337662337663
}
],
"isCurve": true,
@ -235,55 +235,55 @@
"route": [
{
"x": 113,
"y": 34.86166007905138
"y": 32.44635193133047
},
{
"x": 169,
"y": 6.972332015810274
"x": 161,
"y": 6.489270386266092
},
{
"x": 186.5,
"x": 176,
"y": 0
},
{
"x": 191.75,
"x": 180.5,
"y": 0
},
{
"x": 197,
"x": 185,
"y": 0
},
{
"x": 204,
"x": 191,
"y": 12.600000000000001
},
{
"x": 209.25,
"x": 195.5,
"y": 31.5
},
{
"x": 214.5,
"x": 200,
"y": 50.400000000000006
},
{
"x": 214.5,
"x": 200,
"y": 75.6
},
{
"x": 209.25,
"x": 195.5,
"y": 94.5
},
{
"x": 204,
"x": 191,
"y": 113.4
},
{
"x": 169,
"y": 119.02766798418972
"x": 161,
"y": 119.5107296137339
},
{
"x": 113,
"y": 91.13833992094862
"y": 93.55364806866953
}
],
"isCurve": true,
@ -326,12 +326,12 @@
"y": 166
},
{
"x": 72.35,
"y": 189.14532110091744
"x": 70.35,
"y": 188.39643564356436
},
{
"x": 135.75,
"y": 241.72660550458716
"x": 125.75,
"y": 237.9821782178218
}
],
"isCurve": true,
@ -366,20 +366,20 @@
"labelPercentage": 0,
"route": [
{
"x": 329,
"x": 309,
"y": 126
},
{
"x": 329,
"x": 309,
"y": 166
},
{
"x": 313.2,
"y": 189.2
"x": 295.2,
"y": 188.4
},
{
"x": 250,
"y": 242
"x": 240,
"y": 238
}
],
"isCurve": true,
@ -414,56 +414,56 @@
"labelPercentage": 0,
"route": [
{
"x": 385,
"y": 24.92805755395684
"x": 365,
"y": 27.837209302325576
},
{
"x": 414.33333333333337,
"y": 4.985611510791365
"x": 400.46666666666664,
"y": 5.567441860465113
},
{
"x": 423.5,
"x": 411.55,
"y": 0
},
{
"x": 426.25,
"x": 414.875,
"y": 0
},
{
"x": 429,
"x": 418.2,
"y": 0
},
{
"x": 432.66666666666663,
"x": 422.6333333333333,
"y": 12.600000000000001
},
{
"x": 435.41666666666663,
"x": 425.95833333333337,
"y": 31.5
},
{
"x": 438.1666666666667,
"x": 429.28333333333336,
"y": 50.400000000000006
},
{
"x": 438.1666666666667,
"x": 429.28333333333336,
"y": 75.6
},
{
"x": 435.41666666666663,
"x": 425.95833333333337,
"y": 94.5
},
{
"x": 432.66666666666663,
"x": 422.6333333333333,
"y": 113.4
},
{
"x": 414.33333333333337,
"y": 121.01438848920863
"x": 400.46666666666664,
"y": 120.43255813953489
},
{
"x": 385,
"y": 101.07194244604315
"x": 365,
"y": 98.16279069767442
}
],
"isCurve": true,

8
e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="656" height="556" viewBox="-102 -102 656 556"><style type="text/css">
width="647" height="556" viewBox="-102 -102 647 556"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,9 +39,9 @@ width="656" height="556" viewBox="-102 -102 656 556"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="x"><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">x</text></g><g id="y"><g class="shape" ><rect x="136" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="193.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="273" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[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 114.656769 23.673956 C 142.333333 4.958855 151.500000 0.000000 154.250000 0.000000 C 157.000000 0.000000 160.666667 12.600000 163.416667 31.500000 C 166.166667 50.400000 166.166667 75.600000 163.416667 94.500000 C 160.666667 113.400000 142.333333 121.041145 116.313538 103.446364" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; x)[1]"><path d="M 114.790267 33.970064 C 169.000000 6.972332 186.500000 0.000000 191.750000 0.000000 C 197.000000 0.000000 204.000000 12.600000 209.250000 31.500000 C 214.500000 50.400000 214.500000 75.600000 209.250000 94.500000 C 204.000000 113.400000 169.000000 119.027668 116.580535 92.921531" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; y)[0]"><path d="M 56.500000 128.000000 C 56.500000 166.000000 72.350000 189.145321 132.671104 239.173099" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; y)[0]"><path d="M 329.000000 128.000000 C 329.000000 166.000000 313.200000 189.200000 253.069698 239.435442" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; z)[0]"><path d="M 386.653964 23.803600 C 414.333333 4.985612 423.500000 0.000000 426.250000 0.000000 C 429.000000 0.000000 432.666667 12.600000 435.416667 31.500000 C 438.166667 50.400000 438.166667 75.600000 435.416667 94.500000 C 432.666667 113.400000 414.333333 121.014388 388.307927 103.320857" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/><text class="text-italic" x="438.500000" y="64.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2541740366" maskUnits="userSpaceOnUse" x="-100" y="-100" width="656" height="556">
<rect x="-100" y="-100" width="656" height="556" fill="white"></rect>
<rect x="422.000000" y="48.000000" width="33" height="21" fill="black"></rect>
]]></script><g id="x"><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">x</text></g><g id="y"><g class="shape" ><rect x="126" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="183.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="253" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="309.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[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 114.637464 22.228272 C 139.666667 4.675325 148.000000 0.000000 150.500000 0.000000 C 153.000000 0.000000 156.333333 12.600000 158.833333 31.500000 C 161.333333 50.400000 161.333333 75.600000 158.833333 94.500000 C 156.333333 113.400000 139.666667 121.324675 116.274928 104.920080" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2860337933)"/></g><g id="(x -&gt; x)[1]"><path d="M 114.759242 31.495002 C 161.000000 6.489270 176.000000 0.000000 180.500000 0.000000 C 185.000000 0.000000 191.000000 12.600000 195.500000 31.500000 C 200.000000 50.400000 200.000000 75.600000 195.500000 94.500000 C 191.000000 113.400000 161.000000 119.510730 116.518485 95.456348" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2860337933)"/></g><g id="(x -&gt; y)[0]"><path d="M 56.500000 128.000000 C 56.500000 166.000000 70.350000 188.396436 122.769498 235.314481" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2860337933)"/></g><g id="(z -&gt; y)[0]"><path d="M 309.000000 128.000000 C 309.000000 166.000000 295.200000 188.400000 242.975320 235.326524" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2860337933)"/></g><g id="(z -&gt; z)[0]"><path d="M 366.693780 26.773673 C 400.466667 5.567442 411.550000 0.000000 414.875000 0.000000 C 418.200000 0.000000 422.633333 12.600000 425.958333 31.500000 C 429.283333 50.400000 429.283333 75.600000 425.958333 94.500000 C 422.633333 113.400000 400.466667 120.432558 368.387560 100.289863" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2860337933)"/><text class="text-italic" x="429.500000" y="64.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2860337933" maskUnits="userSpaceOnUse" x="-100" y="-100" width="647" height="556">
<rect x="-100" y="-100" width="647" height="556" fill="white"></rect>
<rect x="413.000000" y="48.000000" width="33" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-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/stable/stylish/dagre/board.exp.json generated vendored
View file

@ -47,7 +47,7 @@
"type": "",
"pos": {
"x": 0,
"y": 226
"y": 247
},
"width": 114,
"height": 126,
@ -116,15 +116,15 @@
},
{
"x": 57,
"y": 166
"y": 174.4
},
{
"x": 57,
"y": 186
"y": 198.7
},
{
"x": 57,
"y": 226
"y": 247.5
}
],
"isCurve": true,

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

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="323" height="559" viewBox="-104 -105 323 559"><style type="text/css">
width="323" height="580" viewBox="-104 -105 323 580"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -47,11 +47,11 @@ width="323" height="559" viewBox="-104 -105 323 559"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="211" width="129" height="141">
<rect x="0" y="211" width="129" height="141" fill="white"></rect>
<path d="M0,226L15,211L129,211L129,337L114,352L0,352L0,226L114,226L114,352M114,226L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,226 15,211 129,211 129,337 114,352 114,226" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,226 L15,211 L129,211 L129,337 L114,352 L0,352 L0,226 L114,226 L114,352 M114,226 L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#3518596391)"/><rect x="34.000000" y="166.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="3518596391" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="559">
<rect x="-100" y="-100" width="323" height="559" fill="white"></rect>
<rect x="34.000000" y="166.000000" width="47" height="21" fill="black"></rect>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="232" width="129" height="141">
<rect x="0" y="232" width="129" height="141" fill="white"></rect>
<path d="M0,247L15,232L129,232L129,358L114,373L0,373L0,247L114,247L114,373M114,247L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="247" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,247 15,232 129,232 129,358 114,373 114,247" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,247 L15,232 L129,232 L129,358 L114,373 L0,373 L0,247 L114,247 L114,373 M114,247 L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 174.400000 57.000000 198.700000 57.000000 243.500000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#304389475)"/><rect x="34.000000" y="176.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="304389475" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="580">
<rect x="-100" y="-100" width="323" height="580" fill="white"></rect>
<rect x="34.000000" y="176.000000" width="47" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB

32
e2etests/testdata/todo/container_child_edge/dagre/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"y": 0
},
"width": 255,
"height": 452,
"height": 473,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -87,7 +87,7 @@
"type": "",
"pos": {
"x": 50,
"y": 276
"y": 297
},
"width": 155,
"height": 126,
@ -150,20 +150,20 @@
"labelPercentage": 0,
"route": [
{
"x": 103.10840707964601,
"x": 108.88056680161944,
"y": 176
},
{
"x": 87.6216814159292,
"y": 216
"x": 94.57611336032389,
"y": 224.4
},
{
"x": 87.55,
"y": 236
"x": 94.6,
"y": 248.7
},
{
"x": 102.75,
"y": 276
"x": 109,
"y": 297.5
}
],
"isCurve": true,
@ -198,20 +198,20 @@
"labelPercentage": 0,
"route": [
{
"x": 151.891592920354,
"x": 146.24696356275302,
"y": 176
},
{
"x": 167.3783185840708,
"y": 216
"x": 160.6493927125506,
"y": 224.4
},
{
"x": 167.45,
"y": 236
"x": 160.65,
"y": 248.7
},
{
"x": 152.25,
"y": 276
"x": 146.25,
"y": 297.5
}
],
"isCurve": true,

10
e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="459" height="656" viewBox="-102 -102 459 656"><style type="text/css">
width="459" height="677" viewBox="-102 -102 459 677"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,10 +39,10 @@ width="459" height="656" viewBox="-102 -102 459 656"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="container"><g class="shape" ><rect x="0" y="0" width="255" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="127.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="60" y="50" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="50" y="276" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="342.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 102.386303 177.865091 C 87.621681 216.000000 87.550000 236.000000 101.329129 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="87.500000" y="231.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 152.613697 177.865091 C 167.378319 216.000000 167.450000 236.000000 153.670871 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="167.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2577544665" maskUnits="userSpaceOnUse" x="-100" y="-100" width="459" height="656">
<rect x="-100" y="-100" width="459" height="656" fill="white"></rect>
<rect x="73.000000" y="215.000000" width="29" height="21" fill="black"></rect>
<rect x="153.000000" y="215.000000" width="28" height="21" fill="black"></rect>
]]></script><g id="container"><g class="shape" ><rect x="0" y="0" width="255" height="473" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="127.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="60" y="50" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="50" y="297" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="363.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 108.313712 177.917987 C 94.576113 224.400000 94.600000 248.700000 107.867930 293.663541" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2995070490)"/><text class="text-italic" x="94.500000" y="242.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 146.817386 177.916929 C 160.649393 224.400000 160.650000 248.700000 147.382070 293.663541" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2995070490)"/><text class="text-italic" x="161.000000" y="242.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2995070490" maskUnits="userSpaceOnUse" x="-100" y="-100" width="459" height="677">
<rect x="-100" y="-100" width="459" height="677" fill="white"></rect>
<rect x="80.000000" y="226.000000" width="29" height="21" fill="black"></rect>
<rect x="147.000000" y="226.000000" width="28" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text {
font-family: "font-regular";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 793 KiB

After

Width:  |  Height:  |  Size: 793 KiB

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

@ -47,7 +47,7 @@
"type": "",
"pos": {
"x": 216,
"y": 258
"y": 274
},
"width": 157,
"height": 126,
@ -87,7 +87,7 @@
"type": "",
"pos": {
"x": 171,
"y": 526
"y": 573
},
"width": 247,
"height": 146,
@ -127,7 +127,7 @@
"type": "",
"pos": {
"x": 108,
"y": 814
"y": 922
},
"width": 374,
"height": 186,
@ -167,7 +167,7 @@
"type": "",
"pos": {
"x": 0,
"y": 1142
"y": 1352
},
"width": 589,
"height": 230,
@ -235,15 +235,15 @@
},
{
"x": 294.5,
"y": 172.8
"y": 179.2
},
{
"x": 294.5,
"y": 201.2
"y": 210.8
},
{
"x": 294.5,
"y": 258
"y": 274
}
],
"isCurve": true,
@ -279,11 +279,7 @@
"route": [
{
"x": 294.5,
"y": 384
},
{
"x": 294.5,
"y": 440.8
"y": 400
},
{
"x": 294.5,
@ -291,7 +287,11 @@
},
{
"x": 294.5,
"y": 526
"y": 503.9
},
{
"x": 294.5,
"y": 573.5
}
],
"isCurve": true,
@ -327,19 +327,19 @@
"route": [
{
"x": 294.5,
"y": 672
"y": 719
},
{
"x": 294.5,
"y": 728.8
"y": 800.2
},
{
"x": 294.5,
"y": 757.2
"y": 840.9
},
{
"x": 294.5,
"y": 814
"y": 922.5
}
],
"isCurve": true,
@ -375,19 +375,19 @@
"route": [
{
"x": 294.5,
"y": 1000
"y": 1108
},
{
"x": 294.5,
"y": 1056.8
"y": 1205.6
},
{
"x": 294.5,
"y": 1085.2
"y": 1254.4
},
{
"x": 294.5,
"y": 1142
"y": 1352
}
],
"isCurve": true,

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

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="793" height="1576" viewBox="-102 -102 793 1576"><style type="text/css">
width="793" height="1786" viewBox="-102 -102 793 1786"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,12 +39,12 @@ width="793" height="1576" viewBox="-102 -102 793 1576"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><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="-100" y="-100" width="793" height="1576">
<rect x="-100" y="-100" width="793" height="1576" fill="white"></rect>
<rect x="278.000000" y="179.000000" width="33" height="16" fill="black"></rect>
<rect x="238.000000" y="440.000000" width="114" height="31" fill="black"></rect>
<rect x="194.000000" y="713.000000" width="202" height="61" fill="black"></rect>
<rect x="124.000000" y="1020.000000" width="341" height="102" fill="black"></rect>
]]></script><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="274" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="340.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="171" y="573" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="655.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="922" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="1036.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="1352" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="1501.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 179.200000 294.500000 210.800000 294.500000 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4185854119)"/><text class="text-italic" x="294.500000" y="199.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 402.000000 C 294.500000 469.200000 294.500000 503.900000 294.500000 569.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4185854119)"/><text class="text-italic" x="295.000000" y="495.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 721.000000 C 294.500000 800.200000 294.500000 840.900000 294.500000 918.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4185854119)"/><text class="text-italic" x="295.000000" y="838.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 1110.000000 C 294.500000 1205.600000 294.500000 1254.400000 294.500000 1348.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4185854119)"/><text class="text-italic" x="294.500000" y="1260.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="4185854119" maskUnits="userSpaceOnUse" x="-100" y="-100" width="793" height="1786">
<rect x="-100" y="-100" width="793" height="1786" fill="white"></rect>
<rect x="278.000000" y="187.000000" width="33" height="16" fill="black"></rect>
<rect x="238.000000" y="471.000000" width="114" height="31" fill="black"></rect>
<rect x="194.000000" y="790.000000" width="202" height="61" fill="black"></rect>
<rect x="124.000000" y="1179.000000" width="341" height="102" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 471 KiB

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

@ -47,7 +47,7 @@
"type": "",
"pos": {
"x": 0,
"y": 299
"y": 432
},
"width": 113,
"height": 126,
@ -115,15 +115,15 @@
},
{
"x": 56.5,
"y": 195.2
"y": 248.4
},
{
"x": 56.5,
"y": 229.9
"y": 309.6
},
{
"x": 56.5,
"y": 299.5
"y": 432
}
],
"isCurve": true,

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

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="317" height="629" viewBox="-102 -102 317 629"><style type="text/css">
width="317" height="762" viewBox="-102 -102 317 762"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,9 +39,9 @@ width="317" height="629" viewBox="-102 -102 317 629"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><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="-100" y="-100" width="317" height="629">
<rect x="-100" y="-100" width="317" height="629" fill="white"></rect>
<rect x="38.000000" y="146.000000" width="38" height="133" fill="black"></rect>
]]></script><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="432" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="498.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 248.400000 56.500000 309.600000 56.500000 428.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#788571213)"/><text class="text-italic" x="57.000000" y="229.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="788571213" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="762">
<rect x="-100" y="-100" width="317" height="762" fill="white"></rect>
<rect x="38.000000" y="213.000000" width="38" height="133" fill="black"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 469 KiB