diff --git a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml index 75487bc2..7d953f3d 100644 --- a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml +++ b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml @@ -25,125 +25,133 @@ Item { anchors.fill: parent - // The unified Shape container - Shape { - id: backgroundsShape + // Wrapper with layer caching for better shadow performance + Item { anchors.fill: parent - // Use curve renderer for smooth corners - preferredRendererType: Shape.CurveRenderer + // Enable layer caching to prevent continuous re-rendering + // This caches the Shape to a GPU texture, reducing GPU tessellation overhead + layer.enabled: true - // CRITICAL: Shape must not block mouse input! - // ShapePaths inside will render, but the Shape container itself should be transparent to input - enabled: false // Disable mouse input on the Shape itself + // The unified Shape container + Shape { + id: backgroundsShape + anchors.fill: parent - Component.onCompleted: { - Logger.d("AllBackgrounds", "AllBackgrounds initialized") - Logger.d("AllBackgrounds", " bar:", root.bar) - Logger.d("AllBackgrounds", " windowRoot:", root.windowRoot) - } + // Use curve renderer for smooth corners (GPU-accelerated) + preferredRendererType: Shape.CurveRenderer + + enabled: false // Disable mouse input on the Shape itself + + Component.onCompleted: { + Logger.d("AllBackgrounds", "AllBackgrounds initialized") + Logger.d("AllBackgrounds", " bar:", root.bar) + Logger.d("AllBackgrounds", " windowRoot:", root.windowRoot) + } - /** + /** * Bar */ - BarBackground { - bar: root.bar - shapeContainer: backgroundsShape - } + BarBackground { + bar: root.bar + shapeContainer: backgroundsShape + } - /** + /** * Panels */ - // Audio - PanelBackground { - panel: root.windowRoot.audioPanel - shapeContainer: backgroundsShape + // Audio + PanelBackground { + panel: root.windowRoot.audioPanel + shapeContainer: backgroundsShape + } + + // Battery + PanelBackground { + panel: root.windowRoot.batteryPanel + shapeContainer: backgroundsShape + } + + // Bluetooth + PanelBackground { + panel: root.windowRoot.bluetoothPanel + shapeContainer: backgroundsShape + } + + // Calendar + PanelBackground { + panel: root.windowRoot.calendarPanel + shapeContainer: backgroundsShape + } + + // Control Center + PanelBackground { + panel: root.windowRoot.controlCenterPanel + shapeContainer: backgroundsShape + } + + // Launcher + PanelBackground { + panel: root.windowRoot.launcherPanel + shapeContainer: backgroundsShape + } + + // Notification History + PanelBackground { + panel: root.windowRoot.notificationHistoryPanel + shapeContainer: backgroundsShape + } + + // Session Menu + PanelBackground { + panel: root.windowRoot.sessionMenuPanel + shapeContainer: backgroundsShape + } + + // Settings + PanelBackground { + panel: root.windowRoot.settingsPanel + shapeContainer: backgroundsShape + } + + // Setup Wizard + PanelBackground { + panel: root.windowRoot.setupWizardPanel + shapeContainer: backgroundsShape + } + + // TrayDrawer + PanelBackground { + panel: root.windowRoot.trayDrawerPanel + shapeContainer: backgroundsShape + } + + // TrayMenu + PanelBackground { + panel: root.windowRoot.trayMenuPanel + shapeContainer: backgroundsShape + } + + // Wallpaper + PanelBackground { + panel: root.windowRoot.wallpaperPanel + shapeContainer: backgroundsShape + } + + // WiFi + PanelBackground { + panel: root.windowRoot.wifiPanel + shapeContainer: backgroundsShape + } } - // Battery - PanelBackground { - panel: root.windowRoot.batteryPanel - shapeContainer: backgroundsShape + // Apply shadow to the cached layer + NDropShadows { + anchors.fill: parent + source: backgroundsShape } - - // Bluetooth - PanelBackground { - panel: root.windowRoot.bluetoothPanel - shapeContainer: backgroundsShape - } - - // Calendar - PanelBackground { - panel: root.windowRoot.calendarPanel - shapeContainer: backgroundsShape - } - - // Control Center - PanelBackground { - panel: root.windowRoot.controlCenterPanel - shapeContainer: backgroundsShape - } - - // Launcher - PanelBackground { - panel: root.windowRoot.launcherPanel - shapeContainer: backgroundsShape - } - - // Notification History - PanelBackground { - panel: root.windowRoot.notificationHistoryPanel - shapeContainer: backgroundsShape - } - - // Session Menu - PanelBackground { - panel: root.windowRoot.sessionMenuPanel - shapeContainer: backgroundsShape - } - - // Settings - PanelBackground { - panel: root.windowRoot.settingsPanel - shapeContainer: backgroundsShape - } - - // Setup Wizard - PanelBackground { - panel: root.windowRoot.setupWizardPanel - shapeContainer: backgroundsShape - } - - // TrayDrawer - PanelBackground { - panel: root.windowRoot.trayDrawerPanel - shapeContainer: backgroundsShape - } - - // TrayMenu - PanelBackground { - panel: root.windowRoot.trayMenuPanel - shapeContainer: backgroundsShape - } - - // Wallpaper - PanelBackground { - panel: root.windowRoot.wallpaperPanel - shapeContainer: backgroundsShape - } - - // WiFi - PanelBackground { - panel: root.windowRoot.wifiPanel - shapeContainer: backgroundsShape - } - } - - NDropShadows { - anchors.fill: parent - source: backgroundsShape } } diff --git a/Modules/MainScreen/ScreenCorners.qml b/Modules/MainScreen/ScreenCorners.qml index 9f4c2e9e..89dec642 100644 --- a/Modules/MainScreen/ScreenCorners.qml +++ b/Modules/MainScreen/ScreenCorners.qml @@ -9,207 +9,221 @@ import qs.Commons * Renders concave corners at the screen edges to create a rounded screen effect. * Self-contained Shape component (no shadows). */ -Shape { +Item { id: root anchors.fill: parent - preferredRendererType: Shape.CurveRenderer - enabled: false // Disable mouse input - ShapePath { - id: cornersPath + // Wrapper with layer caching to reduce GPU tessellation overhead + Item { + anchors.fill: parent - // Corner configuration - readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Color.mSurface - readonly property real cornerRadius: Style.screenRadius - readonly property real cornerSize: Style.screenRadius + // Cache the Shape to a texture to prevent continuous re-tessellation + layer.enabled: true - // Determine margins based on bar position - readonly property real topMargin: 0 - readonly property real bottomMargin: 0 - readonly property real leftMargin: 0 - readonly property real rightMargin: 0 + Shape { + id: cornersShape - // Screen dimensions - readonly property real screenWidth: root.width - readonly property real screenHeight: root.height + anchors.fill: parent + preferredRendererType: Shape.CurveRenderer + enabled: false // Disable mouse input - // Only show screen corners if enabled and appropriate conditions are met - readonly property bool shouldShow: Settings.data.general.showScreenCorners + ShapePath { + id: cornersPath - // ShapePath configuration - strokeWidth: -1 // No stroke, fill only - fillColor: shouldShow ? cornerColor : Color.transparent + // Corner configuration + readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Color.mSurface + readonly property real cornerRadius: Style.screenRadius + readonly property real cornerSize: Style.screenRadius - // Smooth color animation - Behavior on fillColor { - ColorAnimation { - duration: Style.animationFast + // Determine margins based on bar position + readonly property real topMargin: 0 + readonly property real bottomMargin: 0 + readonly property real leftMargin: 0 + readonly property real rightMargin: 0 + + // Screen dimensions + readonly property real screenWidth: cornersShape.width + readonly property real screenHeight: cornersShape.height + + // Only show screen corners if enabled and appropriate conditions are met + readonly property bool shouldShow: Settings.data.general.showScreenCorners + + // ShapePath configuration + strokeWidth: -1 // No stroke, fill only + fillColor: shouldShow ? cornerColor : Color.transparent + + // Smooth color animation + Behavior on fillColor { + ColorAnimation { + duration: Style.animationFast + } + } + + // ========== PATH DEFINITION ========== + // Draws 4 separate corner squares at screen edges + // Each corner square has a concave arc on the inner diagonal + + // ========== TOP-LEFT CORNER ========== + // Arc is at the bottom-right of this square (inner diagonal) + // Start at top-left screen corner + startX: leftMargin + startY: topMargin + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize + relativeY: 0 + } + + // Right edge (moving down toward arc) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize - cornersPath.cornerRadius + } + + // Concave arc (bottom-right corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornersPath.cornerRadius + relativeY: cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Bottom edge (moving left) + PathLine { + relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -cornersPath.cornerSize + } + + // ========== TOP-RIGHT CORNER ========== + // Arc is at the bottom-left of this square (inner diagonal) + PathMove { + x: cornersPath.screenWidth - cornersPath.rightMargin - cornersPath.cornerSize + y: cornersPath.topMargin + } + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize + relativeY: 0 + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize + } + + // Bottom edge (moving left toward arc) + PathLine { + relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) + relativeY: 0 + } + + // Concave arc (bottom-left corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornersPath.cornerRadius + relativeY: -cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) + } + + // ========== BOTTOM-LEFT CORNER ========== + // Arc is at the top-right of this square (inner diagonal) + PathMove { + x: cornersPath.leftMargin + y: cornersPath.screenHeight - cornersPath.bottomMargin - cornersPath.cornerSize + } + + // Top edge (moving right toward arc) + PathLine { + relativeX: cornersPath.cornerSize - cornersPath.cornerRadius + relativeY: 0 + } + + // Concave arc (top-right corner of square, curving inward toward screen center) + PathArc { + relativeX: cornersPath.cornerRadius + relativeY: cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize - cornersPath.cornerRadius + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornersPath.cornerSize + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -cornersPath.cornerSize + } + + // ========== BOTTOM-RIGHT CORNER ========== + // Arc is at the top-left of this square (inner diagonal) + // Start at bottom-right of square (different from other corners!) + PathMove { + x: cornersPath.screenWidth - cornersPath.rightMargin + y: cornersPath.screenHeight - cornersPath.bottomMargin + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornersPath.cornerSize + relativeY: 0 + } + + // Left edge (moving up toward arc) + PathLine { + relativeX: 0 + relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) + } + + // Concave arc (top-left corner of square, curving inward toward screen center) + PathArc { + relativeX: cornersPath.cornerRadius + relativeY: -cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize - cornersPath.cornerRadius + relativeY: 0 + } + + // Right edge (moving down) - closes back to start + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize + } } } - - // ========== PATH DEFINITION ========== - // Draws 4 separate corner squares at screen edges - // Each corner square has a concave arc on the inner diagonal - - // ========== TOP-LEFT CORNER ========== - // Arc is at the bottom-right of this square (inner diagonal) - // Start at top-left screen corner - startX: leftMargin - startY: topMargin - - // Top edge (moving right) - PathLine { - relativeX: cornersPath.cornerSize - relativeY: 0 - } - - // Right edge (moving down toward arc) - PathLine { - relativeX: 0 - relativeY: cornersPath.cornerSize - cornersPath.cornerRadius - } - - // Concave arc (bottom-right corner of square, curving inward toward screen center) - PathArc { - relativeX: -cornersPath.cornerRadius - relativeY: cornersPath.cornerRadius - radiusX: cornersPath.cornerRadius - radiusY: cornersPath.cornerRadius - direction: PathArc.Counterclockwise - } - - // Bottom edge (moving left) - PathLine { - relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) - relativeY: 0 - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -cornersPath.cornerSize - } - - // ========== TOP-RIGHT CORNER ========== - // Arc is at the bottom-left of this square (inner diagonal) - PathMove { - x: cornersPath.screenWidth - cornersPath.rightMargin - cornersPath.cornerSize - y: cornersPath.topMargin - } - - // Top edge (moving right) - PathLine { - relativeX: cornersPath.cornerSize - relativeY: 0 - } - - // Right edge (moving down) - PathLine { - relativeX: 0 - relativeY: cornersPath.cornerSize - } - - // Bottom edge (moving left toward arc) - PathLine { - relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) - relativeY: 0 - } - - // Concave arc (bottom-left corner of square, curving inward toward screen center) - PathArc { - relativeX: -cornersPath.cornerRadius - relativeY: -cornersPath.cornerRadius - radiusX: cornersPath.cornerRadius - radiusY: cornersPath.cornerRadius - direction: PathArc.Counterclockwise - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) - } - - // ========== BOTTOM-LEFT CORNER ========== - // Arc is at the top-right of this square (inner diagonal) - PathMove { - x: cornersPath.leftMargin - y: cornersPath.screenHeight - cornersPath.bottomMargin - cornersPath.cornerSize - } - - // Top edge (moving right toward arc) - PathLine { - relativeX: cornersPath.cornerSize - cornersPath.cornerRadius - relativeY: 0 - } - - // Concave arc (top-right corner of square, curving inward toward screen center) - PathArc { - relativeX: cornersPath.cornerRadius - relativeY: cornersPath.cornerRadius - radiusX: cornersPath.cornerRadius - radiusY: cornersPath.cornerRadius - direction: PathArc.Counterclockwise - } - - // Right edge (moving down) - PathLine { - relativeX: 0 - relativeY: cornersPath.cornerSize - cornersPath.cornerRadius - } - - // Bottom edge (moving left) - PathLine { - relativeX: -cornersPath.cornerSize - relativeY: 0 - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -cornersPath.cornerSize - } - - // ========== BOTTOM-RIGHT CORNER ========== - // Arc is at the top-left of this square (inner diagonal) - // Start at bottom-right of square (different from other corners!) - PathMove { - x: cornersPath.screenWidth - cornersPath.rightMargin - y: cornersPath.screenHeight - cornersPath.bottomMargin - } - - // Bottom edge (moving left) - PathLine { - relativeX: -cornersPath.cornerSize - relativeY: 0 - } - - // Left edge (moving up toward arc) - PathLine { - relativeX: 0 - relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) - } - - // Concave arc (top-left corner of square, curving inward toward screen center) - PathArc { - relativeX: cornersPath.cornerRadius - relativeY: -cornersPath.cornerRadius - radiusX: cornersPath.cornerRadius - radiusY: cornersPath.cornerRadius - direction: PathArc.Counterclockwise - } - - // Top edge (moving right) - PathLine { - relativeX: cornersPath.cornerSize - cornersPath.cornerRadius - relativeY: 0 - } - - // Right edge (moving down) - closes back to start - PathLine { - relativeX: 0 - relativeY: cornersPath.cornerSize - } } }