From bbeb23d10da92a4a18adc2cc9e1326c5a97dca85 Mon Sep 17 00:00:00 2001 From: ItsLemmy Date: Thu, 6 Nov 2025 12:05:45 -0500 Subject: [PATCH] screen corners --- Modules/LockScreen/LockScreen.qml | 2 +- .../MainScreen/Backgrounds/AllBackgrounds.qml | 9 + .../MainScreen/Backgrounds/BarBackground.qml | 40 ++-- .../Backgrounds/PanelBackground.qml | 40 ++-- .../Backgrounds/ScreenCornersBackground.qml | 219 ++++++++++++++++++ .../{ => Backgrounds}/ShapeCornerHelper.qml | 21 +- 6 files changed, 263 insertions(+), 68 deletions(-) create mode 100644 Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml rename Modules/MainScreen/{ => Backgrounds}/ShapeCornerHelper.qml (82%) diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index e2c3d142..651a9653 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -109,7 +109,7 @@ Loader { anchors.fill: parent visible: Settings.data.general.showScreenCorners - property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Qt.rgba(0, 0, 0, 1) : Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity) + property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity) property real cornerRadius: Style.screenRadius property real cornerSize: Style.screenRadius diff --git a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml index c3c6166c..333135a2 100644 --- a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml +++ b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml @@ -146,6 +146,15 @@ Item { // panel: root.windowRoot.trayDropdownPanel // shapeContainer: backgroundsShape // } + + + /** + * Screen Corners + */ + ScreenCornersBackground { + shapeContainer: backgroundsShape + bar: root.bar + } } // Unified shadow system (one MultiEffect for all backgrounds) diff --git a/Modules/MainScreen/Backgrounds/BarBackground.qml b/Modules/MainScreen/Backgrounds/BarBackground.qml index 7b1bde40..9399ab12 100644 --- a/Modules/MainScreen/Backgrounds/BarBackground.qml +++ b/Modules/MainScreen/Backgrounds/BarBackground.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Shapes import qs.Commons +import qs.Modules.MainScreen.Backgrounds /** @@ -32,19 +33,10 @@ ShapePath { readonly property point barMappedPos: bar ? Qt.point(bar.x, bar.y) : Qt.point(0, 0) // Flatten corners if bar is too small (handle null bar) - readonly property bool shouldFlatten: bar ? (bar.width < radius * 2 || bar.height < radius * 2) : false - readonly property real effectiveRadius: shouldFlatten ? (bar ? Math.min(bar.width / 2, bar.height / 2) : 0) : radius + readonly property bool shouldFlatten: bar ? ShapeCornerHelper.shouldFlatten(bar.width, bar.height, radius) : false + readonly property real effectiveRadius: shouldFlatten ? (bar ? ShapeCornerHelper.getFlattenedRadius(Math.min(bar.width, bar.height), radius) : 0) : radius - // Helper functions (inlined from ShapeCornerHelper) - function getMultX(cornerState) { - return cornerState === 1 ? -1 : 1 - } - function getMultY(cornerState) { - return cornerState === 2 ? -1 : 1 - } - function getArcDirection(multX, multY) { - return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise - } + // Helper function for getting corner radius based on state function getCornerRadius(cornerState) { // State -1 = no radius (flat corner) if (cornerState === -1) @@ -54,20 +46,20 @@ ShapePath { } // Per-corner multipliers and radii based on bar's corner states (handle null bar) - readonly property real tlMultX: bar ? getMultX(bar.topLeftCornerState) : 1 - readonly property real tlMultY: bar ? getMultY(bar.topLeftCornerState) : 1 + readonly property real tlMultX: bar ? ShapeCornerHelper.getMultX(bar.topLeftCornerState) : 1 + readonly property real tlMultY: bar ? ShapeCornerHelper.getMultY(bar.topLeftCornerState) : 1 readonly property real tlRadius: bar ? getCornerRadius(bar.topLeftCornerState) : 0 - readonly property real trMultX: bar ? getMultX(bar.topRightCornerState) : 1 - readonly property real trMultY: bar ? getMultY(bar.topRightCornerState) : 1 + readonly property real trMultX: bar ? ShapeCornerHelper.getMultX(bar.topRightCornerState) : 1 + readonly property real trMultY: bar ? ShapeCornerHelper.getMultY(bar.topRightCornerState) : 1 readonly property real trRadius: bar ? getCornerRadius(bar.topRightCornerState) : 0 - readonly property real brMultX: bar ? getMultX(bar.bottomRightCornerState) : 1 - readonly property real brMultY: bar ? getMultY(bar.bottomRightCornerState) : 1 + readonly property real brMultX: bar ? ShapeCornerHelper.getMultX(bar.bottomRightCornerState) : 1 + readonly property real brMultY: bar ? ShapeCornerHelper.getMultY(bar.bottomRightCornerState) : 1 readonly property real brRadius: bar ? getCornerRadius(bar.bottomRightCornerState) : 0 - readonly property real blMultX: bar ? getMultX(bar.bottomLeftCornerState) : 1 - readonly property real blMultY: bar ? getMultY(bar.bottomLeftCornerState) : 1 + readonly property real blMultX: bar ? ShapeCornerHelper.getMultX(bar.bottomLeftCornerState) : 1 + readonly property real blMultY: bar ? ShapeCornerHelper.getMultY(bar.bottomLeftCornerState) : 1 readonly property real blRadius: bar ? getCornerRadius(bar.bottomLeftCornerState) : 0 // ShapePath configuration @@ -102,7 +94,7 @@ ShapePath { relativeY: root.trRadius * root.trMultY radiusX: root.trRadius radiusY: root.trRadius - direction: root.getArcDirection(root.trMultX, root.trMultY) + direction: ShapeCornerHelper.getArcDirection(root.trMultX, root.trMultY) } // Right edge (moving down) @@ -117,7 +109,7 @@ ShapePath { relativeY: root.brRadius * root.brMultY radiusX: root.brRadius radiusY: root.brRadius - direction: root.getArcDirection(root.brMultX, root.brMultY) + direction: ShapeCornerHelper.getArcDirection(root.brMultX, root.brMultY) } // Bottom edge (moving left) @@ -132,7 +124,7 @@ ShapePath { relativeY: -root.blRadius * root.blMultY radiusX: root.blRadius radiusY: root.blRadius - direction: root.getArcDirection(root.blMultX, root.blMultY) + direction: ShapeCornerHelper.getArcDirection(root.blMultX, root.blMultY) } // Left edge (moving up) - closes the path back to start @@ -147,6 +139,6 @@ ShapePath { relativeY: -root.tlRadius * root.tlMultY radiusX: root.tlRadius radiusY: root.tlRadius - direction: root.getArcDirection(root.tlMultX, root.tlMultY) + direction: ShapeCornerHelper.getArcDirection(root.tlMultX, root.tlMultY) } } diff --git a/Modules/MainScreen/Backgrounds/PanelBackground.qml b/Modules/MainScreen/Backgrounds/PanelBackground.qml index be96b6af..069df0ca 100644 --- a/Modules/MainScreen/Backgrounds/PanelBackground.qml +++ b/Modules/MainScreen/Backgrounds/PanelBackground.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Shapes import qs.Commons +import qs.Modules.MainScreen.Backgrounds /** @@ -38,19 +39,10 @@ ShapePath { readonly property real panelHeight: panelBg ? panelBg.height : 0 // Flatten corners if panel is too small - readonly property bool shouldFlatten: panelBg ? (panelWidth < radius * 2 || panelHeight < radius * 2) : false - readonly property real effectiveRadius: shouldFlatten ? Math.min(panelWidth / 2, panelHeight / 2) : radius + readonly property bool shouldFlatten: panelBg ? ShapeCornerHelper.shouldFlatten(panelWidth, panelHeight, radius) : false + readonly property real effectiveRadius: shouldFlatten ? ShapeCornerHelper.getFlattenedRadius(Math.min(panelWidth, panelHeight), radius) : radius - // Helper functions (inlined from ShapeCornerHelper) - function getMultX(cornerState) { - return cornerState === 1 ? -1 : 1 - } - function getMultY(cornerState) { - return cornerState === 2 ? -1 : 1 - } - function getArcDirection(multX, multY) { - return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise - } + // Helper function for getting corner radius based on state function getCornerRadius(cornerState) { // State -1 = no radius (flat corner) if (cornerState === -1) @@ -60,20 +52,20 @@ ShapePath { } // Per-corner multipliers and radii based on panelBg's corner states - readonly property real tlMultX: panelBg ? getMultX(panelBg.topLeftCornerState) : 1 - readonly property real tlMultY: panelBg ? getMultY(panelBg.topLeftCornerState) : 1 + readonly property real tlMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.topLeftCornerState) : 1 + readonly property real tlMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.topLeftCornerState) : 1 readonly property real tlRadius: panelBg ? getCornerRadius(panelBg.topLeftCornerState) : 0 - readonly property real trMultX: panelBg ? getMultX(panelBg.topRightCornerState) : 1 - readonly property real trMultY: panelBg ? getMultY(panelBg.topRightCornerState) : 1 + readonly property real trMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.topRightCornerState) : 1 + readonly property real trMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.topRightCornerState) : 1 readonly property real trRadius: panelBg ? getCornerRadius(panelBg.topRightCornerState) : 0 - readonly property real brMultX: panelBg ? getMultX(panelBg.bottomRightCornerState) : 1 - readonly property real brMultY: panelBg ? getMultY(panelBg.bottomRightCornerState) : 1 + readonly property real brMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.bottomRightCornerState) : 1 + readonly property real brMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.bottomRightCornerState) : 1 readonly property real brRadius: panelBg ? getCornerRadius(panelBg.bottomRightCornerState) : 0 - readonly property real blMultX: panelBg ? getMultX(panelBg.bottomLeftCornerState) : 1 - readonly property real blMultY: panelBg ? getMultY(panelBg.bottomLeftCornerState) : 1 + readonly property real blMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.bottomLeftCornerState) : 1 + readonly property real blMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.bottomLeftCornerState) : 1 readonly property real blRadius: panelBg ? getCornerRadius(panelBg.bottomLeftCornerState) : 0 // DEBUG: Log panel state changes @@ -124,7 +116,7 @@ ShapePath { relativeY: root.trRadius * root.trMultY radiusX: root.trRadius radiusY: root.trRadius - direction: root.getArcDirection(root.trMultX, root.trMultY) + direction: ShapeCornerHelper.getArcDirection(root.trMultX, root.trMultY) } // Right edge (moving down) @@ -139,7 +131,7 @@ ShapePath { relativeY: root.brRadius * root.brMultY radiusX: root.brRadius radiusY: root.brRadius - direction: root.getArcDirection(root.brMultX, root.brMultY) + direction: ShapeCornerHelper.getArcDirection(root.brMultX, root.brMultY) } // Bottom edge (moving left) @@ -154,7 +146,7 @@ ShapePath { relativeY: -root.blRadius * root.blMultY radiusX: root.blRadius radiusY: root.blRadius - direction: root.getArcDirection(root.blMultX, root.blMultY) + direction: ShapeCornerHelper.getArcDirection(root.blMultX, root.blMultY) } // Left edge (moving up) - closes the path back to start @@ -169,6 +161,6 @@ ShapePath { relativeY: -root.tlRadius * root.tlMultY radiusX: root.tlRadius radiusY: root.tlRadius - direction: root.getArcDirection(root.tlMultX, root.tlMultY) + direction: ShapeCornerHelper.getArcDirection(root.tlMultX, root.tlMultY) } } diff --git a/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml b/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml new file mode 100644 index 00000000..2b8b0c17 --- /dev/null +++ b/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml @@ -0,0 +1,219 @@ +import QtQuick +import QtQuick.Shapes +import qs.Commons +import qs.Services +import qs.Modules.MainScreen.Backgrounds + + +/** + * ScreenCornersBackground - ShapePath component for rendering screen corners + * + * Renders concave corners at the screen edges to create a rounded screen effect. + * Uses the unified shadow system - this ShapePath is a child of the AllBackgrounds Shape container. + */ +ShapePath { + id: root + + // Required reference to AllBackgrounds shapeContainer + required property var shapeContainer + + // Required reference to the bar + required property var bar + + // Corner configuration + readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity) + readonly property real cornerRadius: Style.screenRadius + readonly property real cornerSize: Style.screenRadius + + // Helper properties for margin calculations + readonly property bool barOnThisMonitor: BarService.isVisible && Settings.data.bar.backgroundOpacity > 0 + readonly property real barMargin: !Settings.data.bar.floating && barOnThisMonitor ? Style.barHeight : 0 + + // Determine margins based on bar position + readonly property real topMargin: Settings.data.bar.position === "top" ? barMargin : 0 + readonly property real bottomMargin: Settings.data.bar.position === "bottom" ? barMargin : 0 + readonly property real leftMargin: Settings.data.bar.position === "left" ? barMargin : 0 + readonly property real rightMargin: Settings.data.bar.position === "right" ? barMargin : 0 + + // Screen dimensions + readonly property real screenWidth: shapeContainer ? shapeContainer.width : 0 + readonly property real screenHeight: shapeContainer ? shapeContainer.height : 0 + + // Only show screen corners if enabled and appropriate conditions are met + readonly property bool shouldShow: Settings.data.general.showScreenCorners && (!Settings.data.ui.panelsAttachedToBar || Settings.data.bar.backgroundOpacity >= 1 || Settings.data.bar.floating) + + // 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: cornerSize + relativeY: 0 + } + + // Right edge (moving down toward arc) + PathLine { + relativeX: 0 + relativeY: cornerSize - cornerRadius + } + + // Concave arc (bottom-right corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornerRadius + relativeY: cornerRadius + radiusX: cornerRadius + radiusY: cornerRadius + direction: PathArc.Counterclockwise + } + + // Bottom edge (moving left) + PathLine { + relativeX: -(cornerSize - cornerRadius) + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -cornerSize + } + + // ========== TOP-RIGHT CORNER ========== + // Arc is at the bottom-left of this square (inner diagonal) + PathMove { + x: screenWidth - rightMargin - cornerSize + y: topMargin + } + + // Top edge (moving right) + PathLine { + relativeX: cornerSize + relativeY: 0 + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornerSize + } + + // Bottom edge (moving left toward arc) + PathLine { + relativeX: -(cornerSize - cornerRadius) + relativeY: 0 + } + + // Concave arc (bottom-left corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornerRadius + relativeY: -cornerRadius + radiusX: cornerRadius + radiusY: cornerRadius + direction: PathArc.Counterclockwise + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -(cornerSize - cornerRadius) + } + + // ========== BOTTOM-LEFT CORNER ========== + // Arc is at the top-right of this square (inner diagonal) + PathMove { + x: leftMargin + y: screenHeight - bottomMargin - cornerSize + } + + // Top edge (moving right toward arc) + PathLine { + relativeX: cornerSize - cornerRadius + relativeY: 0 + } + + // Concave arc (top-right corner of square, curving inward toward screen center) + PathArc { + relativeX: cornerRadius + relativeY: cornerRadius + radiusX: cornerRadius + radiusY: cornerRadius + direction: PathArc.Counterclockwise + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornerSize - cornerRadius + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornerSize + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -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: screenWidth - rightMargin + y: screenHeight - bottomMargin + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornerSize + relativeY: 0 + } + + // Left edge (moving up toward arc) + PathLine { + relativeX: 0 + relativeY: -(cornerSize - cornerRadius) + } + + // Concave arc (top-left corner of square, curving inward toward screen center) + PathArc { + relativeX: cornerRadius + relativeY: -cornerRadius + radiusX: cornerRadius + radiusY: cornerRadius + direction: PathArc.Counterclockwise + } + + // Top edge (moving right) + PathLine { + relativeX: cornerSize - cornerRadius + relativeY: 0 + } + + // Right edge (moving down) - closes back to start + PathLine { + relativeX: 0 + relativeY: cornerSize + } +} diff --git a/Modules/MainScreen/ShapeCornerHelper.qml b/Modules/MainScreen/Backgrounds/ShapeCornerHelper.qml similarity index 82% rename from Modules/MainScreen/ShapeCornerHelper.qml rename to Modules/MainScreen/Backgrounds/ShapeCornerHelper.qml index f16056a5..3e766c7a 100644 --- a/Modules/MainScreen/ShapeCornerHelper.qml +++ b/Modules/MainScreen/Backgrounds/ShapeCornerHelper.qml @@ -2,6 +2,7 @@ pragma Singleton import QtQuick import QtQuick.Shapes +import Quickshell /** @@ -16,7 +17,7 @@ import QtQuick.Shapes * The key technique: Using PathArc direction control (Clockwise vs Counterclockwise) * combined with multipliers to create both inner and outer corner curves. */ -QtObject { +Singleton { id: root @@ -58,24 +59,6 @@ QtObject { } - /** - * Calculate the starting X position for a shape, accounting for top-left corner - * This is used to set ShapePath's startX position - */ - function getStartX(x, radius, topLeftState) { - return x + radius * getMultX(topLeftState) - } - - - /** - * Calculate the starting Y position for a shape - * In most cases this is just the y position, but can be adjusted for special cases - */ - function getStartY(y) { - return y - } - - /** * Get the "flattening" radius when shape dimensions are too small * Prevents visual artifacts when radius exceeds dimensions