mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-06 05:25:41 -05:00
442 lines
15 KiB
QML
442 lines
15 KiB
QML
import QtQuick
|
|
import qs.Common
|
|
import qs.Services
|
|
|
|
Item {
|
|
id: root
|
|
|
|
required property var barWindow
|
|
required property var axis
|
|
required property var barConfig
|
|
|
|
anchors.fill: parent
|
|
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
readonly property bool gothEnabled: barConfig?.gothCornersEnabled ?? false
|
|
anchors.leftMargin: -(gothEnabled && axis.isVertical && axis.edge === "right" ? barWindow._wingR : 0)
|
|
anchors.rightMargin: -(gothEnabled && axis.isVertical && axis.edge === "left" ? barWindow._wingR : 0)
|
|
anchors.topMargin: -(gothEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
|
|
anchors.bottomMargin: -(gothEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
|
|
|
|
readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
|
|
|
|
function requestRepaint() {
|
|
debounceTimer.restart();
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
|
z: -999
|
|
onClicked: {
|
|
const activePopout = PopoutManager.getActivePopout(barWindow.screen);
|
|
if (activePopout) {
|
|
if (activePopout.dashVisible !== undefined) {
|
|
activePopout.dashVisible = false;
|
|
} else if (activePopout.notificationHistoryVisible !== undefined) {
|
|
activePopout.notificationHistoryVisible = false;
|
|
} else {
|
|
activePopout.close();
|
|
}
|
|
}
|
|
TrayMenuManager.closeAllMenus();
|
|
}
|
|
}
|
|
|
|
Timer {
|
|
id: debounceTimer
|
|
interval: 50
|
|
repeat: false
|
|
onTriggered: {
|
|
barShape.requestPaint();
|
|
barTint.requestPaint();
|
|
barBorder.requestPaint();
|
|
}
|
|
}
|
|
|
|
Canvas {
|
|
id: barShape
|
|
anchors.fill: parent
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
renderStrategy: Canvas.Cooperative
|
|
|
|
readonly property real correctWidth: Theme.px(root.width, dpr)
|
|
readonly property real correctHeight: Theme.px(root.height, dpr)
|
|
canvasSize: Qt.size(correctWidth, correctHeight)
|
|
|
|
property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
|
|
property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
|
|
|
|
onWingChanged: root.requestRepaint()
|
|
onRtChanged: root.requestRepaint()
|
|
onCorrectWidthChanged: root.requestRepaint()
|
|
onCorrectHeightChanged: root.requestRepaint()
|
|
onVisibleChanged: if (visible)
|
|
root.requestRepaint()
|
|
Component.onCompleted: root.requestRepaint()
|
|
|
|
Connections {
|
|
target: root
|
|
function onDprChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: barWindow
|
|
function on_BgColorChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onGothCornersEnabledChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onWingtipsRadiusChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: Theme
|
|
function onIsLightModeChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onSurfaceContainerChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d");
|
|
const W = barWindow.isVertical ? correctHeight : correctWidth;
|
|
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
|
|
const R = wing;
|
|
const RT = rt;
|
|
const H = H_raw - (R > 0 ? R : 0);
|
|
const barPos = barConfig?.position ?? 0;
|
|
const isTop = barPos === SettingsData.Position.Top;
|
|
const isBottom = barPos === SettingsData.Position.Bottom;
|
|
const isLeft = barPos === SettingsData.Position.Left;
|
|
const isRight = barPos === SettingsData.Position.Right;
|
|
|
|
function drawTopPath() {
|
|
ctx.beginPath();
|
|
ctx.moveTo(RT, 0);
|
|
ctx.lineTo(W - RT, 0);
|
|
ctx.arcTo(W, 0, W, RT, RT);
|
|
ctx.lineTo(W, H);
|
|
|
|
if (R > 0) {
|
|
ctx.lineTo(W, H + R);
|
|
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
|
|
ctx.lineTo(R, H);
|
|
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
|
|
ctx.lineTo(0, H + R);
|
|
} else {
|
|
ctx.lineTo(W, H - RT);
|
|
ctx.arcTo(W, H, W - RT, H, RT);
|
|
ctx.lineTo(RT, H);
|
|
ctx.arcTo(0, H, 0, H - RT, RT);
|
|
}
|
|
|
|
ctx.lineTo(0, RT);
|
|
ctx.arcTo(0, 0, RT, 0, RT);
|
|
ctx.closePath();
|
|
}
|
|
|
|
ctx.reset();
|
|
ctx.clearRect(0, 0, W, H_raw);
|
|
|
|
ctx.save();
|
|
if (isBottom) {
|
|
ctx.translate(W, H_raw);
|
|
ctx.rotate(Math.PI);
|
|
} else if (isLeft) {
|
|
ctx.translate(0, W);
|
|
ctx.rotate(-Math.PI / 2);
|
|
} else if (isRight) {
|
|
ctx.translate(H_raw, 0);
|
|
ctx.rotate(Math.PI / 2);
|
|
}
|
|
|
|
drawTopPath();
|
|
ctx.restore();
|
|
|
|
ctx.fillStyle = barWindow._bgColor;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
Canvas {
|
|
id: barTint
|
|
anchors.fill: parent
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
renderStrategy: Canvas.Cooperative
|
|
|
|
readonly property real correctWidth: Theme.px(root.width, dpr)
|
|
readonly property real correctHeight: Theme.px(root.height, dpr)
|
|
canvasSize: Qt.size(correctWidth, correctHeight)
|
|
|
|
property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
|
|
property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
|
|
property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
|
|
|
|
onWingChanged: root.requestRepaint()
|
|
onRtChanged: root.requestRepaint()
|
|
onAlphaTintChanged: root.requestRepaint()
|
|
onCorrectWidthChanged: root.requestRepaint()
|
|
onCorrectHeightChanged: root.requestRepaint()
|
|
onVisibleChanged: if (visible)
|
|
root.requestRepaint()
|
|
Component.onCompleted: root.requestRepaint()
|
|
|
|
Connections {
|
|
target: root
|
|
function onDprChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: barWindow
|
|
function on_BgColorChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onGothCornersEnabledChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onWingtipsRadiusChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: Theme
|
|
function onIsLightModeChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onSurfaceChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d");
|
|
const W = barWindow.isVertical ? correctHeight : correctWidth;
|
|
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
|
|
const R = wing;
|
|
const RT = rt;
|
|
const H = H_raw - (R > 0 ? R : 0);
|
|
const barPos = barConfig?.position ?? 0;
|
|
const isTop = barPos === SettingsData.Position.Top;
|
|
const isBottom = barPos === SettingsData.Position.Bottom;
|
|
const isLeft = barPos === SettingsData.Position.Left;
|
|
const isRight = barPos === SettingsData.Position.Right;
|
|
|
|
function drawTopPath() {
|
|
ctx.beginPath();
|
|
ctx.moveTo(RT, 0);
|
|
ctx.lineTo(W - RT, 0);
|
|
ctx.arcTo(W, 0, W, RT, RT);
|
|
ctx.lineTo(W, H);
|
|
|
|
if (R > 0) {
|
|
ctx.lineTo(W, H + R);
|
|
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
|
|
ctx.lineTo(R, H);
|
|
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
|
|
ctx.lineTo(0, H + R);
|
|
} else {
|
|
ctx.lineTo(W, H - RT);
|
|
ctx.arcTo(W, H, W - RT, H, RT);
|
|
ctx.lineTo(RT, H);
|
|
ctx.arcTo(0, H, 0, H - RT, RT);
|
|
}
|
|
|
|
ctx.lineTo(0, RT);
|
|
ctx.arcTo(0, 0, RT, 0, RT);
|
|
ctx.closePath();
|
|
}
|
|
|
|
ctx.reset();
|
|
ctx.clearRect(0, 0, W, H_raw);
|
|
|
|
ctx.save();
|
|
if (isBottom) {
|
|
ctx.translate(W, H_raw);
|
|
ctx.rotate(Math.PI);
|
|
} else if (isLeft) {
|
|
ctx.translate(0, W);
|
|
ctx.rotate(-Math.PI / 2);
|
|
} else if (isRight) {
|
|
ctx.translate(H_raw, 0);
|
|
ctx.rotate(Math.PI / 2);
|
|
}
|
|
|
|
drawTopPath();
|
|
ctx.restore();
|
|
|
|
ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
Canvas {
|
|
id: barBorder
|
|
anchors.fill: parent
|
|
visible: barConfig?.borderEnabled ?? false
|
|
renderTarget: Canvas.FramebufferObject
|
|
renderStrategy: Canvas.Cooperative
|
|
|
|
readonly property real correctWidth: Theme.px(root.width, dpr)
|
|
readonly property real correctHeight: Theme.px(root.height, dpr)
|
|
canvasSize: Qt.size(correctWidth, correctHeight)
|
|
|
|
property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
|
|
property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
|
|
property bool borderEnabled: barConfig?.borderEnabled ?? false
|
|
|
|
antialiasing: rt > 0 || wing > 0
|
|
|
|
onWingChanged: root.requestRepaint()
|
|
onRtChanged: root.requestRepaint()
|
|
onBorderEnabledChanged: root.requestRepaint()
|
|
onCorrectWidthChanged: root.requestRepaint()
|
|
onCorrectHeightChanged: root.requestRepaint()
|
|
onVisibleChanged: if (visible)
|
|
root.requestRepaint()
|
|
Component.onCompleted: root.requestRepaint()
|
|
|
|
Connections {
|
|
target: root
|
|
function onDprChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: Theme
|
|
function onIsLightModeChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onSurfaceTextChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onPrimaryChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onSecondaryChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onOutlineChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: barWindow
|
|
function onGothCornersEnabledChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
function onWingtipsRadiusChanged() {
|
|
root.requestRepaint();
|
|
}
|
|
}
|
|
|
|
onPaint: {
|
|
if (!borderEnabled)
|
|
return;
|
|
const ctx = getContext("2d");
|
|
const W = barWindow.isVertical ? correctHeight : correctWidth;
|
|
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
|
|
const R = wing;
|
|
const RT = rt;
|
|
const H = H_raw - (R > 0 ? R : 0);
|
|
const barPos = barConfig?.position ?? 0;
|
|
const isTop = barPos === SettingsData.Position.Top;
|
|
const isBottom = barPos === SettingsData.Position.Bottom;
|
|
const isLeft = barPos === SettingsData.Position.Left;
|
|
const isRight = barPos === SettingsData.Position.Right;
|
|
|
|
const spacing = barConfig?.spacing ?? 4;
|
|
|
|
ctx.reset();
|
|
ctx.clearRect(0, 0, W, H_raw);
|
|
|
|
ctx.save();
|
|
if (isBottom) {
|
|
ctx.translate(W, H_raw);
|
|
ctx.rotate(Math.PI);
|
|
} else if (isLeft) {
|
|
ctx.translate(0, W);
|
|
ctx.rotate(-Math.PI / 2);
|
|
} else if (isRight) {
|
|
ctx.translate(H_raw, 0);
|
|
ctx.rotate(Math.PI / 2);
|
|
}
|
|
|
|
const uiThickness = Math.max(1, barConfig?.borderThickness ?? 1);
|
|
const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)));
|
|
|
|
const key = barConfig?.borderColor || "surfaceText";
|
|
const base = (key === "surfaceText") ? Theme.surfaceText : (key === "primary") ? Theme.primary : Theme.secondary;
|
|
const color = Theme.withAlpha(base, barConfig?.borderOpacity ?? 1.0);
|
|
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = devThickness * 2;
|
|
ctx.lineJoin = "round";
|
|
ctx.lineCap = "butt";
|
|
|
|
function drawFullShape() {
|
|
ctx.beginPath();
|
|
ctx.moveTo(RT, 0);
|
|
ctx.lineTo(W - RT, 0);
|
|
ctx.arcTo(W, 0, W, RT, RT);
|
|
ctx.lineTo(W, H);
|
|
|
|
if (R > 0) {
|
|
ctx.lineTo(W, H + R);
|
|
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
|
|
ctx.lineTo(R, H);
|
|
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
|
|
ctx.lineTo(0, H + R);
|
|
} else {
|
|
ctx.lineTo(W, H - RT);
|
|
ctx.arcTo(W, H, W - RT, H, RT);
|
|
ctx.lineTo(RT, H);
|
|
ctx.arcTo(0, H, 0, H - RT, RT);
|
|
}
|
|
|
|
ctx.lineTo(0, RT);
|
|
ctx.arcTo(0, 0, RT, 0, RT);
|
|
ctx.closePath();
|
|
}
|
|
|
|
drawFullShape();
|
|
ctx.clip();
|
|
|
|
if (spacing > 0) {
|
|
drawFullShape();
|
|
} else {
|
|
ctx.beginPath();
|
|
if (R > 0) {
|
|
ctx.moveTo(W, H + R);
|
|
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
|
|
ctx.lineTo(R, H);
|
|
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
|
|
} else {
|
|
ctx.moveTo(W, H - RT);
|
|
ctx.arcTo(W, H, W - RT, H, RT);
|
|
ctx.lineTo(RT, H);
|
|
ctx.arcTo(0, H, 0, H - RT, RT);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
}
|
|
}
|
|
}
|