rendering: improve rendering of popouts and modals

Modals/Common/DankModal.qml

@@ -139,12 +139,11 @@ PanelWindow {
         }
     }
 
-    Rectangle {
+    Item {
-        id: contentContainer
+        id: modalContainer
 
         width: Theme.px(root.width, dpr)
         height: Theme.px(root.height, dpr)
-        anchors.centerIn: undefined
         x: {
             if (positioning === "center") {
                 return Theme.snap((root.screenWidth - width) / 2, dpr)
@@ -165,69 +164,70 @@ PanelWindow {
             }
             return 0
         }
+
+        readonly property bool slide: root.animationType === "slide"
+        readonly property real offsetX: slide ? 15 : 0
+        readonly property real offsetY: slide ? -30 : root.animationOffset
+
+        property real animX: 0
+        property real animY: 0
+        property real scaleValue: root.animationScaleCollapsed
+
+        onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
+        onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
+
+        Connections {
+            target: root
+            function onShouldBeVisibleChanged() {
+                modalContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetX, root.dpr)
+                modalContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetY, root.dpr)
+                modalContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed
+            }
+        }
+
+        Behavior on animX {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        Behavior on animY {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        Behavior on scaleValue {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        Rectangle {
+            id: contentContainer
+
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
             color: root.backgroundColor
             radius: root.cornerRadius
             border.color: root.borderColor
             border.width: root.borderWidth
             clip: false
             layer.enabled: true
-        layer.smooth: true
+            layer.smooth: false
-        layer.textureSize: Qt.size(width * Math.max(2, root.screen?.devicePixelRatio || 1), height * Math.max(2, root.screen?.devicePixelRatio || 1))
+            layer.textureSize: Qt.size(width * root.dpr, height * root.dpr)
-        layer.samples: 4
+            layer.textureMirroring: ShaderEffectSource.NoMirroring
             opacity: root.shouldBeVisible ? 1 : 0
-        transform: [scaleTransform, motionTransform]
+            scale: modalContainer.scaleValue
-
+            x: Theme.snap(modalContainer.animX + (parent.width - width) * (1 - modalContainer.scaleValue) * 0.5, root.dpr)
-        Scale {
+            y: Theme.snap(modalContainer.animY + (parent.height - height) * (1 - modalContainer.scaleValue) * 0.5, root.dpr)
-            id: scaleTransform
-
-            origin.x: contentContainer.width / 2
-            origin.y: contentContainer.height / 2
-            xScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
-            yScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
-
-            Behavior on xScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-
-            Behavior on yScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-        }
-
-        Translate {
-            id: motionTransform
-
-            readonly property bool slide: root.animationType === "slide"
-            readonly property real hiddenX: slide ? 15 : 0
-            readonly property real hiddenY: slide ? -30 : root.animationOffset
-
-            x: Theme.snap(root.shouldBeVisible ? 0 : hiddenX, root.dpr)
-            y: Theme.snap(root.shouldBeVisible ? 0 : hiddenY, root.dpr)
-
-            Behavior on x {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-
-            Behavior on y {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-        }
 
             Behavior on opacity {
                 NumberAnimation {
@@ -289,6 +289,7 @@ PanelWindow {
                 }
             }
         }
+    }
 
     FocusScope {
         id: focusScope

Widgets/DankPopout.qml

@@ -114,62 +114,37 @@ PanelWindow {
         }
     }
 
-    Loader {
+    Item {
-        id: contentLoader
+        id: contentContainer
         x: alignedX
         y: alignedY
         width: alignedWidth
         height: alignedHeight
-        active: root.visible
-        asynchronous: false
-        transformOrigin: Item.Center
-        layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
-        layer.smooth: true
-        layer.textureSize: Qt.size(width * Math.max(2, root.screen?.devicePixelRatio || 1), height * Math.max(2, root.screen?.devicePixelRatio || 1))
-        layer.samples: 4
-        opacity: shouldBeVisible ? 1 : 0
-        visible: opacity > 0
-        transform: [scaleTransform, motionTransform]
-
-        Scale {
-            id: scaleTransform
-
-            origin.x: contentLoader.width / 2
-            origin.y: contentLoader.height / 2
-            xScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
-            yScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
-
-            Behavior on xScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-
-            Behavior on yScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-        }
-
-        Translate {
-            id: motionTransform
 
         readonly property bool barTop: SettingsData.dankBarPosition === SettingsData.Position.Top
         readonly property bool barBottom: SettingsData.dankBarPosition === SettingsData.Position.Bottom
         readonly property bool barLeft: SettingsData.dankBarPosition === SettingsData.Position.Left
         readonly property bool barRight: SettingsData.dankBarPosition === SettingsData.Position.Right
-            readonly property real hiddenX: barLeft ? root.animationOffset : (barRight ? -root.animationOffset : 0)
+        readonly property real offsetX: barLeft ? root.animationOffset : (barRight ? -root.animationOffset : 0)
-            readonly property real hiddenY: barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0)
+        readonly property real offsetY: barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0)
 
-            x: Theme.snap(root.shouldBeVisible ? 0 : hiddenX, root.dpr)
+        property real animX: 0
-            y: Theme.snap(root.shouldBeVisible ? 0 : hiddenY, root.dpr)
+        property real animY: 0
+        property real scaleValue: root.animationScaleCollapsed
 
-            Behavior on x {
+        onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
+        onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
+
+        Connections {
+            target: root
+            function onShouldBeVisibleChanged() {
+                contentContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : contentContainer.offsetX, root.dpr)
+                contentContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : contentContainer.offsetY, root.dpr)
+                contentContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed
+            }
+        }
+
+        Behavior on animX {
             NumberAnimation {
                 duration: root.animationDuration
                 easing.type: Easing.BezierSpline
@@ -177,14 +152,38 @@ PanelWindow {
             }
         }
 
-            Behavior on y {
+        Behavior on animY {
             NumberAnimation {
                 duration: root.animationDuration
                 easing.type: Easing.BezierSpline
                 easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
             }
         }
+
+        Behavior on scaleValue {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
             }
+        }
+
+        Loader {
+            id: contentLoader
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
+            active: root.visible
+            asynchronous: false
+            layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+            layer.smooth: false
+            layer.textureSize: Qt.size(width * root.dpr, height * root.dpr)
+            layer.textureMirroring: ShaderEffectSource.NoMirroring
+            opacity: shouldBeVisible ? 1 : 0
+            visible: opacity > 0
+            scale: contentContainer.scaleValue
+            x: Theme.snap(contentContainer.animX + (parent.width - width) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
+            y: Theme.snap(contentContainer.animY + (parent.height - height) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
 
             Behavior on opacity {
                 NumberAnimation {
@@ -194,12 +193,11 @@ PanelWindow {
                 }
             }
         }
+    }
 
     Item {
-        x: alignedX
+        parent: contentContainer
-        y: alignedY
+        anchors.fill: parent
-        width: alignedWidth
-        height: alignedHeight
         focus: true
         Keys.onPressed: event => {
             if (event.key === Qt.Key_Escape) {

Widgets/DankSlideout.qml

@@ -67,27 +67,32 @@ PanelWindow {
         }
     }
 
-    StyledRect {
+    Item {
-        id: contentRect
+        id: slideContainer
-        layer.enabled: true
-        layer.smooth: true
-        layer.textureSize: Qt.size(width * Math.max(2, root.modelData?.devicePixelRatio || 1), height * Math.max(2, root.modelData?.devicePixelRatio || 1))
-        layer.samples: 4
-
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         width: expandable && expandedWidth ? expandedWidthValue : slideoutWidth
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b,
-                       customTransparency >= 0 ? customTransparency : SettingsData.popupTransparency)
-        border.color: Theme.outlineMedium
-        border.width: 1
-        radius: Theme.cornerRadius
-        visible: isVisible || slideAnimation.running
 
-        transform: Translate {
+        Behavior on width {
-            id: slideTransform
+            NumberAnimation {
-            x: isVisible ? 0 : contentRect.width
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        StyledRect {
+            id: contentRect
+            readonly property real dpr: root.modelData?.devicePixelRatio || 1
+            layer.enabled: true
+            layer.smooth: false
+            layer.textureSize: Qt.size(width * dpr, height * dpr)
+            layer.textureMirroring: ShaderEffectSource.NoMirroring
+
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: parent.width
+            x: isVisible ? 0 : parent.width
 
             Behavior on x {
                 NumberAnimation {
@@ -102,14 +107,12 @@ PanelWindow {
                     }
                 }
             }
-        }
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b,
-
+                           customTransparency >= 0 ? customTransparency : SettingsData.popupTransparency)
-        Behavior on width {
+            border.color: Theme.outlineMedium
-            NumberAnimation {
+            border.width: 1
-                duration: 250
+            radius: Theme.cornerRadius
-                easing.type: Easing.OutCubic
+            visible: isVisible || slideAnimation.running
-            }
-        }
 
             Column {
                 id: headerColumn
@@ -185,3 +188,4 @@ PanelWindow {
             }
         }
     }
+}

Widgets/M3WaveProgress.qml

@@ -31,7 +31,6 @@ Item {
         antialiasing: true
         preferredRendererType: Shape.CurveRenderer
         layer.enabled: true
-        layer.samples: 0
 
         ShapePath {
             strokeColor: root.trackColor