use layers instead of clip on WebAssembly to fix content leaking

Author: Ales Kutsepau

src/EasyApplication/Gui/Components/ContentArea.qml

@@ -1,13 +1,21 @@
 import QtQuick
 import QtQuick.Controls
 
+import EasyApplication.Gui.Globals as EaGlobals
+
 SwipeView {
     //anchors.top: parent.top
     //anchors.bottom: parent.bottom
     //anchors.left: parent.left
     //anchors.right: parent.right
     //anchors.fill: parent
 
-    clip: true
+    // WebAssembly: a layer instead of clip. See EaGlobals.Vars.isWasm and the
+    // longer note in SideBar.qml. This is the outermost of the three swipe
+    // views - the workflow pages - so its texture is the size of the content
+    // area. If WebAssembly performance suffers, this is the first one to
+    // reconsider.
+    clip: !EaGlobals.Vars.isWasm
+    layer.enabled: EaGlobals.Vars.isWasm
     interactive: false
 }

src/EasyApplication/Gui/Components/ListView.qml

@@ -226,7 +226,19 @@ ListView {
                 ? 2 * EaStyle.Sizes.tableRowHeight
                 : tableRowHeight * visibleRowCount + _headerHeight
 
-    clip: true
+    // WebAssembly: a layer instead of clip. See EaGlobals.Vars.isWasm.
+    //
+    // Both crop to this item's bounds, but a layer renders the subtree into
+    // its own texture and creates no clip node. On wasm a clip node here is
+    // lost whenever the scene is rebuilt - a tooltip appearing is enough -
+    // and this list's border and rows are then drawn outside the group box
+    // that should be hiding them.
+    //
+    // Cost: one texture the size of this list. Its height does not animate,
+    // so there is no per-frame re-rasterisation.
+    clip: !EaGlobals.Vars.isWasm
+    layer.enabled: EaGlobals.Vars.isWasm
+
     headerPositioning: ListView.OverlayHeader
     boundsBehavior: Flickable.StopAtBounds
     enabled: count > 0

src/EasyApplication/Gui/Components/MainContent.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 
+import EasyApplication.Gui.Globals as EaGlobals
 import EasyApplication.Gui.Elements as EaElements
 
 Item {
@@ -27,7 +28,11 @@ Item {
         anchors.left: mainAreaContainer.left
         anchors.right: mainAreaContainer.right
 
-        clip: true
+        // WebAssembly: a layer instead of clip. See EaGlobals.Vars.isWasm and
+        // the longer note in SideBar.qml - the same applies to the main
+        // area's own tabs.
+        clip: !EaGlobals.Vars.isWasm
+        layer.enabled: EaGlobals.Vars.isWasm
         interactive: false
 
         currentIndex: tabs.currentIndex

src/EasyApplication/Gui/Components/SideBar.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Material
 
+import EasyApplication.Gui.Globals as EaGlobals
 import EasyApplication.Gui.Style as EaStyle
 import EasyApplication.Gui.Elements as EaElements
 
@@ -38,7 +39,19 @@ Item {
 
         anchors.bottomMargin: EaStyle.Sizes.fontPixelSize
 
-        clip: true
+        // WebAssembly: a layer instead of clip. See EaGlobals.Vars.isWasm.
+        //
+        // A SwipeView is a ListView, so switching tabs slides its content.
+        // The pages either side are cropped by this clip, and on wasm a
+        // clipped item that moves past the edge of an enclosing clip is drawn
+        // outside it. Switching from Basic to Extra then paints the outgoing
+        // page over whatever sits beside the sidebar.
+        //
+        // A layer crops to the same bounds through a texture, with no clip
+        // node. Its size does not animate, so nothing is re-rasterised per
+        // frame.
+        clip: !EaGlobals.Vars.isWasm
+        layer.enabled: EaGlobals.Vars.isWasm
         interactive: false
 
         currentIndex: tabs.currentIndex

src/EasyApplication/Gui/Components/TableView.qml

@@ -30,7 +30,23 @@ ListView {
                     tableRowHeight * (Math.min(count, maxRowCountShow) + 1 ) :
                     tableRowHeight * (Math.min(count, maxRowCountShow))
 
-    clip: true
+    // WebAssembly: a layer instead of clip.
+    //
+    // Both crop to this item's bounds, but a layer renders the subtree into
+    // its own texture and never creates a clip node. On wasm a clip node here
+    // is lost whenever the scene is rebuilt - a tooltip appearing is enough -
+    // and the table's border and rows are then drawn outside the group box
+    // that should be hiding them.
+    //
+    // Chosen over moving the border out of the list: the list's parent is
+    // GroupBox's contentItem, which is a Row, so reparenting anything into it
+    // changes the group's layout.
+    //
+    // Cost: one texture the size of this list. Its height does not animate,
+    // so there is no per-frame re-rasterisation.
+    clip: !EaGlobals.Vars.isWasm
+    layer.enabled: EaGlobals.Vars.isWasm
+
     headerPositioning: ListView.OverlayHeader
     boundsBehavior: Flickable.StopAtBounds
 

src/EasyApplication/Gui/Globals/Vars.qml

@@ -9,6 +9,18 @@ import EasyApplication.Gui.Logic as EaLogic
 QtObject {
     id: object
 
+    // True when running in a browser through WebAssembly.
+    //
+    // Qt for WebAssembly loses a clip when the scene graph is rebuilt, or
+    // when a clipped item scrolls past the edge of an enclosing clip, and the
+    // hidden content is then drawn outside its container. Components that
+    // must crop something use a layer instead of clip when this is true. A
+    // layer crops to the same bounds but creates no clip node, at the cost of
+    // one texture.
+    //
+    // Desktop is unaffected and keeps plain clipping, which is cheaper.
+    readonly property bool isWasm: Qt.platform.os === 'wasm'
+
     // Python objects
     readonly property bool isTestMode: typeof pyIsTestMode !== "undefined" && pyIsTestMode !== null ?
                                           pyIsTestMode :