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

fix

Browse source
This commit is contained in:
Alexander Wang 2025-03-13 19:41:31 -06:00
parent 5b55e4d818
commit b26c036cc9
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
18 changed files with 2734 additions and 1748 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
e2etests-cli/testdata/TestCLI_E2E/empty-base.exp.svg vendored
View file

@ -1,9 +1,9 @@
<?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.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 368 766"><svg class="d2-svg" width="368" height="766" viewBox="-101 -101 368 766"><style type="text/css"><![CDATA[
.d2-1783895667 .text-bold {
font-family: "d2-1783895667-font-bold";
.d2-2738210636 .text-bold {
font-family: "d2-2738210636-font-bold";
}
@font-face {
font-family: d2-1783895667-font-bold;
font-family: d2-2738210636-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -18,78 +18,78 @@
opacity: 0.5;
}
.d2-1783895667 .fill-N1{fill:#0A0F25;}
.d2-1783895667 .fill-N2{fill:#676C7E;}
.d2-1783895667 .fill-N3{fill:#9499AB;}
.d2-1783895667 .fill-N4{fill:#CFD2DD;}
.d2-1783895667 .fill-N5{fill:#DEE1EB;}
.d2-1783895667 .fill-N6{fill:#EEF1F8;}
.d2-1783895667 .fill-N7{fill:#FFFFFF;}
.d2-1783895667 .fill-B1{fill:#0D32B2;}
.d2-1783895667 .fill-B2{fill:#0D32B2;}
.d2-1783895667 .fill-B3{fill:#E3E9FD;}
.d2-1783895667 .fill-B4{fill:#E3E9FD;}
.d2-1783895667 .fill-B5{fill:#EDF0FD;}
.d2-1783895667 .fill-B6{fill:#F7F8FE;}
.d2-1783895667 .fill-AA2{fill:#4A6FF3;}
.d2-1783895667 .fill-AA4{fill:#EDF0FD;}
.d2-1783895667 .fill-AA5{fill:#F7F8FE;}
.d2-1783895667 .fill-AB4{fill:#EDF0FD;}
.d2-1783895667 .fill-AB5{fill:#F7F8FE;}
.d2-1783895667 .stroke-N1{stroke:#0A0F25;}
.d2-1783895667 .stroke-N2{stroke:#676C7E;}
.d2-1783895667 .stroke-N3{stroke:#9499AB;}
.d2-1783895667 .stroke-N4{stroke:#CFD2DD;}
.d2-1783895667 .stroke-N5{stroke:#DEE1EB;}
.d2-1783895667 .stroke-N6{stroke:#EEF1F8;}
.d2-1783895667 .stroke-N7{stroke:#FFFFFF;}
.d2-1783895667 .stroke-B1{stroke:#0D32B2;}
.d2-1783895667 .stroke-B2{stroke:#0D32B2;}
.d2-1783895667 .stroke-B3{stroke:#E3E9FD;}
.d2-1783895667 .stroke-B4{stroke:#E3E9FD;}
.d2-1783895667 .stroke-B5{stroke:#EDF0FD;}
.d2-1783895667 .stroke-B6{stroke:#F7F8FE;}
.d2-1783895667 .stroke-AA2{stroke:#4A6FF3;}
.d2-1783895667 .stroke-AA4{stroke:#EDF0FD;}
.d2-1783895667 .stroke-AA5{stroke:#F7F8FE;}
.d2-1783895667 .stroke-AB4{stroke:#EDF0FD;}
.d2-1783895667 .stroke-AB5{stroke:#F7F8FE;}
.d2-1783895667 .background-color-N1{background-color:#0A0F25;}
.d2-1783895667 .background-color-N2{background-color:#676C7E;}
.d2-1783895667 .background-color-N3{background-color:#9499AB;}
.d2-1783895667 .background-color-N4{background-color:#CFD2DD;}
.d2-1783895667 .background-color-N5{background-color:#DEE1EB;}
.d2-1783895667 .background-color-N6{background-color:#EEF1F8;}
.d2-1783895667 .background-color-N7{background-color:#FFFFFF;}
.d2-1783895667 .background-color-B1{background-color:#0D32B2;}
.d2-1783895667 .background-color-B2{background-color:#0D32B2;}
.d2-1783895667 .background-color-B3{background-color:#E3E9FD;}
.d2-1783895667 .background-color-B4{background-color:#E3E9FD;}
.d2-1783895667 .background-color-B5{background-color:#EDF0FD;}
.d2-1783895667 .background-color-B6{background-color:#F7F8FE;}
.d2-1783895667 .background-color-AA2{background-color:#4A6FF3;}
.d2-1783895667 .background-color-AA4{background-color:#EDF0FD;}
.d2-1783895667 .background-color-AA5{background-color:#F7F8FE;}
.d2-1783895667 .background-color-AB4{background-color:#EDF0FD;}
.d2-1783895667 .background-color-AB5{background-color:#F7F8FE;}
.d2-1783895667 .color-N1{color:#0A0F25;}
.d2-1783895667 .color-N2{color:#676C7E;}
.d2-1783895667 .color-N3{color:#9499AB;}
.d2-1783895667 .color-N4{color:#CFD2DD;}
.d2-1783895667 .color-N5{color:#DEE1EB;}
.d2-1783895667 .color-N6{color:#EEF1F8;}
.d2-1783895667 .color-N7{color:#FFFFFF;}
.d2-1783895667 .color-B1{color:#0D32B2;}
.d2-1783895667 .color-B2{color:#0D32B2;}
.d2-1783895667 .color-B3{color:#E3E9FD;}
.d2-1783895667 .color-B4{color:#E3E9FD;}
.d2-1783895667 .color-B5{color:#EDF0FD;}
.d2-1783895667 .color-B6{color:#F7F8FE;}
.d2-1783895667 .color-AA2{color:#4A6FF3;}
.d2-1783895667 .color-AA4{color:#EDF0FD;}
.d2-1783895667 .color-AA5{color:#F7F8FE;}
.d2-1783895667 .color-AB4{color:#EDF0FD;}
.d2-1783895667 .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-d2-1783895667);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1783895667);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1783895667);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1783895667);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1783895667);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1783895667);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1783895667);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1783895667);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css"><![CDATA[@keyframes d2Transition-d2-1783895667-0 {
.d2-2738210636 .fill-N1{fill:#0A0F25;}
.d2-2738210636 .fill-N2{fill:#676C7E;}
.d2-2738210636 .fill-N3{fill:#9499AB;}
.d2-2738210636 .fill-N4{fill:#CFD2DD;}
.d2-2738210636 .fill-N5{fill:#DEE1EB;}
.d2-2738210636 .fill-N6{fill:#EEF1F8;}
.d2-2738210636 .fill-N7{fill:#FFFFFF;}
.d2-2738210636 .fill-B1{fill:#0D32B2;}
.d2-2738210636 .fill-B2{fill:#0D32B2;}
.d2-2738210636 .fill-B3{fill:#E3E9FD;}
.d2-2738210636 .fill-B4{fill:#E3E9FD;}
.d2-2738210636 .fill-B5{fill:#EDF0FD;}
.d2-2738210636 .fill-B6{fill:#F7F8FE;}
.d2-2738210636 .fill-AA2{fill:#4A6FF3;}
.d2-2738210636 .fill-AA4{fill:#EDF0FD;}
.d2-2738210636 .fill-AA5{fill:#F7F8FE;}
.d2-2738210636 .fill-AB4{fill:#EDF0FD;}
.d2-2738210636 .fill-AB5{fill:#F7F8FE;}
.d2-2738210636 .stroke-N1{stroke:#0A0F25;}
.d2-2738210636 .stroke-N2{stroke:#676C7E;}
.d2-2738210636 .stroke-N3{stroke:#9499AB;}
.d2-2738210636 .stroke-N4{stroke:#CFD2DD;}
.d2-2738210636 .stroke-N5{stroke:#DEE1EB;}
.d2-2738210636 .stroke-N6{stroke:#EEF1F8;}
.d2-2738210636 .stroke-N7{stroke:#FFFFFF;}
.d2-2738210636 .stroke-B1{stroke:#0D32B2;}
.d2-2738210636 .stroke-B2{stroke:#0D32B2;}
.d2-2738210636 .stroke-B3{stroke:#E3E9FD;}
.d2-2738210636 .stroke-B4{stroke:#E3E9FD;}
.d2-2738210636 .stroke-B5{stroke:#EDF0FD;}
.d2-2738210636 .stroke-B6{stroke:#F7F8FE;}
.d2-2738210636 .stroke-AA2{stroke:#4A6FF3;}
.d2-2738210636 .stroke-AA4{stroke:#EDF0FD;}
.d2-2738210636 .stroke-AA5{stroke:#F7F8FE;}
.d2-2738210636 .stroke-AB4{stroke:#EDF0FD;}
.d2-2738210636 .stroke-AB5{stroke:#F7F8FE;}
.d2-2738210636 .background-color-N1{background-color:#0A0F25;}
.d2-2738210636 .background-color-N2{background-color:#676C7E;}
.d2-2738210636 .background-color-N3{background-color:#9499AB;}
.d2-2738210636 .background-color-N4{background-color:#CFD2DD;}
.d2-2738210636 .background-color-N5{background-color:#DEE1EB;}
.d2-2738210636 .background-color-N6{background-color:#EEF1F8;}
.d2-2738210636 .background-color-N7{background-color:#FFFFFF;}
.d2-2738210636 .background-color-B1{background-color:#0D32B2;}
.d2-2738210636 .background-color-B2{background-color:#0D32B2;}
.d2-2738210636 .background-color-B3{background-color:#E3E9FD;}
.d2-2738210636 .background-color-B4{background-color:#E3E9FD;}
.d2-2738210636 .background-color-B5{background-color:#EDF0FD;}
.d2-2738210636 .background-color-B6{background-color:#F7F8FE;}
.d2-2738210636 .background-color-AA2{background-color:#4A6FF3;}
.d2-2738210636 .background-color-AA4{background-color:#EDF0FD;}
.d2-2738210636 .background-color-AA5{background-color:#F7F8FE;}
.d2-2738210636 .background-color-AB4{background-color:#EDF0FD;}
.d2-2738210636 .background-color-AB5{background-color:#F7F8FE;}
.d2-2738210636 .color-N1{color:#0A0F25;}
.d2-2738210636 .color-N2{color:#676C7E;}
.d2-2738210636 .color-N3{color:#9499AB;}
.d2-2738210636 .color-N4{color:#CFD2DD;}
.d2-2738210636 .color-N5{color:#DEE1EB;}
.d2-2738210636 .color-N6{color:#EEF1F8;}
.d2-2738210636 .color-N7{color:#FFFFFF;}
.d2-2738210636 .color-B1{color:#0D32B2;}
.d2-2738210636 .color-B2{color:#0D32B2;}
.d2-2738210636 .color-B3{color:#E3E9FD;}
.d2-2738210636 .color-B4{color:#E3E9FD;}
.d2-2738210636 .color-B5{color:#EDF0FD;}
.d2-2738210636 .color-B6{color:#F7F8FE;}
.d2-2738210636 .color-AA2{color:#4A6FF3;}
.d2-2738210636 .color-AA4{color:#EDF0FD;}
.d2-2738210636 .color-AA5{color:#F7F8FE;}
.d2-2738210636 .color-AB4{color:#EDF0FD;}
.d2-2738210636 .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-d2-2738210636);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-2738210636);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-2738210636);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-2738210636);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-2738210636);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-2738210636);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-2738210636);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-2738210636);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css"><![CDATA[@keyframes d2Transition-d2-2738210636-0 {
0%, 0.000000% {
opacity: 0;
}
@ -99,7 +99,7 @@
33.333333%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-1783895667-1 {
}@keyframes d2Transition-d2-2738210636-1 {
0%, 33.309524% {
opacity: 0;
}
@ -109,28 +109,28 @@
66.666667%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-1783895667-2 {
}@keyframes d2Transition-d2-2738210636-2 {
0%, 66.642857% {
opacity: 0;
}
66.666667%, 100.000000% {
opacity: 1;
}
}]]></style><g style="animation: d2Transition-d2-1783895667-0 4200ms infinite" class="d2-1783895667 " width="255" height="434" viewBox="-101 -101 255 434"><rect x="-101.000000" y="-101.000000" width="255.000000" height="434.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-140202434-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-140202434-3488378134)" mask="url(#d2-140202434)" /></g><mask id="d2-140202434" maskUnits="userSpaceOnUse" x="-101" y="-101" width="255" height="434">
}]]></style><g style="animation: d2Transition-d2-2738210636-0 4200ms infinite" class="d2-2738210636 " width="255" height="434" viewBox="-101 -101 255 434"><rect x="-101.000000" y="-101.000000" width="255.000000" height="434.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-140202434-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-140202434-3488378134)" mask="url(#d2-140202434)" /></g><mask id="d2-140202434" maskUnits="userSpaceOnUse" x="-101" y="-101" width="255" height="434">
<rect x="-101" y="-101" width="255" height="434" fill="white"></rect>
<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g><g style="animation: d2Transition-d2-1783895667-1 4200ms infinite" class="d2-1783895667 " width="368" height="600" viewBox="-101 -101 368 600"><rect x="-101.000000" y="-101.000000" width="368.000000" height="600.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="ZA=="><g class="shape" ><rect x="56.000000" y="332.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="Yw=="><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-4017565856-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><g class="KGIgLSZndDsgZClbMF0="><path d="M 26.500000 234.000000 C 26.500000 272.000000 33.299999 292.000000 58.250760 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><g class="KGMgLSZndDsgZClbMF0="><path d="M 139.500000 234.000000 C 139.500000 272.000000 132.699997 292.000000 107.749240 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><mask id="d2-4017565856" maskUnits="userSpaceOnUse" x="-101" y="-101" width="368" height="600">
</mask></g><g style="animation: d2Transition-d2-2738210636-1 4200ms infinite" class="d2-2738210636 " width="368" height="600" viewBox="-101 -101 368 600"><rect x="-101.000000" y="-101.000000" width="368.000000" height="600.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="ZA=="><g class="shape" ><rect x="56.000000" y="332.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="Yw=="><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-4017565856-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><g class="KGIgLSZndDsgZClbMF0="><path d="M 26.500000 234.000000 C 26.500000 272.000000 33.299999 292.000000 58.250760 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><g class="KGMgLSZndDsgZClbMF0="><path d="M 139.500000 234.000000 C 139.500000 272.000000 132.699997 292.000000 107.749240 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4017565856-3488378134)" mask="url(#d2-4017565856)" /></g><mask id="d2-4017565856" maskUnits="userSpaceOnUse" x="-101" y="-101" width="368" height="600">
<rect x="-101" y="-101" width="368" height="600" fill="white"></rect>
<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="78.500000" y="354.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="135.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g><g style="animation: d2Transition-d2-1783895667-2 4200ms infinite" class="d2-1783895667 " width="368" height="766" viewBox="-101 -101 368 766"><rect x="-101.000000" y="-101.000000" width="368.000000" height="766.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="ZA=="><g class="shape" ><rect x="56.000000" y="332.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="Yw=="><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZQ=="><g class="shape" ><rect x="57.000000" y="498.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="536.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-489628264-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-489628264-3488378134)" mask="url(#d2-489628264)" /></g><g class="KGIgLSZndDsgZClbMF0="><path d="M 26.500000 234.000000 C 26.500000 272.000000 33.299999 292.000000 58.250760 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-489628264-3488378134)" mask="url(#d2-489628264)" /></g><g class="KGMgLSZndDsgZClbMF0="><path d="M 139.500000 234.000000 C 139.500000 272.000000 132.699997 292.000000 107.749240 328.692294" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-489628264-3488378134)" mask="url(#d2-489628264)" /></g><g class="KGQgLSZndDsgZSlbMF0="><path d="M 83.000000 400.000000 C 83.000000 438.000000 83.000000 458.000000 83.000000 494.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-489628264-3488378134)" mask="url(#d2-489628264)" /></g><mask id="d2-489628264" maskUnits="userSpaceOnUse" x="-101" y="-101" width="368" height="766">
<rect x="-101" y="-101" width="368" height="766" fill="white"></rect>
</mask></g><g style="animation: d2Transition-d2-2738210636-2 4200ms infinite" class="d2-2738210636 " width="358" height="766" viewBox="-101 -101 358 766"><rect x="-101.000000" y="-101.000000" width="358.000000" height="766.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="ZA=="><g class="shape" ><rect x="51.000000" y="332.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.000000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="Yw=="><g class="shape" ><rect x="103.000000" y="166.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="129.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZQ=="><g class="shape" ><rect x="52.000000" y="498.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="536.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-247301467-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-247301467-3488378134)" mask="url(#d2-247301467)" /></g><g class="KGIgLSZndDsgZClbMF0="><path d="M 26.500000 234.000000 C 26.500000 272.000000 32.700001 292.000000 55.392241 328.600389" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-247301467-3488378134)" mask="url(#d2-247301467)" /></g><g class="KGMgLSZndDsgZClbMF0="><path d="M 129.500000 234.000000 C 129.500000 272.000000 123.300003 292.000000 100.607759 328.600389" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-247301467-3488378134)" mask="url(#d2-247301467)" /></g><g class="KGQgLSZndDsgZSlbMF0="><path d="M 78.000000 400.000000 C 78.000000 438.000000 78.000000 458.000000 78.000000 494.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-247301467-3488378134)" mask="url(#d2-247301467)" /></g><mask id="d2-247301467" maskUnits="userSpaceOnUse" x="-101" y="-101" width="358" height="766">
<rect x="-101" y="-101" width="358" height="766" fill="white"></rect>
<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="78.500000" y="354.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="135.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="79.500000" y="520.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="73.500000" y="354.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="125.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="74.500000" y="520.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

513
e2etests/testdata/txtar/c4-person-label/dagre/board.exp.json generated vendored
View file

@ -16,7 +16,7 @@
"type": "c4-person",
"pos": {
"x": 0,
"y": 0
"y": 18
},
"width": 410,
"height": 390,
@ -58,7 +58,7 @@
"type": "c4-person",
"pos": {
"x": 470,
"y": 0
"y": 18
},
"width": 410,
"height": 390,
@ -100,7 +100,7 @@
"type": "c4-person",
"pos": {
"x": 940,
"y": 0
"y": 18
},
"width": 410,
"height": 390,
@ -136,9 +136,514 @@
"labelPosition": "INSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer1",
"type": "c4-person",
"pos": {
"x": 1410,
"y": 0
},
"width": 448,
"height": 426,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank ccountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 388,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer2",
"type": "c4-person",
"pos": {
"x": 1137,
"y": 526
},
"width": 457,
"height": 453,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customerk\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 199,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer3",
"type": "c4-person",
"pos": {
"x": 1147,
"y": 1079
},
"width": 457,
"height": 434,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer4",
"type": "c4-person",
"pos": {
"x": 1426,
"y": 1613
},
"width": 457,
"height": 434,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(customer1 -> customer2)[0]",
"src": "customer1",
"srcArrow": "none",
"dst": "customer2",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1433,
"y": 410
},
{
"x": 1379,
"y": 462.79998779296875
},
{
"x": 1365.5999755859375,
"y": 486
},
{
"x": 1366,
"y": 526
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer2 -> customer3)[0]",
"src": "customer2",
"srcArrow": "none",
"dst": "customer3",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1358,
"y": 979
},
{
"x": 1356,
"y": 1019
},
{
"x": 1356.4000244140625,
"y": 1039.199951171875
},
{
"x": 1360,
"y": 1080
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer3 -> customer4)[0]",
"src": "customer3",
"srcArrow": "none",
"dst": "customer4",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1375,
"y": 1513
},
{
"x": 1375.4000244140625,
"y": 1553
},
{
"x": 1411.800048828125,
"y": 1597.800048828125
},
{
"x": 1557,
"y": 1737
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer4 -> customer1)[0]",
"src": "customer4",
"srcArrow": "none",
"dst": "customer1",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1654,
"y": 1613
},
{
"x": 1654,
"y": 1573
},
{
"x": 1654,
"y": 1509.5999755859375
},
{
"x": 1654,
"y": 1429.5
},
{
"x": 1654,
"y": 1349.4000244140625
},
{
"x": 1654,
"y": 1242.5999755859375
},
{
"x": 1654,
"y": 1162.5
},
{
"x": 1654,
"y": 1082.4000244140625
},
{
"x": 1654,
"y": 973.7000122070312
},
{
"x": 1654,
"y": 890.75
},
{
"x": 1654,
"y": 807.7999877929688
},
{
"x": 1653.199951171875,
"y": 466
},
{
"x": 1650,
"y": 426
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer1 -> customer3)[0]",
"src": "customer1",
"srcArrow": "none",
"dst": "customer3",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1634,
"y": 426
},
{
"x": 1634,
"y": 466
},
{
"x": 1634,
"y": 531.2999877929688
},
{
"x": 1634,
"y": 614.25
},
{
"x": 1634,
"y": 697.2000122070312
},
{
"x": 1602.199951171875,
"y": 1062.199951171875
},
{
"x": 1475,
"y": 1195
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer3 -> customer2)[0]",
"src": "customer3",
"srcArrow": "none",
"dst": "customer2",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1453,
"y": 1116
},
{
"x": 1482.4000244140625,
"y": 1046.4000244140625
},
{
"x": 1485.4000244140625,
"y": 1019
},
{
"x": 1468,
"y": 979
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"connections": [],
"root": {
"id": "",
"type": "",

584
e2etests/testdata/txtar/c4-person-label/dagre/sketch.exp.svg vendored
View file

File diff suppressed because it is too large Load diff
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 38 KiB

415
e2etests/testdata/txtar/c4-person-label/elk/board.exp.json generated vendored
View file

@ -16,7 +16,7 @@
"type": "c4-person",
"pos": {
"x": 12,
"y": 12
"y": 30
},
"width": 410,
"height": 390,
@ -57,8 +57,8 @@
"id": "c4mdperson2",
"type": "c4-person",
"pos": {
"x": 442,
"y": 12
"x": 441,
"y": 30
},
"width": 410,
"height": 390,
@ -99,8 +99,8 @@
"id": "c4mdperson3",
"type": "c4-person",
"pos": {
"x": 872,
"y": 12
"x": 871,
"y": 30
},
"width": 410,
"height": 390,
@ -136,9 +136,412 @@
"labelPosition": "INSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer1",
"type": "c4-person",
"pos": {
"x": 1301,
"y": 12
},
"width": 448,
"height": 426,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank ccountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 388,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer2",
"type": "c4-person",
"pos": {
"x": 1028,
"y": 518
},
"width": 457,
"height": 453,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customerk\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 199,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer3",
"type": "c4-person",
"pos": {
"x": 1123,
"y": 1051
},
"width": 457,
"height": 434,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "customer4",
"type": "c4-person",
"pos": {
"x": 1313,
"y": 1565
},
"width": 457,
"height": 434,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 396,
"labelHeight": 119,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(customer1 -> customer2)[0]",
"src": "customer1",
"srcArrow": "none",
"dst": "customer2",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1414,
"y": 438
},
{
"x": 1414,
"y": 699
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer2 -> customer3)[0]",
"src": "customer2",
"srcArrow": "none",
"dst": "customer3",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1237,
"y": 971
},
{
"x": 1237,
"y": 1232
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer3 -> customer4)[0]",
"src": "customer3",
"srcArrow": "none",
"dst": "customer4",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1466,
"y": 1485
},
{
"x": 1466,
"y": 1600
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer4 -> customer1)[0]",
"src": "customer4",
"srcArrow": "none",
"dst": "customer1",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1620,
"y": 1603
},
{
"x": 1620,
"y": 438
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer1 -> customer3)[0]",
"src": "customer1",
"srcArrow": "none",
"dst": "customer3",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1526,
"y": 438
},
{
"x": 1526,
"y": 1233
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(customer3 -> customer2)[0]",
"src": "customer3",
"srcArrow": "none",
"dst": "customer2",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 1334,
"y": 1053
},
{
"x": 1334,
"y": 971
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"connections": [],
"root": {
"id": "",
"type": "",

584
e2etests/testdata/txtar/c4-person-label/elk/sketch.exp.svg vendored
View file

File diff suppressed because it is too large Load diff
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 38 KiB

32
e2etests/testdata/txtar/c4-person-shape/dagre/board.exp.json generated vendored
View file

@ -16,10 +16,10 @@
"type": "c4-person",
"pos": {
"x": 0,
"y": 504
"y": 507
},
"width": 336,
"height": 328,
"height": 342,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
@ -100,7 +100,7 @@
"type": "person",
"pos": {
"x": 101,
"y": 309
"y": 311
},
"width": 134,
"height": 89,
@ -145,7 +145,7 @@
"y": 273
},
"width": 210,
"height": 515,
"height": 525,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -187,7 +187,7 @@
"y": 303
},
"width": 84,
"height": 101,
"height": 104,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
@ -226,7 +226,7 @@
"type": "c4-person",
"pos": {
"x": 416,
"y": 578
"y": 588
},
"width": 150,
"height": 180,
@ -292,19 +292,19 @@
"route": [
{
"x": 168,
"y": 424
"y": 426
},
{
"x": 168,
"y": 448
"y": 450.79998779296875
},
{
"x": 168,
"y": 461
"y": 467
},
{
"x": 168,
"y": 489
"y": 507
}
],
"isCurve": true,
@ -348,11 +348,11 @@
},
{
"x": 168,
"y": 264.20001220703125
"y": 264.6000061035156
},
{
"x": 168,
"y": 309
"y": 311
}
],
"isCurve": true,
@ -436,19 +436,19 @@
"route": [
{
"x": 491,
"y": 405
"y": 407
},
{
"x": 491,
"y": 444.20001220703125
"y": 447
},
{
"x": 491,
"y": 478.6000061035156
"y": 483.20001220703125
},
{
"x": 491,
"y": 577
"y": 588
}
],
"isCurve": true,

576
e2etests/testdata/txtar/c4-person-shape/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: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

26
e2etests/testdata/txtar/c4-person-shape/elk/board.exp.json generated vendored
View file

@ -16,10 +16,10 @@
"type": "c4-person",
"pos": {
"x": 12,
"y": 935
"y": 938
},
"width": 336,
"height": 328,
"height": 342,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
@ -100,7 +100,7 @@
"type": "person",
"pos": {
"x": 113,
"y": 750
"y": 753
},
"width": 134,
"height": 89,
@ -145,7 +145,7 @@
"y": 229
},
"width": 250,
"height": 451,
"height": 454,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -187,7 +187,7 @@
"y": 279
},
"width": 84,
"height": 101,
"height": 104,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
@ -226,7 +226,7 @@
"type": "c4-person",
"pos": {
"x": 306,
"y": 450
"y": 453
},
"width": 150,
"height": 180,
@ -292,11 +292,11 @@
"route": [
{
"x": 180,
"y": 865
"y": 868
},
{
"x": 180,
"y": 920
"y": 938
}
],
"animated": false,
@ -331,7 +331,7 @@
"route": [
{
"x": 258,
"y": 144
"y": 143
},
{
"x": 257.5830078125,
@ -343,7 +343,7 @@
},
{
"x": 180,
"y": 750
"y": 753
}
],
"animated": false,
@ -378,7 +378,7 @@
"route": [
{
"x": 304,
"y": 144
"y": 143
},
{
"x": 303.9159851074219,
@ -425,11 +425,11 @@
"route": [
{
"x": 381,
"y": 381
"y": 383
},
{
"x": 382,
"y": 449
"y": 453
}
],
"animated": false,

576
e2etests/testdata/txtar/c4-person-shape/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

12
e2etests/testdata/txtar/c4-theme/dagre/board.exp.json generated vendored
View file

@ -513,12 +513,12 @@
"link": "",
"route": [
{
"x": 1092,
"y": 348
"x": 1091,
"y": 349
},
{
"x": 968,
"y": 439.6000061035156
"x": 967.7999877929688,
"y": 439.79998779296875
},
{
"x": 937,
@ -801,11 +801,11 @@
"link": "",
"route": [
{
"x": 1505,
"x": 1503,
"y": 238
},
{
"x": 2410.60009765625,
"x": 2410.199951171875,
"y": 417.6000061035156
},
{

562
e2etests/testdata/txtar/c4-theme/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: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

4
e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

2
e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json generated vendored
View file

@ -19,7 +19,7 @@
"y": 0
},
"width": 180,
"height": 94,
"height": 97,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,

156
e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg vendored
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 120"><svg class="d2-4248901620 d2-svg" width="182" height="120" viewBox="-1 -25 182 120"><rect x="-1.000000" y="-25.000000" width="182.000000" height="120.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-4248901620 .text-bold {
font-family: "d2-4248901620-font-bold";
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 122"><svg class="d2-1864249435 d2-svg" width="182" height="122" viewBox="-1 -24 182 122"><rect x="-1.000000" y="-24.000000" width="182.000000" height="122.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1864249435 .text-bold {
font-family: "d2-1864249435-font-bold";
}
@font-face {
font-family: d2-4248901620-font-bold;
font-family: d2-1864249435-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -18,78 +18,78 @@
opacity: 0.5;
}
.d2-4248901620 .fill-N1{fill:#0A0F25;}
.d2-4248901620 .fill-N2{fill:#676C7E;}
.d2-4248901620 .fill-N3{fill:#9499AB;}
.d2-4248901620 .fill-N4{fill:#CFD2DD;}
.d2-4248901620 .fill-N5{fill:#DEE1EB;}
.d2-4248901620 .fill-N6{fill:#EEF1F8;}
.d2-4248901620 .fill-N7{fill:#FFFFFF;}
.d2-4248901620 .fill-B1{fill:#0D32B2;}
.d2-4248901620 .fill-B2{fill:#0D32B2;}
.d2-4248901620 .fill-B3{fill:#E3E9FD;}
.d2-4248901620 .fill-B4{fill:#E3E9FD;}
.d2-4248901620 .fill-B5{fill:#EDF0FD;}
.d2-4248901620 .fill-B6{fill:#F7F8FE;}
.d2-4248901620 .fill-AA2{fill:#4A6FF3;}
.d2-4248901620 .fill-AA4{fill:#EDF0FD;}
.d2-4248901620 .fill-AA5{fill:#F7F8FE;}
.d2-4248901620 .fill-AB4{fill:#EDF0FD;}
.d2-4248901620 .fill-AB5{fill:#F7F8FE;}
.d2-4248901620 .stroke-N1{stroke:#0A0F25;}
.d2-4248901620 .stroke-N2{stroke:#676C7E;}
.d2-4248901620 .stroke-N3{stroke:#9499AB;}
.d2-4248901620 .stroke-N4{stroke:#CFD2DD;}
.d2-4248901620 .stroke-N5{stroke:#DEE1EB;}
.d2-4248901620 .stroke-N6{stroke:#EEF1F8;}
.d2-4248901620 .stroke-N7{stroke:#FFFFFF;}
.d2-4248901620 .stroke-B1{stroke:#0D32B2;}
.d2-4248901620 .stroke-B2{stroke:#0D32B2;}
.d2-4248901620 .stroke-B3{stroke:#E3E9FD;}
.d2-4248901620 .stroke-B4{stroke:#E3E9FD;}
.d2-4248901620 .stroke-B5{stroke:#EDF0FD;}
.d2-4248901620 .stroke-B6{stroke:#F7F8FE;}
.d2-4248901620 .stroke-AA2{stroke:#4A6FF3;}
.d2-4248901620 .stroke-AA4{stroke:#EDF0FD;}
.d2-4248901620 .stroke-AA5{stroke:#F7F8FE;}
.d2-4248901620 .stroke-AB4{stroke:#EDF0FD;}
.d2-4248901620 .stroke-AB5{stroke:#F7F8FE;}
.d2-4248901620 .background-color-N1{background-color:#0A0F25;}
.d2-4248901620 .background-color-N2{background-color:#676C7E;}
.d2-4248901620 .background-color-N3{background-color:#9499AB;}
.d2-4248901620 .background-color-N4{background-color:#CFD2DD;}
.d2-4248901620 .background-color-N5{background-color:#DEE1EB;}
.d2-4248901620 .background-color-N6{background-color:#EEF1F8;}
.d2-4248901620 .background-color-N7{background-color:#FFFFFF;}
.d2-4248901620 .background-color-B1{background-color:#0D32B2;}
.d2-4248901620 .background-color-B2{background-color:#0D32B2;}
.d2-4248901620 .background-color-B3{background-color:#E3E9FD;}
.d2-4248901620 .background-color-B4{background-color:#E3E9FD;}
.d2-4248901620 .background-color-B5{background-color:#EDF0FD;}
.d2-4248901620 .background-color-B6{background-color:#F7F8FE;}
.d2-4248901620 .background-color-AA2{background-color:#4A6FF3;}
.d2-4248901620 .background-color-AA4{background-color:#EDF0FD;}
.d2-4248901620 .background-color-AA5{background-color:#F7F8FE;}
.d2-4248901620 .background-color-AB4{background-color:#EDF0FD;}
.d2-4248901620 .background-color-AB5{background-color:#F7F8FE;}
.d2-4248901620 .color-N1{color:#0A0F25;}
.d2-4248901620 .color-N2{color:#676C7E;}
.d2-4248901620 .color-N3{color:#9499AB;}
.d2-4248901620 .color-N4{color:#CFD2DD;}
.d2-4248901620 .color-N5{color:#DEE1EB;}
.d2-4248901620 .color-N6{color:#EEF1F8;}
.d2-4248901620 .color-N7{color:#FFFFFF;}
.d2-4248901620 .color-B1{color:#0D32B2;}
.d2-4248901620 .color-B2{color:#0D32B2;}
.d2-4248901620 .color-B3{color:#E3E9FD;}
.d2-4248901620 .color-B4{color:#E3E9FD;}
.d2-4248901620 .color-B5{color:#EDF0FD;}
.d2-4248901620 .color-B6{color:#F7F8FE;}
.d2-4248901620 .color-AA2{color:#4A6FF3;}
.d2-4248901620 .color-AA4{color:#EDF0FD;}
.d2-4248901620 .color-AA5{color:#F7F8FE;}
.d2-4248901620 .color-AB4{color:#EDF0FD;}
.d2-4248901620 .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-d2-4248901620);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-4248901620);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-4248901620);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-4248901620);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-4248901620);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-4248901620);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-4248901620);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-4248901620);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 0 60 C 0 54 6 49 11 49 H 168 C 174 49 179 55 179 60 V 83 C 179 89 173 94 168 94 H 11 C 5 94 -0 88 -0 83 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 90 -23 C 112 -23 130 -5 130 17 C 130 39 112 57 90 57 C 68 57 50 39 50 17 C 50 -5 68 -23 90 -23" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="90.000000" y="76.800000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-4248901620" maskUnits="userSpaceOnUse" x="-1" y="-25" width="182" height="120">
<rect x="-1" y="-25" width="182" height="120" fill="white"></rect>
<rect x="54.500000" y="60.800000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
.d2-1864249435 .fill-N1{fill:#0A0F25;}
.d2-1864249435 .fill-N2{fill:#676C7E;}
.d2-1864249435 .fill-N3{fill:#9499AB;}
.d2-1864249435 .fill-N4{fill:#CFD2DD;}
.d2-1864249435 .fill-N5{fill:#DEE1EB;}
.d2-1864249435 .fill-N6{fill:#EEF1F8;}
.d2-1864249435 .fill-N7{fill:#FFFFFF;}
.d2-1864249435 .fill-B1{fill:#0D32B2;}
.d2-1864249435 .fill-B2{fill:#0D32B2;}
.d2-1864249435 .fill-B3{fill:#E3E9FD;}
.d2-1864249435 .fill-B4{fill:#E3E9FD;}
.d2-1864249435 .fill-B5{fill:#EDF0FD;}
.d2-1864249435 .fill-B6{fill:#F7F8FE;}
.d2-1864249435 .fill-AA2{fill:#4A6FF3;}
.d2-1864249435 .fill-AA4{fill:#EDF0FD;}
.d2-1864249435 .fill-AA5{fill:#F7F8FE;}
.d2-1864249435 .fill-AB4{fill:#EDF0FD;}
.d2-1864249435 .fill-AB5{fill:#F7F8FE;}
.d2-1864249435 .stroke-N1{stroke:#0A0F25;}
.d2-1864249435 .stroke-N2{stroke:#676C7E;}
.d2-1864249435 .stroke-N3{stroke:#9499AB;}
.d2-1864249435 .stroke-N4{stroke:#CFD2DD;}
.d2-1864249435 .stroke-N5{stroke:#DEE1EB;}
.d2-1864249435 .stroke-N6{stroke:#EEF1F8;}
.d2-1864249435 .stroke-N7{stroke:#FFFFFF;}
.d2-1864249435 .stroke-B1{stroke:#0D32B2;}
.d2-1864249435 .stroke-B2{stroke:#0D32B2;}
.d2-1864249435 .stroke-B3{stroke:#E3E9FD;}
.d2-1864249435 .stroke-B4{stroke:#E3E9FD;}
.d2-1864249435 .stroke-B5{stroke:#EDF0FD;}
.d2-1864249435 .stroke-B6{stroke:#F7F8FE;}
.d2-1864249435 .stroke-AA2{stroke:#4A6FF3;}
.d2-1864249435 .stroke-AA4{stroke:#EDF0FD;}
.d2-1864249435 .stroke-AA5{stroke:#F7F8FE;}
.d2-1864249435 .stroke-AB4{stroke:#EDF0FD;}
.d2-1864249435 .stroke-AB5{stroke:#F7F8FE;}
.d2-1864249435 .background-color-N1{background-color:#0A0F25;}
.d2-1864249435 .background-color-N2{background-color:#676C7E;}
.d2-1864249435 .background-color-N3{background-color:#9499AB;}
.d2-1864249435 .background-color-N4{background-color:#CFD2DD;}
.d2-1864249435 .background-color-N5{background-color:#DEE1EB;}
.d2-1864249435 .background-color-N6{background-color:#EEF1F8;}
.d2-1864249435 .background-color-N7{background-color:#FFFFFF;}
.d2-1864249435 .background-color-B1{background-color:#0D32B2;}
.d2-1864249435 .background-color-B2{background-color:#0D32B2;}
.d2-1864249435 .background-color-B3{background-color:#E3E9FD;}
.d2-1864249435 .background-color-B4{background-color:#E3E9FD;}
.d2-1864249435 .background-color-B5{background-color:#EDF0FD;}
.d2-1864249435 .background-color-B6{background-color:#F7F8FE;}
.d2-1864249435 .background-color-AA2{background-color:#4A6FF3;}
.d2-1864249435 .background-color-AA4{background-color:#EDF0FD;}
.d2-1864249435 .background-color-AA5{background-color:#F7F8FE;}
.d2-1864249435 .background-color-AB4{background-color:#EDF0FD;}
.d2-1864249435 .background-color-AB5{background-color:#F7F8FE;}
.d2-1864249435 .color-N1{color:#0A0F25;}
.d2-1864249435 .color-N2{color:#676C7E;}
.d2-1864249435 .color-N3{color:#9499AB;}
.d2-1864249435 .color-N4{color:#CFD2DD;}
.d2-1864249435 .color-N5{color:#DEE1EB;}
.d2-1864249435 .color-N6{color:#EEF1F8;}
.d2-1864249435 .color-N7{color:#FFFFFF;}
.d2-1864249435 .color-B1{color:#0D32B2;}
.d2-1864249435 .color-B2{color:#0D32B2;}
.d2-1864249435 .color-B3{color:#E3E9FD;}
.d2-1864249435 .color-B4{color:#E3E9FD;}
.d2-1864249435 .color-B5{color:#EDF0FD;}
.d2-1864249435 .color-B6{color:#F7F8FE;}
.d2-1864249435 .color-AA2{color:#4A6FF3;}
.d2-1864249435 .color-AA4{color:#EDF0FD;}
.d2-1864249435 .color-AA5{color:#F7F8FE;}
.d2-1864249435 .color-AB4{color:#EDF0FD;}
.d2-1864249435 .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-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1864249435);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1864249435);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1864249435);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1864249435);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 0 78 C 0 74 4 72 6 72 H 173 C 177 72 179 76 179 78 V 91 C 179 95 175 97 173 97 H 6 C 2 97 -0 93 -0 91 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 90 0 C 112 0 130 18 130 40 C 130 61 112 79 90 79 C 68 79 50 61 50 40 C 50 18 68 0 90 0" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="90.000000" y="89.640000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-1864249435" maskUnits="userSpaceOnUse" x="-1" y="-24" width="182" height="122">
<rect x="-1" y="-24" width="182" height="122" fill="white"></rect>
<rect x="54.500000" y="73.640000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

2
e2etests/testdata/txtar/small-c4-person/elk/board.exp.json generated vendored
View file

@ -19,7 +19,7 @@
"y": 12
},
"width": 180,
"height": 94,
"height": 97,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,

156
e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg vendored
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 120"><svg class="d2-108552620 d2-svg" width="182" height="120" viewBox="11 -13 182 120"><rect x="11.000000" y="-13.000000" width="182.000000" height="120.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-108552620 .text-bold {
font-family: "d2-108552620-font-bold";
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 122"><svg class="d2-1736778707 d2-svg" width="182" height="122" viewBox="11 -12 182 122"><rect x="11.000000" y="-12.000000" width="182.000000" height="122.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1736778707 .text-bold {
font-family: "d2-1736778707-font-bold";
}
@font-face {
font-family: d2-108552620-font-bold;
font-family: d2-1736778707-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -18,78 +18,78 @@
opacity: 0.5;
}
.d2-108552620 .fill-N1{fill:#0A0F25;}
.d2-108552620 .fill-N2{fill:#676C7E;}
.d2-108552620 .fill-N3{fill:#9499AB;}
.d2-108552620 .fill-N4{fill:#CFD2DD;}
.d2-108552620 .fill-N5{fill:#DEE1EB;}
.d2-108552620 .fill-N6{fill:#EEF1F8;}
.d2-108552620 .fill-N7{fill:#FFFFFF;}
.d2-108552620 .fill-B1{fill:#0D32B2;}
.d2-108552620 .fill-B2{fill:#0D32B2;}
.d2-108552620 .fill-B3{fill:#E3E9FD;}
.d2-108552620 .fill-B4{fill:#E3E9FD;}
.d2-108552620 .fill-B5{fill:#EDF0FD;}
.d2-108552620 .fill-B6{fill:#F7F8FE;}
.d2-108552620 .fill-AA2{fill:#4A6FF3;}
.d2-108552620 .fill-AA4{fill:#EDF0FD;}
.d2-108552620 .fill-AA5{fill:#F7F8FE;}
.d2-108552620 .fill-AB4{fill:#EDF0FD;}
.d2-108552620 .fill-AB5{fill:#F7F8FE;}
.d2-108552620 .stroke-N1{stroke:#0A0F25;}
.d2-108552620 .stroke-N2{stroke:#676C7E;}
.d2-108552620 .stroke-N3{stroke:#9499AB;}
.d2-108552620 .stroke-N4{stroke:#CFD2DD;}
.d2-108552620 .stroke-N5{stroke:#DEE1EB;}
.d2-108552620 .stroke-N6{stroke:#EEF1F8;}
.d2-108552620 .stroke-N7{stroke:#FFFFFF;}
.d2-108552620 .stroke-B1{stroke:#0D32B2;}
.d2-108552620 .stroke-B2{stroke:#0D32B2;}
.d2-108552620 .stroke-B3{stroke:#E3E9FD;}
.d2-108552620 .stroke-B4{stroke:#E3E9FD;}
.d2-108552620 .stroke-B5{stroke:#EDF0FD;}
.d2-108552620 .stroke-B6{stroke:#F7F8FE;}
.d2-108552620 .stroke-AA2{stroke:#4A6FF3;}
.d2-108552620 .stroke-AA4{stroke:#EDF0FD;}
.d2-108552620 .stroke-AA5{stroke:#F7F8FE;}
.d2-108552620 .stroke-AB4{stroke:#EDF0FD;}
.d2-108552620 .stroke-AB5{stroke:#F7F8FE;}
.d2-108552620 .background-color-N1{background-color:#0A0F25;}
.d2-108552620 .background-color-N2{background-color:#676C7E;}
.d2-108552620 .background-color-N3{background-color:#9499AB;}
.d2-108552620 .background-color-N4{background-color:#CFD2DD;}
.d2-108552620 .background-color-N5{background-color:#DEE1EB;}
.d2-108552620 .background-color-N6{background-color:#EEF1F8;}
.d2-108552620 .background-color-N7{background-color:#FFFFFF;}
.d2-108552620 .background-color-B1{background-color:#0D32B2;}
.d2-108552620 .background-color-B2{background-color:#0D32B2;}
.d2-108552620 .background-color-B3{background-color:#E3E9FD;}
.d2-108552620 .background-color-B4{background-color:#E3E9FD;}
.d2-108552620 .background-color-B5{background-color:#EDF0FD;}
.d2-108552620 .background-color-B6{background-color:#F7F8FE;}
.d2-108552620 .background-color-AA2{background-color:#4A6FF3;}
.d2-108552620 .background-color-AA4{background-color:#EDF0FD;}
.d2-108552620 .background-color-AA5{background-color:#F7F8FE;}
.d2-108552620 .background-color-AB4{background-color:#EDF0FD;}
.d2-108552620 .background-color-AB5{background-color:#F7F8FE;}
.d2-108552620 .color-N1{color:#0A0F25;}
.d2-108552620 .color-N2{color:#676C7E;}
.d2-108552620 .color-N3{color:#9499AB;}
.d2-108552620 .color-N4{color:#CFD2DD;}
.d2-108552620 .color-N5{color:#DEE1EB;}
.d2-108552620 .color-N6{color:#EEF1F8;}
.d2-108552620 .color-N7{color:#FFFFFF;}
.d2-108552620 .color-B1{color:#0D32B2;}
.d2-108552620 .color-B2{color:#0D32B2;}
.d2-108552620 .color-B3{color:#E3E9FD;}
.d2-108552620 .color-B4{color:#E3E9FD;}
.d2-108552620 .color-B5{color:#EDF0FD;}
.d2-108552620 .color-B6{color:#F7F8FE;}
.d2-108552620 .color-AA2{color:#4A6FF3;}
.d2-108552620 .color-AA4{color:#EDF0FD;}
.d2-108552620 .color-AA5{color:#F7F8FE;}
.d2-108552620 .color-AB4{color:#EDF0FD;}
.d2-108552620 .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-d2-108552620);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-108552620);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-108552620);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-108552620);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-108552620);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-108552620);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-108552620);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-108552620);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 12 72 C 12 66 18 61 23 61 H 180 C 186 61 191 67 191 72 V 95 C 191 101 185 106 180 106 H 23 C 17 106 12 100 12 95 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 102 -11 C 124 -11 142 7 142 29 C 142 51 124 69 102 69 C 80 69 62 51 62 29 C 62 7 80 -11 102 -11" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="102.000000" y="88.800000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-108552620" maskUnits="userSpaceOnUse" x="11" y="-13" width="182" height="120">
<rect x="11" y="-13" width="182" height="120" fill="white"></rect>
<rect x="66.500000" y="72.800000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
.d2-1736778707 .fill-N1{fill:#0A0F25;}
.d2-1736778707 .fill-N2{fill:#676C7E;}
.d2-1736778707 .fill-N3{fill:#9499AB;}
.d2-1736778707 .fill-N4{fill:#CFD2DD;}
.d2-1736778707 .fill-N5{fill:#DEE1EB;}
.d2-1736778707 .fill-N6{fill:#EEF1F8;}
.d2-1736778707 .fill-N7{fill:#FFFFFF;}
.d2-1736778707 .fill-B1{fill:#0D32B2;}
.d2-1736778707 .fill-B2{fill:#0D32B2;}
.d2-1736778707 .fill-B3{fill:#E3E9FD;}
.d2-1736778707 .fill-B4{fill:#E3E9FD;}
.d2-1736778707 .fill-B5{fill:#EDF0FD;}
.d2-1736778707 .fill-B6{fill:#F7F8FE;}
.d2-1736778707 .fill-AA2{fill:#4A6FF3;}
.d2-1736778707 .fill-AA4{fill:#EDF0FD;}
.d2-1736778707 .fill-AA5{fill:#F7F8FE;}
.d2-1736778707 .fill-AB4{fill:#EDF0FD;}
.d2-1736778707 .fill-AB5{fill:#F7F8FE;}
.d2-1736778707 .stroke-N1{stroke:#0A0F25;}
.d2-1736778707 .stroke-N2{stroke:#676C7E;}
.d2-1736778707 .stroke-N3{stroke:#9499AB;}
.d2-1736778707 .stroke-N4{stroke:#CFD2DD;}
.d2-1736778707 .stroke-N5{stroke:#DEE1EB;}
.d2-1736778707 .stroke-N6{stroke:#EEF1F8;}
.d2-1736778707 .stroke-N7{stroke:#FFFFFF;}
.d2-1736778707 .stroke-B1{stroke:#0D32B2;}
.d2-1736778707 .stroke-B2{stroke:#0D32B2;}
.d2-1736778707 .stroke-B3{stroke:#E3E9FD;}
.d2-1736778707 .stroke-B4{stroke:#E3E9FD;}
.d2-1736778707 .stroke-B5{stroke:#EDF0FD;}
.d2-1736778707 .stroke-B6{stroke:#F7F8FE;}
.d2-1736778707 .stroke-AA2{stroke:#4A6FF3;}
.d2-1736778707 .stroke-AA4{stroke:#EDF0FD;}
.d2-1736778707 .stroke-AA5{stroke:#F7F8FE;}
.d2-1736778707 .stroke-AB4{stroke:#EDF0FD;}
.d2-1736778707 .stroke-AB5{stroke:#F7F8FE;}
.d2-1736778707 .background-color-N1{background-color:#0A0F25;}
.d2-1736778707 .background-color-N2{background-color:#676C7E;}
.d2-1736778707 .background-color-N3{background-color:#9499AB;}
.d2-1736778707 .background-color-N4{background-color:#CFD2DD;}
.d2-1736778707 .background-color-N5{background-color:#DEE1EB;}
.d2-1736778707 .background-color-N6{background-color:#EEF1F8;}
.d2-1736778707 .background-color-N7{background-color:#FFFFFF;}
.d2-1736778707 .background-color-B1{background-color:#0D32B2;}
.d2-1736778707 .background-color-B2{background-color:#0D32B2;}
.d2-1736778707 .background-color-B3{background-color:#E3E9FD;}
.d2-1736778707 .background-color-B4{background-color:#E3E9FD;}
.d2-1736778707 .background-color-B5{background-color:#EDF0FD;}
.d2-1736778707 .background-color-B6{background-color:#F7F8FE;}
.d2-1736778707 .background-color-AA2{background-color:#4A6FF3;}
.d2-1736778707 .background-color-AA4{background-color:#EDF0FD;}
.d2-1736778707 .background-color-AA5{background-color:#F7F8FE;}
.d2-1736778707 .background-color-AB4{background-color:#EDF0FD;}
.d2-1736778707 .background-color-AB5{background-color:#F7F8FE;}
.d2-1736778707 .color-N1{color:#0A0F25;}
.d2-1736778707 .color-N2{color:#676C7E;}
.d2-1736778707 .color-N3{color:#9499AB;}
.d2-1736778707 .color-N4{color:#CFD2DD;}
.d2-1736778707 .color-N5{color:#DEE1EB;}
.d2-1736778707 .color-N6{color:#EEF1F8;}
.d2-1736778707 .color-N7{color:#FFFFFF;}
.d2-1736778707 .color-B1{color:#0D32B2;}
.d2-1736778707 .color-B2{color:#0D32B2;}
.d2-1736778707 .color-B3{color:#E3E9FD;}
.d2-1736778707 .color-B4{color:#E3E9FD;}
.d2-1736778707 .color-B5{color:#EDF0FD;}
.d2-1736778707 .color-B6{color:#F7F8FE;}
.d2-1736778707 .color-AA2{color:#4A6FF3;}
.d2-1736778707 .color-AA4{color:#EDF0FD;}
.d2-1736778707 .color-AA5{color:#F7F8FE;}
.d2-1736778707 .color-AB4{color:#EDF0FD;}
.d2-1736778707 .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-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1736778707);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1736778707);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1736778707);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1736778707);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 12 90 C 12 86 16 84 18 84 H 185 C 189 84 191 88 191 90 V 103 C 191 107 187 109 185 109 H 18 C 14 109 12 105 12 103 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 102 12 C 124 12 142 30 142 52 C 142 73 124 91 102 91 C 80 91 62 73 62 52 C 62 30 80 12 102 12" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="102.000000" y="101.640000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-1736778707" maskUnits="userSpaceOnUse" x="11" y="-12" width="182" height="122">
<rect x="11" y="-12" width="182" height="122" fill="white"></rect>
<rect x="66.500000" y="85.640000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

43
e2etests/txtar.txt
View file

@ -1221,3 +1221,46 @@ A customer of the bank, with personal bank accounts
shape: c4-person
label.near: bottom-center
}
customer1: |md
## Personal Banking Customer
[person]
A customer of the bank, with pekkrsonal bank ccountskks.
| {
shape: c4-person
}
customer2: |md
## Personal Banking Customerk
[person]
A customer of the bank, with pekkrsonal bank accountskks.
A customer of the bank, with pekkrsonal bank accountskks.
A customer of the bank, with pekkrsonal bank accountskks.
| {
shape: c4-person
}
customer3: |md
## Personal Banking Customer
[person]
A customer of the bank, with pekkrsonal bank accountskks.
| {
shape: c4-person
}
customer4: |md
## Personal Banking Customer
[person]
A customer of the bank, with pekkrsonal bank accountskks.
| {
shape: c4-person
}
customer1 -> customer2 -> customer3 -> customer4
customer4 -> customer1 -> customer3 -> customer2

71
lib/shape/shape_c4_person.go
View file

@ -11,6 +11,14 @@ import (
// Optimal value for circular arc approximation with cubic bezier curves
const kCircleApprox = 0.5522847498307936 // 4*(math.Sqrt(2)-1)/3
// Constants to match frontend implementation
const (
C4_PERSON_AR_LIMIT = 1.5
HEAD_RADIUS_FACTOR = 0.22
BODY_TOP_FACTOR = 0.8
CORNER_RADIUS_FACTOR = 0.175
)
type shapeC4Person struct {
*baseShape
}
@ -26,32 +34,25 @@ func NewC4Person(box *geo.Box) Shape {
return shape
}
const (
C4_PERSON_AR_LIMIT = 1.5
)
func (s shapeC4Person) GetInnerBox() *geo.Box {
width := s.Box.Width
height := s.Box.Height
headRadius := width * 0.22
headCenterY := height * 0.18
bodyTop := headCenterY + headRadius*0.8
headRadius := width * HEAD_RADIUS_FACTOR
headCenterY := headRadius
bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR
// Use a small fixed percentage instead of the full corner radius
horizontalPadding := width * 0.05 // 5% padding
// Horizontal padding = 5% of width
horizontalPadding := width * 0.05
// Vertical padding = 3% of height
verticalPadding := height * 0.03
tl := s.Box.TopLeft.Copy()
tl.X += horizontalPadding
tl.Y += bodyTop + verticalPadding
// Add vertical padding
tl.Y += bodyTop + height*0.03
// Width minus padding on both sides
innerWidth := width - (horizontalPadding * 2)
// Add bottom padding
innerHeight := height - (tl.Y - s.Box.TopLeft.Y) - (height * 0.03)
innerHeight := height - bodyTop - (verticalPadding * 2)
return geo.NewBox(tl, innerWidth, innerHeight)
}
@ -62,15 +63,15 @@ func bodyPath(box *geo.Box) *svg.SvgPathContext {
pc := svg.NewSVGPathContext(box.TopLeft, 1, 1)
headRadius := width * 0.22
headCenterY := height * 0.18
bodyTop := headCenterY + headRadius*0.8
headRadius := width * HEAD_RADIUS_FACTOR
headCenterY := headRadius
bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR
bodyWidth := width
bodyHeight := height - bodyTop
bodyLeft := 0
// Ensure cornerRadius is constrained to a portion of the shortest dimension
// This prevents distorted corners when width is large compared to height
cornerRadius := math.Min(width*0.175, bodyHeight*0.25)
// Use the same corner radius calculation as frontend
cornerRadius := math.Min(width*CORNER_RADIUS_FACTOR, bodyHeight*0.25)
pc.StartAt(pc.Absolute(float64(bodyLeft), bodyTop+cornerRadius))
@ -88,13 +89,12 @@ func bodyPath(box *geo.Box) *svg.SvgPathContext {
func headPath(box *geo.Box) *svg.SvgPathContext {
width := box.Width
height := box.Height
pc := svg.NewSVGPathContext(box.TopLeft, 1, 1)
headRadius := width * 0.22
headRadius := width * HEAD_RADIUS_FACTOR
headCenterX := width / 2
headCenterY := height * 0.18
headCenterY := headRadius
pc.StartAt(pc.Absolute(headCenterX, headCenterY-headRadius))
@ -123,13 +123,12 @@ func headPath(box *geo.Box) *svg.SvgPathContext {
func (s shapeC4Person) Perimeter() []geo.Intersectable {
width := s.Box.Width
height := s.Box.Height
bodyPerimeter := bodyPath(s.Box).Path
headRadius := width * 0.22
headRadius := width * HEAD_RADIUS_FACTOR
headCenterX := s.Box.TopLeft.X + width/2
headCenterY := s.Box.TopLeft.Y + height*0.18
headCenterY := s.Box.TopLeft.Y + headRadius
headCenter := geo.NewPoint(headCenterX, headCenterY)
headEllipse := geo.NewEllipse(headCenter, headRadius, headRadius)
@ -150,18 +149,18 @@ func (s shapeC4Person) GetDimensionsToFit(width, height, paddingX, paddingY floa
// Account for 10% total horizontal padding (5% on each side)
totalWidth := contentWidth / 0.9
headRadius := totalWidth * 0.22
headCenterY := totalWidth * 0.18
bodyTop := headCenterY + headRadius*0.8
headRadius := totalWidth * HEAD_RADIUS_FACTOR
// Include vertical padding from GetInnerBox
// Use positioning matching frontend
headCenterY := headRadius
bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR
// Include vertical padding
verticalPadding := totalWidth * 0.06 // 3% top + 3% bottom
totalHeight := contentHeight + bodyTop + verticalPadding
// Calculate minimum height based on actual proportions
// Head height: 2 * headRadius = 0.44 * width
// Body should be at least half the width
minHeight := totalWidth * 0.95 // Reduced from 1.2
// Calculate minimum height
minHeight := totalWidth * 0.95
if totalHeight < minHeight {
totalHeight = minHeight
}