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

link on connections are now labels

Browse source
This commit is contained in:
Daniel Suh 2024-05-29 21:05:52 -04:00 committed by Alexander Wang
parent b4af79df3e
commit 83ca32e4bf
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
9 changed files with 645 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
#### Features 🚀
- Connections now support `link` in SVGs [#1955](https://github.com/terrastruct/d2/pull/1955)
- Vars: vars in markdown blocks are substituted [#2218](https://github.com/terrastruct/d2/pull/2218)
- Markdown: Github-flavored tables work in `md` blocks [#2221](https://github.com/terrastruct/d2/pull/2221)
@ -32,8 +33,13 @@
- Sequence diagram: the padding between message labels and message endpoints are slightly increased [#2096](https://github.com/terrastruct/d2/pull/2096)
- Opacity 0 shapes no longer have a label mask which made any segment of connections going through them lower opacity [#1940](https://github.com/terrastruct/d2/pull/1940)
- Bidirectional connections are now animated in opposite directions rather than one direction [#1939](https://github.com/terrastruct/d2/pull/1939)
<<<<<<< HEAD
- Connections now support `link` in SVGs [#1955](https://github.com/terrastruct/d2/pull/1955)
>>>>>>> 703bcd388 (update next.md)
||||||| parent of ba86dc990 (link on connections are now labels)
- Connections now support `link` in SVGs [#1955](https://github.com/terrastruct/d2/pull/1955)
=======
>>>>>>> ba86dc990 (link on connections are now labels)
#### Bugfixes ⛑️

6
d2graph/d2graph.go
View file

@ -1620,7 +1620,11 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
obj.SizeToContent(contentBox.Width, contentBox.Height, paddingX, paddingY)
}
for _, edge := range g.Edges {
for i, edge := range g.Edges {
if edge.Link != nil {
g.Edges[i].Label.Value = edge.Link.Value
}
usedFont := fontFamily
if edge.Style.Font != nil {
f := d2fonts.D2_FONT_TO_FAMILY[edge.Style.Font.Value]

20
d2renderers/d2svg/d2svg.go
View file

@ -502,13 +502,6 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
opacityStyle = fmt.Sprintf(" style='opacity:%f'", connection.Opacity)
}
closingTag := ""
if connection.Link != "" {
fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, svg.EscapeText(connection.Link))
fmt.Println("Hello")
closingTag += "</a>"
}
classStr := ""
if len(connection.Classes) > 0 {
classStr = fmt.Sprintf(` class="%s"`, strings.Join(connection.Classes, " "))
@ -646,7 +639,19 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
textEl.ClassName = fontClass
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight))
if connection.Link != "" {
textEl.Fill = "blue"
textEl.ClassName += " text-underline"
fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, svg.EscapeText(connection.Link))
}
fmt.Fprint(writer, textEl.Render())
if connection.Link != "" {
fmt.Fprintf(writer, "</a>")
}
}
if connection.SrcLabel != nil && connection.SrcLabel.Label != "" {
@ -656,7 +661,6 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
fmt.Fprint(writer, renderArrowheadLabel(connection, connection.DstLabel.Label, true, inlineTheme))
}
fmt.Fprintf(writer, `</g>`)
fmt.Fprintf(writer, "%s", closingTag)
return
}

3
d2target/d2target.go
View file

@ -599,7 +599,8 @@ type Connection struct {
LabelPosition string `json:"labelPosition"`
LabelPercentage float64 `json:"labelPercentage"`
Link string `json:"link"`
Link string `json:"link"`
PrettyLink string `json:"prettyLink,omitempty"`
Route []*geo.Point `json:"route"`
IsCurve bool `json:"isCurve,omitempty"`

219
e2etests/testdata/txtar/link-on-connections/dagre/board.exp.json generated vendored
View file

@ -7,10 +7,10 @@
"id": "a",
"type": "rectangle",
"pos": {
"x": 0,
"x": 40,
"y": 0
},
"width": 85,
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
@ -23,8 +23,7 @@
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "https://twitter.com",
"prettyLink": "https://twitter.com",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
@ -49,8 +48,8 @@
"id": "b",
"type": "rectangle",
"pos": {
"x": 16,
"y": 166
"x": 40,
"y": 187
},
"width": 53,
"height": 66,
@ -85,6 +84,47 @@
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "c",
"type": "rectangle",
"pos": {
"x": 40,
"y": 374
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
@ -99,7 +139,7 @@
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"label": "https://google.com/",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
@ -107,27 +147,75 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelWidth": 133,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "https://google.com",
"link": "https://google.com/",
"route": [
{
"x": 42.5,
"y": 66
"x": 66.5,
"y": 65.5
},
{
"x": 42.5,
"y": 106
"x": 66.5,
"y": 114.30000305175781
},
{
"x": 42.5,
"y": 126
"x": 66.5,
"y": 138.6999969482422
},
{
"x": 42.5,
"y": 166
"x": 66.5,
"y": 187.5
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(b -> c)[0]",
"src": "b",
"srcArrow": "none",
"dst": "c",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "root.layers.d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 84,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "root.layers.d",
"route": [
{
"x": 66.5,
"y": 252.5
},
{
"x": 66.5,
"y": 301.29998779296875
},
{
"x": 66.5,
"y": 325.70001220703125
},
{
"x": 66.5,
"y": 374.5
}
],
"isCurve": true,
@ -176,5 +264,96 @@
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
},
"layers": [
{
"name": "d",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "d",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}
]
}

208
e2etests/testdata/txtar/link-on-connections/dagre/sketch.exp.svg vendored
View file

@ -1,13 +1,20 @@
<?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.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 251"><svg id="d2-svg" class="d2-340887395" width="104" height="251" viewBox="-1 -18 104 251"><rect x="-1.000000" y="-18.000000" width="104.000000" height="251.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
<?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.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 134 442"><svg id="d2-svg" width="134" height="442" viewBox="-1 -1 134 442"><style type="text/css"><![CDATA[
.text-underline {
text-decoration: underline;
}
.d2-340887395 .text-bold {
font-family: "d2-340887395-font-bold";
.d2-1855656159 .text-bold {
font-family: "d2-1855656159-font-bold";
}
@font-face {
font-family: d2-340887395-font-bold;
src: url("data:application/font-woff;base64,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");
font-family: d2-1855656159-font-bold;
src: url("data:application/font-woff;base64,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");
}
.d2-1855656159 .text-italic {
font-family: "d2-1855656159-font-italic";
}
@font-face {
font-family: d2-1855656159-font-italic;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
@ -21,91 +28,102 @@
opacity: 0.5;
}
.d2-340887395 .fill-N1{fill:#0A0F25;}
.d2-340887395 .fill-N2{fill:#676C7E;}
.d2-340887395 .fill-N3{fill:#9499AB;}
.d2-340887395 .fill-N4{fill:#CFD2DD;}
.d2-340887395 .fill-N5{fill:#DEE1EB;}
.d2-340887395 .fill-N6{fill:#EEF1F8;}
.d2-340887395 .fill-N7{fill:#FFFFFF;}
.d2-340887395 .fill-B1{fill:#0D32B2;}
.d2-340887395 .fill-B2{fill:#0D32B2;}
.d2-340887395 .fill-B3{fill:#E3E9FD;}
.d2-340887395 .fill-B4{fill:#E3E9FD;}
.d2-340887395 .fill-B5{fill:#EDF0FD;}
.d2-340887395 .fill-B6{fill:#F7F8FE;}
.d2-340887395 .fill-AA2{fill:#4A6FF3;}
.d2-340887395 .fill-AA4{fill:#EDF0FD;}
.d2-340887395 .fill-AA5{fill:#F7F8FE;}
.d2-340887395 .fill-AB4{fill:#EDF0FD;}
.d2-340887395 .fill-AB5{fill:#F7F8FE;}
.d2-340887395 .stroke-N1{stroke:#0A0F25;}
.d2-340887395 .stroke-N2{stroke:#676C7E;}
.d2-340887395 .stroke-N3{stroke:#9499AB;}
.d2-340887395 .stroke-N4{stroke:#CFD2DD;}
.d2-340887395 .stroke-N5{stroke:#DEE1EB;}
.d2-340887395 .stroke-N6{stroke:#EEF1F8;}
.d2-340887395 .stroke-N7{stroke:#FFFFFF;}
.d2-340887395 .stroke-B1{stroke:#0D32B2;}
.d2-340887395 .stroke-B2{stroke:#0D32B2;}
.d2-340887395 .stroke-B3{stroke:#E3E9FD;}
.d2-340887395 .stroke-B4{stroke:#E3E9FD;}
.d2-340887395 .stroke-B5{stroke:#EDF0FD;}
.d2-340887395 .stroke-B6{stroke:#F7F8FE;}
.d2-340887395 .stroke-AA2{stroke:#4A6FF3;}
.d2-340887395 .stroke-AA4{stroke:#EDF0FD;}
.d2-340887395 .stroke-AA5{stroke:#F7F8FE;}
.d2-340887395 .stroke-AB4{stroke:#EDF0FD;}
.d2-340887395 .stroke-AB5{stroke:#F7F8FE;}
.d2-340887395 .background-color-N1{background-color:#0A0F25;}
.d2-340887395 .background-color-N2{background-color:#676C7E;}
.d2-340887395 .background-color-N3{background-color:#9499AB;}
.d2-340887395 .background-color-N4{background-color:#CFD2DD;}
.d2-340887395 .background-color-N5{background-color:#DEE1EB;}
.d2-340887395 .background-color-N6{background-color:#EEF1F8;}
.d2-340887395 .background-color-N7{background-color:#FFFFFF;}
.d2-340887395 .background-color-B1{background-color:#0D32B2;}
.d2-340887395 .background-color-B2{background-color:#0D32B2;}
.d2-340887395 .background-color-B3{background-color:#E3E9FD;}
.d2-340887395 .background-color-B4{background-color:#E3E9FD;}
.d2-340887395 .background-color-B5{background-color:#EDF0FD;}
.d2-340887395 .background-color-B6{background-color:#F7F8FE;}
.d2-340887395 .background-color-AA2{background-color:#4A6FF3;}
.d2-340887395 .background-color-AA4{background-color:#EDF0FD;}
.d2-340887395 .background-color-AA5{background-color:#F7F8FE;}
.d2-340887395 .background-color-AB4{background-color:#EDF0FD;}
.d2-340887395 .background-color-AB5{background-color:#F7F8FE;}
.d2-340887395 .color-N1{color:#0A0F25;}
.d2-340887395 .color-N2{color:#676C7E;}
.d2-340887395 .color-N3{color:#9499AB;}
.d2-340887395 .color-N4{color:#CFD2DD;}
.d2-340887395 .color-N5{color:#DEE1EB;}
.d2-340887395 .color-N6{color:#EEF1F8;}
.d2-340887395 .color-N7{color:#FFFFFF;}
.d2-340887395 .color-B1{color:#0D32B2;}
.d2-340887395 .color-B2{color:#0D32B2;}
.d2-340887395 .color-B3{color:#E3E9FD;}
.d2-340887395 .color-B4{color:#E3E9FD;}
.d2-340887395 .color-B5{color:#EDF0FD;}
.d2-340887395 .color-B6{color:#F7F8FE;}
.d2-340887395 .color-AA2{color:#4A6FF3;}
.d2-340887395 .color-AA4{color:#EDF0FD;}
.d2-340887395 .color-AA5{color:#F7F8FE;}
.d2-340887395 .color-AB4{color:#EDF0FD;}
.d2-340887395 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="16.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 42.500000 70.000000 C 42.500000 106.000000 42.500000 126.000000 42.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-340887395)" /></g></a><g transform="translate(69 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g><mask id="d2-340887395" maskUnits="userSpaceOnUse" x="-1" y="-18" width="104" height="251">
<rect x="-1" y="-18" width="104" height="251" fill="white"></rect>
<rect x="38.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="38.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
.d2-1855656159 .fill-N1{fill:#0A0F25;}
.d2-1855656159 .fill-N2{fill:#676C7E;}
.d2-1855656159 .fill-N3{fill:#9499AB;}
.d2-1855656159 .fill-N4{fill:#CFD2DD;}
.d2-1855656159 .fill-N5{fill:#DEE1EB;}
.d2-1855656159 .fill-N6{fill:#EEF1F8;}
.d2-1855656159 .fill-N7{fill:#FFFFFF;}
.d2-1855656159 .fill-B1{fill:#0D32B2;}
.d2-1855656159 .fill-B2{fill:#0D32B2;}
.d2-1855656159 .fill-B3{fill:#E3E9FD;}
.d2-1855656159 .fill-B4{fill:#E3E9FD;}
.d2-1855656159 .fill-B5{fill:#EDF0FD;}
.d2-1855656159 .fill-B6{fill:#F7F8FE;}
.d2-1855656159 .fill-AA2{fill:#4A6FF3;}
.d2-1855656159 .fill-AA4{fill:#EDF0FD;}
.d2-1855656159 .fill-AA5{fill:#F7F8FE;}
.d2-1855656159 .fill-AB4{fill:#EDF0FD;}
.d2-1855656159 .fill-AB5{fill:#F7F8FE;}
.d2-1855656159 .stroke-N1{stroke:#0A0F25;}
.d2-1855656159 .stroke-N2{stroke:#676C7E;}
.d2-1855656159 .stroke-N3{stroke:#9499AB;}
.d2-1855656159 .stroke-N4{stroke:#CFD2DD;}
.d2-1855656159 .stroke-N5{stroke:#DEE1EB;}
.d2-1855656159 .stroke-N6{stroke:#EEF1F8;}
.d2-1855656159 .stroke-N7{stroke:#FFFFFF;}
.d2-1855656159 .stroke-B1{stroke:#0D32B2;}
.d2-1855656159 .stroke-B2{stroke:#0D32B2;}
.d2-1855656159 .stroke-B3{stroke:#E3E9FD;}
.d2-1855656159 .stroke-B4{stroke:#E3E9FD;}
.d2-1855656159 .stroke-B5{stroke:#EDF0FD;}
.d2-1855656159 .stroke-B6{stroke:#F7F8FE;}
.d2-1855656159 .stroke-AA2{stroke:#4A6FF3;}
.d2-1855656159 .stroke-AA4{stroke:#EDF0FD;}
.d2-1855656159 .stroke-AA5{stroke:#F7F8FE;}
.d2-1855656159 .stroke-AB4{stroke:#EDF0FD;}
.d2-1855656159 .stroke-AB5{stroke:#F7F8FE;}
.d2-1855656159 .background-color-N1{background-color:#0A0F25;}
.d2-1855656159 .background-color-N2{background-color:#676C7E;}
.d2-1855656159 .background-color-N3{background-color:#9499AB;}
.d2-1855656159 .background-color-N4{background-color:#CFD2DD;}
.d2-1855656159 .background-color-N5{background-color:#DEE1EB;}
.d2-1855656159 .background-color-N6{background-color:#EEF1F8;}
.d2-1855656159 .background-color-N7{background-color:#FFFFFF;}
.d2-1855656159 .background-color-B1{background-color:#0D32B2;}
.d2-1855656159 .background-color-B2{background-color:#0D32B2;}
.d2-1855656159 .background-color-B3{background-color:#E3E9FD;}
.d2-1855656159 .background-color-B4{background-color:#E3E9FD;}
.d2-1855656159 .background-color-B5{background-color:#EDF0FD;}
.d2-1855656159 .background-color-B6{background-color:#F7F8FE;}
.d2-1855656159 .background-color-AA2{background-color:#4A6FF3;}
.d2-1855656159 .background-color-AA4{background-color:#EDF0FD;}
.d2-1855656159 .background-color-AA5{background-color:#F7F8FE;}
.d2-1855656159 .background-color-AB4{background-color:#EDF0FD;}
.d2-1855656159 .background-color-AB5{background-color:#F7F8FE;}
.d2-1855656159 .color-N1{color:#0A0F25;}
.d2-1855656159 .color-N2{color:#676C7E;}
.d2-1855656159 .color-N3{color:#9499AB;}
.d2-1855656159 .color-N4{color:#CFD2DD;}
.d2-1855656159 .color-N5{color:#DEE1EB;}
.d2-1855656159 .color-N6{color:#EEF1F8;}
.d2-1855656159 .color-N7{color:#FFFFFF;}
.d2-1855656159 .color-B1{color:#0D32B2;}
.d2-1855656159 .color-B2{color:#0D32B2;}
.d2-1855656159 .color-B3{color:#E3E9FD;}
.d2-1855656159 .color-B4{color:#E3E9FD;}
.d2-1855656159 .color-B5{color:#EDF0FD;}
.d2-1855656159 .color-B6{color:#F7F8FE;}
.d2-1855656159 .color-AA2{color:#4A6FF3;}
.d2-1855656159 .color-AA4{color:#EDF0FD;}
.d2-1855656159 .color-AA5{color:#F7F8FE;}
.d2-1855656159 .color-AB4{color:#EDF0FD;}
.d2-1855656159 .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><style type="text/css"><![CDATA[@keyframes d2Transition-d2-1855656159-0 {
0%, 0.000000% {
opacity: 0;
}
0.000000%, 49.950000% {
opacity: 1;
}
50.000000%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-1855656159-1 {
0%, 49.950000% {
opacity: 0;
}
50.000000%, 100.000000% {
opacity: 1;
}
}]]></style><g style="animation: d2Transition-d2-1855656159-0 2000ms infinite" class="d2-1855656159" width="133" height="442" viewBox="0 -1 133 442"><rect x="0.000000" y="-1.000000" width="133.000000" height="442.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="40.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.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="40.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.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="40.000000" y="374.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 66.500000 69.500000 C 66.500000 114.300003 66.500000 138.699997 66.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="66.500000" y="132.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 66.500000 254.500000 C 66.500000 301.299988 66.500000 325.700012 66.500000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="67.000000" y="319.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-1855656159" maskUnits="userSpaceOnUse" x="0" y="-1" width="133" height="442">
<rect x="0" y="-1" width="133" height="442" fill="white"></rect>
<rect x="62.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="62.500000" y="209.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="62.500000" y="396.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="0.000000" y="116.000000" width="133" height="21" fill="black"></rect>
<rect x="25.000000" y="303.000000" width="84" height="21" fill="black"></rect>
</mask></g><g style="animation: d2Transition-d2-1855656159-1 2000ms infinite" class="d2-1855656159" width="56" height="68" viewBox="-1 -1 56 68"><rect x="-1.000000" y="-1.000000" width="56.000000" height="68.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="d"><g class="shape" ><rect x="0.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><mask id="d2-3068885310" maskUnits="userSpaceOnUse" x="-1" y="-1" width="56" height="68">
<rect x="-1" y="-1" width="56" height="68" fill="white"></rect>
<rect x="22.500000" y="22.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

200
e2etests/testdata/txtar/link-on-connections/elk/board.exp.json generated vendored
View file

@ -7,10 +7,10 @@
"id": "a",
"type": "rectangle",
"pos": {
"x": 12,
"x": 52,
"y": 12
},
"width": 85,
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
@ -23,8 +23,7 @@
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "https://twitter.com",
"prettyLink": "https://twitter.com",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
@ -49,8 +48,8 @@
"id": "b",
"type": "rectangle",
"pos": {
"x": 28,
"y": 148
"x": 52,
"y": 239
},
"width": 53,
"height": 66,
@ -85,6 +84,47 @@
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "c",
"type": "rectangle",
"pos": {
"x": 52,
"y": 466
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
@ -99,7 +139,7 @@
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"label": "https://google.com/",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
@ -107,19 +147,58 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelWidth": 133,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "https://google.com",
"link": "https://google.com/",
"route": [
{
"x": 54.5,
"x": 78.5,
"y": 78
},
{
"x": 54.5,
"y": 148
"x": 78.5,
"y": 239
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(b -> c)[0]",
"src": "b",
"srcArrow": "none",
"dst": "c",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "root.layers.d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 84,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "root.layers.d",
"route": [
{
"x": 78.5,
"y": 305
},
{
"x": 78.5,
"y": 466
}
],
"animated": false,
@ -167,5 +246,96 @@
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
},
"layers": [
{
"name": "d",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "d",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "d",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}
]
}

208
e2etests/testdata/txtar/link-on-connections/elk/sketch.exp.svg vendored
View file

@ -1,13 +1,20 @@
<?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.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 221"><svg id="d2-svg" class="d2-3413914892" width="104" height="221" viewBox="11 -6 104 221"><rect x="11.000000" y="-6.000000" width="104.000000" height="221.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
<?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.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 134 522"><svg id="d2-svg" width="134" height="522" viewBox="11 11 134 522"><style type="text/css"><![CDATA[
.text-underline {
text-decoration: underline;
}
.d2-3413914892 .text-bold {
font-family: "d2-3413914892-font-bold";
.d2-4163031082 .text-bold {
font-family: "d2-4163031082-font-bold";
}
@font-face {
font-family: d2-3413914892-font-bold;
src: url("data:application/font-woff;base64,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");
font-family: d2-4163031082-font-bold;
src: url("data:application/font-woff;base64,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");
}
.d2-4163031082 .text-italic {
font-family: "d2-4163031082-font-italic";
}
@font-face {
font-family: d2-4163031082-font-italic;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
@ -21,91 +28,102 @@
opacity: 0.5;
}
.d2-3413914892 .fill-N1{fill:#0A0F25;}
.d2-3413914892 .fill-N2{fill:#676C7E;}
.d2-3413914892 .fill-N3{fill:#9499AB;}
.d2-3413914892 .fill-N4{fill:#CFD2DD;}
.d2-3413914892 .fill-N5{fill:#DEE1EB;}
.d2-3413914892 .fill-N6{fill:#EEF1F8;}
.d2-3413914892 .fill-N7{fill:#FFFFFF;}
.d2-3413914892 .fill-B1{fill:#0D32B2;}
.d2-3413914892 .fill-B2{fill:#0D32B2;}
.d2-3413914892 .fill-B3{fill:#E3E9FD;}
.d2-3413914892 .fill-B4{fill:#E3E9FD;}
.d2-3413914892 .fill-B5{fill:#EDF0FD;}
.d2-3413914892 .fill-B6{fill:#F7F8FE;}
.d2-3413914892 .fill-AA2{fill:#4A6FF3;}
.d2-3413914892 .fill-AA4{fill:#EDF0FD;}
.d2-3413914892 .fill-AA5{fill:#F7F8FE;}
.d2-3413914892 .fill-AB4{fill:#EDF0FD;}
.d2-3413914892 .fill-AB5{fill:#F7F8FE;}
.d2-3413914892 .stroke-N1{stroke:#0A0F25;}
.d2-3413914892 .stroke-N2{stroke:#676C7E;}
.d2-3413914892 .stroke-N3{stroke:#9499AB;}
.d2-3413914892 .stroke-N4{stroke:#CFD2DD;}
.d2-3413914892 .stroke-N5{stroke:#DEE1EB;}
.d2-3413914892 .stroke-N6{stroke:#EEF1F8;}
.d2-3413914892 .stroke-N7{stroke:#FFFFFF;}
.d2-3413914892 .stroke-B1{stroke:#0D32B2;}
.d2-3413914892 .stroke-B2{stroke:#0D32B2;}
.d2-3413914892 .stroke-B3{stroke:#E3E9FD;}
.d2-3413914892 .stroke-B4{stroke:#E3E9FD;}
.d2-3413914892 .stroke-B5{stroke:#EDF0FD;}
.d2-3413914892 .stroke-B6{stroke:#F7F8FE;}
.d2-3413914892 .stroke-AA2{stroke:#4A6FF3;}
.d2-3413914892 .stroke-AA4{stroke:#EDF0FD;}
.d2-3413914892 .stroke-AA5{stroke:#F7F8FE;}
.d2-3413914892 .stroke-AB4{stroke:#EDF0FD;}
.d2-3413914892 .stroke-AB5{stroke:#F7F8FE;}
.d2-3413914892 .background-color-N1{background-color:#0A0F25;}
.d2-3413914892 .background-color-N2{background-color:#676C7E;}
.d2-3413914892 .background-color-N3{background-color:#9499AB;}
.d2-3413914892 .background-color-N4{background-color:#CFD2DD;}
.d2-3413914892 .background-color-N5{background-color:#DEE1EB;}
.d2-3413914892 .background-color-N6{background-color:#EEF1F8;}
.d2-3413914892 .background-color-N7{background-color:#FFFFFF;}
.d2-3413914892 .background-color-B1{background-color:#0D32B2;}
.d2-3413914892 .background-color-B2{background-color:#0D32B2;}
.d2-3413914892 .background-color-B3{background-color:#E3E9FD;}
.d2-3413914892 .background-color-B4{background-color:#E3E9FD;}
.d2-3413914892 .background-color-B5{background-color:#EDF0FD;}
.d2-3413914892 .background-color-B6{background-color:#F7F8FE;}
.d2-3413914892 .background-color-AA2{background-color:#4A6FF3;}
.d2-3413914892 .background-color-AA4{background-color:#EDF0FD;}
.d2-3413914892 .background-color-AA5{background-color:#F7F8FE;}
.d2-3413914892 .background-color-AB4{background-color:#EDF0FD;}
.d2-3413914892 .background-color-AB5{background-color:#F7F8FE;}
.d2-3413914892 .color-N1{color:#0A0F25;}
.d2-3413914892 .color-N2{color:#676C7E;}
.d2-3413914892 .color-N3{color:#9499AB;}
.d2-3413914892 .color-N4{color:#CFD2DD;}
.d2-3413914892 .color-N5{color:#DEE1EB;}
.d2-3413914892 .color-N6{color:#EEF1F8;}
.d2-3413914892 .color-N7{color:#FFFFFF;}
.d2-3413914892 .color-B1{color:#0D32B2;}
.d2-3413914892 .color-B2{color:#0D32B2;}
.d2-3413914892 .color-B3{color:#E3E9FD;}
.d2-3413914892 .color-B4{color:#E3E9FD;}
.d2-3413914892 .color-B5{color:#EDF0FD;}
.d2-3413914892 .color-B6{color:#F7F8FE;}
.d2-3413914892 .color-AA2{color:#4A6FF3;}
.d2-3413914892 .color-AA4{color:#EDF0FD;}
.d2-3413914892 .color-AA5{color:#F7F8FE;}
.d2-3413914892 .color-AB4{color:#EDF0FD;}
.d2-3413914892 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="28.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.500000 82.000000 L 54.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-3413914892)" /></g></a><g transform="translate(81 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3440_35088111">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
</g><mask id="d2-3413914892" maskUnits="userSpaceOnUse" x="11" y="-6" width="104" height="221">
<rect x="11" y="-6" width="104" height="221" fill="white"></rect>
<rect x="50.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="50.500000" y="170.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
.d2-4163031082 .fill-N1{fill:#0A0F25;}
.d2-4163031082 .fill-N2{fill:#676C7E;}
.d2-4163031082 .fill-N3{fill:#9499AB;}
.d2-4163031082 .fill-N4{fill:#CFD2DD;}
.d2-4163031082 .fill-N5{fill:#DEE1EB;}
.d2-4163031082 .fill-N6{fill:#EEF1F8;}
.d2-4163031082 .fill-N7{fill:#FFFFFF;}
.d2-4163031082 .fill-B1{fill:#0D32B2;}
.d2-4163031082 .fill-B2{fill:#0D32B2;}
.d2-4163031082 .fill-B3{fill:#E3E9FD;}
.d2-4163031082 .fill-B4{fill:#E3E9FD;}
.d2-4163031082 .fill-B5{fill:#EDF0FD;}
.d2-4163031082 .fill-B6{fill:#F7F8FE;}
.d2-4163031082 .fill-AA2{fill:#4A6FF3;}
.d2-4163031082 .fill-AA4{fill:#EDF0FD;}
.d2-4163031082 .fill-AA5{fill:#F7F8FE;}
.d2-4163031082 .fill-AB4{fill:#EDF0FD;}
.d2-4163031082 .fill-AB5{fill:#F7F8FE;}
.d2-4163031082 .stroke-N1{stroke:#0A0F25;}
.d2-4163031082 .stroke-N2{stroke:#676C7E;}
.d2-4163031082 .stroke-N3{stroke:#9499AB;}
.d2-4163031082 .stroke-N4{stroke:#CFD2DD;}
.d2-4163031082 .stroke-N5{stroke:#DEE1EB;}
.d2-4163031082 .stroke-N6{stroke:#EEF1F8;}
.d2-4163031082 .stroke-N7{stroke:#FFFFFF;}
.d2-4163031082 .stroke-B1{stroke:#0D32B2;}
.d2-4163031082 .stroke-B2{stroke:#0D32B2;}
.d2-4163031082 .stroke-B3{stroke:#E3E9FD;}
.d2-4163031082 .stroke-B4{stroke:#E3E9FD;}
.d2-4163031082 .stroke-B5{stroke:#EDF0FD;}
.d2-4163031082 .stroke-B6{stroke:#F7F8FE;}
.d2-4163031082 .stroke-AA2{stroke:#4A6FF3;}
.d2-4163031082 .stroke-AA4{stroke:#EDF0FD;}
.d2-4163031082 .stroke-AA5{stroke:#F7F8FE;}
.d2-4163031082 .stroke-AB4{stroke:#EDF0FD;}
.d2-4163031082 .stroke-AB5{stroke:#F7F8FE;}
.d2-4163031082 .background-color-N1{background-color:#0A0F25;}
.d2-4163031082 .background-color-N2{background-color:#676C7E;}
.d2-4163031082 .background-color-N3{background-color:#9499AB;}
.d2-4163031082 .background-color-N4{background-color:#CFD2DD;}
.d2-4163031082 .background-color-N5{background-color:#DEE1EB;}
.d2-4163031082 .background-color-N6{background-color:#EEF1F8;}
.d2-4163031082 .background-color-N7{background-color:#FFFFFF;}
.d2-4163031082 .background-color-B1{background-color:#0D32B2;}
.d2-4163031082 .background-color-B2{background-color:#0D32B2;}
.d2-4163031082 .background-color-B3{background-color:#E3E9FD;}
.d2-4163031082 .background-color-B4{background-color:#E3E9FD;}
.d2-4163031082 .background-color-B5{background-color:#EDF0FD;}
.d2-4163031082 .background-color-B6{background-color:#F7F8FE;}
.d2-4163031082 .background-color-AA2{background-color:#4A6FF3;}
.d2-4163031082 .background-color-AA4{background-color:#EDF0FD;}
.d2-4163031082 .background-color-AA5{background-color:#F7F8FE;}
.d2-4163031082 .background-color-AB4{background-color:#EDF0FD;}
.d2-4163031082 .background-color-AB5{background-color:#F7F8FE;}
.d2-4163031082 .color-N1{color:#0A0F25;}
.d2-4163031082 .color-N2{color:#676C7E;}
.d2-4163031082 .color-N3{color:#9499AB;}
.d2-4163031082 .color-N4{color:#CFD2DD;}
.d2-4163031082 .color-N5{color:#DEE1EB;}
.d2-4163031082 .color-N6{color:#EEF1F8;}
.d2-4163031082 .color-N7{color:#FFFFFF;}
.d2-4163031082 .color-B1{color:#0D32B2;}
.d2-4163031082 .color-B2{color:#0D32B2;}
.d2-4163031082 .color-B3{color:#E3E9FD;}
.d2-4163031082 .color-B4{color:#E3E9FD;}
.d2-4163031082 .color-B5{color:#EDF0FD;}
.d2-4163031082 .color-B6{color:#F7F8FE;}
.d2-4163031082 .color-AA2{color:#4A6FF3;}
.d2-4163031082 .color-AA4{color:#EDF0FD;}
.d2-4163031082 .color-AA5{color:#F7F8FE;}
.d2-4163031082 .color-AB4{color:#EDF0FD;}
.d2-4163031082 .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><style type="text/css"><![CDATA[@keyframes d2Transition-d2-4163031082-0 {
0%, 0.000000% {
opacity: 0;
}
0.000000%, 49.950000% {
opacity: 1;
}
50.000000%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-4163031082-1 {
0%, 49.950000% {
opacity: 0;
}
50.000000%, 100.000000% {
opacity: 1;
}
}]]></style><g style="animation: d2Transition-d2-4163031082-0 2000ms infinite" class="d2-4163031082" width="133" height="522" viewBox="12 11 133 522"><rect x="12.000000" y="11.000000" width="133.000000" height="522.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="52.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.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="52.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.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="52.000000" y="466.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="504.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 78.500000 82.000000 L 78.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="78.500000" y="164.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 78.500000 307.000000 L 78.500000 462.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="79.000000" y="391.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-4163031082" maskUnits="userSpaceOnUse" x="12" y="11" width="133" height="522">
<rect x="12" y="11" width="133" height="522" fill="white"></rect>
<rect x="74.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="74.500000" y="261.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="74.500000" y="488.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="12.000000" y="148.000000" width="133" height="21" fill="black"></rect>
<rect x="37.000000" y="375.000000" width="84" height="21" fill="black"></rect>
</mask></g><g style="animation: d2Transition-d2-4163031082-1 2000ms infinite" class="d2-4163031082" width="56" height="68" viewBox="11 11 56 68"><rect x="11.000000" y="11.000000" width="56.000000" height="68.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="d"><g class="shape" ><rect x="12.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="39.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><mask id="d2-1212497398" maskUnits="userSpaceOnUse" x="11" y="11" width="56" height="68">
<rect x="11" y="11" width="56" height="68" fill="white"></rect>
<rect x="34.500000" y="34.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

14
e2etests/txtar.txt
View file

@ -675,11 +675,17 @@ formula: {
-- link-on-connections --
a: {
link: https://twitter.com
a <-> b: {
link: https://google.com/
}
a <-> b: {
link: https://google.com
b -> c: {
link: layers.d
}
layers: {
d: {
d
}
}
>>>>>>> a468259f1 (html links are working on connections)