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

more accurate

Browse source
This commit is contained in:
Alexander Wang 2023-02-13 11:23:54 -08:00
parent 288bab743f
commit aa1f123f71
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
13 changed files with 200 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
d2layouts/d2dagrelayout/layout.go
View file

@ -109,17 +109,20 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
maxContainerLabelHeight := 0 maxContainerLabelHeight := 0
for _, obj := range g.Objects { for _, obj := range g.Objects {
if len(obj.ChildrenArray) == 0 { if len(obj.ChildrenArray) == 0 || obj.Parent == g.Root {
continue continue
} }
if obj.LabelHeight != nil { if obj.LabelHeight != nil {
maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, *obj.LabelHeight+label.PADDING) maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, *obj.LabelHeight+label.PADDING)
} }
if obj.Attributes.Icon != nil { if obj.Attributes.Icon != nil && obj.Attributes.Shape.Value != d2target.ShapeImage {
iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft)) contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(obj.Width), float64(obj.Height))
shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
s := shape.NewShape(shapeType, contentBox)
iconSize := d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft))
// Since dagre container labels are pushed up, we don't want a child container to collide // Since dagre container labels are pushed up, we don't want a child container to collide
maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, (iconSize+label.PADDING*2)*3) maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, (iconSize+label.PADDING*2)*2)
} }
} }
@ -226,7 +229,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
} }
if obj.Attributes.Icon != nil { if obj.Attributes.Icon != nil {
if len(obj.ChildrenArray) > 0 { if len(obj.ChildrenArray) > 0 {
obj.IconPosition = go2.Pointer(string(label.InsideTopLeft)) obj.IconPosition = go2.Pointer(string(label.OutsideTopLeft))
obj.LabelPosition = go2.Pointer(string(label.OutsideTopRight))
} else { } else {
obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter)) obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
} }

9
d2layouts/d2elklayout/layout.go
View file

@ -186,7 +186,6 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
} }
if len(obj.ChildrenArray) > 0 { if len(obj.ChildrenArray) > 0 {
n.LayoutOptions = &elkOpts{ n.LayoutOptions = &elkOpts{
ForceNodeModelOrder: true, ForceNodeModelOrder: true,
Thoroughness: 8, Thoroughness: 8,
@ -207,8 +206,11 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
if obj.LabelHeight != nil { if obj.LabelHeight != nil {
paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING) paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING)
} }
if obj.Attributes.Icon != nil { if obj.Attributes.Icon != nil && obj.Attributes.Shape.Value != d2target.ShapeImage {
iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft)) contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(n.Width), float64(n.Height))
shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
s := shape.NewShape(shapeType, contentBox)
iconSize := d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft))
paddingTop = go2.Max(paddingTop, iconSize+label.PADDING*2) paddingTop = go2.Max(paddingTop, iconSize+label.PADDING*2)
} }
n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]", n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
@ -328,6 +330,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
if obj.Attributes.Icon != nil { if obj.Attributes.Icon != nil {
if len(obj.ChildrenArray) > 0 { if len(obj.ChildrenArray) > 0 {
obj.IconPosition = go2.Pointer(string(label.InsideTopLeft)) obj.IconPosition = go2.Pointer(string(label.InsideTopLeft))
obj.LabelPosition = go2.Pointer(string(label.InsideTopRight))
} else { } else {
obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter)) obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
} }

3
e2etests/stable_test.go
View file

@ -920,6 +920,9 @@ a -> b
font-color: purple font-color: purple
fill: "#e1d5e7" fill: "#e1d5e7"
} }
ec2: EC2 Instance {
icon: https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg
}
} }
} }
} }

18
e2etests/testdata/stable/font_sizes_containers_large/dagre/board.exp.json generated vendored
View file

@ -7,10 +7,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 0, "x": 0,
"y": 65 "y": 50
}, },
"width": 264, "width": 264,
"height": 511, "height": 406,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -48,10 +48,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 20, "x": 20,
"y": 162 "y": 125
}, },
"width": 224, "width": 224,
"height": 381, "height": 306,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -89,10 +89,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 40, "x": 40,
"y": 241 "y": 196
}, },
"width": 184, "width": 184,
"height": 270, "height": 210,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -130,10 +130,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 60, "x": 60,
"y": 309 "y": 249
}, },
"width": 144, "width": 144,
"height": 160, "height": 130,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -171,7 +171,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 100, "x": 100,
"y": 361 "y": 286
}, },
"width": 64, "width": 64,
"height": 56, "height": 56,

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

@ -3,7 +3,7 @@
id="d2-svg" id="d2-svg"
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="652" height="843" viewBox="-194 -165 652 843"><style type="text/css"> width="652" height="738" viewBox="-194 -180 652 738"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="652" height="843" viewBox="-194 -165 652 843"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="ninety nine"><g class="shape" ><rect x="0" y="65" width="264" height="511" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="34.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="20" y="162" width="224" height="381" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="140.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="40" y="241" width="184" height="270" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="227.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="60" y="309" width="144" height="160" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.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="100" y="361" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="132.000000" y="391.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="3962632556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="652" height="843"> ]]></script><g id="ninety nine"><g class="shape" ><rect x="0" y="50" width="264" height="406" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="19.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="20" y="125" width="224" height="306" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="103.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="40" y="196" width="184" height="210" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="182.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="60" y="249" width="144" height="130" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="132.000000" y="239.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="100" y="286" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="132.000000" y="316.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="996081032" maskUnits="userSpaceOnUse" x="-100" y="-100" width="652" height="738">
<rect x="-100" y="-100" width="652" height="843" fill="white"></rect> <rect x="-100" y="-100" width="652" height="738" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 649 KiB

After

Width:  |  Height:  |  Size: 649 KiB

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

@ -9,8 +9,8 @@
"x": 0, "x": 0,
"y": 41 "y": 41
}, },
"width": 315, "width": 320,
"height": 503, "height": 443,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -35,7 +35,7 @@
"Fragment": "", "Fragment": "",
"RawFragment": "" "RawFragment": ""
}, },
"iconPosition": "INSIDE_TOP_LEFT", "iconPosition": "OUTSIDE_TOP_LEFT",
"blend": false, "blend": false,
"fields": null, "fields": null,
"methods": null, "methods": null,
@ -50,7 +50,7 @@
"underline": false, "underline": false,
"labelWidth": 206, "labelWidth": 206,
"labelHeight": 36, "labelHeight": 36,
"labelPosition": "OUTSIDE_TOP_CENTER", "labelPosition": "OUTSIDE_TOP_RIGHT",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
@ -59,10 +59,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 20, "x": 20,
"y": 163 "y": 117
}, },
"width": 275, "width": 280,
"height": 295, "height": 326,
"opacity": 1, "opacity": 1,
"strokeDash": 3, "strokeDash": 3,
"strokeWidth": 2, "strokeWidth": 2,
@ -99,11 +99,11 @@
"id": "vpc.az.firewall", "id": "vpc.az.firewall",
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 60, "x": 40,
"y": 251 "y": 191
}, },
"width": 195, "width": 240,
"height": 118, "height": 209,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -128,24 +128,76 @@
"Fragment": "", "Fragment": "",
"RawFragment": "" "RawFragment": ""
}, },
"iconPosition": "INSIDE_MIDDLE_CENTER", "iconPosition": "OUTSIDE_TOP_LEFT",
"blend": false, "blend": false,
"fields": null, "fields": null,
"methods": null, "methods": null,
"columns": null, "columns": null,
"label": "Firewall Subnet A", "label": "Firewall Subnet A",
"fontSize": 16, "fontSize": 20,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
"language": "", "language": "",
"color": "purple", "color": "purple",
"italic": false, "italic": false,
"bold": false,
"underline": false,
"labelWidth": 145,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_RIGHT",
"zIndex": 0,
"level": 3
},
{
"id": "vpc.az.firewall.ec2",
"type": "rectangle",
"pos": {
"x": 80,
"y": 237
},
"width": 160,
"height": 118,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Compute/_Instance/Amazon-EC2_C4-Instance_light-bg.svg",
"RawPath": "/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "EC2 Instance",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true, "bold": true,
"underline": false, "underline": false,
"labelWidth": 124, "labelWidth": 89,
"labelHeight": 21, "labelHeight": 21,
"labelPosition": "INSIDE_TOP_CENTER", "labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 3 "level": 4
} }
], ],
"connections": [] "connections": []

6
e2etests/testdata/stable/icon-containers/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg" id="d2-svg"
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="519" height="746" viewBox="-102 -100 519 746"><style type="text/css"> width="524" height="686" viewBox="-102 -100 524 686"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="519" height="746" viewBox="-102 -100 519 746"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="vpc"><g class="shape" ><rect x="0" y="41" width="315" height="503" style="fill:white;stroke:green;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="5.000000" y="46.000000" width="64" height="64" /><text class="text" x="157.500000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:green">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="20" y="163" width="275" height="295" style="fill:white;stroke:blue;stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text class="text" x="157.500000" y="151.000000" style="text-anchor:middle;font-size:24px;fill:blue">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="60" y="251" width="195" height="118" style="fill:#e1d5e7;stroke:purple;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="128.000000" y="280.500000" width="59" height="59" /><text class="text-bold" x="157.500000" y="272.000000" style="text-anchor:middle;font-size:16px;fill:purple">Firewall Subnet A</text></g><mask id="2058375010" maskUnits="userSpaceOnUse" x="-100" y="-100" width="519" height="746"> ]]></script><g id="vpc"><g class="shape" ><rect x="0" y="41" width="320" height="443" style="fill:white;stroke:green;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="-5.000000" y="-28.000000" width="64" height="64" /><text class="text" x="212.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:green">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="20" y="117" width="280" height="326" style="fill:white;stroke:blue;stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text class="text" x="160.000000" y="105.000000" style="text-anchor:middle;font-size:24px;fill:blue">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="40" y="191" width="240" height="209" style="fill:#e1d5e7;stroke:purple;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="35.000000" y="122.000000" width="64" height="64" /><text class="text" x="202.500000" y="180.000000" style="text-anchor:middle;font-size:20px;fill:purple">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="80" y="237" width="160" height="118" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="130.500000" y="266.500000" width="59" height="59" /><text class="text-bold" x="160.000000" y="258.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">EC2 Instance</text></g><mask id="664029768" maskUnits="userSpaceOnUse" x="-100" y="-100" width="524" height="686">
<rect x="-100" y="-100" width="519" height="746" fill="white"></rect> <rect x="-100" y="-100" width="524" height="686" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 649 KiB

After

Width:  |  Height:  |  Size: 649 KiB

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

@ -9,8 +9,8 @@
"x": 12, "x": 12,
"y": 12 "y": 12
}, },
"width": 395, "width": 460,
"height": 339, "height": 466,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -50,7 +50,7 @@
"underline": false, "underline": false,
"labelWidth": 206, "labelWidth": 206,
"labelHeight": 36, "labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER", "labelPosition": "INSIDE_TOP_RIGHT",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
@ -59,10 +59,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 62, "x": 62,
"y": 83 "y": 86
}, },
"width": 295, "width": 360,
"height": 218, "height": 342,
"opacity": 1, "opacity": 1,
"strokeDash": 3, "strokeDash": 3,
"strokeWidth": 2, "strokeWidth": 2,
@ -100,10 +100,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 112, "x": 112,
"y": 133 "y": 136
}, },
"width": 195, "width": 260,
"height": 118, "height": 242,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -128,24 +128,76 @@
"Fragment": "", "Fragment": "",
"RawFragment": "" "RawFragment": ""
}, },
"iconPosition": "INSIDE_MIDDLE_CENTER", "iconPosition": "INSIDE_TOP_LEFT",
"blend": false, "blend": false,
"fields": null, "fields": null,
"methods": null, "methods": null,
"columns": null, "columns": null,
"label": "Firewall Subnet A", "label": "Firewall Subnet A",
"fontSize": 16, "fontSize": 20,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
"language": "", "language": "",
"color": "purple", "color": "purple",
"italic": false, "italic": false,
"bold": false,
"underline": false,
"labelWidth": 145,
"labelHeight": 26,
"labelPosition": "INSIDE_TOP_RIGHT",
"zIndex": 0,
"level": 3
},
{
"id": "vpc.az.firewall.ec2",
"type": "rectangle",
"pos": {
"x": 162,
"y": 210
},
"width": 160,
"height": 118,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/aws/Compute/_Instance/Amazon-EC2_C4-Instance_light-bg.svg",
"RawPath": "/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "EC2 Instance",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true, "bold": true,
"underline": false, "underline": false,
"labelWidth": 124, "labelWidth": 89,
"labelHeight": 21, "labelHeight": 21,
"labelPosition": "INSIDE_TOP_CENTER", "labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 3 "level": 4
} }
], ],
"connections": [] "connections": []

6
e2etests/testdata/stable/icon-containers/elk/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg" id="d2-svg"
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="599" height="543" viewBox="-90 -90 599 543"><style type="text/css"> width="664" height="670" viewBox="-90 -90 664 670"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="599" height="543" viewBox="-90 -90 599 543"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="vpc"><g class="shape" ><rect x="12" y="12" width="395" height="339" style="fill:white;stroke:green;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="17.000000" y="17.000000" width="64" height="64" /><text class="text" x="209.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:green">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="62" y="83" width="295" height="218" style="fill:white;stroke:blue;stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text class="text" x="209.500000" y="112.000000" style="text-anchor:middle;font-size:24px;fill:blue">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="112" y="133" width="195" height="118" style="fill:#e1d5e7;stroke:purple;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="180.000000" y="162.500000" width="59" height="59" /><text class="text-bold" x="209.500000" y="154.000000" style="text-anchor:middle;font-size:16px;fill:purple">Firewall Subnet A</text></g><mask id="3563657041" maskUnits="userSpaceOnUse" x="-100" y="-100" width="599" height="543"> ]]></script><g id="vpc"><g class="shape" ><rect x="12" y="12" width="460" height="466" style="fill:white;stroke:green;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="17.000000" y="17.000000" width="64" height="64" /><text class="text" x="364.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:green">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="62" y="86" width="360" height="342" style="fill:white;stroke:blue;stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text class="text" x="242.000000" y="115.000000" style="text-anchor:middle;font-size:24px;fill:blue">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="112" y="136" width="260" height="242" style="fill:#e1d5e7;stroke:purple;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="117.000000" y="141.000000" width="64" height="64" /><text class="text" x="294.500000" y="161.000000" style="text-anchor:middle;font-size:20px;fill:purple">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="162" y="210" width="160" height="118" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="212.500000" y="239.500000" width="59" height="59" /><text class="text-bold" x="242.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">EC2 Instance</text></g><mask id="584875990" maskUnits="userSpaceOnUse" x="-100" y="-100" width="664" height="670">
<rect x="-100" y="-100" width="599" height="543" fill="white"></rect> <rect x="-100" y="-100" width="664" height="670" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 649 KiB

After

Width:  |  Height:  |  Size: 649 KiB

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

@ -10,7 +10,7 @@
"y": 43 "y": 43
}, },
"width": 173, "width": 173,
"height": 1031, "height": 555,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -35,7 +35,7 @@
"Fragment": "", "Fragment": "",
"RawFragment": "" "RawFragment": ""
}, },
"iconPosition": "INSIDE_TOP_LEFT", "iconPosition": "OUTSIDE_TOP_LEFT",
"blend": false, "blend": false,
"fields": null, "fields": null,
"methods": null, "methods": null,
@ -50,7 +50,7 @@
"underline": false, "underline": false,
"labelWidth": 96, "labelWidth": 96,
"labelHeight": 38, "labelHeight": 38,
"labelPosition": "OUTSIDE_TOP_CENTER", "labelPosition": "OUTSIDE_TOP_RIGHT",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
@ -59,10 +59,10 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 20, "x": 20,
"y": 167 "y": 107
}, },
"width": 133, "width": 133,
"height": 249, "height": 130,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -100,7 +100,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 60, "x": 60,
"y": 635 "y": 337
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -141,7 +141,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 60, "x": 60,
"y": 920 "y": 503
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -182,7 +182,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 60, "x": 60,
"y": 258 "y": 139
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -247,19 +247,19 @@
"route": [ "route": [
{ {
"x": 86.5, "x": 86.5,
"y": 453 "y": 237.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 511 "y": 277.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 547.4 "y": 297.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 635 "y": 337.5
} }
], ],
"isCurve": true, "isCurve": true,
@ -295,19 +295,19 @@
"route": [ "route": [
{ {
"x": 86.5, "x": 86.5,
"y": 702 "y": 403.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 788.8 "y": 443.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 832.4 "y": 463.5
}, },
{ {
"x": 86.5, "x": 86.5,
"y": 920 "y": 503.5
} }
], ],
"isCurve": true, "isCurve": true,

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

@ -3,7 +3,7 @@
id="d2-svg" id="d2-svg"
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="377" height="1276" viewBox="-102 -100 377 1276"><style type="text/css"> width="377" height="800" viewBox="-102 -100 377 800"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="377" height="1276" viewBox="-102 -100 377 1276"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="a"><g class="shape" ><rect x="0" y="43" width="173" height="1031" 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="167" width="133" height="249" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="86.500000" y="155.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="60" y="635" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="673.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="60" y="920" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="958.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="258" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="296.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 455.000000 C 86.500000 511.000000 86.500000 547.400000 86.500000 631.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#826768335)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 704.000000 C 86.500000 788.800000 86.500000 832.400000 86.500000 916.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#826768335)"/></g><mask id="826768335" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="1276"> ]]></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="-26.000000" width="64" height="64" /><text class="text" x="120.000000" 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(#382481703)"/></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(#382481703)"/></g><mask id="382481703" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="800">
<rect x="-100" y="-100" width="377" height="1276" fill="white"></rect> <rect x="-100" y="-100" width="377" height="800" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {

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 "y": 12
}, },
"width": 253, "width": 253,
"height": 561, "height": 562,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -50,7 +50,7 @@
"underline": false, "underline": false,
"labelWidth": 96, "labelWidth": 96,
"labelHeight": 38, "labelHeight": 38,
"labelPosition": "INSIDE_TOP_CENTER", "labelPosition": "INSIDE_TOP_RIGHT",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
@ -59,7 +59,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 62, "x": 62,
"y": 85 "y": 86
}, },
"width": 153, "width": 153,
"height": 166, "height": 166,
@ -100,7 +100,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 112, "x": 112,
"y": 321 "y": 322
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -141,7 +141,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 112, "x": 112,
"y": 457 "y": 458
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -182,7 +182,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 112, "x": 112,
"y": 135 "y": 136
}, },
"width": 53, "width": 53,
"height": 66, "height": 66,
@ -247,11 +247,11 @@
"route": [ "route": [
{ {
"x": 138.5, "x": 138.5,
"y": 251 "y": 252
}, },
{ {
"x": 138.5, "x": 138.5,
"y": 321 "y": 322
} }
], ],
"animated": false, "animated": false,
@ -286,11 +286,11 @@
"route": [ "route": [
{ {
"x": 138.5, "x": 138.5,
"y": 387 "y": 388
}, },
{ {
"x": 138.5, "x": 138.5,
"y": 457 "y": 458
} }
], ],
"animated": false, "animated": false,

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

@ -3,7 +3,7 @@
id="d2-svg" id="d2-svg"
style="background: white;" style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="457" height="765" viewBox="-90 -90 457 765"><style type="text/css"> width="457" height="766" viewBox="-90 -90 457 766"><style type="text/css">
<![CDATA[ <![CDATA[
.shape { .shape {
shape-rendering: geometricPrecision; shape-rendering: geometricPrecision;
@ -39,8 +39,8 @@ width="457" height="765" viewBox="-90 -90 457 765"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="561" 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="85" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="114.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="321" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="359.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="457" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="495.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="135" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="173.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 253.000000 L 138.500000 317.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3229046937)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 389.000000 L 138.500000 453.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3229046937)"/></g><mask id="3229046937" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="765"> ]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="562" 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="212.000000" 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="86" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="115.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="322" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="360.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="458" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="496.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="136" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="174.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 254.000000 L 138.500000 318.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#603358579)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 390.000000 L 138.500000 454.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#603358579)"/></g><mask id="603358579" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="766">
<rect x="-100" y="-100" width="457" height="765" fill="white"></rect> <rect x="-100" y="-100" width="457" height="766" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.text { .text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 KiB

After

Width:  |  Height:  |  Size: 650 KiB