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

labelpos

Browse source
This commit is contained in:
Alexander Wang 2023-01-06 12:21:47 -08:00
parent 1739d79b6b
commit 4657542def
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
19 changed files with 305 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
d2layouts/d2dagrelayout/layout.go
View file

@ -291,7 +291,6 @@ func setGraphAttrs(attrs dagreOpts) string {
edgesep: %d,
nodesep: %d,
rankdir: "%s",
labelpos: "c",
});
`,
attrs.ranksep,
@ -322,5 +321,5 @@ func generateAddParentLine(childID, parentID string) string {
}
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 });\n", escapeID(fromID), escapeID(toID), escapeID(edgeID), width, height)
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)
}

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 457,
"width": 430,
"height": 1672,
"opacity": 1,
"strokeDash": 0,
@ -246,10 +246,10 @@
"id": "deploy_workflow",
"type": "",
"pos": {
"x": 497,
"x": 470,
"y": 0
},
"width": 388,
"width": 371,
"height": 981,
"opacity": 1,
"strokeDash": 0,
@ -286,7 +286,7 @@
"id": "deploy_workflow.manual",
"type": "",
"pos": {
"x": 547,
"x": 520,
"y": 73
},
"width": 271,
@ -326,7 +326,7 @@
"id": "deploy_workflow.GHA",
"type": "",
"pos": {
"x": 548,
"x": 521,
"y": 382
},
"width": 269,
@ -366,7 +366,7 @@
"id": "deploy_workflow.AWS",
"type": "",
"pos": {
"x": 605,
"x": 578,
"y": 771
},
"width": 155,
@ -406,10 +406,10 @@
"id": "apollo_workflow",
"type": "",
"pos": {
"x": 926,
"x": 881,
"y": 0
},
"width": 767,
"width": 613,
"height": 981,
"opacity": 1,
"strokeDash": 0,
@ -446,7 +446,7 @@
"id": "apollo_workflow.apollo",
"type": "",
"pos": {
"x": 991,
"x": 1069,
"y": 73
},
"width": 238,
@ -486,7 +486,7 @@
"id": "apollo_workflow.GHA",
"type": "",
"pos": {
"x": 976,
"x": 1053,
"y": 382
},
"width": 269,
@ -526,7 +526,7 @@
"id": "apollo_workflow.AWS",
"type": "",
"pos": {
"x": 1033,
"x": 1110,
"y": 771
},
"width": 155,
@ -782,19 +782,19 @@
"labelPercentage": 0,
"route": [
{
"x": 682.5,
"x": 655.5,
"y": 210
},
{
"x": 682.5,
"x": 655.5,
"y": 278.8
},
{
"x": 682.5,
"x": 655.5,
"y": 313.2
},
{
"x": 682.5,
"x": 655.5,
"y": 382
}
],
@ -830,19 +830,19 @@
"labelPercentage": 0,
"route": [
{
"x": 682.5,
"x": 655.5,
"y": 519
},
{
"x": 682.5,
"x": 655.5,
"y": 619.8
},
{
"x": 682.5,
"x": 655.5,
"y": 670.2
},
{
"x": 682.5,
"x": 655.5,
"y": 771
}
],
@ -878,19 +878,19 @@
"labelPercentage": 0,
"route": [
{
"x": 1110,
"x": 1187.5,
"y": 210
},
{
"x": 1110,
"x": 1187.5,
"y": 278.8
},
{
"x": 1110,
"x": 1187.5,
"y": 313.2
},
{
"x": 1110,
"x": 1187.5,
"y": 382
}
],
@ -926,19 +926,19 @@
"labelPercentage": 0,
"route": [
{
"x": 1110,
"x": 1187.5,
"y": 519
},
{
"x": 1110,
"x": 1187.5,
"y": 619.8
},
{
"x": 1110,
"x": 1187.5,
"y": 670.2
},
{
"x": 1110,
"x": 1187.5,
"y": 771
}
],

14
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

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 1634,
"width": 1621,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -46,7 +46,7 @@
"id": "k8s.m1",
"type": "",
"pos": {
"x": 129,
"x": 116,
"y": 50
},
"width": 192,
@ -86,7 +86,7 @@
"id": "k8s.m2",
"type": "",
"pos": {
"x": 381,
"x": 368,
"y": 50
},
"width": 192,
@ -126,7 +126,7 @@
"id": "k8s.m3",
"type": "",
"pos": {
"x": 633,
"x": 620,
"y": 50
},
"width": 192,
@ -166,7 +166,7 @@
"id": "k8s.w1",
"type": "",
"pos": {
"x": 885,
"x": 872,
"y": 50
},
"width": 193,
@ -206,7 +206,7 @@
"id": "k8s.w2",
"type": "",
"pos": {
"x": 1138,
"x": 1125,
"y": 50
},
"width": 193,
@ -246,7 +246,7 @@
"id": "k8s.w3",
"type": "",
"pos": {
"x": 1391,
"x": 1378,
"y": 50
},
"width": 193,
@ -289,7 +289,7 @@
"x": 0,
"y": 347
},
"width": 597,
"width": 555,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -326,7 +326,7 @@
"id": "osvc.vm1",
"type": "",
"pos": {
"x": 192,
"x": 171,
"y": 397
},
"width": 136,
@ -366,7 +366,7 @@
"id": "osvc.vm2",
"type": "",
"pos": {
"x": 411,
"x": 369,
"y": 397
},
"width": 136,
@ -478,19 +478,19 @@
"labelPercentage": 0,
"route": [
{
"x": 208,
"x": 201,
"y": 226
},
{
"x": 208,
"x": 201,
"y": 274.4
},
{
"x": 208,
"x": 201,
"y": 298.7
},
{
"x": 208,
"x": 201,
"y": 347.5
}
],
@ -526,19 +526,19 @@
"labelPercentage": 0,
"route": [
{
"x": 323,
"x": 297,
"y": 226
},
{
"x": 323,
"x": 297,
"y": 274.4
},
{
"x": 323,
"x": 297,
"y": 298.7
},
{
"x": 323,
"x": 297,
"y": 347.5
}
],
@ -574,19 +574,19 @@
"labelPercentage": 0,
"route": [
{
"x": 420,
"x": 378,
"y": 226
},
{
"x": 420,
"x": 378,
"y": 274.4
},
{
"x": 420,
"x": 378,
"y": 298.7
},
{
"x": 420,
"x": 378,
"y": 347.5
}
],

12
e2etests/testdata/regression/overlapping-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="1838" height="777" viewBox="-102 -102 1838 777"><style type="text/css">
width="1825" height="777" viewBox="-102 -102 1825 777"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,12 +39,12 @@ width="1838" height="777" viewBox="-102 -102 1838 777"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="k8s"><g class="shape" ><rect x="0" y="0" width="1634" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="817.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="347" width="597" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="298.500000" y="380.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="129" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="225.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="381" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="477.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="633" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="729.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="885" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="981.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="1138" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1234.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1391" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1487.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="192" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="260.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="411" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="479.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[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 99.000000 228.000000 C 99.000000 274.400000 99.000000 298.700000 99.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2147737434)"/><text class="text-italic" x="99.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 208.000000 228.000000 C 208.000000 274.400000 208.000000 298.700000 208.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2147737434)"/><text class="text-italic" x="208.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 323.000000 228.000000 C 323.000000 274.400000 323.000000 298.700000 323.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2147737434)"/><text class="text-italic" x="323.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 420.000000 228.000000 C 420.000000 274.400000 420.000000 298.700000 420.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2147737434)"/><text class="text-italic" x="420.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2147737434" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1838" height="777">
<rect x="-100" y="-100" width="1838" height="777" fill="white"></rect>
]]></script><g id="k8s"><g class="shape" ><rect x="0" y="0" width="1621" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="810.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="347" width="555" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="277.500000" y="380.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="116" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="212.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="368" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="464.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="620" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="716.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="872" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="968.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="1125" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1221.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1378" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1474.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="171" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="239.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="369" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="437.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[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 99.000000 228.000000 C 99.000000 274.400000 99.000000 298.700000 99.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="99.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 201.000000 228.000000 C 201.000000 274.400000 201.000000 298.700000 201.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="201.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 297.000000 228.000000 C 297.000000 274.400000 297.000000 298.700000 297.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="297.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 378.000000 228.000000 C 378.000000 274.400000 378.000000 298.700000 378.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="378.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2025777275" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1825" height="777">
<rect x="-100" y="-100" width="1825" height="777" fill="white"></rect>
<rect x="70.000000" y="276.000000" width="59" height="21" fill="black"></rect>
<rect x="176.000000" y="276.000000" width="65" height="21" fill="black"></rect>
<rect x="300.000000" y="276.000000" width="47" height="21" fill="black"></rect>
<rect x="403.000000" y="276.000000" width="35" height="21" fill="black"></rect>
<rect x="169.000000" y="276.000000" width="65" height="21" fill="black"></rect>
<rect x="274.000000" y="276.000000" width="47" height="21" fill="black"></rect>
<rect x="361.000000" y="276.000000" width="35" 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: 796 KiB

After

Width:  |  Height:  |  Size: 796 KiB

12
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,7 +46,7 @@
"id": "b",
"type": "",
"pos": {
"x": 0,
"x": 44,
"y": 247
},
"width": 113,
@ -110,19 +110,19 @@
"labelPercentage": 0,
"route": [
{
"x": 56.5,
"x": 100.5,
"y": 126
},
{
"x": 56.5,
"x": 100.5,
"y": 174.4
},
{
"x": 56.5,
"x": 100.5,
"y": 198.7
},
{
"x": 56.5,
"x": 100.5,
"y": 247.5
}
],

6
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="577" viewBox="-144 -102 401 577"><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="577" viewBox="-144 -102 401 577"><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="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-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 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-1247258845)" mask="url(#178283215)"/><text class="text-italic" x="56.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="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="178283215" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="577">
]]></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="-44.000000" y="176.000000" width="201" height="21" fill="black"></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

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 283,
"width": 263,
"height": 473,
"opacity": 1,
"strokeDash": 0,
@ -86,7 +86,7 @@
"id": "ddd",
"type": "cylinder",
"pos": {
"x": 334,
"x": 313,
"y": 50
},
"width": 133,
@ -126,7 +126,7 @@
"id": "eee",
"type": "document",
"pos": {
"x": 334,
"x": 313,
"y": 297
},
"width": 130,
@ -166,7 +166,7 @@
"id": "aaa.ccc",
"type": "",
"pos": {
"x": 89,
"x": 84,
"y": 50
},
"width": 128,
@ -230,11 +230,11 @@
"labelPercentage": 0,
"route": [
{
"x": 133.88056680161944,
"x": 131.67611336032388,
"y": 176
},
{
"x": 119.57611336032389,
"x": 119.13522267206477,
"y": 224.4
},
{
@ -278,19 +278,19 @@
"labelPercentage": 0,
"route": [
{
"x": 334,
"y": 322
"x": 313,
"y": 320
},
{
"x": 218,
"y": 253.6
"x": 206.6,
"y": 253.2
},
{
"x": 185.4,
"x": 176.8,
"y": 224.3
},
{
"x": 171,
"x": 164,
"y": 175.5
}
],

8
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="671" height="677" viewBox="-102 -102 671 677"><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="671" height="677" viewBox="-102 -102 671 677"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="aaa"><g class="shape" ><rect x="0" y="0" width="283" height="473" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="141.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 334 74 C 334 50 393.85 50 400.5 50 C 407.15 50 467 50 467 74 V 152 C 467 176 407.15 176 400.5 176 C 393.85 176 334 176 334 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 334 74 C 334 98 393.85 98 400.5 98 C 407.15 98 467 98 467 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="400.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 334 405.5231 L 334 297 L 464 297 L 464 405.5231 C 442.3333 382.2206 420.6667 382.2206 399 405.5231 C 377.3333 428.8256 355.6667 428.8256 334 405.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="399.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="89" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="153.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 133.313712 177.917987 C 119.576113 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(#136430979)"/><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 330.554403 319.968286 C 218.000000 253.600000 185.400000 224.300000 171.566035 177.418230" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#136430979)"/><text class="text-italic" x="235.500000" y="269.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="136430979" maskUnits="userSpaceOnUse" x="-100" y="-100" width="671" height="677">
<rect x="-100" y="-100" width="671" height="677" fill="white"></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="223.000000" y="253.000000" width="25" 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

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 1138,
"width": 1127,
"height": 1735,
"opacity": 1,
"strokeDash": 0,
@ -49,7 +49,7 @@
"x": 40,
"y": 50
},
"width": 799,
"width": 788,
"height": 1635,
"opacity": 1,
"strokeDash": 0,
@ -89,7 +89,7 @@
"x": 80,
"y": 920
},
"width": 533,
"width": 522,
"height": 715,
"opacity": 1,
"strokeDash": 0,
@ -129,7 +129,7 @@
"x": 120,
"y": 970
},
"width": 377,
"width": 366,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -166,7 +166,7 @@
"id": "aa.bb.cc.dd.ee",
"type": "text",
"pos": {
"x": 246,
"x": 241,
"y": 1073
},
"width": 16,
@ -205,7 +205,7 @@
"id": "aa.bb.cc.dd.ff",
"type": "",
"pos": {
"x": 331,
"x": 320,
"y": 1020
},
"width": 117,
@ -245,7 +245,7 @@
"id": "aa.bb.cc.gg",
"type": "text",
"pos": {
"x": 436,
"x": 426,
"y": 1317
},
"width": 17,
@ -284,7 +284,7 @@
"id": "aa.bb.cc.hh",
"type": "",
"pos": {
"x": 383,
"x": 373,
"y": 1459
},
"width": 123,
@ -327,7 +327,7 @@
"x": 106,
"y": 100
},
"width": 420,
"width": 408,
"height": 226,
"opacity": 1,
"strokeDash": 0,
@ -364,7 +364,7 @@
"id": "aa.bb.ii.jj",
"type": "diamond",
"pos": {
"x": 269,
"x": 263,
"y": 150
},
"width": 115,
@ -404,7 +404,7 @@
"id": "aa.bb.kk",
"type": "oval",
"pos": {
"x": 663,
"x": 652,
"y": 1459
},
"width": 126,
@ -444,7 +444,7 @@
"id": "aa.ll",
"type": "",
"pos": {
"x": 936,
"x": 925,
"y": 673
},
"width": 114,
@ -484,7 +484,7 @@
"id": "aa.mm",
"type": "cylinder",
"pos": {
"x": 923,
"x": 912,
"y": 447
},
"width": 131,
@ -524,7 +524,7 @@
"id": "aa.nn",
"type": "text",
"pos": {
"x": 889,
"x": 878,
"y": 1512
},
"width": 16,
@ -563,7 +563,7 @@
"id": "aa.oo",
"type": "",
"pos": {
"x": 965,
"x": 954,
"y": 1459
},
"width": 123,
@ -627,19 +627,19 @@
"labelPercentage": 0,
"route": [
{
"x": 253.5,
"x": 248.5,
"y": 1094.5
},
{
"x": 253.5,
"x": 248.5,
"y": 1175.7
},
{
"x": 290.1,
"x": 284.1,
"y": 1270.1
},
{
"x": 436.5,
"x": 426.5,
"y": 1324.5
}
],
@ -675,19 +675,19 @@
"labelPercentage": 0,
"route": [
{
"x": 444.5,
"x": 434.5,
"y": 1338
},
{
"x": 444.5,
"x": 434.5,
"y": 1386.4
},
{
"x": 444.5,
"x": 434.5,
"y": 1410.7
},
{
"x": 444.5,
"x": 434.5,
"y": 1459.5
}
],
@ -819,20 +819,20 @@
"labelPercentage": 0,
"route": [
{
"x": 936,
"y": 745.3486055776892
"x": 925,
"y": 745.597137014315
},
{
"x": 858.4,
"y": 758.1486055776892
"x": 847.4,
"y": 758.3971370143149
},
{
"x": 916.6,
"y": 748.5486055776893
"x": 905.6,
"y": 748.797137014315
},
{
"x": 839,
"y": 761.3486055776892
"x": 828,
"y": 761.597137014315
}
],
"isCurve": true,
@ -867,31 +867,31 @@
"labelPercentage": 0,
"route": [
{
"x": 923,
"x": 912,
"y": 521
},
{
"x": 430.2,
"x": 420,
"y": 602.6
},
{
"x": 307,
"x": 297,
"y": 645.6
},
{
"x": 307,
"x": 297,
"y": 679.5
},
{
"x": 307,
"x": 297,
"y": 713.4
},
{
"x": 307,
"x": 297,
"y": 871.7
},
{
"x": 307,
"x": 297,
"y": 920.5
}
],
@ -927,19 +927,19 @@
"labelPercentage": 0,
"route": [
{
"x": 991,
"x": 980,
"y": 573
},
{
"x": 992.6,
"x": 981.6,
"y": 613
},
{
"x": 993,
"x": 982,
"y": 633
},
{
"x": 993,
"x": 982,
"y": 673
}
],
@ -975,20 +975,20 @@
"labelPercentage": 0,
"route": [
{
"x": 923,
"x": 912,
"y": 522
},
{
"x": 856,
"y": 534.0162403572879
"x": 845,
"y": 533.8777110844337
},
{
"x": 906.25,
"y": 525.0040600893219
"x": 895.25,
"y": 524.9694277711085
},
{
"x": 839.25,
"y": 537.0203004466098
"x": 828.25,
"y": 536.8471388555422
}
],
"isCurve": true,
@ -1023,68 +1023,68 @@
"labelPercentage": 0,
"route": [
{
"x": 936,
"x": 925,
"y": 751.4544456641054
},
{
"x": 617.2,
"x": 606.2,
"y": 837.890889132821
},
{
"x": 537.5,
"x": 526.5,
"y": 871.6
},
{
"x": 537.5,
"x": 526.5,
"y": 889.75
},
{
"x": 537.5,
"x": 526.5,
"y": 907.9
},
{
"x": 537.5,
"x": 526.5,
"y": 930
},
{
"x": 537.5,
"x": 526.5,
"y": 945
},
{
"x": 537.5,
"x": 526.5,
"y": 960
},
{
"x": 537.5,
"x": 526.5,
"y": 992.6
},
{
"x": 537.5,
"x": 526.5,
"y": 1026.5
},
{
"x": 537.5,
"x": 526.5,
"y": 1060.4
},
{
"x": 537.5,
"x": 526.5,
"y": 1105.6
},
{
"x": 537.5,
"x": 526.5,
"y": 1139.5
},
{
"x": 537.5,
"x": 526.5,
"y": 1173.4
},
{
"x": 520.5,
"y": 1269.5
"x": 509.7,
"y": 1269.3
},
{
"x": 452.5,
"y": 1321.5
"x": 442.5,
"y": 1320.5
}
],
"isCurve": true,
@ -1119,19 +1119,19 @@
"labelPercentage": 0,
"route": [
{
"x": 923,
"x": 912,
"y": 495
},
{
"x": 547,
"x": 535.2,
"y": 408.2
},
{
"x": 453,
"x": 441,
"y": 374.4
},
{
"x": 453,
"x": 441,
"y": 326
}
],
@ -1167,19 +1167,19 @@
"labelPercentage": 0,
"route": [
{
"x": 413,
"x": 401,
"y": 920
},
{
"x": 413,
"x": 401,
"y": 871.6
},
{
"x": 517.6,
"x": 505.8,
"y": 837.3
},
{
"x": 936,
"x": 925,
"y": 748.5
}
],
@ -1215,31 +1215,31 @@
"labelPercentage": 0,
"route": [
{
"x": 413,
"x": 393,
"y": 326
},
{
"x": 413,
"x": 393,
"y": 374.4
},
{
"x": 413,
"x": 393,
"y": 411.2
},
{
"x": 413,
"x": 393,
"y": 448.25
},
{
"x": 413,
"x": 393,
"y": 485.3
},
{
"x": 517.6,
"x": 499.4,
"y": 643.4
},
{
"x": 936,
"x": 925,
"y": 725
}
],

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

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

@ -60,7 +60,7 @@
"x": 0,
"y": 254
},
"width": 1113,
"width": 1112,
"height": 1004,
"opacity": 1,
"strokeDash": 0,

6
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": 28.96784565916399
"x": 365,
"y": 27.837209302325576
},
{
"x": 423.1333333333333,
"y": 5.793569131832797
"x": 400.46666666666664,
"y": 5.567441860465113
},
{
"x": 435.05,
"x": 411.55,
"y": 0
},
{
"x": 438.625,
"x": 414.875,
"y": 0
},
{
"x": 442.2,
"x": 418.2,
"y": 0
},
{
"x": 446.96666666666664,
"x": 422.6333333333333,
"y": 12.600000000000001
},
{
"x": 450.54166666666663,
"x": 425.95833333333337,
"y": 31.5
},
{
"x": 454.1166666666667,
"x": 429.28333333333336,
"y": 50.400000000000006
},
{
"x": 454.1166666666667,
"x": 429.28333333333336,
"y": 75.6
},
{
"x": 450.54166666666663,
"x": 425.95833333333337,
"y": 94.5
},
{
"x": 446.96666666666664,
"x": 422.6333333333333,
"y": 113.4
},
{
"x": 423.1333333333333,
"y": 120.2064308681672
"x": 400.46666666666664,
"y": 120.43255813953489
},
{
"x": 385,
"y": 97.032154340836
"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="672" height="556" viewBox="-102 -102 672 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="672" height="556" viewBox="-102 -102 672 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(#229611323)"/></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(#229611323)"/></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(#229611323)"/></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(#229611323)"/></g><g id="(z -&gt; z)[0]"><path d="M 386.709140 27.929172 C 423.133333 5.793569 435.050000 0.000000 438.625000 0.000000 C 442.200000 0.000000 446.966667 12.600000 450.541667 31.500000 C 454.116667 50.400000 454.116667 75.600000 450.541667 94.500000 C 446.966667 113.400000 423.133333 120.206431 388.418279 99.109501" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229611323)"/><text class="text-italic" x="454.500000" y="64.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="229611323" maskUnits="userSpaceOnUse" x="-100" y="-100" width="672" height="556">
<rect x="-100" y="-100" width="672" height="556" fill="white"></rect>
<rect x="438.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

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

@ -9,7 +9,7 @@
"x": 0,
"y": 0
},
"width": 269,
"width": 255,
"height": 473,
"opacity": 1,
"strokeDash": 0,
@ -150,19 +150,19 @@
"labelPercentage": 0,
"route": [
{
"x": 105.1821862348178,
"x": 108.88056680161944,
"y": 176
},
{
"x": 88.03643724696356,
"x": 94.57611336032389,
"y": 224.4
},
{
"x": 87.95,
"x": 94.6,
"y": 248.7
},
{
"x": 104.75,
"x": 109,
"y": 297.5
}
],
@ -198,19 +198,19 @@
"labelPercentage": 0,
"route": [
{
"x": 147.6497975708502,
"x": 146.24696356275302,
"y": 176
},
{
"x": 163.12995951417005,
"x": 160.6493927125506,
"y": 224.4
},
{
"x": 163.2,
"x": 160.65,
"y": 248.7
},
{
"x": 148,
"x": 146.25,
"y": 297.5
}
],

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="473" height="677" viewBox="-102 -102 473 677"><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="473" height="677" viewBox="-102 -102 473 677"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="container"><g class="shape" ><rect x="0" y="0" width="269" height="473" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="134.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 104.514351 177.885204 C 88.036437 224.400000 87.950000 248.700000 103.447948 293.717850" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3006076853)"/><text class="text-italic" x="87.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 148.259069 177.904938 C 163.129960 224.400000 163.200000 248.700000 149.189535 293.680968" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3006076853)"/><text class="text-italic" x="163.000000" y="242.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="3006076853" maskUnits="userSpaceOnUse" x="-100" y="-100" width="473" height="677">
<rect x="-100" y="-100" width="473" height="677" fill="white"></rect>
<rect x="73.000000" y="226.000000" width="29" height="21" fill="black"></rect>
<rect x="149.000000" y="226.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