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

Merge pull request #1101 from gavin-ts/arrowhead-scaling

Browse source 
adjust arrowhead scaling
This commit is contained in:
gavin-ts 2023-03-29 20:23:18 -07:00 committed by GitHub
commit cc893945da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 18049 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
#### Improvements 🧹
- prevent `tooltip` to be an URL when `link` is already set. [#1091](https://github.com/terrastruct/d2/pull/1091)
- improve scaling of arrowhead sizes according to stroke-width. [#1101](https://github.com/terrastruct/d2/pull/1101)
#### Bugfixes ⛑️

2
d2renderers/d2sketch/testdata/arrowheads/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: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

2
d2renderers/d2sketch/testdata/arrowheads_dark/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: 115 KiB

After

Width:  |  Height:  |  Size: 115 KiB

2
d2renderers/d2sketch/testdata/crows_feet/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: 160 KiB

After

Width:  |  Height:  |  Size: 160 KiB

2
d2renderers/d2sketch/testdata/crows_feet_dark/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: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

42
d2renderers/d2svg/d2svg.go
View file

@ -110,34 +110,46 @@ func arrowheadMarkerID(isTarget bool, connection d2target.Connection) string {
}
func arrowheadDimensions(arrowhead d2target.Arrowhead, strokeWidth float64) (width, height float64) {
var widthMultiplier float64
var heightMultiplier float64
var baseWidth, baseHeight float64
var widthMultiplier, heightMultiplier float64
switch arrowhead {
case d2target.ArrowArrowhead:
widthMultiplier = 5
heightMultiplier = 5
baseWidth = 4
baseHeight = 4
widthMultiplier = 4
heightMultiplier = 4
case d2target.TriangleArrowhead:
widthMultiplier = 5
heightMultiplier = 6
baseWidth = 4
baseHeight = 4
widthMultiplier = 3
heightMultiplier = 4
case d2target.LineArrowhead:
widthMultiplier = 5
heightMultiplier = 8
case d2target.FilledDiamondArrowhead:
widthMultiplier = 11
heightMultiplier = 7
baseWidth = 11
baseHeight = 7
widthMultiplier = 5.5
heightMultiplier = 3.5
case d2target.DiamondArrowhead:
widthMultiplier = 11
heightMultiplier = 9
baseWidth = 11
baseHeight = 9
widthMultiplier = 5.5
heightMultiplier = 4.5
case d2target.FilledCircleArrowhead, d2target.CircleArrowhead:
widthMultiplier = 12
heightMultiplier = 12
baseWidth = 8
baseHeight = 8
widthMultiplier = 5
heightMultiplier = 5
case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired:
widthMultiplier = 9
heightMultiplier = 9
baseWidth = 9
baseHeight = 9
widthMultiplier = 4.5
heightMultiplier = 4.5
}
clippedStrokeWidth := go2.Max(MIN_ARROWHEAD_STROKE_WIDTH, strokeWidth)
return clippedStrokeWidth * widthMultiplier, clippedStrokeWidth * heightMultiplier
return baseWidth + clippedStrokeWidth*widthMultiplier, baseHeight + clippedStrokeWidth*heightMultiplier
}
func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) string {

2
d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.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: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf vendored
View file

Binary file not shown.

1
e2etests/stable_test.go
View file

@ -2464,6 +2464,7 @@ scenarios: {
}
}`,
},
loadFromFile(t, "arrowhead_scaling"),
}
runa(t, tcs)

340
e2etests/testdata/files/arrowhead_scaling.d2 vendored Normal file
View file

@ -0,0 +1,340 @@
default: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
}
}
line: {
start: ""
end: ""
start.1 -- end.1: 1 {
style.stroke-width: 1
}
start.2 -- end.2: 2 {
style.stroke-width: 2
}
start.4 -- end.4: 4 {
style.stroke-width: 4
}
start.8 -- end.8: 8 {
style.stroke-width: 8
}
start.15 -- end.15: 15 {
style.stroke-width: 15
}
}
arrow: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: arrow
target-arrowhead.shape: arrow
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: arrow
target-arrowhead.shape: arrow
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: arrow
target-arrowhead.shape: arrow
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: arrow
target-arrowhead.shape: arrow
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: arrow
target-arrowhead.shape: arrow
}
}
diamond: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
}
}
filled diamond: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: diamond
target-arrowhead.shape: diamond
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
}
circle: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: circle
target-arrowhead.shape: circle
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: circle
target-arrowhead.shape: circle
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: circle
target-arrowhead.shape: circle
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: circle
target-arrowhead.shape: circle
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: circle
target-arrowhead.shape: circle
}
}
filled circle: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: circle
target-arrowhead.shape: circle
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: circle
target-arrowhead.shape: circle
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: circle
target-arrowhead.shape: circle
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: circle
target-arrowhead.shape: circle
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: circle
target-arrowhead.shape: circle
source-arrowhead.style.filled: true
target-arrowhead.style.filled: true
}
}
cf one: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: cf-one
target-arrowhead.shape: cf-one
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: cf-one
target-arrowhead.shape: cf-one
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: cf-one
target-arrowhead.shape: cf-one
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: cf-one
target-arrowhead.shape: cf-one
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: cf-one
target-arrowhead.shape: cf-one
}
}
cf one required: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: cf-one-required
target-arrowhead.shape: cf-one-required
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: cf-one-required
target-arrowhead.shape: cf-one-required
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: cf-one-required
target-arrowhead.shape: cf-one-required
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: cf-one-required
target-arrowhead.shape: cf-one-required
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: cf-one-required
target-arrowhead.shape: cf-one-required
}
}
cf many: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: cf-many
target-arrowhead.shape: cf-many
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: cf-many
target-arrowhead.shape: cf-many
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: cf-many
target-arrowhead.shape: cf-many
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: cf-many
target-arrowhead.shape: cf-many
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: cf-many
target-arrowhead.shape: cf-many
}
}
cf many required: {
start: ""
end: ""
start.1 <-> end.1: 1 {
style.stroke-width: 1
source-arrowhead.shape: cf-many-required
target-arrowhead.shape: cf-many-required
}
start.2 <-> end.2: 2 {
style.stroke-width: 2
source-arrowhead.shape: cf-many-required
target-arrowhead.shape: cf-many-required
}
start.4 <-> end.4: 4 {
style.stroke-width: 4
source-arrowhead.shape: cf-many-required
target-arrowhead.shape: cf-many-required
}
start.8 <-> end.8: 8 {
style.stroke-width: 8
source-arrowhead.shape: cf-many-required
target-arrowhead.shape: cf-many-required
}
start.15 <-> end.15: 15 {
style.stroke-width: 15
source-arrowhead.shape: cf-many-required
target-arrowhead.shape: cf-many-required
}
}

2
e2etests/testdata/regression/dagre-disconnect/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: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

2
e2etests/testdata/regression/dagre-disconnect/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: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

2
e2etests/testdata/stable/arrowhead_adjustment/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: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

2
e2etests/testdata/stable/arrowhead_adjustment/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: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

9245
e2etests/testdata/stable/arrowhead_scaling/dagre/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

163
e2etests/testdata/stable/arrowhead_scaling/dagre/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 128 KiB

8090
e2etests/testdata/stable/arrowhead_scaling/elk/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

163
e2etests/testdata/stable/arrowhead_scaling/elk/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 121 KiB

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

@ -96,7 +96,7 @@
.d2-380984896 .color-AA4{color:#EDF0FD;}
.d2-380984896 .color-AA5{color:#F7F8FE;}
.d2-380984896 .color-AB4{color:#EDF0FD;}
.d2-380984896 .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><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#d2-380984896)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#d2-380984896)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="d2-380984896" maskUnits="userSpaceOnUse" x="-1" y="-1" width="178" height="255">
.d2-380984896 .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><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="7.000000" cx="8.000000" cy="9.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="7.000000" cx="10.000000" cy="9.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#d2-380984896)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="8.000000" cx="8.000000" cy="9.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="8.000000" cx="10.000000" cy="9.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#d2-380984896)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="d2-380984896" maskUnits="userSpaceOnUse" x="-1" y="-1" width="178" height="255">
<rect x="-1" y="-1" width="178" height="255" fill="white"></rect>
<rect x="9.000000" y="116.000000" width="36" height="21" fill="black"></rect>
<rect x="104.000000" y="116.000000" width="73" height="21" fill="black"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

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

@ -96,7 +96,7 @@
.d2-3036836495 .color-AA4{color:#EDF0FD;}
.d2-3036836495 .color-AA5{color:#F7F8FE;}
.d2-3036836495 .color-AB4{color:#EDF0FD;}
.d2-3036836495 .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><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#d2-3036836495)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#d2-3036836495)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="d2-3036836495" maskUnits="userSpaceOnUse" x="11" y="11" width="138" height="295">
.d2-3036836495 .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><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="7.000000" cx="8.000000" cy="9.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="7.000000" cx="10.000000" cy="9.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#d2-3036836495)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="8.000000" cx="8.000000" cy="9.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="8.000000" cx="10.000000" cy="9.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#d2-3036836495)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="d2-3036836495" maskUnits="userSpaceOnUse" x="11" y="11" width="138" height="295">
<rect x="11" y="11" width="138" height="295" fill="white"></rect>
<rect x="21.000000" y="148.000000" width="36" height="21" fill="black"></rect>
<rect x="76.000000" y="148.000000" width="73" height="21" fill="black"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

2
e2etests/testdata/stable/crow_foot_arrowhead/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: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

2
e2etests/testdata/stable/crow_foot_arrowhead/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: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

2
e2etests/testdata/stable/sequence_diagram_nested_span/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: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

2
e2etests/testdata/stable/sequence_diagram_nested_span/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: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

2
e2etests/testdata/stable/sequence_diagram_simple/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: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

2
e2etests/testdata/stable/sequence_diagram_simple/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: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

2
e2etests/testdata/todo/container_label_edge_adjustment/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: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
e2etests/testdata/todo/container_label_edge_adjustment/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: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB