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

fix opacity for labels

Browse source
This commit is contained in:
Alexander Wang 2023-01-19 00:26:00 -08:00
parent b69915b7e7
commit 7651aedb8c
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
10 changed files with 1828 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
d2renderers/d2svg/d2svg.go
View file

@ -885,6 +885,9 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
if targetShape.Stroke != "" {
mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke)
}
if targetShape.Opacity != 1.0 {
mdStyle += fmt.Sprintf("opacity:%f;", targetShape.Opacity)
}
fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md" style="%s">%v</div>`, mdStyle, render)
fmt.Fprint(writer, `</foreignObject></g>`)
@ -894,6 +897,9 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
fontColor = targetShape.Color
}
textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", targetShape.FontSize, fontColor)
if targetShape.Opacity != 1.0 {
textStyle += fmt.Sprintf(";opacity:%f;", targetShape.Opacity)
}
x := labelTL.X + float64(targetShape.LabelWidth)/2.
// text is vertically positioned at its baseline which is at labelTL+FontSize
y := labelTL.Y + float64(targetShape.FontSize)

10
e2etests/regression_test.go
View file

@ -380,6 +380,16 @@ no leading: |python
}
x.a -> x.a
`,
},
{
name: "opacity-on-label",
script: `x.style.opacity: 0.4
y: |md
linux: because a PC is a terrible thing to waste
| {
style.opacity: 0.4
}
`,
},
}

86
e2etests/testdata/regression/opacity-on-label/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,86 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 113,
"height": 126,
"opacity": 0.4,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "text",
"pos": {
"x": 173,
"y": 51
},
"width": 304,
"height": 24,
"opacity": 0.4,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "#0A0F25",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "linux: because a PC is a terrible thing to waste",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 304,
"labelHeight": 24,
"zIndex": 0,
"level": 1
}
],
"connections": []
}

817
e2etests/testdata/regression/opacity-on-label/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: 660 KiB

86
e2etests/testdata/regression/opacity-on-label/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,86 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 113,
"height": 126,
"opacity": 0.4,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "text",
"pos": {
"x": 145,
"y": 63
},
"width": 304,
"height": 24,
"opacity": 0.4,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "#0A0F25",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "linux: because a PC is a terrible thing to waste",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 304,
"labelHeight": 24,
"zIndex": 0,
"level": 1
}
],
"connections": []
}

817
e2etests/testdata/regression/opacity-on-label/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: 660 KiB

4
e2etests/testdata/stable/stylish/dagre/sketch.exp.svg vendored
View file

@ -47,9 +47,9 @@ width="323" height="580" viewBox="-104 -105 323 580"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="232" width="129" height="141">
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.600000;">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="232" width="129" height="141">
<rect x="0" y="232" width="129" height="141" fill="white"></rect>
<path d="M0,247L15,232L129,232L129,358L114,373L0,373L0,247L114,247L114,373M114,247L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="247" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,247 15,232 129,232 129,358 114,373 114,247" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,247 L15,232 L129,232 L129,358 L114,373 L0,373 L0,247 L114,247 L114,373 M114,247 L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 174.400000 57.000000 198.700000 57.000000 243.500000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#304389475)"/><rect x="34.000000" y="176.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="304389475" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="580">
<path d="M0,247L15,232L129,232L129,358L114,373L0,373L0,247L114,247L114,373M114,247L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="247" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,247 15,232 129,232 129,358 114,373 114,247" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,247 L15,232 L129,232 L129,358 L114,373 L0,373 L0,247 L114,247 L114,373 M114,247 L129,232" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.600000;">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 174.400000 57.000000 198.700000 57.000000 243.500000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#304389475)"/><rect x="34.000000" y="176.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="304389475" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="580">
<rect x="-100" y="-100" width="323" height="580" fill="white"></rect>
<rect x="34.000000" y="176.000000" width="47" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB

4
e2etests/testdata/stable/stylish/elk/sketch.exp.svg vendored
View file

@ -47,9 +47,9 @@ width="323" height="680" viewBox="-93 -93 323 680"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="12" y="344" width="129" height="141">
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.600000;">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="12" y="344" width="129" height="141">
<rect x="12" y="344" width="129" height="141" fill="white"></rect>
<path d="M12,359L27,344L141,344L141,470L126,485L12,485L12,359L126,359L126,485M126,359L141,344" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="359" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="12,359 27,344 141,344 141,470 126,485 126,359" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M12,359 L27,344 L141,344 L141,470 L126,485 L12,485 L12,359 L126,359 L126,485 M126,359 L141,344" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="69.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 355.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#2254812791)"/><rect x="46.000000" y="238.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="69.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="2254812791" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="680">
<path d="M12,359L27,344L141,344L141,470L126,485L12,485L12,359L126,359L126,485M126,359L141,344" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="359" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="12,359 27,344 141,344 141,470 126,485 126,359" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M12,359 L27,344 L141,344 L141,470 L126,485 L12,485 L12,359 L126,359 L126,485 M126,359 L141,344" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="69.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.600000;">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 355.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#2254812791)"/><rect x="46.000000" y="238.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="69.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="2254812791" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="680">
<rect x="-100" y="-100" width="323" height="680" fill="white"></rect>
<rect x="46.000000" y="238.000000" width="47" height="21" fill="black"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 470 KiB

2
e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg vendored
View file

@ -41,7 +41,7 @@ width="353" height="340" viewBox="-107 -107 353 340"><style type="text/css">
});
]]></script><g id="cube"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="154" height="141">
<rect x="0" y="-15" width="154" height="141" fill="white"></rect>
<path d="M0,0L15,-15L154,-15L154,111L139,126L0,126L0,0L139,0L139,126M139,0L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="0,0 15,-15 154,-15 154,111 139,126 139,0" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M0,0 L15,-15 L154,-15 L154,111 L139,126 L0,126 L0,0 L139,0 L139,126 M139,0 L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="69.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1691738582" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
<path d="M0,0L15,-15L154,-15L154,111L139,126L0,126L0,0L139,0L139,126M139,0L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="0,0 15,-15 154,-15 154,111 139,126 139,0" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M0,0 L15,-15 L154,-15 L154,111 L139,126 L0,126 L0,0 L139,0 L139,126 M139,0 L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="69.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.500000;">cube</text></g><mask id="1691738582" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
<rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB

2
e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg vendored
View file

@ -41,7 +41,7 @@ width="353" height="340" viewBox="-95 -95 353 340"><style type="text/css">
});
]]></script><g id="cube"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="154" height="141">
<rect x="12" y="-3" width="154" height="141" fill="white"></rect>
<path d="M12,12L27,-3L166,-3L166,123L151,138L12,138L12,12L151,12L151,138M151,12L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="12,12 27,-3 166,-3 166,123 151,138 151,12" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M12,12 L27,-3 L166,-3 L166,123 L151,138 L12,138 L12,12 L151,12 L151,138 M151,12 L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="81.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1030761998" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
<path d="M12,12L27,-3L166,-3L166,123L151,138L12,138L12,12L151,12L151,138M151,12L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="12,12 27,-3 166,-3 166,123 151,138 151,12" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M12,12 L27,-3 L166,-3 L166,123 L151,138 L12,138 L12,12 L151,12 L151,138 M151,12 L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="81.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25;opacity:0.500000;">cube</text></g><mask id="1030761998" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
<rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB