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

icons in top left of containers

Browse source
This commit is contained in:
Alexander Wang 2023-02-13 10:42:47 -08:00
parent 5b90fbc66c
commit e37fc89bb1
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
15 changed files with 505 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
d2layouts/d2dagrelayout/layout.go
View file

@ -115,6 +115,11 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
if obj.LabelHeight != nil {
maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, *obj.LabelHeight+label.PADDING)
}
if obj.Attributes.Icon != nil {
iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft))
maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, iconSize+label.PADDING)
}
}
maxLabelSize := 0
@ -219,9 +224,13 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
}
if obj.Attributes.Icon != nil {
if len(obj.ChildrenArray) > 0 {
obj.IconPosition = go2.Pointer(string(label.InsideTopLeft))
} else {
obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
}
}
}
for i, edge := range g.Edges {
val, err := vm.RunString(fmt.Sprintf("JSON.stringify(g.edge(g.edges()[%d]))", i))

20
d2layouts/d2elklayout/layout.go
View file

@ -186,6 +186,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
if len(obj.ChildrenArray) > 0 {
n.LayoutOptions = &elkOpts{
ForceNodeModelOrder: true,
Thoroughness: 8,
@ -199,6 +200,21 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
Padding: opts.Padding,
},
}
if n.LayoutOptions.Padding == DefaultOpts.Padding {
// Default
paddingTop := 50
if obj.LabelHeight != nil {
paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING)
}
if obj.Attributes.Icon != nil {
iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft))
paddingTop = go2.Max(paddingTop, iconSize+label.PADDING)
}
n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
paddingTop,
)
}
}
if obj.LabelWidth != nil && obj.LabelHeight != nil {
@ -310,8 +326,12 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
}
if obj.Attributes.Icon != nil {
if len(obj.ChildrenArray) > 0 {
obj.IconPosition = go2.Pointer(string(label.InsideTopLeft))
} else {
obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
}
}
byID[obj.AbsID()] = obj
})

2
d2renderers/d2svg/d2svg.go
View file

@ -883,7 +883,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
} else {
box = s.GetInnerBox()
}
iconSize := targetShape.GetIconSize(box)
iconSize := d2target.GetIconSize(box, targetShape.IconPosition)
tl := iconPosition.GetPointOnBox(box, label.PADDING, float64(iconSize), float64(iconSize))

4
d2target/d2target.go
View file

@ -538,8 +538,8 @@ func init() {
}
}
func (s *Shape) GetIconSize(box *geo.Box) int {
iconPosition := label.Position(s.IconPosition)
func GetIconSize(box *geo.Box, position string) int {
iconPosition := label.Position(position)
minDimension := int(math.Min(box.Width, box.Height))
halfMinDimension := int(math.Ceil(0.5 * float64(minDimension)))

25
e2etests/stable_test.go
View file

@ -895,6 +895,31 @@ b: {
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
a -> b
`,
},
{
name: "icon-containers",
script: `vpc: VPC 1 10.1.0.0./16 {
icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg
style: {
stroke: green
font-color: green
}
az: Availability Zone A {
style: {
stroke: blue
font-color: blue
stroke-dash: 3
}
firewall: Firewall Subnet A {
icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg
style: {
stroke: purple
font-color: purple
}
}
}
}
`,
},
{

12
e2etests/testdata/stable/font_sizes_containers_large/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"y": 12
},
"width": 464,
"height": 456,
"height": 572,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -48,10 +48,10 @@
"type": "rectangle",
"pos": {
"x": 62,
"y": 62
"y": 142
},
"width": 364,
"height": 356,
"height": 392,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -89,7 +89,7 @@
"type": "rectangle",
"pos": {
"x": 112,
"y": 112
"y": 228
},
"width": 264,
"height": 256,
@ -130,7 +130,7 @@
"type": "rectangle",
"pos": {
"x": 162,
"y": 162
"y": 278
},
"width": 164,
"height": 156,
@ -171,7 +171,7 @@
"type": "rectangle",
"pos": {
"x": 212,
"y": 212
"y": 328
},
"width": 64,
"height": 56,

6
e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="668" height="660" viewBox="-90 -90 668 660"><style type="text/css">
width="668" height="776" viewBox="-90 -90 668 776"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="668" height="660" viewBox="-90 -90 668 660"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="ninety nine"><g class="shape" ><rect x="12" y="12" width="464" height="456" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62" y="62" width="364" height="356" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="131.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112" y="112" width="264" height="256" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="149.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162" y="162" width="164" height="156" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="183.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212" y="212" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="244.000000" y="242.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="529754507" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="660">
<rect x="-100" y="-100" width="668" height="660" fill="white"></rect>
]]></script><g id="ninety nine"><g class="shape" ><rect x="12" y="12" width="464" height="572" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62" y="142" width="364" height="392" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="211.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112" y="228" width="264" height="256" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="265.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162" y="278" width="164" height="156" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="299.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212" y="328" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="244.000000" y="358.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="3952077561" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="776">
<rect x="-100" y="-100" width="668" height="776" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 649 KiB

After

Width:  |  Height:  |  Size: 649 KiB

152
e2etests/testdata/stable/icon-containers/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,152 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "vpc",
"type": "rectangle",
"pos": {
"x": 0,
"y": 41
},
"width": 315,
"height": 277,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "green",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Networking & Content Delivery/Amazon-VPC.svg",
"RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_TOP_LEFT",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "VPC 1 10.1.0.0./16",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "green",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 206,
"labelHeight": 36,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "vpc.az",
"type": "rectangle",
"pos": {
"x": 20,
"y": 106
},
"width": 275,
"height": 182,
"opacity": 1,
"strokeDash": 3,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "blue",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Availability Zone A",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "blue",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 185,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "vpc.az.firewall",
"type": "rectangle",
"pos": {
"x": 60,
"y": 138
},
"width": 195,
"height": 118,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "purple",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Networking & Content Delivery/Amazon-Route-53_Hosted-Zone_light-bg.svg",
"RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Firewall Subnet A",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "purple",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 124,
"labelHeight": 21,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
}
],
"connections": []
}

59
e2etests/testdata/stable/icon-containers/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: 649 KiB

152
e2etests/testdata/stable/icon-containers/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,152 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "vpc",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 395,
"height": 334,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "green",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Networking & Content Delivery/Amazon-VPC.svg",
"RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_TOP_LEFT",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "VPC 1 10.1.0.0./16",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "green",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 206,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "vpc.az",
"type": "rectangle",
"pos": {
"x": 62,
"y": 78
},
"width": 295,
"height": 218,
"opacity": 1,
"strokeDash": 3,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "blue",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Availability Zone A",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "blue",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 185,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "vpc.az.firewall",
"type": "rectangle",
"pos": {
"x": 112,
"y": 128
},
"width": 195,
"height": 118,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "purple",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Networking & Content Delivery/Amazon-Route-53_Hosted-Zone_light-bg.svg",
"RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Firewall Subnet A",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "purple",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 124,
"labelHeight": 21,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
}
],
"connections": []
}

59
e2etests/testdata/stable/icon-containers/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: 649 KiB

2
e2etests/testdata/todo/container_icon_label/dagre/board.exp.json generated vendored
View file

@ -35,7 +35,7 @@
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"iconPosition": "INSIDE_TOP_LEFT",
"blend": false,
"fields": null,
"methods": null,

2
e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg vendored
View file

@ -39,7 +39,7 @@ width="377" height="800" viewBox="-102 -100 377 800"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="a"><g class="shape" ><rect x="0" y="43" width="173" height="555" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="54.500000" y="288.500000" width="64" height="64" /><text class="text" x="86.500000" y="30.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20" y="107" width="133" height="130" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="86.500000" y="95.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="60" y="337" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="375.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="60" y="503" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="541.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60" y="139" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="177.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#157059367)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#157059367)"/></g><mask id="157059367" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="800">
]]></script><g id="a"><g class="shape" ><rect x="0" y="43" width="173" height="555" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="5.000000" y="48.000000" width="64" height="64" /><text class="text" x="86.500000" y="30.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20" y="107" width="133" height="130" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="86.500000" y="95.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="60" y="337" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="375.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="60" y="503" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="541.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60" y="139" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="177.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3313825229)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3313825229)"/></g><mask id="3313825229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="800">
<rect x="-100" y="-100" width="377" height="800" fill="white"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 KiB

After

Width:  |  Height:  |  Size: 650 KiB

20
e2etests/testdata/todo/container_icon_label/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"y": 12
},
"width": 253,
"height": 538,
"height": 556,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -35,7 +35,7 @@
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"iconPosition": "INSIDE_TOP_LEFT",
"blend": false,
"fields": null,
"methods": null,
@ -59,7 +59,7 @@
"type": "rectangle",
"pos": {
"x": 62,
"y": 62
"y": 80
},
"width": 153,
"height": 166,
@ -100,7 +100,7 @@
"type": "rectangle",
"pos": {
"x": 112,
"y": 298
"y": 316
},
"width": 53,
"height": 66,
@ -141,7 +141,7 @@
"type": "rectangle",
"pos": {
"x": 112,
"y": 434
"y": 452
},
"width": 53,
"height": 66,
@ -182,7 +182,7 @@
"type": "rectangle",
"pos": {
"x": 112,
"y": 112
"y": 130
},
"width": 53,
"height": 66,
@ -247,11 +247,11 @@
"route": [
{
"x": 138.5,
"y": 228
"y": 246
},
{
"x": 138.5,
"y": 298
"y": 316
}
],
"animated": false,
@ -286,11 +286,11 @@
"route": [
{
"x": 138.5,
"y": 364
"y": 382
},
{
"x": 138.5,
"y": 434
"y": 452
}
],
"animated": false,

6
e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="457" height="742" viewBox="-90 -90 457 742"><style type="text/css">
width="457" height="760" viewBox="-90 -90 457 760"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="457" height="742" viewBox="-90 -90 457 742"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="538" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="106.500000" y="249.000000" width="64" height="64" /><text class="text" x="138.500000" y="47.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62" y="62" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="298" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="336.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="434" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="472.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112" y="112" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="150.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 138.500000 230.000000 L 138.500000 294.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2269574572)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 366.000000 L 138.500000 430.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2269574572)"/></g><mask id="2269574572" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="742">
<rect x="-100" y="-100" width="457" height="742" fill="white"></rect>
]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="556" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="17.000000" y="17.000000" width="64" height="64" /><text class="text" x="138.500000" y="47.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62" y="80" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="109.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="316" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="354.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="452" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="490.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112" y="130" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="168.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 138.500000 248.000000 L 138.500000 312.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1811009328)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 384.000000 L 138.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1811009328)"/></g><mask id="1811009328" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="760">
<rect x="-100" y="-100" width="457" height="760" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 KiB

After

Width:  |  Height:  |  Size: 650 KiB