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

Tests

Browse source
This commit is contained in:
Paracelsus-Rose 2023-01-19 14:39:34 -05:00
parent 65b7ee2cdf
commit dbea310ae7
No known key found for this signature in database
GPG key ID: FAF65C0792F4524E
6 changed files with 632 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

264
e2etests/testdata/stable/circle_arrowhead#01/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,264 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "a",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "b",
"type": "",
"pos": {
"x": 0,
"y": 247
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "b",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "c",
"type": "",
"pos": {
"x": 174,
"y": 0
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "d",
"type": "",
"pos": {
"x": 173,
"y": 247
},
"width": 114,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(a <-> b)[0]",
"src": "a",
"srcArrow": "circle",
"srcLabel": "",
"dst": "b",
"dstArrow": "circle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "circle",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 36,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 56.5,
"y": 126
},
{
"x": 56.5,
"y": 174.4
},
{
"x": 56.5,
"y": 198.7
},
{
"x": 56.5,
"y": 247.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(c <-> d)[0]",
"src": "c",
"srcArrow": "filled-circle",
"srcLabel": "",
"dst": "d",
"dstArrow": "filled-circle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "filled-circle",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 73,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 230,
"y": 126
},
{
"x": 230,
"y": 174.4
},
{
"x": 230,
"y": 198.7
},
{
"x": 230,
"y": 247.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

60
e2etests/testdata/stable/circle_arrowhead#01/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: 470 KiB

246
e2etests/testdata/stable/circle_arrowhead#01/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,246 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "a",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "b",
"type": "",
"pos": {
"x": 12,
"y": 359
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "b",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "c",
"type": "",
"pos": {
"x": 145,
"y": 12
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "d",
"type": "",
"pos": {
"x": 145,
"y": 359
},
"width": 114,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(a <-> b)[0]",
"src": "a",
"srcArrow": "circle",
"srcLabel": "",
"dst": "b",
"dstArrow": "circle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "circle",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 36,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 68.5,
"y": 138
},
{
"x": 68.5,
"y": 359
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(c <-> d)[0]",
"src": "c",
"srcArrow": "filled-circle",
"srcLabel": "",
"dst": "d",
"dstArrow": "filled-circle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "filled-circle",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 73,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 202,
"y": 138
},
{
"x": 202,
"y": 359
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

60
e2etests/testdata/stable/circle_arrowhead#01/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: 470 KiB

2
e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg vendored
View file

@ -39,7 +39,7 @@ width="491" height="577" viewBox="-102 -102 491 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="c"><g class="shape" ><rect x="174" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="173" y="247" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2353508688" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="10.000000"/> </marker><marker id="mk-3979614975" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="10.000000"/> </marker><path d="M 56.500000 130.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-start="url(#mk-2353508688)" marker-end="url(#mk-3979614975)" mask="url(#1982561420)"/><text class="text-italic" x="57.000000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-174437403" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="11.000000"/> </marker><marker id="mk-211976278" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="11.000000"/> </marker><path d="M 230.000000 130.000000 C 230.000000 174.400000 230.000000 198.700000 230.000000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-174437403)" marker-end="url(#mk-211976278)" mask="url(#1982561420)"/><text class="text-italic" x="230.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">filled-circle</text></g><mask id="1982561420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="491" height="577">
]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;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;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="c"><g class="shape" ><rect x="174" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="230.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="173" y="247" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="230.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2353508688" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="10.000000"/> </marker><marker id="mk-3979614975" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="10.000000"/> </marker><path d="M 56.500000 130.000000 C 56.500000 174.400000 56.500000 198.700000 56.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2353508688)" marker-end="url(#mk-3979614975)" mask="url(#1982561420)"/><text class="text-italic" x="57.000000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-174437403" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="11.000000"/> </marker><marker id="mk-211976278" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="11.000000"/> </marker><path d="M 230.000000 130.000000 C 230.000000 174.400000 230.000000 198.700000 230.000000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-174437403)" marker-end="url(#mk-211976278)" mask="url(#1982561420)"/><text class="text-italic" x="230.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">filled-circle</text></g><mask id="1982561420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="491" height="577">
<rect x="-100" y="-100" width="491" height="577" fill="white"></rect>
<rect x="39.000000" y="176.000000" width="36" height="21" fill="black"></rect>
<rect x="194.000000" y="176.000000" width="73" height="21" fill="black"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB

2
e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg vendored
View file

@ -39,7 +39,7 @@ width="451" height="677" viewBox="-90 -90 451 677"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="145" y="359" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="202.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2353508688" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="10.000000"/> </marker><marker id="mk-3979614975" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="10.000000"/> </marker><path d="M 68.500000 142.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2353508688)" marker-end="url(#mk-3979614975)" mask="url(#3604360783)"/><text class="text-italic" x="69.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-174437403" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="11.000000"/> </marker><marker id="mk-211976278" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="11.000000"/> </marker><path d="M 202.000000 142.000000 L 202.000000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-174437403)" marker-end="url(#mk-211976278)" mask="url(#3604360783)"/><text class="text-italic" x="202.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">filled-circle</text></g><mask id="3604360783" maskUnits="userSpaceOnUse" x="-100" y="-100" width="451" height="677">
]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="145" y="359" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="202.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2353508688" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="10.000000"/> </marker><marker id="mk-3979614975" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="white" stroke="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="10.000000"/> </marker><path d="M 68.500000 142.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2353508688)" marker-end="url(#mk-3979614975)" mask="url(#3604360783)"/><text class="text-italic" x="69.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-174437403" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="11.000000" cy="12.000000" r="11.000000"/> </marker><marker id="mk-211976278" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle class="connection" fill="#0D32B2" stroke-width="2" cx="13.000000" cy="12.000000" r="11.000000"/> </marker><path d="M 202.000000 142.000000 L 202.000000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-174437403)" marker-end="url(#mk-211976278)" mask="url(#3604360783)"/><text class="text-italic" x="202.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">filled-circle</text></g><mask id="3604360783" maskUnits="userSpaceOnUse" x="-100" y="-100" width="451" height="677">
<rect x="-100" y="-100" width="451" height="677" fill="white"></rect>
<rect x="51.000000" y="238.000000" width="36" height="21" fill="black"></rect>
<rect x="166.000000" y="238.000000" width="73" height="21" fill="black"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB