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

render all font sizes in range

Browse source
This commit is contained in:
Gavin Nishizawa 2022-11-29 11:27:41 -08:00
parent 8705212a95
commit 53cfa31ee1
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
6 changed files with 257 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
d2graph/d2graph.go
View file

@ -415,6 +415,9 @@ func (obj *Object) Text() *d2target.MText {
if obj.IsContainer() {
fontSize = obj.Level().LabelSize()
}
if obj.Attributes.Style.FontSize != nil {
fontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value)
}
// Class and Table objects have Label set to header
if obj.Class != nil || obj.SQLTable != nil {
fontSize = d2fonts.FONT_SIZE_XL
@ -662,9 +665,13 @@ func (e *Edge) ArrowString() string {
}
func (e *Edge) Text() *d2target.MText {
fontSize := d2fonts.FONT_SIZE_M
if e.Attributes.Style.FontSize != nil {
fontSize, _ = strconv.Atoi(e.Attributes.Style.FontSize.Value)
}
return &d2target.MText{
Text: e.Attributes.Label.Value,
FontSize: d2fonts.FONT_SIZE_M,
FontSize: fontSize,
IsBold: false,
IsItalic: true,

29
d2renderers/textmeasure/textmeasure.go
View file

@ -143,7 +143,34 @@ func NewRuler() (*Ruler, error) {
}
func (t *Ruler) Measure(font d2fonts.Font, s string) (width, height int) {
w, h := t.MeasurePrecise(font, s)
hasSize := false
for _, size := range d2fonts.FontSizes {
if size == font.Size {
hasSize = true
break
}
}
var w, h float64
if hasSize {
w, h = t.MeasurePrecise(font, s)
} else {
// find the closest font size we have and scale the measurement
closestSize := d2fonts.FontSizes[0]
smallestDiff := math.Abs(float64(closestSize - font.Size))
for i := 1; i < len(d2fonts.FontSizes); i++ {
diff := math.Abs(float64(d2fonts.FontSizes[i] - font.Size))
if diff < smallestDiff {
smallestDiff = diff
closestSize = d2fonts.FontSizes[i]
}
}
scaledFont := font
scaledFont.Size = closestSize
w, h = t.MeasurePrecise(scaledFont, s)
f := float64(font.Size) / float64(closestSize)
w *= f
h *= f
}
return int(math.Ceil(w)), int(math.Ceil(h))
}

208
e2etests/testdata/stable/font_sizes/dagre/board.exp.json generated vendored
View file

@ -5,11 +5,11 @@
"id": "size XS",
"type": "",
"pos": {
"x": 1084,
"y": 226
"x": 1293,
"y": 278
},
"width": 154,
"height": 126,
"width": 145,
"height": 122,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -28,26 +28,26 @@
"methods": null,
"columns": null,
"label": "size XS",
"fontSize": 16,
"fontSize": 13,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 54,
"labelHeight": 26,
"labelWidth": 45,
"labelHeight": 22,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size S",
"type": "",
"pos": {
"x": 1,
"y": 0
"x": 4,
"y": 12
},
"width": 145,
"height": 126,
"width": 140,
"height": 123,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -66,15 +66,15 @@
"methods": null,
"columns": null,
"label": "size S",
"fontSize": 16,
"fontSize": 14,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 45,
"labelHeight": 26,
"labelWidth": 40,
"labelHeight": 23,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
@ -82,7 +82,7 @@
"type": "",
"pos": {
"x": 0,
"y": 226
"y": 276
},
"width": 147,
"height": 126,
@ -119,11 +119,11 @@
"id": "size L",
"type": "",
"pos": {
"x": 206,
"y": 0
"x": 204,
"y": 8
},
"width": 144,
"height": 126,
"width": 153,
"height": 131,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -142,26 +142,26 @@
"methods": null,
"columns": null,
"label": "size L",
"fontSize": 16,
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 44,
"labelHeight": 26,
"labelWidth": 53,
"labelHeight": 31,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size XL",
"type": "",
"pos": {
"x": 410,
"y": 0
"x": 417,
"y": 5
},
"width": 153,
"height": 126,
"width": 177,
"height": 136,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -180,26 +180,26 @@
"methods": null,
"columns": null,
"label": "size XL",
"fontSize": 16,
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 53,
"labelHeight": 26,
"labelWidth": 77,
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size XXL",
"type": "",
"pos": {
"x": 623,
"y": 0
"x": 654,
"y": 3
},
"width": 162,
"height": 126,
"width": 204,
"height": 141,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -218,26 +218,26 @@
"methods": null,
"columns": null,
"label": "size XXL",
"fontSize": 16,
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 62,
"labelHeight": 26,
"labelWidth": 104,
"labelHeight": 41,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size XXXL",
"type": "",
"pos": {
"x": 845,
"x": 918,
"y": 0
},
"width": 171,
"height": 126,
"width": 237,
"height": 146,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -256,26 +256,26 @@
"methods": null,
"columns": null,
"label": "size XXXL",
"fontSize": 16,
"fontSize": 32,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 71,
"labelHeight": 26,
"labelWidth": 137,
"labelHeight": 46,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 8",
"type": "",
"pos": {
"x": 1076,
"y": 0
"x": 1297,
"y": 15
},
"width": 169,
"height": 126,
"width": 138,
"height": 116,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -294,26 +294,26 @@
"methods": null,
"columns": null,
"label": "custom 8",
"fontSize": 16,
"fontSize": 8,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 69,
"labelHeight": 26,
"labelWidth": 38,
"labelHeight": 16,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 12",
"type": "",
"pos": {
"x": 1305,
"y": 0
"x": 1495,
"y": 13
},
"width": 178,
"height": 126,
"width": 160,
"height": 121,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -332,26 +332,26 @@
"methods": null,
"columns": null,
"label": "custom 12",
"fontSize": 16,
"fontSize": 12,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 60,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 18",
"type": "",
"pos": {
"x": 1543,
"y": 0
"x": 1715,
"y": 9
},
"width": 178,
"height": 126,
"width": 187,
"height": 128,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -370,26 +370,26 @@
"methods": null,
"columns": null,
"label": "custom 18",
"fontSize": 16,
"fontSize": 18,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 87,
"labelHeight": 28,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 21",
"type": "",
"pos": {
"x": 1781,
"y": 0
"x": 1962,
"y": 7
},
"width": 178,
"height": 126,
"width": 200,
"height": 132,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -408,26 +408,26 @@
"methods": null,
"columns": null,
"label": "custom 21",
"fontSize": 16,
"fontSize": 21,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 100,
"labelHeight": 32,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 64",
"type": "",
"pos": {
"x": 841,
"y": 226
"x": 839,
"y": 246
},
"width": 179,
"height": 126,
"width": 394,
"height": 186,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -446,15 +446,15 @@
"methods": null,
"columns": null,
"label": "custom 64",
"fontSize": 16,
"fontSize": 64,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 79,
"labelHeight": 26,
"labelWidth": 294,
"labelHeight": 86,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
@ -479,26 +479,26 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 42,
"labelHeight": 13,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1160.5,
"y": 126
"x": 1365.5,
"y": 131
},
{
"x": 1160.5,
"y": 166
"x": 1365.5,
"y": 183
},
{
"x": 1160.5,
"y": 186
"x": 1365.5,
"y": 212.4
},
{
"x": 1160.5,
"y": 226
"x": 1365.5,
"y": 278
}
],
"isCurve": true,
@ -526,26 +526,26 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 63,
"labelHeight": 19,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 73.5,
"y": 126
"y": 135.5
},
{
"x": 73.5,
"y": 166
"y": 183.9
},
{
"x": 73.5,
"y": 186
"y": 212
},
{
"x": 73.5,
"y": 226
"y": 276
}
],
"isCurve": true,
@ -573,26 +573,26 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 200,
"labelHeight": 61,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 930.5,
"y": 126
"x": 1036,
"y": 146
},
{
"x": 930.5,
"y": 166
},
{
"x": 930.5,
"x": 1036,
"y": 186
},
{
"x": 930.5,
"y": 226
"x": 1036,
"y": 206
},
{
"x": 1036,
"y": 246
}
],
"isCurve": true,

22
e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="2159" height="552" viewBox="-100 -100 2159 552"><style type="text/css">
width="2362" height="632" viewBox="-100 -100 2362 632"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -14,16 +14,16 @@ width="2159" height="552" viewBox="-100 -100 2159 552"><style type="text/css">
}
]]>
</style><g id="size XS"><g class="shape" ><rect x="1084" y="226" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1161.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="1" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="0" y="226" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="206" y="0" width="144" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="278.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="410" y="0" width="153" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="486.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="623" y="0" width="162" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="704.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="845" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="930.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1076" y="0" width="169" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1160.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1305" y="0" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1394.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1543" y="0" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1632.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1781" y="0" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1870.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="841" y="226" width="179" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="930.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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><mask id="mask-1394600666" maskUnits="userSpaceOnUse" x="1127.000000" y="112.000000" width="67.000000" height="128.000000">
<rect x="1127.000000" y="112.000000" width="67.000000" height="128.000000" fill="white"></rect>
<rect x="1127.000000" y="166.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 1160.500000 128.000000 C 1160.500000 166.000000 1160.500000 186.000000 1160.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-1394600666)" /><text class="text-italic" x="1160.500000" y="176.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><mask id="mask-4025368117" maskUnits="userSpaceOnUse" x="40.000000" y="112.000000" width="67.000000" height="128.000000">
<rect x="40.000000" y="112.000000" width="67.000000" height="128.000000" fill="white"></rect>
<rect x="40.000000" y="166.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 73.500000 128.000000 C 73.500000 166.000000 73.500000 186.000000 73.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-4025368117)" /><text class="text-italic" x="73.500000" y="181.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><mask id="mask-3852064055" maskUnits="userSpaceOnUse" x="897.000000" y="112.000000" width="67.000000" height="128.000000">
<rect x="897.000000" y="112.000000" width="67.000000" height="128.000000" fill="white"></rect>
<rect x="897.000000" y="166.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 930.500000 128.000000 C 930.500000 166.000000 930.500000 186.000000 930.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-3852064055)" /><text class="text-italic" x="930.500000" y="214.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><style type="text/css"><![CDATA[
</style><g id="size XS"><g class="shape" ><rect x="1293" y="278" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1365.500000" y="341.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="4" y="12" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="74.000000" y="76.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="0" y="276" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="204" y="8" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="280.500000" y="78.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="417" y="5" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="505.500000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="654" y="3" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="756.000000" y="81.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="918" y="0" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.500000" y="82.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1297" y="15" width="138" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1366.000000" y="73.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1495" y="13" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1575.000000" y="75.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1715" y="9" width="187" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1808.500000" y="77.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1962" y="7" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2062.000000" y="78.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="839" y="246" width="394" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.000000" y="360.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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><mask id="mask-1394600666" maskUnits="userSpaceOnUse" x="1345.000000" y="117.000000" width="42.000000" height="175.000000">
<rect x="1345.000000" y="117.000000" width="42.000000" height="175.000000" fill="white"></rect>
<rect x="1345.000000" y="198.000000" width="42" height="13" fill="black"></rect>
</mask><path d="M 1365.500000 133.000000 C 1365.500000 183.000000 1365.500000 212.400000 1365.500000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-1394600666)" /><text class="text-italic" x="1366.000000" y="208.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><mask id="mask-4025368117" maskUnits="userSpaceOnUse" x="42.000000" y="121.500000" width="63.000000" height="168.500000">
<rect x="42.000000" y="121.500000" width="63.000000" height="168.500000" fill="white"></rect>
<rect x="42.000000" y="196.000000" width="63" height="19" fill="black"></rect>
</mask><path d="M 73.500000 137.500000 C 73.500000 183.900000 73.500000 212.000000 73.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-4025368117)" /><text class="text-italic" x="73.500000" y="211.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><mask id="mask-3852064055" maskUnits="userSpaceOnUse" x="936.000000" y="132.000000" width="200.000000" height="128.000000">
<rect x="936.000000" y="132.000000" width="200.000000" height="128.000000" fill="white"></rect>
<rect x="936.000000" y="166.000000" width="200" height="61" fill="black"></rect>
</mask><path d="M 1036.000000 148.000000 C 1036.000000 186.000000 1036.000000 206.000000 1036.000000 242.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-3852064055)" /><text class="text-italic" x="1036.000000" y="214.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB

190
e2etests/testdata/stable/font_sizes/elk/board.exp.json generated vendored
View file

@ -5,11 +5,11 @@
"id": "size XS",
"type": "",
"pos": {
"x": 1324,
"y": 359
"x": 1467,
"y": 419
},
"width": 154,
"height": 126,
"width": 145,
"height": 122,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -28,26 +28,26 @@
"methods": null,
"columns": null,
"label": "size XS",
"fontSize": 16,
"fontSize": 13,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 54,
"labelHeight": 26,
"labelWidth": 45,
"labelHeight": 22,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size S",
"type": "",
"pos": {
"x": 1505,
"y": 12
"x": 1635,
"y": 35
},
"width": 145,
"height": 126,
"width": 140,
"height": 123,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -66,23 +66,23 @@
"methods": null,
"columns": null,
"label": "size S",
"fontSize": 16,
"fontSize": 14,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 45,
"labelHeight": 26,
"labelWidth": 40,
"labelHeight": 23,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size M",
"type": "",
"pos": {
"x": 1504,
"y": 359
"x": 1632,
"y": 419
},
"width": 147,
"height": 126,
@ -119,11 +119,11 @@
"id": "size L",
"type": "",
"pos": {
"x": 954,
"y": 12
"x": 1117,
"y": 20
},
"width": 144,
"height": 126,
"width": 153,
"height": 131,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -142,15 +142,15 @@
"methods": null,
"columns": null,
"label": "size L",
"fontSize": 16,
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 44,
"labelHeight": 26,
"labelWidth": 53,
"labelHeight": 31,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
@ -158,10 +158,10 @@
"type": "",
"pos": {
"x": 12,
"y": 12
"y": 17
},
"width": 153,
"height": 126,
"width": 177,
"height": 136,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -180,26 +180,26 @@
"methods": null,
"columns": null,
"label": "size XL",
"fontSize": 16,
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 53,
"labelHeight": 26,
"labelWidth": 77,
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size XXL",
"type": "",
"pos": {
"x": 383,
"y": 12
"x": 429,
"y": 15
},
"width": 162,
"height": 126,
"width": 204,
"height": 141,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -218,26 +218,26 @@
"methods": null,
"columns": null,
"label": "size XXL",
"fontSize": 16,
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 62,
"labelHeight": 26,
"labelWidth": 104,
"labelHeight": 41,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "size XXXL",
"type": "",
"pos": {
"x": 565,
"x": 653,
"y": 12
},
"width": 171,
"height": 126,
"width": 237,
"height": 146,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -256,26 +256,26 @@
"methods": null,
"columns": null,
"label": "size XXXL",
"fontSize": 16,
"fontSize": 32,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 71,
"labelHeight": 26,
"labelWidth": 137,
"labelHeight": 46,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 8",
"type": "",
"pos": {
"x": 1316,
"y": 12
"x": 1470,
"y": 42
},
"width": 169,
"height": 126,
"width": 138,
"height": 116,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -294,26 +294,26 @@
"methods": null,
"columns": null,
"label": "custom 8",
"fontSize": 16,
"fontSize": 8,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 69,
"labelHeight": 26,
"labelWidth": 38,
"labelHeight": 16,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 12",
"type": "",
"pos": {
"x": 1118,
"y": 12
"x": 1290,
"y": 25
},
"width": 178,
"height": 126,
"width": 160,
"height": 121,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -332,26 +332,26 @@
"methods": null,
"columns": null,
"label": "custom 12",
"fontSize": 16,
"fontSize": 12,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 60,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 18",
"type": "",
"pos": {
"x": 756,
"y": 12
"x": 910,
"y": 21
},
"width": 178,
"height": 126,
"width": 187,
"height": 128,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -370,26 +370,26 @@
"methods": null,
"columns": null,
"label": "custom 18",
"fontSize": 16,
"fontSize": 18,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 87,
"labelHeight": 28,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 21",
"type": "",
"pos": {
"x": 185,
"y": 12
"x": 209,
"y": 19
},
"width": 178,
"height": 126,
"width": 200,
"height": 132,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -408,26 +408,26 @@
"methods": null,
"columns": null,
"label": "custom 21",
"fontSize": 16,
"fontSize": 21,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 78,
"labelHeight": 26,
"labelWidth": 100,
"labelHeight": 32,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "custom 64",
"type": "",
"pos": {
"x": 561,
"y": 359
"x": 575,
"y": 419
},
"width": 179,
"height": 126,
"width": 394,
"height": 186,
"level": 1,
"opacity": 1,
"strokeDash": 0,
@ -446,15 +446,15 @@
"methods": null,
"columns": null,
"label": "custom 64",
"fontSize": 16,
"fontSize": 64,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 79,
"labelHeight": 26,
"labelWidth": 294,
"labelHeight": 86,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
@ -479,18 +479,18 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 42,
"labelHeight": 13,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1400.5,
"y": 138
"x": 1539,
"y": 158
},
{
"x": 1400.5,
"y": 359
"x": 1539,
"y": 419
}
],
"animated": false,
@ -517,18 +517,18 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 63,
"labelHeight": 19,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1577.5,
"y": 138
"x": 1705,
"y": 158
},
{
"x": 1577.5,
"y": 359
"x": 1705,
"y": 419
}
],
"animated": false,
@ -555,18 +555,18 @@
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelWidth": 200,
"labelHeight": 61,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 650.5,
"y": 138
"x": 771.5,
"y": 158
},
{
"x": 650.5,
"y": 359
"x": 771.5,
"y": 419
}
],
"animated": false,

22
e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="1839" height="673" viewBox="-88 -88 1839 673"><style type="text/css">
width="1967" height="793" viewBox="-88 -88 1967 793"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -14,16 +14,16 @@ width="1839" height="673" viewBox="-88 -88 1839 673"><style type="text/css">
}
]]>
</style><g id="size XS"><g class="shape" ><rect x="1324" y="359" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1401.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="1505" y="12" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1577.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="1504" y="359" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1577.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="954" y="12" width="144" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1026.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="12" y="12" width="153" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="88.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="383" y="12" width="162" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="464.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="565" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="650.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1316" y="12" width="169" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1400.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1118" y="12" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1207.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="756" y="12" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="845.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="185" y="12" width="178" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="274.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="561" y="359" width="179" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="650.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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><mask id="mask-1394600666" maskUnits="userSpaceOnUse" x="1367.000000" y="124.000000" width="67.000000" height="249.000000">
<rect x="1367.000000" y="124.000000" width="67.000000" height="249.000000" fill="white"></rect>
<rect x="1367.000000" y="238.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 1400.500000 140.000000 L 1400.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-1394600666)" /><text class="text-italic" x="1400.500000" y="248.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><mask id="mask-4025368117" maskUnits="userSpaceOnUse" x="1544.000000" y="124.000000" width="67.000000" height="249.000000">
<rect x="1544.000000" y="124.000000" width="67.000000" height="249.000000" fill="white"></rect>
<rect x="1544.000000" y="238.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 1577.500000 140.000000 L 1577.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-4025368117)" /><text class="text-italic" x="1577.500000" y="253.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><mask id="mask-3852064055" maskUnits="userSpaceOnUse" x="617.000000" y="124.000000" width="67.000000" height="249.000000">
<rect x="617.000000" y="124.000000" width="67.000000" height="249.000000" fill="white"></rect>
<rect x="617.000000" y="238.000000" width="67" height="21" fill="black"></rect>
</mask><path d="M 650.500000 140.000000 L 650.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-3852064055)" /><text class="text-italic" x="650.500000" y="286.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><style type="text/css"><![CDATA[
</style><g id="size XS"><g class="shape" ><rect x="1467" y="419" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1539.500000" y="482.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="1635" y="35" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1705.000000" y="99.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="1632" y="419" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1705.500000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="1117" y="20" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1193.500000" y="90.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="12" y="17" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="100.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="429" y="15" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="531.000000" y="93.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="653" y="12" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="94.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1470" y="42" width="138" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1539.000000" y="100.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1290" y="25" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1370.000000" y="87.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="910" y="21" width="187" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1003.500000" y="89.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="209" y="19" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="309.000000" y="90.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="575" y="419" width="394" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="772.000000" y="533.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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><mask id="mask-1394600666" maskUnits="userSpaceOnUse" x="1518.000000" y="144.000000" width="42.000000" height="289.000000">
<rect x="1518.000000" y="144.000000" width="42.000000" height="289.000000" fill="white"></rect>
<rect x="1518.000000" y="282.000000" width="42" height="13" fill="black"></rect>
</mask><path d="M 1539.000000 160.000000 L 1539.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-1394600666)" /><text class="text-italic" x="1539.000000" y="292.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><mask id="mask-4025368117" maskUnits="userSpaceOnUse" x="1674.000000" y="144.000000" width="63.000000" height="289.000000">
<rect x="1674.000000" y="144.000000" width="63.000000" height="289.000000" fill="white"></rect>
<rect x="1674.000000" y="279.000000" width="63" height="19" fill="black"></rect>
</mask><path d="M 1705.000000 160.000000 L 1705.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-4025368117)" /><text class="text-italic" x="1705.500000" y="294.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><mask id="mask-3852064055" maskUnits="userSpaceOnUse" x="672.000000" y="144.000000" width="200.000000" height="289.000000">
<rect x="672.000000" y="144.000000" width="200.000000" height="289.000000" fill="white"></rect>
<rect x="672.000000" y="258.000000" width="200" height="61" fill="black"></rect>
</mask><path d="M 771.500000 160.000000 L 771.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-3852064055)" /><text class="text-italic" x="772.000000" y="306.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB