Replace Mask ScreenCorners with Canvas

ScreenCorners: replace Mask with Canvas, RAM usage seems fine

Modules/Background/ScreenCorners.qml

@@ -19,20 +19,15 @@ Loader {
       readonly property real scaling: ScalingService.scale(screen)
       screen: modelData
 
-      // Visible color
+      property color cornerColor: Qt.rgba(Color.mSurface.r, Color.mSurface.g, Color.mSurface.b,
-      property color ringColor: Qt.rgba(Color.mSurface.r, Color.mSurface.g, Color.mSurface.b,
                                           Settings.data.bar.backgroundOpacity)
-      // The amount subtracted from full size for the inner cutout
+      property real cornerRadius: 20 * scaling
-      // Inner size = full size - borderWidth (per axis)
+      property real cornerSize: 20 * scaling
-      property int borderWidth: Style.borderM
-      // Rounded radius for the inner cutout
-      property int innerRadius: 20
 
       color: Color.transparent
 
       WlrLayershell.exclusionMode: ExclusionMode.Ignore
       WlrLayershell.namespace: "quickshell-corner"
-      // Do not take keyboard focus and make the surface click-through
       WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
 
       anchors {
@@ -51,100 +46,194 @@ Loader {
                 && Settings.data.bar.backgroundOpacity > 0 ? Math.round(Style.barHeight * scaling) : 0
       }
 
-      // Source we want to show only as a ring
+      // Top-left concave corner
-      Rectangle {
-        id: overlaySource
-
-        anchors.fill: parent
-        color: root.ringColor
-      }
-
-      // Texture for overlaySource
-      ShaderEffectSource {
-        id: overlayTexture
-
-        anchors.fill: parent
-        sourceItem: overlaySource
-        hideSource: true
-        live: true
-        visible: false
-      }
-
-      // Mask via Canvas: paint opaque white, then punch rounded inner hole
       Canvas {
-        id: maskSource
+        id: topLeftCorner
-
+        anchors.top: parent.top
-        anchors.fill: parent
+        anchors.left: parent.left
+        width: cornerSize
+        height: cornerSize
         antialiasing: true
         renderTarget: Canvas.FramebufferObject
+        smooth: false
+
         onPaint: {
           const ctx = getContext("2d")
+          if (!ctx)
+            return
+
           ctx.reset()
           ctx.clearRect(0, 0, width, height)
-          // Solid white base (alpha=1)
+
-          ctx.globalCompositeOperation = "source-over"
+          // Fill the entire area with the corner color
-          ctx.fillStyle = "#ffffffff"
+          ctx.fillStyle = Qt.rgba(root.cornerColor.r, root.cornerColor.g, root.cornerColor.b, root.cornerColor.a)
           ctx.fillRect(0, 0, width, height)
-          // Punch hole using destination-out with rounded rect path
+
-          const x = Math.round(root.borderWidth / 2)
+          // Cut out the rounded corner using destination-out
-          const y = Math.round(root.borderWidth / 2)
-          const w = Math.max(0, width - root.borderWidth)
-          const h = Math.max(0, height - root.borderWidth)
-          const r = Math.max(0, Math.min(root.innerRadius, Math.min(w, h) / 2))
           ctx.globalCompositeOperation = "destination-out"
-          ctx.fillStyle = "#ffffffff"
+          ctx.fillStyle = "#ffffff"
           ctx.beginPath()
-          // rounded rectangle path using arcTo
+          ctx.arc(width, height, root.cornerRadius, 0, 2 * Math.PI)
-          ctx.moveTo(x + r, y)
-          ctx.lineTo(x + w - r, y)
-          ctx.arcTo(x + w, y, x + w, y + r, r)
-          ctx.lineTo(x + w, y + h - r)
-          ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
-          ctx.lineTo(x + r, y + h)
-          ctx.arcTo(x, y + h, x, y + h - r, r)
-          ctx.lineTo(x, y + r)
-          ctx.arcTo(x, y, x + r, y, r)
-          ctx.closePath()
           ctx.fill()
         }
-        onWidthChanged: requestPaint()
-        onHeightChanged: requestPaint()
-      }
 
-      // Repaint mask when properties change
+        onWidthChanged: if (available)
+                          requestPaint()
+        onHeightChanged: if (available)
+                           requestPaint()
+
         Connections {
-        function onBorderWidthChanged() {
-          maskSource.requestPaint()
-        }
-
-        function onRingColorChanged() {}
-
-        function onInnerRadiusChanged() {
-          maskSource.requestPaint()
-        }
-
           target: root
+          function onCornerColorChanged() {
+            if (topLeftCorner.available)
+              topLeftCorner.requestPaint()
+          }
+          function onCornerRadiusChanged() {
+            if (topLeftCorner.available)
+              topLeftCorner.requestPaint()
+          }
+        }
       }
 
-      // Texture for maskSource; hides the original
+      // Top-right concave corner
-      ShaderEffectSource {
+      Canvas {
-        id: maskTexture
+        id: topRightCorner
+        anchors.top: parent.top
+        anchors.right: parent.right
+        width: cornerSize
+        height: cornerSize
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        smooth: true
 
-        anchors.fill: parent
+        onPaint: {
-        sourceItem: maskSource
+          const ctx = getContext("2d")
-        hideSource: true
+          if (!ctx)
-        live: true
+            return
-        visible: false
+
+          ctx.reset()
+          ctx.clearRect(0, 0, width, height)
+
+          ctx.fillStyle = Qt.rgba(root.cornerColor.r, root.cornerColor.g, root.cornerColor.b, root.cornerColor.a)
+          ctx.fillRect(0, 0, width, height)
+
+          ctx.globalCompositeOperation = "destination-out"
+          ctx.fillStyle = "#ffffff"
+          ctx.beginPath()
+          ctx.arc(0, height, root.cornerRadius, 0, 2 * Math.PI)
+          ctx.fill()
         }
 
-      // Apply mask to show only the ring area
+        onWidthChanged: if (available)
-      MultiEffect {
+                          requestPaint()
-        anchors.fill: parent
+        onHeightChanged: if (available)
-        source: overlayTexture
+                           requestPaint()
-        maskEnabled: true
+
-        maskSource: maskTexture
+        Connections {
-        maskInverted: false
+          target: root
-        maskSpreadAtMax: 0.75
+          function onCornerColorChanged() {
+            if (topRightCorner.available)
+              topRightCorner.requestPaint()
+          }
+          function onCornerRadiusChanged() {
+            if (topRightCorner.available)
+              topRightCorner.requestPaint()
+          }
+        }
+      }
+
+      // Bottom-left concave corner
+      Canvas {
+        id: bottomLeftCorner
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: cornerSize
+        height: cornerSize
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        smooth: true
+
+        onPaint: {
+          const ctx = getContext("2d")
+          if (!ctx)
+            return
+
+          ctx.reset()
+          ctx.clearRect(0, 0, width, height)
+
+          ctx.fillStyle = Qt.rgba(root.cornerColor.r, root.cornerColor.g, root.cornerColor.b, root.cornerColor.a)
+          ctx.fillRect(0, 0, width, height)
+
+          ctx.globalCompositeOperation = "destination-out"
+          ctx.fillStyle = "#ffffff"
+          ctx.beginPath()
+          ctx.arc(width, 0, root.cornerRadius, 0, 2 * Math.PI)
+          ctx.fill()
+        }
+
+        onWidthChanged: if (available)
+                          requestPaint()
+        onHeightChanged: if (available)
+                           requestPaint()
+
+        Connections {
+          target: root
+          function onCornerColorChanged() {
+            if (bottomLeftCorner.available)
+              bottomLeftCorner.requestPaint()
+          }
+          function onCornerRadiusChanged() {
+            if (bottomLeftCorner.available)
+              bottomLeftCorner.requestPaint()
+          }
+        }
+      }
+
+      // Bottom-right concave corner
+      Canvas {
+        id: bottomRightCorner
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        width: cornerSize
+        height: cornerSize
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        smooth: true
+
+        onPaint: {
+          const ctx = getContext("2d")
+          if (!ctx)
+            return
+
+          ctx.reset()
+          ctx.clearRect(0, 0, width, height)
+
+          ctx.fillStyle = Qt.rgba(root.cornerColor.r, root.cornerColor.g, root.cornerColor.b, root.cornerColor.a)
+          ctx.fillRect(0, 0, width, height)
+
+          ctx.globalCompositeOperation = "destination-out"
+          ctx.fillStyle = "#ffffff"
+          ctx.beginPath()
+          ctx.arc(0, 0, root.cornerRadius, 0, 2 * Math.PI)
+          ctx.fill()
+        }
+
+        onWidthChanged: if (available)
+                          requestPaint()
+        onHeightChanged: if (available)
+                           requestPaint()
+
+        Connections {
+          target: root
+          function onCornerColorChanged() {
+            if (bottomRightCorner.available)
+              bottomRightCorner.requestPaint()
+          }
+          function onCornerRadiusChanged() {
+            if (bottomRightCorner.available)
+              bottomRightCorner.requestPaint()
+          }
+        }
       }
 
       mask: Region {}

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -249,7 +249,6 @@ ColumnLayout {
               RowLayout {
                 id: swatches
 
-
                 spacing: Style.marginS * scaling
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter