mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2026-08-15 18:43:59 +00:00
Refactor: Panels and Bar background are now drawn separately with Shapes.
This commit is contained in:
ItsLemmy
@@ -0,0 +1,161 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import QtQuick.Effects
|
||||
import qs.Commons
|
||||
|
||||
|
||||
/**
|
||||
* AllBackgrounds - Unified Shape container for all bar and panel backgrounds
|
||||
*
|
||||
* Unified shadow system. This component contains a single Shape
|
||||
* with multiple ShapePath children (one for bar, one for each panel type).
|
||||
*
|
||||
* Benefits:
|
||||
* - Single GPU-accelerated rendering pass for all backgrounds
|
||||
* - Unified shadow system (one MultiEffect for everything)
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
// Reference Bar
|
||||
required property var bar
|
||||
|
||||
// Reference to MainScreen (for panel access)
|
||||
required property var windowRoot
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
// The unified Shape container
|
||||
Shape {
|
||||
id: backgroundsShape
|
||||
anchors.fill: parent
|
||||
|
||||
// Use curve renderer for smooth corners
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
// 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
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Panels
|
||||
*/
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
// TrayDropdown
|
||||
PanelBackground {
|
||||
panel: root.windowRoot.trayDropdownPanel
|
||||
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
|
||||
}
|
||||
|
||||
// // Tray Dropdown
|
||||
// PanelBackground {
|
||||
// panel: root.windowRoot.trayDropdownPanel
|
||||
// shapeContainer: backgroundsShape
|
||||
// }
|
||||
}
|
||||
|
||||
// Unified shadow system (one MultiEffect for all backgrounds)
|
||||
MultiEffect {
|
||||
source: backgroundsShape
|
||||
anchors.fill: backgroundsShape
|
||||
shadowEnabled: true
|
||||
shadowBlur: Style.shadowBlur
|
||||
shadowColor: Color.black
|
||||
shadowHorizontalOffset: Settings.data.general.shadowOffsetX
|
||||
shadowVerticalOffset: Settings.data.general.shadowOffsetY
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import qs.Commons
|
||||
|
||||
|
||||
/**
|
||||
* BarBackground - ShapePath component for rendering the bar background
|
||||
*
|
||||
* Unified shadow system. This component is a ShapePath that will be
|
||||
* a child of the unified AllBackgrounds Shape container.
|
||||
*
|
||||
* Uses 4-state per-corner system for flexible corner rendering:
|
||||
* - State -1: No radius (flat/square corner)
|
||||
* - State 0: Normal (inner curve)
|
||||
* - State 1: Horizontal inversion (outer curve on X-axis)
|
||||
* - State 2: Vertical inversion (outer curve on Y-axis)
|
||||
*/
|
||||
ShapePath {
|
||||
id: root
|
||||
|
||||
// Required reference to the bar component
|
||||
required property var bar
|
||||
|
||||
// Required reference to AllBackgrounds shapeContainer
|
||||
required property var shapeContainer
|
||||
|
||||
// Corner radius (from Style)
|
||||
readonly property real radius: Style.radiusL
|
||||
|
||||
// Bar position - since bar's parent fills the screen and Shape also fills the screen,
|
||||
// we can use bar.x and bar.y directly (they're already in screen coordinates)
|
||||
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
|
||||
|
||||
// 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
|
||||
}
|
||||
function getCornerRadius(cornerState) {
|
||||
// State -1 = no radius (flat corner)
|
||||
if (cornerState === -1)
|
||||
return 0
|
||||
// All other states use effectiveRadius
|
||||
return effectiveRadius
|
||||
}
|
||||
|
||||
// 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 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 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 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 blRadius: bar ? getCornerRadius(bar.bottomLeftCornerState) : 0
|
||||
|
||||
// ShapePath configuration
|
||||
strokeWidth: -1 // No stroke, fill only
|
||||
fillColor: Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity)
|
||||
|
||||
// Starting position (top-left corner, after the arc)
|
||||
// Use mapped coordinates relative to the Shape container
|
||||
startX: barMappedPos.x + tlRadius * tlMultX
|
||||
startY: barMappedPos.y
|
||||
|
||||
// Smooth color animation
|
||||
Behavior on fillColor {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
|
||||
// ========== PATH DEFINITION ==========
|
||||
// Draws a rectangle with potentially inverted corners
|
||||
// All coordinates are relative to startX/startY
|
||||
|
||||
// Top edge (moving right)
|
||||
PathLine {
|
||||
relativeX: (bar ? bar.width : 0) - root.tlRadius * root.tlMultX - root.trRadius * root.trMultX
|
||||
relativeY: 0
|
||||
}
|
||||
|
||||
// Top-right corner arc
|
||||
PathArc {
|
||||
relativeX: root.trRadius * root.trMultX
|
||||
relativeY: root.trRadius * root.trMultY
|
||||
radiusX: root.trRadius
|
||||
radiusY: root.trRadius
|
||||
direction: root.getArcDirection(root.trMultX, root.trMultY)
|
||||
}
|
||||
|
||||
// Right edge (moving down)
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: (bar ? bar.height : 0) - root.trRadius * root.trMultY - root.brRadius * root.brMultY
|
||||
}
|
||||
|
||||
// Bottom-right corner arc
|
||||
PathArc {
|
||||
relativeX: -root.brRadius * root.brMultX
|
||||
relativeY: root.brRadius * root.brMultY
|
||||
radiusX: root.brRadius
|
||||
radiusY: root.brRadius
|
||||
direction: root.getArcDirection(root.brMultX, root.brMultY)
|
||||
}
|
||||
|
||||
// Bottom edge (moving left)
|
||||
PathLine {
|
||||
relativeX: -((bar ? bar.width : 0) - root.brRadius * root.brMultX - root.blRadius * root.blMultX)
|
||||
relativeY: 0
|
||||
}
|
||||
|
||||
// Bottom-left corner arc
|
||||
PathArc {
|
||||
relativeX: -root.blRadius * root.blMultX
|
||||
relativeY: -root.blRadius * root.blMultY
|
||||
radiusX: root.blRadius
|
||||
radiusY: root.blRadius
|
||||
direction: root.getArcDirection(root.blMultX, root.blMultY)
|
||||
}
|
||||
|
||||
// Left edge (moving up) - closes the path back to start
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: -((bar ? bar.height : 0) - root.blRadius * root.blMultY - root.tlRadius * root.tlMultY)
|
||||
}
|
||||
|
||||
// Top-left corner arc (back to start)
|
||||
PathArc {
|
||||
relativeX: root.tlRadius * root.tlMultX
|
||||
relativeY: -root.tlRadius * root.tlMultY
|
||||
radiusX: root.tlRadius
|
||||
radiusY: root.tlRadius
|
||||
direction: root.getArcDirection(root.tlMultX, root.tlMultY)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import qs.Commons
|
||||
|
||||
|
||||
/**
|
||||
* PanelBackground - ShapePath component for rendering a single background
|
||||
*
|
||||
* Unified shadow system. This component is a ShapePath that will
|
||||
* be a child of the unified AllBackgrounds Shape container.
|
||||
*
|
||||
* Uses 4-state per-corner system for flexible corner rendering:
|
||||
* - State -1: No radius (flat/square corner)
|
||||
* - State 0: Normal (inner curve)
|
||||
* - State 1: Horizontal inversion (outer curve on X-axis)
|
||||
* - State 2: Vertical inversion (outer curve on Y-axis)
|
||||
*/
|
||||
ShapePath {
|
||||
id: root
|
||||
|
||||
// Required reference to the panel component (e.g., windowRoot.controlCenterPanel)
|
||||
required property var panel
|
||||
|
||||
// Required reference to AllBackgrounds shapeContainer
|
||||
required property var shapeContainer
|
||||
|
||||
// Corner radius (from Style)
|
||||
readonly property real radius: Style.radiusL
|
||||
|
||||
// Get the actual panelBackground Item from SmartPanel
|
||||
// Only access panelRegion if panel exists and is visible
|
||||
readonly property var panelBg: (panel && panel.visible) ? panel.panelRegion : null
|
||||
|
||||
// Panel position - panelBg is in screen coordinates already
|
||||
readonly property real panelX: panelBg ? panelBg.x : 0
|
||||
readonly property real panelY: panelBg ? panelBg.y : 0
|
||||
readonly property real panelWidth: panelBg ? panelBg.width : 0
|
||||
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
|
||||
|
||||
// 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
|
||||
}
|
||||
function getCornerRadius(cornerState) {
|
||||
// State -1 = no radius (flat corner)
|
||||
if (cornerState === -1)
|
||||
return 0
|
||||
// All other states use effectiveRadius
|
||||
return effectiveRadius
|
||||
}
|
||||
|
||||
// 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 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 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 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 blRadius: panelBg ? getCornerRadius(panelBg.bottomLeftCornerState) : 0
|
||||
|
||||
// DEBUG: Log panel state changes
|
||||
onPanelChanged: {
|
||||
Logger.d("PanelBackground", "=== panel changed:", panel)
|
||||
Logger.d("PanelBackground", " panel.visible:", panel ? panel.visible : "null")
|
||||
Logger.d("PanelBackground", " panel.panelRegion:", panel ? panel.panelRegion : "null")
|
||||
}
|
||||
|
||||
onPanelBgChanged: {
|
||||
Logger.d("PanelBackground", "=== panelBg changed:", panelBg)
|
||||
if (panelBg) {
|
||||
Logger.d("PanelBackground", " Geometry:", panelX, panelY, panelWidth, "x", panelHeight)
|
||||
Logger.d("PanelBackground", " startX:", startX, "startY:", startY)
|
||||
Logger.d("PanelBackground", " fillColor:", fillColor)
|
||||
}
|
||||
}
|
||||
|
||||
// ShapePath configuration
|
||||
strokeWidth: -1 // No stroke, fill only
|
||||
|
||||
// Starting position (top-left corner, after the arc)
|
||||
startX: panelX + tlRadius * tlMultX
|
||||
startY: panelY
|
||||
|
||||
fillColor: Color.mSurface
|
||||
|
||||
// Smooth color animation
|
||||
Behavior on fillColor {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
|
||||
// ========== PATH DEFINITION ==========
|
||||
// Draws a rectangle with potentially inverted corners
|
||||
// All coordinates are relative to startX/startY
|
||||
|
||||
// Top edge (moving right)
|
||||
PathLine {
|
||||
relativeX: root.panelWidth - root.tlRadius * root.tlMultX - root.trRadius * root.trMultX
|
||||
relativeY: 0
|
||||
}
|
||||
|
||||
// Top-right corner arc
|
||||
PathArc {
|
||||
relativeX: root.trRadius * root.trMultX
|
||||
relativeY: root.trRadius * root.trMultY
|
||||
radiusX: root.trRadius
|
||||
radiusY: root.trRadius
|
||||
direction: root.getArcDirection(root.trMultX, root.trMultY)
|
||||
}
|
||||
|
||||
// Right edge (moving down)
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: root.panelHeight - root.trRadius * root.trMultY - root.brRadius * root.brMultY
|
||||
}
|
||||
|
||||
// Bottom-right corner arc
|
||||
PathArc {
|
||||
relativeX: -root.brRadius * root.brMultX
|
||||
relativeY: root.brRadius * root.brMultY
|
||||
radiusX: root.brRadius
|
||||
radiusY: root.brRadius
|
||||
direction: root.getArcDirection(root.brMultX, root.brMultY)
|
||||
}
|
||||
|
||||
// Bottom edge (moving left)
|
||||
PathLine {
|
||||
relativeX: -(root.panelWidth - root.brRadius * root.brMultX - root.blRadius * root.blMultX)
|
||||
relativeY: 0
|
||||
}
|
||||
|
||||
// Bottom-left corner arc
|
||||
PathArc {
|
||||
relativeX: -root.blRadius * root.blMultX
|
||||
relativeY: -root.blRadius * root.blMultY
|
||||
radiusX: root.blRadius
|
||||
radiusY: root.blRadius
|
||||
direction: root.getArcDirection(root.blMultX, root.blMultY)
|
||||
}
|
||||
|
||||
// Left edge (moving up) - closes the path back to start
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: -(root.panelHeight - root.blRadius * root.blMultY - root.tlRadius * root.tlMultY)
|
||||
}
|
||||
|
||||
// Top-left corner arc (back to start)
|
||||
PathArc {
|
||||
relativeX: root.tlRadius * root.tlMultX
|
||||
relativeY: -root.tlRadius * root.tlMultY
|
||||
radiusX: root.tlRadius
|
||||
radiusY: root.tlRadius
|
||||
direction: root.getArcDirection(root.tlMultX, root.tlMultY)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import qs.Commons
|
||||
|
||||
|
||||
/**
|
||||
* BarExclusionZone - Invisible PanelWindow that reserves exclusive space for the bar
|
||||
*
|
||||
* This is a minimal window that works with the compositor to reserve space,
|
||||
* while the actual bar UI is rendered in MainScreen.
|
||||
*/
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
property bool exclusive: Settings.data.bar.exclusive !== undefined ? Settings.data.bar.exclusive : false
|
||||
|
||||
readonly property string barPosition: Settings.data.bar.position || "top"
|
||||
readonly property bool barIsVertical: barPosition === "left" || barPosition === "right"
|
||||
readonly property bool barFloating: Settings.data.bar.floating || false
|
||||
readonly property real barMarginH: barFloating ? Settings.data.bar.marginHorizontal * Style.marginXL : 0
|
||||
readonly property real barMarginV: barFloating ? Settings.data.bar.marginVertical * Style.marginXL : 0
|
||||
|
||||
// Invisible - just reserves space
|
||||
color: "transparent"
|
||||
|
||||
mask: Region {}
|
||||
|
||||
// Wayland layer shell configuration
|
||||
WlrLayershell.layer: WlrLayer.Top
|
||||
WlrLayershell.namespace: "noctalia-bar-exclusion-" + (screen?.name || "unknown")
|
||||
WlrLayershell.exclusionMode: exclusive ? ExclusionMode.Auto : ExclusionMode.Ignore
|
||||
|
||||
// Anchor based on bar position
|
||||
anchors {
|
||||
top: barPosition === "top"
|
||||
bottom: barPosition === "bottom"
|
||||
left: barPosition === "left" || barPosition === "top" || barPosition === "bottom"
|
||||
right: barPosition === "right" || barPosition === "top" || barPosition === "bottom"
|
||||
}
|
||||
|
||||
// Size based on bar orientation
|
||||
// When floating, only reserve space for the bar + margin on the anchored edge
|
||||
implicitWidth: {
|
||||
if (barIsVertical) {
|
||||
// Vertical bar: reserve bar height + margin on the anchored edge only
|
||||
if (barFloating) {
|
||||
// For left bar, reserve left margin; for right bar, reserve right margin
|
||||
return Style.barHeight + barMarginH
|
||||
}
|
||||
return Style.barHeight
|
||||
}
|
||||
return 0 // Auto-width when left/right anchors are true
|
||||
}
|
||||
|
||||
implicitHeight: {
|
||||
if (!barIsVertical) {
|
||||
// Horizontal bar: reserve bar height + margin on the anchored edge only
|
||||
if (barFloating) {
|
||||
// For top bar, reserve top margin; for bottom bar, reserve bottom margin
|
||||
return Style.barHeight + barMarginV
|
||||
}
|
||||
return Style.barHeight
|
||||
}
|
||||
return 0 // Auto-height when top/bottom anchors are true
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
Logger.d("BarExclusionZone", "Created for screen:", screen?.name)
|
||||
Logger.d("BarExclusionZone", " Position:", barPosition, "Exclusive:", exclusive, "Floating:", barFloating)
|
||||
Logger.d("BarExclusionZone", " Anchors - top:", anchors.top, "bottom:", anchors.bottom, "left:", anchors.left, "right:", anchors.right)
|
||||
Logger.d("BarExclusionZone", " Size:", width, "x", height, "implicitWidth:", implicitWidth, "implicitHeight:", implicitHeight)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,536 @@
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
import "Backgrounds" as Backgrounds
|
||||
|
||||
// All panels
|
||||
import qs.Modules.Bar
|
||||
import qs.Modules.Panels.Audio
|
||||
import qs.Modules.Panels.Battery
|
||||
import qs.Modules.Panels.Bluetooth
|
||||
import qs.Modules.Panels.Calendar
|
||||
import qs.Modules.Panels.ControlCenter
|
||||
import qs.Modules.Panels.Launcher
|
||||
import qs.Modules.Panels.NotificationHistory
|
||||
import qs.Modules.Panels.SessionMenu
|
||||
import qs.Modules.Panels.Settings
|
||||
import qs.Modules.Panels.SetupWizard
|
||||
import qs.Modules.Panels.Tray
|
||||
import qs.Modules.Panels.Wallpaper
|
||||
import qs.Modules.Panels.WiFi
|
||||
|
||||
|
||||
/**
|
||||
* MainScreen - Single PanelWindow per screen that manages all panels and the bar
|
||||
*/
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
// Expose panels as readonly property aliases
|
||||
readonly property alias audioPanel: audioPanel
|
||||
readonly property alias batteryPanel: batteryPanel
|
||||
readonly property alias bluetoothPanel: bluetoothPanel
|
||||
readonly property alias calendarPanel: calendarPanel
|
||||
readonly property alias controlCenterPanel: controlCenterPanel
|
||||
readonly property alias launcherPanel: launcherPanel
|
||||
readonly property alias notificationHistoryPanel: notificationHistoryPanel
|
||||
readonly property alias sessionMenuPanel: sessionMenuPanel
|
||||
readonly property alias settingsPanel: settingsPanel
|
||||
readonly property alias setupWizardPanel: setupWizardPanel
|
||||
readonly property alias trayDropdownPanel: trayDropdownPanel
|
||||
readonly property alias trayMenuPanel: trayMenuPanel
|
||||
readonly property alias wallpaperPanel: wallpaperPanel
|
||||
readonly property alias wifiPanel: wifiPanel
|
||||
|
||||
Component.onCompleted: {
|
||||
Logger.d("MainScreen", "Initialized for screen:", screen?.name, "- Dimensions:", screen?.width, "x", screen?.height, "- Position:", screen?.x, ",", screen?.y)
|
||||
}
|
||||
|
||||
// Debug: Log mask region changes
|
||||
onMaskChanged: {
|
||||
Logger.d("MainScreen", "Mask changed!")
|
||||
Logger.d("MainScreen", " Bar region:", barLoader.item?.barRegion)
|
||||
Logger.d("MainScreen", " Panel count:", panelsRepeater.count)
|
||||
for (var i = 0; i < panelsRepeater.count; i++) {
|
||||
var panelItem = panelsRepeater.itemAt(i)?.item
|
||||
Logger.d("MainScreen", " Panel", i, "- open:", panelItem?.isPanelOpen, "- region:", panelItem?.panelRegion)
|
||||
}
|
||||
}
|
||||
|
||||
// Wayland
|
||||
// Always use Exclusive keyboard focus when a panel is open
|
||||
// This ensures all keyboard shortcuts work reliably (Escape, etc.)
|
||||
// The centralized shortcuts in this window handle delegation to panels
|
||||
WlrLayershell.keyboardFocus: root.isPanelOpen ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
|
||||
WlrLayershell.layer: Settings.data.ui.panelsOverlayLayer ? WlrLayer.Overlay : WlrLayer.Top
|
||||
WlrLayershell.namespace: "noctalia-screen-" + (screen?.name || "unknown")
|
||||
WlrLayershell.exclusionMode: ExclusionMode.Ignore // Don't reserve space - BarExclusionZone handles that
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
bottom: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
// Desktop dimming when panels are open
|
||||
property bool dimDesktop: Settings.data.general.dimDesktop
|
||||
property bool isPanelOpen: PanelService.openedPanel !== null
|
||||
color: {
|
||||
if (dimDesktop && isPanelOpen) {
|
||||
return Qt.alpha(Color.mSurfaceVariant, Style.opacityHeavy)
|
||||
}
|
||||
return Color.transparent
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
|
||||
// Fully reactive mask system, make everything click-through except bar and open panels
|
||||
mask: Region {
|
||||
id: clickableMask
|
||||
|
||||
// Cover entire window (everything is masked/click-through)
|
||||
x: 0
|
||||
y: 0
|
||||
width: root.width
|
||||
height: root.height
|
||||
intersection: Intersection.Xor
|
||||
|
||||
// Direct binding to Variants.instances plus additional regions
|
||||
regions: panelRegions.instances.concat([barMaskRegion, backgroundMaskRegion])
|
||||
|
||||
// Bar region - subtract bar area from mask
|
||||
Region {
|
||||
id: barMaskRegion
|
||||
property var barRegion: barLoader.item?.barRegion
|
||||
|
||||
x: barRegion?.x ?? 0
|
||||
y: barRegion?.y ?? 0
|
||||
width: barRegion?.width ?? 0
|
||||
height: barRegion?.height ?? 0
|
||||
intersection: Intersection.Subtract
|
||||
}
|
||||
|
||||
// Background region for click-to-close - reactive sizing
|
||||
Region {
|
||||
id: backgroundMaskRegion
|
||||
x: 0
|
||||
y: 0
|
||||
width: root.isPanelOpen ? root.width : 0
|
||||
height: root.isPanelOpen ? root.height : 0
|
||||
intersection: Intersection.Subtract
|
||||
}
|
||||
}
|
||||
|
||||
// Variants for panel regions
|
||||
Variants {
|
||||
id: panelRegions
|
||||
|
||||
// Model is the list of open panels (filters out closed ones)
|
||||
model: [audioPanel, controlCenterPanel, calendarPanel].filter(function (p) {
|
||||
return p && p.isPanelOpen
|
||||
})
|
||||
|
||||
Region {
|
||||
required property var modelData
|
||||
property var panelBg: modelData.panelRegion
|
||||
|
||||
// Direct bindings
|
||||
x: panelBg?.x ?? 0
|
||||
y: panelBg?.y ?? 0
|
||||
width: panelBg?.width ?? 0
|
||||
height: panelBg?.height ?? 0
|
||||
intersection: Intersection.Subtract
|
||||
}
|
||||
}
|
||||
|
||||
// Container for all UI elements
|
||||
Item {
|
||||
id: container
|
||||
width: root.width
|
||||
height: root.height
|
||||
|
||||
// Unified backgrounds container / unified shadow system
|
||||
// Renders all bar and panel backgrounds as ShapePaths within a single Shape
|
||||
// This allows the shadow effect to apply to all backgrounds in one render pass
|
||||
Backgrounds.AllBackgrounds {
|
||||
id: unifiedBackgrounds
|
||||
anchors.fill: parent
|
||||
bar: barLoader.item?.barItem || null
|
||||
windowRoot: root
|
||||
z: 0 // Behind all content
|
||||
}
|
||||
|
||||
// Background MouseArea for closing panels when clicking outside
|
||||
// Active whenever a panel is open - the mask ensures it only receives clicks when panel is open
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
enabled: root.isPanelOpen
|
||||
onClicked: {
|
||||
if (PanelService.openedPanel) {
|
||||
PanelService.openedPanel.close()
|
||||
}
|
||||
}
|
||||
z: 0 // Behind panels and bar
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// All panels always exist
|
||||
// ---------------------------------------
|
||||
AudioPanel {
|
||||
id: audioPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "audioPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(audioPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
BatteryPanel {
|
||||
id: batteryPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "batteryPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(batteryPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
BluetoothPanel {
|
||||
id: bluetoothPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "bluetoothPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(bluetoothPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
ControlCenterPanel {
|
||||
id: controlCenterPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "controlCenterPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(controlCenterPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
CalendarPanel {
|
||||
id: calendarPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "calendarPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(calendarPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
Launcher {
|
||||
id: launcherPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "launcherPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(launcherPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
NotificationHistoryPanel {
|
||||
id: notificationHistoryPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "notificationHistoryPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(notificationHistoryPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
SessionMenu {
|
||||
id: sessionMenuPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "sessionMenuPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(sessionMenuPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
SettingsPanel {
|
||||
id: settingsPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "settingsPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(settingsPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
SetupWizard {
|
||||
id: setupWizardPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "setupWizardPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(setupWizardPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
TrayDropdownPanel {
|
||||
id: trayDropdownPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "trayDropdownPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(trayDropdownPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
TrayMenuPanel {
|
||||
id: trayMenuPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "trayMenuPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(trayDropdownPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
WallpaperPanel {
|
||||
id: wallpaperPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "wallpaperPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(wallpaperPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
WiFiPanel {
|
||||
id: wifiPanel
|
||||
screen: root.screen
|
||||
z: 50
|
||||
|
||||
Component.onCompleted: {
|
||||
objectName = "wifiPanel-" + (screen?.name || "unknown")
|
||||
PanelService.registerPanel(wifiPanel)
|
||||
Logger.d("MainScreen", "Panel registered:", objectName, "on screen:", screen?.name)
|
||||
}
|
||||
}
|
||||
|
||||
// Bar (always on top - rendered last in tree, so naturally on top)
|
||||
Loader {
|
||||
id: barLoader
|
||||
asynchronous: false
|
||||
sourceComponent: Bar {}
|
||||
// Keep bar loaded but hide it when BarService.isVisible is false
|
||||
// This allows panels to remain accessible via IPC
|
||||
visible: BarService.isVisible
|
||||
|
||||
// Fill parent to provide dimensions for Bar to reference
|
||||
anchors.fill: parent
|
||||
|
||||
property ShellScreen screen: root.screen
|
||||
|
||||
onLoaded: {
|
||||
Logger.d("MainScreen", "Bar loaded:", item !== null)
|
||||
if (item) {
|
||||
Logger.d("MainScreen", "Bar screen", item.screen?.name, "size:", item.width, "x", item.height)
|
||||
// Bind screen to bar component (use binding for reactivity)
|
||||
item.screen = Qt.binding(function () {
|
||||
return barLoader.screen
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Centralized keyboard shortcuts - delegate to opened panel
|
||||
// This ensures shortcuts work regardless of panel focus state
|
||||
Shortcut {
|
||||
sequence: "Escape"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onEscapePressed) {
|
||||
PanelService.openedPanel.onEscapePressed()
|
||||
} else if (PanelService.openedPanel) {
|
||||
PanelService.openedPanel.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Tab"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onTabPressed) {
|
||||
PanelService.openedPanel.onTabPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Shift+Tab"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onShiftTabPressed) {
|
||||
PanelService.openedPanel.onShiftTabPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Up"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onUpPressed) {
|
||||
PanelService.openedPanel.onUpPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Down"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onDownPressed) {
|
||||
PanelService.openedPanel.onDownPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Return"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onReturnPressed) {
|
||||
PanelService.openedPanel.onReturnPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Enter"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onReturnPressed) {
|
||||
PanelService.openedPanel.onReturnPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Home"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onHomePressed) {
|
||||
PanelService.openedPanel.onHomePressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "End"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onEndPressed) {
|
||||
PanelService.openedPanel.onEndPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "PgUp"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onPageUpPressed) {
|
||||
PanelService.openedPanel.onPageUpPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "PgDown"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onPageDownPressed) {
|
||||
PanelService.openedPanel.onPageDownPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Ctrl+J"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onCtrlJPressed) {
|
||||
PanelService.openedPanel.onCtrlJPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Ctrl+K"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onCtrlKPressed) {
|
||||
PanelService.openedPanel.onCtrlKPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Left"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onLeftPressed) {
|
||||
PanelService.openedPanel.onLeftPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Right"
|
||||
enabled: root.isPanelOpen
|
||||
onActivated: {
|
||||
if (PanelService.openedPanel && PanelService.openedPanel.onRightPressed) {
|
||||
PanelService.openedPanel.onRightPressed()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
|
||||
/**
|
||||
* ShapeCornerHelper - Utility singleton for shape corner calculations
|
||||
*
|
||||
* Uses 4-state per-corner system for flexible corner rendering:
|
||||
* - State -1: No radius (flat/square corner)
|
||||
* - State 0: Normal (inner curve)
|
||||
* - State 1: Horizontal inversion (outer curve on X-axis)
|
||||
* - State 2: Vertical inversion (outer curve on Y-axis)
|
||||
*
|
||||
* The key technique: Using PathArc direction control (Clockwise vs Counterclockwise)
|
||||
* combined with multipliers to create both inner and outer corner curves.
|
||||
*/
|
||||
QtObject {
|
||||
id: root
|
||||
|
||||
|
||||
/**
|
||||
* Get X-axis multiplier for a corner state
|
||||
* State 1 (horizontal invert) returns -1, others return 1
|
||||
*/
|
||||
function getMultX(cornerState) {
|
||||
return cornerState === 1 ? -1 : 1
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get Y-axis multiplier for a corner state
|
||||
* State 2 (vertical invert) returns -1, others return 1
|
||||
*/
|
||||
function getMultY(cornerState) {
|
||||
return cornerState === 2 ? -1 : 1
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get PathArc direction for a corner based on its multipliers
|
||||
* Uses XOR logic: if X inverted differs from Y inverted, use Counterclockwise
|
||||
* This creates the outer curve effect for inverted corners
|
||||
*/
|
||||
function getArcDirection(multX, multY) {
|
||||
return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Convenience function to get arc direction directly from corner state
|
||||
*/
|
||||
function getArcDirectionFromState(cornerState) {
|
||||
const multX = getMultX(cornerState)
|
||||
const multY = getMultY(cornerState)
|
||||
return getArcDirection(multX, multY)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
function getFlattenedRadius(dimension, requestedRadius) {
|
||||
if (dimension < requestedRadius * 2) {
|
||||
return dimension / 2
|
||||
}
|
||||
return requestedRadius
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Check if a shape should use flattened corners
|
||||
* Returns true if width or height is too small for the requested radius
|
||||
*/
|
||||
function shouldFlatten(width, height, radius) {
|
||||
return width < radius * 2 || height < radius * 2
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,634 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
|
||||
|
||||
/**
|
||||
* SmartPanel for use within MainScreen
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
// Screen property provided by MainScreen
|
||||
property ShellScreen screen: null
|
||||
|
||||
// Panel content: Text, icons, etc...
|
||||
property Component panelContent: null
|
||||
|
||||
// Panel size properties
|
||||
property real preferredWidth: 700
|
||||
property real preferredHeight: 900
|
||||
property real preferredWidthRatio
|
||||
property real preferredHeightRatio
|
||||
property color panelBackgroundColor: Color.mSurface
|
||||
property color panelBorderColor: Color.mOutline
|
||||
property var buttonItem: null
|
||||
|
||||
// Anchoring properties
|
||||
property bool panelAnchorHorizontalCenter: false
|
||||
property bool panelAnchorVerticalCenter: false
|
||||
property bool panelAnchorTop: false
|
||||
property bool panelAnchorBottom: false
|
||||
property bool panelAnchorLeft: false
|
||||
property bool panelAnchorRight: false
|
||||
|
||||
// Button position properties
|
||||
property bool useButtonPosition: false
|
||||
property point buttonPosition: Qt.point(0, 0)
|
||||
property int buttonWidth: 0
|
||||
property int buttonHeight: 0
|
||||
|
||||
// Edge snapping: if panel is within this distance (in pixels) from a screen edge, snap
|
||||
property real edgeSnapDistance: 50
|
||||
|
||||
// Track whether panel is open
|
||||
property bool isPanelOpen: false
|
||||
|
||||
// Track actual visibility (delayed until content is loaded and sized)
|
||||
property bool isPanelVisible: false
|
||||
|
||||
// Keyboard event handlers - override these in specific panels to handle shortcuts
|
||||
// These are called from MainScreen's centralized shortcuts
|
||||
function onEscapePressed() {
|
||||
close()
|
||||
}
|
||||
function onTabPressed() {}
|
||||
function onShiftTabPressed() {}
|
||||
function onUpPressed() {}
|
||||
function onDownPressed() {}
|
||||
function onLeftPressed() {}
|
||||
function onRightPressed() {}
|
||||
function onReturnPressed() {}
|
||||
function onHomePressed() {}
|
||||
function onEndPressed() {}
|
||||
function onPageUpPressed() {}
|
||||
function onPageDownPressed() {}
|
||||
function onCtrlJPressed() {}
|
||||
function onCtrlKPressed() {}
|
||||
|
||||
// Expose panel region for click-through mask
|
||||
readonly property var panelRegion: panelContent.maskRegion
|
||||
|
||||
readonly property string barPosition: Settings.data.bar.position
|
||||
readonly property bool barIsVertical: barPosition === "left" || barPosition === "right"
|
||||
readonly property bool barFloating: Settings.data.bar.floating
|
||||
readonly property real barMarginH: barFloating ? Settings.data.bar.marginHorizontal * Style.marginXL : 0
|
||||
readonly property real barMarginV: barFloating ? Settings.data.bar.marginVertical * Style.marginXL : 0
|
||||
|
||||
// Helper to detect if any anchor is explicitly set
|
||||
readonly property bool hasExplicitHorizontalAnchor: panelAnchorHorizontalCenter || panelAnchorLeft || panelAnchorRight
|
||||
readonly property bool hasExplicitVerticalAnchor: panelAnchorVerticalCenter || panelAnchorTop || panelAnchorBottom
|
||||
|
||||
// Effective anchor properties (depend on couldAttach)
|
||||
// These are true when:
|
||||
// 1. Explicitly anchored, OR
|
||||
// 2. Using button position and bar is on that edge, OR
|
||||
// 3. Attached to bar with no explicit anchors (default centering behavior)
|
||||
readonly property bool effectivePanelAnchorTop: panelAnchorTop || (useButtonPosition && barPosition === "top") || (panelContent.couldAttach && !hasExplicitVerticalAnchor && barPosition === "top" && !barIsVertical)
|
||||
readonly property bool effectivePanelAnchorBottom: panelAnchorBottom || (useButtonPosition && barPosition === "bottom") || (panelContent.couldAttach && !hasExplicitVerticalAnchor && barPosition === "bottom" && !barIsVertical)
|
||||
readonly property bool effectivePanelAnchorLeft: panelAnchorLeft || (useButtonPosition && barPosition === "left") || (panelContent.couldAttach && !hasExplicitHorizontalAnchor && barPosition === "left" && barIsVertical)
|
||||
readonly property bool effectivePanelAnchorRight: panelAnchorRight || (useButtonPosition && barPosition === "right") || (panelContent.couldAttach && !hasExplicitHorizontalAnchor && barPosition === "right" && barIsVertical)
|
||||
|
||||
signal opened
|
||||
signal closed
|
||||
|
||||
// Panel visibility and sizing
|
||||
visible: isPanelVisible
|
||||
width: parent ? parent.width : 0
|
||||
height: parent ? parent.height : 0
|
||||
|
||||
// Panel control functions
|
||||
function toggle(buttonItem, buttonName) {
|
||||
if (!isPanelOpen) {
|
||||
open(buttonItem, buttonName)
|
||||
} else {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
function open(buttonItem, buttonName) {
|
||||
if (!buttonItem && buttonName) {
|
||||
buttonItem = BarService.lookupWidget(buttonName, screen.name)
|
||||
}
|
||||
|
||||
if (buttonItem) {
|
||||
root.buttonItem = buttonItem
|
||||
// Map button position to screen coordinates
|
||||
var buttonPos = buttonItem.mapToItem(null, 0, 0)
|
||||
root.buttonPosition = Qt.point(buttonPos.x, buttonPos.y)
|
||||
root.buttonWidth = buttonItem.width
|
||||
root.buttonHeight = buttonItem.height
|
||||
root.useButtonPosition = true
|
||||
} else {
|
||||
// No button provided: reset button position mode
|
||||
root.buttonItem = null
|
||||
root.useButtonPosition = false
|
||||
}
|
||||
|
||||
// Set isPanelOpen to trigger content loading, but don't show yet
|
||||
isPanelOpen = true
|
||||
|
||||
// Notify PanelService
|
||||
PanelService.willOpenPanel(root)
|
||||
|
||||
// Position and visibility will be set by Loader.onLoaded
|
||||
// This ensures no flicker from default size to content size
|
||||
}
|
||||
|
||||
function close() {
|
||||
// Set visibility to false - state transition will animate
|
||||
isPanelVisible = false
|
||||
isPanelOpen = false
|
||||
PanelService.closedPanel(root)
|
||||
closed()
|
||||
|
||||
Logger.d("SmartPanel", "Closing panel", objectName)
|
||||
}
|
||||
|
||||
function setPosition() {
|
||||
// Calculate panel dimensions first (needed for positioning)
|
||||
var w
|
||||
// Priority 1: Content-driven size (dynamic)
|
||||
if (contentLoader.item && contentLoader.item.contentPreferredWidth !== undefined) {
|
||||
w = contentLoader.item.contentPreferredWidth
|
||||
} // Priority 2: Ratio-based size
|
||||
else if (root.preferredWidthRatio !== undefined) {
|
||||
w = Math.round(Math.max((root.width || 1920) * root.preferredWidthRatio, root.preferredWidth))
|
||||
} // Priority 3: Static preferred width
|
||||
else {
|
||||
w = root.preferredWidth
|
||||
}
|
||||
var panelWidth = Math.min(w, (root.width || 1920) - Style.marginL * 2)
|
||||
|
||||
var h
|
||||
// Priority 1: Content-driven size (dynamic)
|
||||
if (contentLoader.item && contentLoader.item.contentPreferredHeight !== undefined) {
|
||||
h = contentLoader.item.contentPreferredHeight
|
||||
} // Priority 2: Ratio-based size
|
||||
else if (root.preferredHeightRatio !== undefined) {
|
||||
h = Math.round(Math.max((root.height || 1080) * root.preferredHeightRatio, root.preferredHeight))
|
||||
} // Priority 3: Static preferred height
|
||||
else {
|
||||
h = root.preferredHeight
|
||||
}
|
||||
var panelHeight = Math.min(h, (root.height || 1080) - Style.barHeight - Style.marginL * 2)
|
||||
|
||||
// Update panelBackground size
|
||||
panelBackground.width = panelWidth
|
||||
panelBackground.height = panelHeight
|
||||
|
||||
// Calculate position
|
||||
var calculatedX
|
||||
var calculatedY
|
||||
|
||||
// ===== X POSITIONING =====
|
||||
if (root.useButtonPosition && root.width > 0 && panelWidth > 0) {
|
||||
if (root.barIsVertical) {
|
||||
// For vertical bars
|
||||
if (panelContent.couldAttach) {
|
||||
// Attached panels: align with bar edge (left or right side)
|
||||
if (root.barPosition === "left") {
|
||||
var leftBarEdge = root.barMarginH + Style.barHeight
|
||||
calculatedX = leftBarEdge
|
||||
} else {
|
||||
// right
|
||||
var rightBarEdge = root.width - root.barMarginH - Style.barHeight
|
||||
calculatedX = rightBarEdge - panelWidth
|
||||
}
|
||||
} else {
|
||||
// Detached panels: center on button X position
|
||||
var panelX = root.buttonPosition.x + root.buttonWidth / 2 - panelWidth / 2
|
||||
var minX = Style.marginL
|
||||
var maxX = root.width - panelWidth - Style.marginL
|
||||
|
||||
// Account for vertical bar taking up space
|
||||
if (root.barPosition === "left") {
|
||||
minX = root.barMarginH + Style.barHeight + Style.marginL
|
||||
} else if (root.barPosition === "right") {
|
||||
maxX = root.width - root.barMarginH - Style.barHeight - panelWidth - Style.marginL
|
||||
}
|
||||
|
||||
panelX = Math.max(minX, Math.min(panelX, maxX))
|
||||
calculatedX = panelX
|
||||
}
|
||||
} else {
|
||||
// For horizontal bars, center panel on button X position
|
||||
var panelX = root.buttonPosition.x + root.buttonWidth / 2 - panelWidth / 2
|
||||
if (panelContent.couldAttach) {
|
||||
var cornerInset = root.barFloating ? Style.radiusL * 2 : 0
|
||||
var barLeftEdge = root.barMarginH + cornerInset
|
||||
var barRightEdge = root.width - root.barMarginH - cornerInset
|
||||
panelX = Math.max(barLeftEdge, Math.min(panelX, barRightEdge - panelWidth))
|
||||
} else {
|
||||
panelX = Math.max(Style.marginL, Math.min(panelX, root.width - panelWidth - Style.marginL))
|
||||
}
|
||||
calculatedX = panelX
|
||||
}
|
||||
} else {
|
||||
// Standard anchor positioning
|
||||
if (root.panelAnchorHorizontalCenter) {
|
||||
if (root.barIsVertical) {
|
||||
if (root.barPosition === "left") {
|
||||
var availableStart = root.barMarginH + Style.barHeight
|
||||
var availableWidth = root.width - availableStart
|
||||
calculatedX = availableStart + (availableWidth - panelWidth) / 2
|
||||
} else if (root.barPosition === "right") {
|
||||
var availableWidth = root.width - root.barMarginH - Style.barHeight
|
||||
calculatedX = (availableWidth - panelWidth) / 2
|
||||
} else {
|
||||
calculatedX = (root.width - panelWidth) / 2
|
||||
}
|
||||
} else {
|
||||
calculatedX = (root.width - panelWidth) / 2
|
||||
}
|
||||
} else if (root.effectivePanelAnchorRight) {
|
||||
if (panelContent.couldAttach && root.barIsVertical && root.barPosition === "right") {
|
||||
var rightBarEdge = root.width - root.barMarginH - Style.barHeight
|
||||
calculatedX = rightBarEdge - panelWidth
|
||||
} else if (panelContent.couldAttach) {
|
||||
calculatedX = root.width - panelWidth
|
||||
} else {
|
||||
calculatedX = root.width - panelWidth - Style.marginL
|
||||
}
|
||||
} else if (root.effectivePanelAnchorLeft) {
|
||||
if (panelContent.couldAttach && root.barIsVertical && root.barPosition === "left") {
|
||||
var leftBarEdge = root.barMarginH + Style.barHeight
|
||||
calculatedX = leftBarEdge
|
||||
} else if (panelContent.couldAttach) {
|
||||
calculatedX = 0
|
||||
} else {
|
||||
calculatedX = Style.marginL
|
||||
}
|
||||
} else {
|
||||
// No explicit anchor: default to centering on bar
|
||||
if (root.barIsVertical) {
|
||||
if (root.barPosition === "left") {
|
||||
var availableStart = root.barMarginH + Style.barHeight
|
||||
var availableWidth = root.width - availableStart - Style.marginL
|
||||
calculatedX = availableStart + (availableWidth - panelWidth) / 2
|
||||
} else {
|
||||
var availableWidth = root.width - root.barMarginH - Style.barHeight - Style.marginL
|
||||
calculatedX = Style.marginL + (availableWidth - panelWidth) / 2
|
||||
}
|
||||
} else {
|
||||
if (panelContent.couldAttach) {
|
||||
var cornerInset = Style.radiusL + (root.barFloating ? Style.radiusL : 0)
|
||||
var barLeftEdge = root.barMarginH + cornerInset
|
||||
var barRightEdge = root.width - root.barMarginH - cornerInset
|
||||
var centeredX = (root.width - panelWidth) / 2
|
||||
calculatedX = Math.max(barLeftEdge, Math.min(centeredX, barRightEdge - panelWidth))
|
||||
} else {
|
||||
calculatedX = (root.width - panelWidth) / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edge snapping for X
|
||||
if (panelContent.couldAttach && !root.barFloating && root.width > 0 && panelWidth > 0) {
|
||||
var leftEdgePos = root.barMarginH
|
||||
if (root.barPosition === "left") {
|
||||
leftEdgePos = root.barMarginH + Style.barHeight
|
||||
}
|
||||
|
||||
var rightEdgePos = root.width - root.barMarginH - panelWidth
|
||||
if (root.barPosition === "right") {
|
||||
rightEdgePos = root.width - root.barMarginH - Style.barHeight - panelWidth
|
||||
}
|
||||
|
||||
if (Math.abs(calculatedX - leftEdgePos) <= root.edgeSnapDistance) {
|
||||
calculatedX = leftEdgePos
|
||||
} else if (Math.abs(calculatedX - rightEdgePos) <= root.edgeSnapDistance) {
|
||||
calculatedX = rightEdgePos
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Y POSITIONING =====
|
||||
if (root.useButtonPosition && root.height > 0 && panelHeight > 0) {
|
||||
if (root.barPosition === "top") {
|
||||
var topBarEdge = root.barMarginV + Style.barHeight
|
||||
if (panelContent.couldAttach) {
|
||||
calculatedY = topBarEdge
|
||||
} else {
|
||||
calculatedY = topBarEdge + Style.marginM
|
||||
}
|
||||
} else if (root.barPosition === "bottom") {
|
||||
var bottomBarEdge = root.height - root.barMarginV - Style.barHeight
|
||||
if (panelContent.couldAttach) {
|
||||
calculatedY = bottomBarEdge - panelHeight
|
||||
} else {
|
||||
calculatedY = bottomBarEdge - panelHeight - Style.marginM
|
||||
}
|
||||
} else if (root.barIsVertical) {
|
||||
var panelY = root.buttonPosition.y + root.buttonHeight / 2 - panelHeight / 2
|
||||
var extraPadding = (panelContent.couldAttach && root.barFloating) ? Style.radiusL : 0
|
||||
if (panelContent.couldAttach) {
|
||||
var cornerInset = extraPadding + (root.barFloating ? Style.radiusL : 0)
|
||||
var barTopEdge = root.barMarginV + cornerInset
|
||||
var barBottomEdge = root.height - root.barMarginV - cornerInset
|
||||
panelY = Math.max(barTopEdge, Math.min(panelY, barBottomEdge - panelHeight))
|
||||
} else {
|
||||
panelY = Math.max(Style.marginL + extraPadding, Math.min(panelY, root.height - panelHeight - Style.marginL - extraPadding))
|
||||
}
|
||||
calculatedY = panelY
|
||||
}
|
||||
} else {
|
||||
// Standard anchor positioning
|
||||
var barOffset = 0
|
||||
if (!panelContent.couldAttach) {
|
||||
if (root.barPosition === "top") {
|
||||
barOffset = root.barMarginV + Style.barHeight + Style.marginM
|
||||
} else if (root.barPosition === "bottom") {
|
||||
barOffset = root.barMarginV + Style.barHeight + Style.marginM
|
||||
}
|
||||
} else {
|
||||
if (root.effectivePanelAnchorTop && root.barPosition === "top") {
|
||||
calculatedY = root.barMarginV + Style.barHeight
|
||||
} else if (root.effectivePanelAnchorBottom && root.barPosition === "bottom") {
|
||||
calculatedY = root.height - root.barMarginV - Style.barHeight - panelHeight
|
||||
} else if (!root.hasExplicitVerticalAnchor) {
|
||||
if (root.barPosition === "top") {
|
||||
calculatedY = root.barMarginV + Style.barHeight
|
||||
} else if (root.barPosition === "bottom") {
|
||||
calculatedY = root.height - root.barMarginV - Style.barHeight - panelHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (calculatedY === undefined) {
|
||||
if (root.panelAnchorVerticalCenter) {
|
||||
if (!root.barIsVertical) {
|
||||
if (root.barPosition === "top") {
|
||||
var availableStart = root.barMarginV + Style.barHeight
|
||||
var availableHeight = root.height - availableStart
|
||||
calculatedY = availableStart + (availableHeight - panelHeight) / 2
|
||||
} else if (root.barPosition === "bottom") {
|
||||
var availableHeight = root.height - root.barMarginV - Style.barHeight
|
||||
calculatedY = (availableHeight - panelHeight) / 2
|
||||
} else {
|
||||
calculatedY = (root.height - panelHeight) / 2
|
||||
}
|
||||
} else {
|
||||
calculatedY = (root.height - panelHeight) / 2
|
||||
}
|
||||
} else if (root.effectivePanelAnchorTop) {
|
||||
if (panelContent.couldAttach) {
|
||||
calculatedY = 0
|
||||
} else {
|
||||
var topBarOffset = (root.barPosition === "top") ? barOffset : 0
|
||||
calculatedY = topBarOffset + Style.marginL
|
||||
}
|
||||
} else if (root.effectivePanelAnchorBottom) {
|
||||
if (panelContent.couldAttach) {
|
||||
calculatedY = root.height - panelHeight
|
||||
} else {
|
||||
var bottomBarOffset = (root.barPosition === "bottom") ? barOffset : 0
|
||||
calculatedY = root.height - panelHeight - bottomBarOffset - Style.marginL
|
||||
}
|
||||
} else {
|
||||
if (root.barIsVertical) {
|
||||
if (panelContent.couldAttach) {
|
||||
var cornerInset = root.barFloating ? Style.radiusL * 2 : 0
|
||||
var barTopEdge = root.barMarginV + cornerInset
|
||||
var barBottomEdge = root.height - root.barMarginV - cornerInset
|
||||
var centeredY = (root.height - panelHeight) / 2
|
||||
calculatedY = Math.max(barTopEdge, Math.min(centeredY, barBottomEdge - panelHeight))
|
||||
} else {
|
||||
calculatedY = (root.height - panelHeight) / 2
|
||||
}
|
||||
} else {
|
||||
if (panelContent.couldAttach && !root.barIsVertical) {
|
||||
if (root.barPosition === "top") {
|
||||
calculatedY = root.barMarginV + Style.barHeight
|
||||
} else if (root.barPosition === "bottom") {
|
||||
calculatedY = root.height - root.barMarginV - Style.barHeight - panelHeight
|
||||
}
|
||||
} else {
|
||||
if (root.barPosition === "top") {
|
||||
calculatedY = barOffset + Style.marginL
|
||||
} else if (root.barPosition === "bottom") {
|
||||
calculatedY = Style.marginL
|
||||
} else {
|
||||
calculatedY = Style.marginL
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edge snapping for Y
|
||||
if (panelContent.couldAttach && !root.barFloating && root.height > 0 && panelHeight > 0) {
|
||||
var topEdgePos = root.barMarginV
|
||||
if (root.barPosition === "top") {
|
||||
topEdgePos = root.barMarginV + Style.barHeight
|
||||
}
|
||||
|
||||
var bottomEdgePos = root.height - root.barMarginV - panelHeight
|
||||
if (root.barPosition === "bottom") {
|
||||
bottomEdgePos = root.height - root.barMarginV - Style.barHeight - panelHeight
|
||||
}
|
||||
|
||||
if (Math.abs(calculatedY - topEdgePos) <= root.edgeSnapDistance) {
|
||||
calculatedY = topEdgePos
|
||||
} else if (Math.abs(calculatedY - bottomEdgePos) <= root.edgeSnapDistance) {
|
||||
calculatedY = bottomEdgePos
|
||||
}
|
||||
}
|
||||
|
||||
// Apply calculated positions
|
||||
panelBackground.x = calculatedX
|
||||
panelBackground.y = calculatedY
|
||||
|
||||
Logger.d("SmartPanel", "Position calculated:", calculatedX, calculatedY)
|
||||
Logger.d("SmartPanel", " Panel size:", panelWidth, "x", panelHeight)
|
||||
}
|
||||
|
||||
// Watch for changes in content-driven sizes and update position
|
||||
Connections {
|
||||
target: contentLoader.item
|
||||
ignoreUnknownSignals: true
|
||||
|
||||
function onContentPreferredWidthChanged() {
|
||||
if (root.isPanelOpen && root.isPanelVisible) {
|
||||
root.setPosition()
|
||||
}
|
||||
}
|
||||
|
||||
function onContentPreferredHeightChanged() {
|
||||
if (root.isPanelOpen && root.isPanelVisible) {
|
||||
root.setPosition()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Simple opacity-based animation
|
||||
opacity: isPanelVisible ? 1.0 : 0.0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------
|
||||
// Panel Content
|
||||
Item {
|
||||
id: panelContent
|
||||
anchors.fill: parent
|
||||
|
||||
// Screen-dependent attachment properties
|
||||
readonly property bool couldAttach: Settings.data.ui.panelsAttachedToBar
|
||||
readonly property bool couldAttachToBar: {
|
||||
if (!Settings.data.ui.panelsAttachedToBar || Settings.data.bar.backgroundOpacity < 1.0) {
|
||||
return false
|
||||
}
|
||||
|
||||
// A panel can only be attached to a bar if there is a bar on that screen
|
||||
var monitors = Settings.data.bar.monitors || []
|
||||
var result = monitors.length === 0 || monitors.includes(root.screen?.name || "")
|
||||
return result
|
||||
}
|
||||
|
||||
// Edge detection - detect if panel is touching screen edges
|
||||
readonly property bool touchingLeftEdge: couldAttach && panelBackground.x <= 1
|
||||
readonly property bool touchingRightEdge: couldAttach && (panelBackground.x + panelBackground.width) >= (root.width - 1)
|
||||
readonly property bool touchingTopEdge: couldAttach && panelBackground.y <= 1
|
||||
readonly property bool touchingBottomEdge: couldAttach && (panelBackground.y + panelBackground.height) >= (root.height - 1)
|
||||
|
||||
// Bar edge detection - detect if panel is touching bar edges (for cases where centered panels snap to bar due to height constraints)
|
||||
readonly property bool touchingTopBar: couldAttachToBar && root.barPosition === "top" && !root.barIsVertical && Math.abs(panelBackground.y - (root.barMarginV + Style.barHeight)) <= 1
|
||||
readonly property bool touchingBottomBar: couldAttachToBar && root.barPosition === "bottom" && !root.barIsVertical && Math.abs((panelBackground.y + panelBackground.height) - (root.height - root.barMarginV - Style.barHeight)) <= 1
|
||||
readonly property bool touchingLeftBar: couldAttachToBar && root.barPosition === "left" && root.barIsVertical && Math.abs(panelBackground.x - (root.barMarginH + Style.barHeight)) <= 1
|
||||
readonly property bool touchingRightBar: couldAttachToBar && root.barPosition === "right" && root.barIsVertical && Math.abs((panelBackground.x + panelBackground.width) - (root.width - root.barMarginH - Style.barHeight)) <= 1
|
||||
|
||||
// Expose panelBackground for mask region
|
||||
property alias maskRegion: panelBackground
|
||||
|
||||
// The actual panel background - provides geometry for PanelBackground rendering
|
||||
Item {
|
||||
id: panelBackground
|
||||
x: root.x
|
||||
y: root.y
|
||||
width: root.preferredWidth
|
||||
height: root.preferredHeight
|
||||
|
||||
// Corner states for PanelBackground to read
|
||||
// State -1: No radius (flat/square corner)
|
||||
// State 0: Normal (inner curve)
|
||||
// State 1: Horizontal inversion (outer curve on X-axis)
|
||||
// State 2: Vertical inversion (outer curve on Y-axis)
|
||||
|
||||
// Smart corner state calculation based on bar attachment and edge touching
|
||||
property int topLeftCornerState: {
|
||||
// Bar attachment: only attach to bar if bar opacity >= 1.0 (no color clash)
|
||||
var barInverted = panelContent.couldAttachToBar && ((root.barPosition === "top" && !root.barIsVertical && root.effectivePanelAnchorTop) || (root.barPosition === "left" && root.barIsVertical && root.effectivePanelAnchorLeft))
|
||||
// Also detect when panel touches bar edge (e.g., centered panel that's too tall)
|
||||
var barTouchInverted = panelContent.touchingTopBar || panelContent.touchingLeftBar
|
||||
// Screen edge contact: can attach to screen edges even if bar opacity < 1.0
|
||||
// For horizontal bars: invert when touching left/right edges
|
||||
// For vertical bars: invert when touching top/bottom edges
|
||||
var edgeInverted = panelContent.couldAttach && ((panelContent.touchingLeftEdge && !root.barIsVertical) || (panelContent.touchingTopEdge && root.barIsVertical))
|
||||
// Also invert when touching screen edge opposite to bar (e.g., bottom edge when bar is at top)
|
||||
var oppositeEdgeInverted = panelContent.couldAttach && (panelContent.touchingTopEdge && !root.barIsVertical && root.barPosition !== "top")
|
||||
|
||||
if (barInverted || barTouchInverted || edgeInverted || oppositeEdgeInverted) {
|
||||
// Determine direction: horizontal bars → horizontal curves, vertical bars → vertical curves
|
||||
// Screen edges: opposite - left/right edges → vertical curves, top/bottom edges → horizontal curves
|
||||
if (panelContent.touchingLeftEdge && !root.barIsVertical)
|
||||
return 2 // Vertical inversion
|
||||
if (panelContent.touchingTopEdge && root.barIsVertical)
|
||||
return 1 // Horizontal inversion
|
||||
return root.barIsVertical ? 2 : 1
|
||||
}
|
||||
return 0 // Normal corner
|
||||
}
|
||||
|
||||
property int topRightCornerState: {
|
||||
var barInverted = panelContent.couldAttachToBar && ((root.barPosition === "top" && !root.barIsVertical && root.effectivePanelAnchorTop) || (root.barPosition === "right" && root.barIsVertical && root.effectivePanelAnchorRight))
|
||||
var barTouchInverted = panelContent.touchingTopBar || panelContent.touchingRightBar
|
||||
var edgeInverted = panelContent.couldAttach && ((panelContent.touchingRightEdge && !root.barIsVertical) || (panelContent.touchingTopEdge && root.barIsVertical))
|
||||
var oppositeEdgeInverted = panelContent.couldAttach && (panelContent.touchingTopEdge && !root.barIsVertical && root.barPosition !== "top")
|
||||
|
||||
if (barInverted || barTouchInverted || edgeInverted || oppositeEdgeInverted) {
|
||||
if (panelContent.touchingRightEdge && !root.barIsVertical)
|
||||
return 2
|
||||
if (panelContent.touchingTopEdge && root.barIsVertical)
|
||||
return 1
|
||||
return root.barIsVertical ? 2 : 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
property int bottomLeftCornerState: {
|
||||
var barInverted = panelContent.couldAttachToBar && ((root.barPosition === "bottom" && !root.barIsVertical && root.effectivePanelAnchorBottom) || (root.barPosition === "left" && root.barIsVertical && root.effectivePanelAnchorLeft))
|
||||
var barTouchInverted = panelContent.touchingBottomBar || panelContent.touchingLeftBar
|
||||
var edgeInverted = panelContent.couldAttach && ((panelContent.touchingLeftEdge && !root.barIsVertical) || (panelContent.touchingBottomEdge && root.barIsVertical))
|
||||
var oppositeEdgeInverted = panelContent.couldAttach && (panelContent.touchingBottomEdge && !root.barIsVertical && root.barPosition !== "bottom")
|
||||
|
||||
if (barInverted || barTouchInverted || edgeInverted || oppositeEdgeInverted) {
|
||||
if (panelContent.touchingLeftEdge && !root.barIsVertical)
|
||||
return 2
|
||||
if (panelContent.touchingBottomEdge && root.barIsVertical)
|
||||
return 1
|
||||
return root.barIsVertical ? 2 : 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
property int bottomRightCornerState: {
|
||||
var barInverted = panelContent.couldAttachToBar && ((root.barPosition === "bottom" && !root.barIsVertical && root.effectivePanelAnchorBottom) || (root.barPosition === "right" && root.barIsVertical && root.effectivePanelAnchorRight))
|
||||
var barTouchInverted = panelContent.touchingBottomBar || panelContent.touchingRightBar
|
||||
var edgeInverted = panelContent.couldAttach && ((panelContent.touchingRightEdge && !root.barIsVertical) || (panelContent.touchingBottomEdge && root.barIsVertical))
|
||||
var oppositeEdgeInverted = panelContent.couldAttach && (panelContent.touchingBottomEdge && !root.barIsVertical && root.barPosition !== "bottom")
|
||||
|
||||
if (barInverted || barTouchInverted || edgeInverted || oppositeEdgeInverted) {
|
||||
if (panelContent.touchingRightEdge && !root.barIsVertical)
|
||||
return 2
|
||||
if (panelContent.touchingBottomEdge && root.barIsVertical)
|
||||
return 1
|
||||
return root.barIsVertical ? 2 : 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
// MouseArea to catch clicks on the panel and prevent them from reaching the background
|
||||
// This prevents closing the panel when clicking inside it
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
z: -1 // Behind content, but on the panel background
|
||||
onClicked: {
|
||||
|
||||
// Accept and ignore - prevents propagation to background
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Panel top content: Text, icons, etc...
|
||||
Loader {
|
||||
id: contentLoader
|
||||
active: isPanelOpen
|
||||
x: panelBackground.x
|
||||
y: panelBackground.y
|
||||
width: panelBackground.width
|
||||
height: panelBackground.height
|
||||
sourceComponent: root.panelContent
|
||||
|
||||
// When content finishes loading, make visible then calculate position
|
||||
onLoaded: {
|
||||
// Make panel visible FIRST so corner state bindings have valid context
|
||||
// This happens in the same frame, so no visual flicker
|
||||
isPanelVisible = true
|
||||
|
||||
// Calculate position with content-driven sizes if available
|
||||
// When position updates, corner state bindings re-evaluate with panel visible
|
||||
setPosition()
|
||||
|
||||
// Emit opened signal
|
||||
opened()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user