feat: make custom background clip widget content

Uses a shader effect to prevent the widget content from rendering beyond the custom background shape

Author: luisbocanegra

package/contents/ui/components/MaskEffect.qml

@@ -0,0 +1,10 @@
+import QtQuick
+
+ShaderEffect {
+    required property var source
+    required property var mask
+    property real sourceOpacity: 1.0
+    property bool enabled: false
+    supportsAtlasTextures: true
+    fragmentShader: enabled ? Qt.resolvedUrl("../shaders/badge.frag.qsb") : ""
+}

package/contents/ui/main.qml

@@ -10,6 +10,7 @@ import org.kde.plasma.core as PlasmaCore
 import org.kde.plasma.plasmoid
 import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
+import "components" as Components
 
 import "code/utils.js" as Utils
 import "code/globals.js" as Globals
@@ -1121,6 +1122,61 @@ PlasmoidItem {
             position = Utils.getGlobalPosition(borderRec, panelElement);
             panelColorizer.updatePanelMask(maskIndex, borderRec, rect.corners.topLeftRadius, rect.corners.topRightRadius, rect.corners.bottomLeftRadius, rect.corners.bottomRightRadius, Qt.point(rect.positionX - moveX, rect.positionY - moveY), 5, visible && blurBehind);
         }
+
+        Kirigami.ShadowedRectangle {
+            id: backgroundMaskSource
+            anchors.fill: parent
+            corners {
+                topLeftRadius: topLeftRadius
+                topRightRadius: topRightRadius
+                bottomLeftRadius: bottomLeftRadius
+                bottomRightRadius: bottomRightRadius
+            }
+        }
+
+        Components.MaskEffect {
+            id: backgroundMask
+            anchors.fill: parent
+            source: targetShaderSource
+            mask: maskShaderSource
+            enabled: rect.isWidget && !panelBgItem.bgEnabled || true
+            sourceOpacity: 1
+        }
+
+        Components.MaskEffect {
+            id: dropShadowMask
+            anchors.fill: parent
+            source: shadowShaderSource
+            mask: maskShaderSource
+            enabled: rect.isWidget && !panelBgItem.bgEnabled || true
+            sourceOpacity: 1
+        }
+
+        ShaderEffectSource {
+            id: targetShaderSource
+            sourceItem: {
+                if (rect.isPanel && panelBgItem.bgEnabled) {
+                    return rect.target.visibleChildren[0];
+                }
+                return rect.target?.applet ?? null;
+            }
+            live: true
+            hideSource: true
+        }
+
+        ShaderEffectSource {
+            id: shadowShaderSource
+            sourceItem: dropShadow
+            live: true
+            hideSource: true
+        }
+
+        ShaderEffectSource {
+            id: maskShaderSource
+            sourceItem: backgroundMaskSource
+            hideSource: true
+            live: true
+        }
     }
 
     // Search the actual gridLayout of the panel

package/contents/ui/shaders/badge.frag.qsb

@@ -0,0 +1,19 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float sourceOpacity;
+};
+
+layout(binding = 1) uniform sampler2D source;
+layout(binding = 2) uniform sampler2D mask;
+
+void main() {
+    vec4 srcColor = texture(source, qt_TexCoord0);
+    vec4 maskColor = texture(mask, qt_TexCoord0);
+    fragColor = srcColor * maskColor.a * sourceOpacity;
+}