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

html links are working on connections

Browse source
This commit is contained in:
Daniel Suh 2024-05-28 18:12:45 -04:00 committed by Alexander Wang
parent d826be0d85
commit 2ccd211cc8
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
8 changed files with 604 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
d2exporter/export.go
View file

@ -354,6 +354,10 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
if edge.Style.Font != nil {
connection.FontFamily = edge.Style.Font.Value
}
if edge.Link != nil {
connection.Link = edge.Link.Value
connection.PrettyLink = toPrettyLink(edge.Dst.Graph, edge.Link.Value)
}
connection.Label = text.Text
connection.LabelWidth = text.Dimensions.Width
connection.LabelHeight = text.Dimensions.Height

8
d2renderers/d2svg/d2svg.go
View file

@ -502,6 +502,13 @@ 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, " "))
@ -649,6 +656,7 @@ 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,6 +599,9 @@ type Connection struct {
LabelPosition string `json:"labelPosition"`
LabelPercentage float64 `json:"labelPercentage"`
Link string `json:"link"`
PrettyLink string `json:"prettyLink,omitempty"`
Route []*geo.Point `json:"route"`
IsCurve bool `json:"isCurve,omitempty"`

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

@ -0,0 +1,181 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 85,
"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": "https://twitter.com",
"prettyLink": "https://twitter.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "a",
"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
},
{
"id": "b",
"type": "rectangle",
"pos": {
"x": 16,
"y": 166
},
"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": "b",
"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": [
{
"id": "(a <-> b)[0]",
"src": "a",
"srcArrow": "triangle",
"dst": "b",
"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": "https://google.com",
"prettyLink": "https://google.com",
"route": [
{
"x": 42.5,
"y": 66
},
{
"x": 42.5,
"y": 106
},
{
"x": 42.5,
"y": 126
},
{
"x": 42.5,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

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

@ -0,0 +1,111 @@
<?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-376000024" 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));
}
.d2-376000024 .text-bold {
font-family: "d2-376000024-font-bold";
}
@font-face {
font-family: d2-376000024-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-376000024 .fill-N1{fill:#0A0F25;}
.d2-376000024 .fill-N2{fill:#676C7E;}
.d2-376000024 .fill-N3{fill:#9499AB;}
.d2-376000024 .fill-N4{fill:#CFD2DD;}
.d2-376000024 .fill-N5{fill:#DEE1EB;}
.d2-376000024 .fill-N6{fill:#EEF1F8;}
.d2-376000024 .fill-N7{fill:#FFFFFF;}
.d2-376000024 .fill-B1{fill:#0D32B2;}
.d2-376000024 .fill-B2{fill:#0D32B2;}
.d2-376000024 .fill-B3{fill:#E3E9FD;}
.d2-376000024 .fill-B4{fill:#E3E9FD;}
.d2-376000024 .fill-B5{fill:#EDF0FD;}
.d2-376000024 .fill-B6{fill:#F7F8FE;}
.d2-376000024 .fill-AA2{fill:#4A6FF3;}
.d2-376000024 .fill-AA4{fill:#EDF0FD;}
.d2-376000024 .fill-AA5{fill:#F7F8FE;}
.d2-376000024 .fill-AB4{fill:#EDF0FD;}
.d2-376000024 .fill-AB5{fill:#F7F8FE;}
.d2-376000024 .stroke-N1{stroke:#0A0F25;}
.d2-376000024 .stroke-N2{stroke:#676C7E;}
.d2-376000024 .stroke-N3{stroke:#9499AB;}
.d2-376000024 .stroke-N4{stroke:#CFD2DD;}
.d2-376000024 .stroke-N5{stroke:#DEE1EB;}
.d2-376000024 .stroke-N6{stroke:#EEF1F8;}
.d2-376000024 .stroke-N7{stroke:#FFFFFF;}
.d2-376000024 .stroke-B1{stroke:#0D32B2;}
.d2-376000024 .stroke-B2{stroke:#0D32B2;}
.d2-376000024 .stroke-B3{stroke:#E3E9FD;}
.d2-376000024 .stroke-B4{stroke:#E3E9FD;}
.d2-376000024 .stroke-B5{stroke:#EDF0FD;}
.d2-376000024 .stroke-B6{stroke:#F7F8FE;}
.d2-376000024 .stroke-AA2{stroke:#4A6FF3;}
.d2-376000024 .stroke-AA4{stroke:#EDF0FD;}
.d2-376000024 .stroke-AA5{stroke:#F7F8FE;}
.d2-376000024 .stroke-AB4{stroke:#EDF0FD;}
.d2-376000024 .stroke-AB5{stroke:#F7F8FE;}
.d2-376000024 .background-color-N1{background-color:#0A0F25;}
.d2-376000024 .background-color-N2{background-color:#676C7E;}
.d2-376000024 .background-color-N3{background-color:#9499AB;}
.d2-376000024 .background-color-N4{background-color:#CFD2DD;}
.d2-376000024 .background-color-N5{background-color:#DEE1EB;}
.d2-376000024 .background-color-N6{background-color:#EEF1F8;}
.d2-376000024 .background-color-N7{background-color:#FFFFFF;}
.d2-376000024 .background-color-B1{background-color:#0D32B2;}
.d2-376000024 .background-color-B2{background-color:#0D32B2;}
.d2-376000024 .background-color-B3{background-color:#E3E9FD;}
.d2-376000024 .background-color-B4{background-color:#E3E9FD;}
.d2-376000024 .background-color-B5{background-color:#EDF0FD;}
.d2-376000024 .background-color-B6{background-color:#F7F8FE;}
.d2-376000024 .background-color-AA2{background-color:#4A6FF3;}
.d2-376000024 .background-color-AA4{background-color:#EDF0FD;}
.d2-376000024 .background-color-AA5{background-color:#F7F8FE;}
.d2-376000024 .background-color-AB4{background-color:#EDF0FD;}
.d2-376000024 .background-color-AB5{background-color:#F7F8FE;}
.d2-376000024 .color-N1{color:#0A0F25;}
.d2-376000024 .color-N2{color:#676C7E;}
.d2-376000024 .color-N3{color:#9499AB;}
.d2-376000024 .color-N4{color:#CFD2DD;}
.d2-376000024 .color-N5{color:#DEE1EB;}
.d2-376000024 .color-N6{color:#EEF1F8;}
.d2-376000024 .color-N7{color:#FFFFFF;}
.d2-376000024 .color-B1{color:#0D32B2;}
.d2-376000024 .color-B2{color:#0D32B2;}
.d2-376000024 .color-B3{color:#E3E9FD;}
.d2-376000024 .color-B4{color:#E3E9FD;}
.d2-376000024 .color-B5{color:#EDF0FD;}
.d2-376000024 .color-B6{color:#F7F8FE;}
.d2-376000024 .color-AA2{color:#4A6FF3;}
.d2-376000024 .color-AA4{color:#EDF0FD;}
.d2-376000024 .color-AA5{color:#F7F8FE;}
.d2-376000024 .color-AB4{color:#EDF0FD;}
.d2-376000024 .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-376000024)" /></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-376000024" 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>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

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

@ -0,0 +1,172 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 85,
"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": "https://twitter.com",
"prettyLink": "https://twitter.com",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "a",
"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
},
{
"id": "b",
"type": "rectangle",
"pos": {
"x": 28,
"y": 148
},
"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": "b",
"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": [
{
"id": "(a <-> b)[0]",
"src": "a",
"srcArrow": "triangle",
"dst": "b",
"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": "https://google.com",
"prettyLink": "https://google.com",
"route": [
{
"x": 54.5,
"y": 78
},
{
"x": 54.5,
"y": 148
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

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

@ -0,0 +1,111 @@
<?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-2160393269" 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));
}
.d2-2160393269 .text-bold {
font-family: "d2-2160393269-font-bold";
}
@font-face {
font-family: d2-2160393269-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-2160393269 .fill-N1{fill:#0A0F25;}
.d2-2160393269 .fill-N2{fill:#676C7E;}
.d2-2160393269 .fill-N3{fill:#9499AB;}
.d2-2160393269 .fill-N4{fill:#CFD2DD;}
.d2-2160393269 .fill-N5{fill:#DEE1EB;}
.d2-2160393269 .fill-N6{fill:#EEF1F8;}
.d2-2160393269 .fill-N7{fill:#FFFFFF;}
.d2-2160393269 .fill-B1{fill:#0D32B2;}
.d2-2160393269 .fill-B2{fill:#0D32B2;}
.d2-2160393269 .fill-B3{fill:#E3E9FD;}
.d2-2160393269 .fill-B4{fill:#E3E9FD;}
.d2-2160393269 .fill-B5{fill:#EDF0FD;}
.d2-2160393269 .fill-B6{fill:#F7F8FE;}
.d2-2160393269 .fill-AA2{fill:#4A6FF3;}
.d2-2160393269 .fill-AA4{fill:#EDF0FD;}
.d2-2160393269 .fill-AA5{fill:#F7F8FE;}
.d2-2160393269 .fill-AB4{fill:#EDF0FD;}
.d2-2160393269 .fill-AB5{fill:#F7F8FE;}
.d2-2160393269 .stroke-N1{stroke:#0A0F25;}
.d2-2160393269 .stroke-N2{stroke:#676C7E;}
.d2-2160393269 .stroke-N3{stroke:#9499AB;}
.d2-2160393269 .stroke-N4{stroke:#CFD2DD;}
.d2-2160393269 .stroke-N5{stroke:#DEE1EB;}
.d2-2160393269 .stroke-N6{stroke:#EEF1F8;}
.d2-2160393269 .stroke-N7{stroke:#FFFFFF;}
.d2-2160393269 .stroke-B1{stroke:#0D32B2;}
.d2-2160393269 .stroke-B2{stroke:#0D32B2;}
.d2-2160393269 .stroke-B3{stroke:#E3E9FD;}
.d2-2160393269 .stroke-B4{stroke:#E3E9FD;}
.d2-2160393269 .stroke-B5{stroke:#EDF0FD;}
.d2-2160393269 .stroke-B6{stroke:#F7F8FE;}
.d2-2160393269 .stroke-AA2{stroke:#4A6FF3;}
.d2-2160393269 .stroke-AA4{stroke:#EDF0FD;}
.d2-2160393269 .stroke-AA5{stroke:#F7F8FE;}
.d2-2160393269 .stroke-AB4{stroke:#EDF0FD;}
.d2-2160393269 .stroke-AB5{stroke:#F7F8FE;}
.d2-2160393269 .background-color-N1{background-color:#0A0F25;}
.d2-2160393269 .background-color-N2{background-color:#676C7E;}
.d2-2160393269 .background-color-N3{background-color:#9499AB;}
.d2-2160393269 .background-color-N4{background-color:#CFD2DD;}
.d2-2160393269 .background-color-N5{background-color:#DEE1EB;}
.d2-2160393269 .background-color-N6{background-color:#EEF1F8;}
.d2-2160393269 .background-color-N7{background-color:#FFFFFF;}
.d2-2160393269 .background-color-B1{background-color:#0D32B2;}
.d2-2160393269 .background-color-B2{background-color:#0D32B2;}
.d2-2160393269 .background-color-B3{background-color:#E3E9FD;}
.d2-2160393269 .background-color-B4{background-color:#E3E9FD;}
.d2-2160393269 .background-color-B5{background-color:#EDF0FD;}
.d2-2160393269 .background-color-B6{background-color:#F7F8FE;}
.d2-2160393269 .background-color-AA2{background-color:#4A6FF3;}
.d2-2160393269 .background-color-AA4{background-color:#EDF0FD;}
.d2-2160393269 .background-color-AA5{background-color:#F7F8FE;}
.d2-2160393269 .background-color-AB4{background-color:#EDF0FD;}
.d2-2160393269 .background-color-AB5{background-color:#F7F8FE;}
.d2-2160393269 .color-N1{color:#0A0F25;}
.d2-2160393269 .color-N2{color:#676C7E;}
.d2-2160393269 .color-N3{color:#9499AB;}
.d2-2160393269 .color-N4{color:#CFD2DD;}
.d2-2160393269 .color-N5{color:#DEE1EB;}
.d2-2160393269 .color-N6{color:#EEF1F8;}
.d2-2160393269 .color-N7{color:#FFFFFF;}
.d2-2160393269 .color-B1{color:#0D32B2;}
.d2-2160393269 .color-B2{color:#0D32B2;}
.d2-2160393269 .color-B3{color:#E3E9FD;}
.d2-2160393269 .color-B4{color:#E3E9FD;}
.d2-2160393269 .color-B5{color:#EDF0FD;}
.d2-2160393269 .color-B6{color:#F7F8FE;}
.d2-2160393269 .color-AA2{color:#4A6FF3;}
.d2-2160393269 .color-AA4{color:#EDF0FD;}
.d2-2160393269 .color-AA5{color:#F7F8FE;}
.d2-2160393269 .color-AB4{color:#EDF0FD;}
.d2-2160393269 .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-2160393269)" /></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-2160393269" 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>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

14
e2etests/txtar.txt
View file

@ -455,6 +455,7 @@ bob -> alice: The ability to play bridge or\ngolf as if they were games.
◎: |md
◎ foo bar
|
<<<<<<< HEAD
-- gradient --
style.fill: "radial-gradient(circle, white 0%, #8A2BE2 60%, #4B0082 100%)"
@ -669,3 +670,16 @@ formula: {
\end{equation}
|
}
||||||| parent of a468259f1 (html links are working on connections)
=======
-- link-on-connections --
a: {
link: https://twitter.com
}
a <-> b: {
link: https://google.com
}
>>>>>>> a468259f1 (html links are working on connections)