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

add icons_on_top test

Browse source
This commit is contained in:
Gavin Nishizawa 2023-07-03 16:45:30 -07:00
parent 6a1bfaac4f
commit 5e63713634
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
6 changed files with 740 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
e2etests/regression_test.go
View file

@ -1037,6 +1037,7 @@ cf many required: {
loadFromFile(t, "grid_oom"),
loadFromFile(t, "cylinder_grid_label"),
loadFromFile(t, "grid_with_latex"),
loadFromFile(t, "icons_on_top"),
}
runa(t, tcs)

15
e2etests/testdata/files/icons_on_top.d2 vendored Normal file
View file

@ -0,0 +1,15 @@
classes: {
GREEN: {style.stroke: "#2b9464"; style.fill: "#2b9464"}
RED: {style.stroke: "#d14d28"; style.fill: "#d14d28"}
YELLOW: {style.stroke: "#f5df65"; style.fill: "#f5df65"}
BLUE: {style.stroke: "#59c8df"; style.fill: "#59c8df"}
}
grid-rows: 2
grid-columns: 2
grid-gap: 0
1: "link" {class: RED; link: "example.com"}
2: "none" {class: YELLOW}
3: "link, tooltip" {class: BLUE; link: "example.com"; tooltip: tooltip}
4: "none" {class: GREEN}

224
e2etests/testdata/regression/icons_on_top/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,224 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "1",
"type": "rectangle",
"classes": [
"RED"
],
"pos": {
"x": 0,
"y": 0
},
"width": 191,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#d14d28",
"stroke": "#d14d28",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "example.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "link",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 27,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "2",
"type": "rectangle",
"classes": [
"YELLOW"
],
"pos": {
"x": 191,
"y": 0
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#f5df65",
"stroke": "#f5df65",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "none",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "3",
"type": "rectangle",
"classes": [
"BLUE"
],
"pos": {
"x": 0,
"y": 66
},
"width": 191,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#59c8df",
"stroke": "#59c8df",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "tooltip",
"link": "example.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "link, tooltip",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 82,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "4",
"type": "rectangle",
"classes": [
"GREEN"
],
"pos": {
"x": 191,
"y": 66
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#2b9464",
"stroke": "#2b9464",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "none",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

138
e2etests/testdata/regression/icons_on_top/dagre/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,138 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.5.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 273 151"><svg id="d2-svg" class="d2-1627174934" width="273" height="151" viewBox="-1 -18 273 151"><rect x="-1.000000" y="-18.000000" width="273.000000" height="151.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
}
.d2-1627174934 .text-bold {
font-family: "d2-1627174934-font-bold";
}
@font-face {
font-family: d2-1627174934-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-1627174934 .fill-N1{fill:#0A0F25;}
.d2-1627174934 .fill-N2{fill:#676C7E;}
.d2-1627174934 .fill-N3{fill:#9499AB;}
.d2-1627174934 .fill-N4{fill:#CFD2DD;}
.d2-1627174934 .fill-N5{fill:#DEE1EB;}
.d2-1627174934 .fill-N6{fill:#EEF1F8;}
.d2-1627174934 .fill-N7{fill:#FFFFFF;}
.d2-1627174934 .fill-B1{fill:#0D32B2;}
.d2-1627174934 .fill-B2{fill:#0D32B2;}
.d2-1627174934 .fill-B3{fill:#E3E9FD;}
.d2-1627174934 .fill-B4{fill:#E3E9FD;}
.d2-1627174934 .fill-B5{fill:#EDF0FD;}
.d2-1627174934 .fill-B6{fill:#F7F8FE;}
.d2-1627174934 .fill-AA2{fill:#4A6FF3;}
.d2-1627174934 .fill-AA4{fill:#EDF0FD;}
.d2-1627174934 .fill-AA5{fill:#F7F8FE;}
.d2-1627174934 .fill-AB4{fill:#EDF0FD;}
.d2-1627174934 .fill-AB5{fill:#F7F8FE;}
.d2-1627174934 .stroke-N1{stroke:#0A0F25;}
.d2-1627174934 .stroke-N2{stroke:#676C7E;}
.d2-1627174934 .stroke-N3{stroke:#9499AB;}
.d2-1627174934 .stroke-N4{stroke:#CFD2DD;}
.d2-1627174934 .stroke-N5{stroke:#DEE1EB;}
.d2-1627174934 .stroke-N6{stroke:#EEF1F8;}
.d2-1627174934 .stroke-N7{stroke:#FFFFFF;}
.d2-1627174934 .stroke-B1{stroke:#0D32B2;}
.d2-1627174934 .stroke-B2{stroke:#0D32B2;}
.d2-1627174934 .stroke-B3{stroke:#E3E9FD;}
.d2-1627174934 .stroke-B4{stroke:#E3E9FD;}
.d2-1627174934 .stroke-B5{stroke:#EDF0FD;}
.d2-1627174934 .stroke-B6{stroke:#F7F8FE;}
.d2-1627174934 .stroke-AA2{stroke:#4A6FF3;}
.d2-1627174934 .stroke-AA4{stroke:#EDF0FD;}
.d2-1627174934 .stroke-AA5{stroke:#F7F8FE;}
.d2-1627174934 .stroke-AB4{stroke:#EDF0FD;}
.d2-1627174934 .stroke-AB5{stroke:#F7F8FE;}
.d2-1627174934 .background-color-N1{background-color:#0A0F25;}
.d2-1627174934 .background-color-N2{background-color:#676C7E;}
.d2-1627174934 .background-color-N3{background-color:#9499AB;}
.d2-1627174934 .background-color-N4{background-color:#CFD2DD;}
.d2-1627174934 .background-color-N5{background-color:#DEE1EB;}
.d2-1627174934 .background-color-N6{background-color:#EEF1F8;}
.d2-1627174934 .background-color-N7{background-color:#FFFFFF;}
.d2-1627174934 .background-color-B1{background-color:#0D32B2;}
.d2-1627174934 .background-color-B2{background-color:#0D32B2;}
.d2-1627174934 .background-color-B3{background-color:#E3E9FD;}
.d2-1627174934 .background-color-B4{background-color:#E3E9FD;}
.d2-1627174934 .background-color-B5{background-color:#EDF0FD;}
.d2-1627174934 .background-color-B6{background-color:#F7F8FE;}
.d2-1627174934 .background-color-AA2{background-color:#4A6FF3;}
.d2-1627174934 .background-color-AA4{background-color:#EDF0FD;}
.d2-1627174934 .background-color-AA5{background-color:#F7F8FE;}
.d2-1627174934 .background-color-AB4{background-color:#EDF0FD;}
.d2-1627174934 .background-color-AB5{background-color:#F7F8FE;}
.d2-1627174934 .color-N1{color:#0A0F25;}
.d2-1627174934 .color-N2{color:#676C7E;}
.d2-1627174934 .color-N3{color:#9499AB;}
.d2-1627174934 .color-N4{color:#CFD2DD;}
.d2-1627174934 .color-N5{color:#DEE1EB;}
.d2-1627174934 .color-N6{color:#EEF1F8;}
.d2-1627174934 .color-N7{color:#FFFFFF;}
.d2-1627174934 .color-B1{color:#0D32B2;}
.d2-1627174934 .color-B2{color:#0D32B2;}
.d2-1627174934 .color-B3{color:#E3E9FD;}
.d2-1627174934 .color-B4{color:#E3E9FD;}
.d2-1627174934 .color-B5{color:#EDF0FD;}
.d2-1627174934 .color-B6{color:#F7F8FE;}
.d2-1627174934 .color-AA2{color:#4A6FF3;}
.d2-1627174934 .color-AA4{color:#EDF0FD;}
.d2-1627174934 .color-AA5{color:#F7F8FE;}
.d2-1627174934 .color-AB4{color:#EDF0FD;}
.d2-1627174934 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="example.com" xlink:href="example.com"><g id="1" class="RED"><g class="shape" ><rect x="0.000000" y="0.000000" width="191.000000" height="66.000000" stroke="#d14d28" fill="#d14d28" style="stroke-width:2;" /></g><text x="95.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link</text><g transform="translate(175 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g></g></a><g id="2" class="YELLOW"><g class="shape" ><rect x="191.000000" y="0.000000" width="80.000000" height="66.000000" stroke="#f5df65" fill="#f5df65" style="stroke-width:2;" /></g><text x="231.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><a href="example.com" xlink:href="example.com"><g id="3" class="BLUE"><g class="shape" ><rect x="0.000000" y="66.000000" width="191.000000" height="66.000000" stroke="#59c8df" fill="#59c8df" style="stroke-width:2;" /></g><text x="95.500000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link, tooltip</text><g transform="translate(175 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3427_35082111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 19.998V15.998" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 12H16.0098" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3427_35082111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g><title>tooltip</title><g transform="translate(143 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g></g></a><g id="4" class="GREEN"><g class="shape" ><rect x="191.000000" y="66.000000" width="80.000000" height="66.000000" stroke="#2b9464" fill="#2b9464" style="stroke-width:2;" /></g><text x="231.000000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><mask id="d2-1627174934" maskUnits="userSpaceOnUse" x="-1" y="-18" width="273" height="151">
<rect x="-1" y="-18" width="273" height="151" fill="white"></rect>
<rect x="82.000000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="213.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="54.500000" y="88.500000" width="82" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="213.500000" y="88.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

224
e2etests/testdata/regression/icons_on_top/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,224 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "1",
"type": "rectangle",
"classes": [
"RED"
],
"pos": {
"x": 0,
"y": 0
},
"width": 191,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#d14d28",
"stroke": "#d14d28",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "example.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "link",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 27,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "2",
"type": "rectangle",
"classes": [
"YELLOW"
],
"pos": {
"x": 191,
"y": 0
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#f5df65",
"stroke": "#f5df65",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "none",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "3",
"type": "rectangle",
"classes": [
"BLUE"
],
"pos": {
"x": 0,
"y": 66
},
"width": 191,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#59c8df",
"stroke": "#59c8df",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "tooltip",
"link": "example.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "link, tooltip",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 82,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "4",
"type": "rectangle",
"classes": [
"GREEN"
],
"pos": {
"x": 191,
"y": 66
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#2b9464",
"stroke": "#2b9464",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "none",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

138
e2etests/testdata/regression/icons_on_top/elk/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,138 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.5.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 273 151"><svg id="d2-svg" class="d2-1627174934" width="273" height="151" viewBox="-1 -18 273 151"><rect x="-1.000000" y="-18.000000" width="273.000000" height="151.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
}
.d2-1627174934 .text-bold {
font-family: "d2-1627174934-font-bold";
}
@font-face {
font-family: d2-1627174934-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-1627174934 .fill-N1{fill:#0A0F25;}
.d2-1627174934 .fill-N2{fill:#676C7E;}
.d2-1627174934 .fill-N3{fill:#9499AB;}
.d2-1627174934 .fill-N4{fill:#CFD2DD;}
.d2-1627174934 .fill-N5{fill:#DEE1EB;}
.d2-1627174934 .fill-N6{fill:#EEF1F8;}
.d2-1627174934 .fill-N7{fill:#FFFFFF;}
.d2-1627174934 .fill-B1{fill:#0D32B2;}
.d2-1627174934 .fill-B2{fill:#0D32B2;}
.d2-1627174934 .fill-B3{fill:#E3E9FD;}
.d2-1627174934 .fill-B4{fill:#E3E9FD;}
.d2-1627174934 .fill-B5{fill:#EDF0FD;}
.d2-1627174934 .fill-B6{fill:#F7F8FE;}
.d2-1627174934 .fill-AA2{fill:#4A6FF3;}
.d2-1627174934 .fill-AA4{fill:#EDF0FD;}
.d2-1627174934 .fill-AA5{fill:#F7F8FE;}
.d2-1627174934 .fill-AB4{fill:#EDF0FD;}
.d2-1627174934 .fill-AB5{fill:#F7F8FE;}
.d2-1627174934 .stroke-N1{stroke:#0A0F25;}
.d2-1627174934 .stroke-N2{stroke:#676C7E;}
.d2-1627174934 .stroke-N3{stroke:#9499AB;}
.d2-1627174934 .stroke-N4{stroke:#CFD2DD;}
.d2-1627174934 .stroke-N5{stroke:#DEE1EB;}
.d2-1627174934 .stroke-N6{stroke:#EEF1F8;}
.d2-1627174934 .stroke-N7{stroke:#FFFFFF;}
.d2-1627174934 .stroke-B1{stroke:#0D32B2;}
.d2-1627174934 .stroke-B2{stroke:#0D32B2;}
.d2-1627174934 .stroke-B3{stroke:#E3E9FD;}
.d2-1627174934 .stroke-B4{stroke:#E3E9FD;}
.d2-1627174934 .stroke-B5{stroke:#EDF0FD;}
.d2-1627174934 .stroke-B6{stroke:#F7F8FE;}
.d2-1627174934 .stroke-AA2{stroke:#4A6FF3;}
.d2-1627174934 .stroke-AA4{stroke:#EDF0FD;}
.d2-1627174934 .stroke-AA5{stroke:#F7F8FE;}
.d2-1627174934 .stroke-AB4{stroke:#EDF0FD;}
.d2-1627174934 .stroke-AB5{stroke:#F7F8FE;}
.d2-1627174934 .background-color-N1{background-color:#0A0F25;}
.d2-1627174934 .background-color-N2{background-color:#676C7E;}
.d2-1627174934 .background-color-N3{background-color:#9499AB;}
.d2-1627174934 .background-color-N4{background-color:#CFD2DD;}
.d2-1627174934 .background-color-N5{background-color:#DEE1EB;}
.d2-1627174934 .background-color-N6{background-color:#EEF1F8;}
.d2-1627174934 .background-color-N7{background-color:#FFFFFF;}
.d2-1627174934 .background-color-B1{background-color:#0D32B2;}
.d2-1627174934 .background-color-B2{background-color:#0D32B2;}
.d2-1627174934 .background-color-B3{background-color:#E3E9FD;}
.d2-1627174934 .background-color-B4{background-color:#E3E9FD;}
.d2-1627174934 .background-color-B5{background-color:#EDF0FD;}
.d2-1627174934 .background-color-B6{background-color:#F7F8FE;}
.d2-1627174934 .background-color-AA2{background-color:#4A6FF3;}
.d2-1627174934 .background-color-AA4{background-color:#EDF0FD;}
.d2-1627174934 .background-color-AA5{background-color:#F7F8FE;}
.d2-1627174934 .background-color-AB4{background-color:#EDF0FD;}
.d2-1627174934 .background-color-AB5{background-color:#F7F8FE;}
.d2-1627174934 .color-N1{color:#0A0F25;}
.d2-1627174934 .color-N2{color:#676C7E;}
.d2-1627174934 .color-N3{color:#9499AB;}
.d2-1627174934 .color-N4{color:#CFD2DD;}
.d2-1627174934 .color-N5{color:#DEE1EB;}
.d2-1627174934 .color-N6{color:#EEF1F8;}
.d2-1627174934 .color-N7{color:#FFFFFF;}
.d2-1627174934 .color-B1{color:#0D32B2;}
.d2-1627174934 .color-B2{color:#0D32B2;}
.d2-1627174934 .color-B3{color:#E3E9FD;}
.d2-1627174934 .color-B4{color:#E3E9FD;}
.d2-1627174934 .color-B5{color:#EDF0FD;}
.d2-1627174934 .color-B6{color:#F7F8FE;}
.d2-1627174934 .color-AA2{color:#4A6FF3;}
.d2-1627174934 .color-AA4{color:#EDF0FD;}
.d2-1627174934 .color-AA5{color:#F7F8FE;}
.d2-1627174934 .color-AB4{color:#EDF0FD;}
.d2-1627174934 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="example.com" xlink:href="example.com"><g id="1" class="RED"><g class="shape" ><rect x="0.000000" y="0.000000" width="191.000000" height="66.000000" stroke="#d14d28" fill="#d14d28" style="stroke-width:2;" /></g><text x="95.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link</text><g transform="translate(175 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g></g></a><g id="2" class="YELLOW"><g class="shape" ><rect x="191.000000" y="0.000000" width="80.000000" height="66.000000" stroke="#f5df65" fill="#f5df65" style="stroke-width:2;" /></g><text x="231.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><a href="example.com" xlink:href="example.com"><g id="3" class="BLUE"><g class="shape" ><rect x="0.000000" y="66.000000" width="191.000000" height="66.000000" stroke="#59c8df" fill="#59c8df" style="stroke-width:2;" /></g><text x="95.500000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link, tooltip</text><g transform="translate(175 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3427_35082111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 19.998V15.998" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 12H16.0098" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3427_35082111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g><title>tooltip</title><g transform="translate(143 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g></g></a><g id="4" class="GREEN"><g class="shape" ><rect x="191.000000" y="66.000000" width="80.000000" height="66.000000" stroke="#2b9464" fill="#2b9464" style="stroke-width:2;" /></g><text x="231.000000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><mask id="d2-1627174934" maskUnits="userSpaceOnUse" x="-1" y="-18" width="273" height="151">
<rect x="-1" y="-18" width="273" height="151" fill="white"></rect>
<rect x="82.000000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="213.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="54.500000" y="88.500000" width="82" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="213.500000" y="88.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB