kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

#2499 #2184 Rework wallpaper parallax (#2641)

Browse Source
This commit is contained in:
Minh
2026-04-02 22:51:25 +02:00
committed by GitHub
parent e356dbb6f9 dfe9c876d2
commit d42c9b63be
3 changed files with 78 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dots/.config/quickshell/ii/modules/common/Config.qml
+1 -1
View File
@@ -217,7 +217,7 @@ Singleton {
property bool vertical: false property bool vertical: false
property bool autoVertical: false property bool autoVertical: false
property bool enableWorkspace: true property bool enableWorkspace: true
property real workspaceZoom: 1.07 // Relative to your screen, not wallpaper size property real workspaceZoom: 1.0 // Relative to wallpaper size
property bool enableSidebar: true property bool enableSidebar: true
property real widgetsFactor: 1.2 property real widgetsFactor: 1.2
} }
dots/.config/quickshell/ii/modules/ii/background/Background.qml
+75 -86
View File
@@ -37,6 +37,8 @@ Variants {
property list<var> relevantWindows: HyprlandData.windowList.filter(win => win.monitor == monitor?.id && win.workspace.id >= 0).sort((a, b) => a.workspace.id - b.workspace.id) property list<var> relevantWindows: HyprlandData.windowList.filter(win => win.monitor == monitor?.id && win.workspace.id >= 0).sort((a, b) => a.workspace.id - b.workspace.id)
property int firstWorkspaceId: relevantWindows[0]?.workspace.id || 1 property int firstWorkspaceId: relevantWindows[0]?.workspace.id || 1
property int lastWorkspaceId: relevantWindows[relevantWindows.length - 1]?.workspace.id || 10 property int lastWorkspaceId: relevantWindows[relevantWindows.length - 1]?.workspace.id || 10
property int workspaceChunkSize: Config?.options.bar.workspaces.shown ?? 10
property int totalWorkspaces: Math.ceil(lastWorkspaceId / workspaceChunkSize) * workspaceChunkSize
// Wallpaper // Wallpaper
property bool wallpaperIsVideo: Config.options.background.wallpaperPath.endsWith(".mp4") || Config.options.background.wallpaperPath.endsWith(".webm") || Config.options.background.wallpaperPath.endsWith(".mkv") || Config.options.background.wallpaperPath.endsWith(".avi") || Config.options.background.wallpaperPath.endsWith(".mov") property bool wallpaperIsVideo: Config.options.background.wallpaperPath.endsWith(".mp4") || Config.options.background.wallpaperPath.endsWith(".webm") || Config.options.background.wallpaperPath.endsWith(".mkv") || Config.options.background.wallpaperPath.endsWith(".avi") || Config.options.background.wallpaperPath.endsWith(".mov")
property string wallpaperPath: wallpaperIsVideo ? Config.options.background.thumbnailPath : Config.options.background.wallpaperPath property string wallpaperPath: wallpaperIsVideo ? Config.options.background.thumbnailPath : Config.options.background.wallpaperPath
@@ -46,13 +48,15 @@ Variants {
const sensitiveNetwork = (CF.StringUtils.stringListContainsSubstring(Network.networkName.toLowerCase(), Config.options.workSafety.triggerCondition.networkNameKeywords)); const sensitiveNetwork = (CF.StringUtils.stringListContainsSubstring(Network.networkName.toLowerCase(), Config.options.workSafety.triggerCondition.networkNameKeywords));
return enabled && sensitiveWallpaper && sensitiveNetwork; return enabled && sensitiveWallpaper && sensitiveNetwork;
} }
property real wallpaperToScreenRatio: Math.min(wallpaperWidth / screen.width, wallpaperHeight / screen.height) readonly property real parallaxRation: 1.1
property real preferredWallpaperScale: Config.options.background.parallax.workspaceZoom readonly property real additionalScaleFactor: Config.options.background.parallax.workspaceZoom
property real effectiveWallpaperScale: 1 // Some reasonable init value, to be updated property real effectiveWallpaperScale: 1 // Some reasonable init value, to be updated
property int wallpaperWidth: modelData.width // Some reasonable init value, to be updated property int wallpaperWidth: modelData.width // Some reasonable init value, to be updated
property int wallpaperHeight: modelData.height // Some reasonable init value, to be updated property int wallpaperHeight: modelData.height // Some reasonable init value, to be updated
property real movableXSpace: ((wallpaperWidth / wallpaperToScreenRatio * effectiveWallpaperScale) - screen.width) / 2 property real scaledWallpaperWidth: wallpaperWidth * effectiveWallpaperScale
property real movableYSpace: ((wallpaperHeight / wallpaperToScreenRatio * effectiveWallpaperScale) - screen.height) / 2 property real scaledWallpaperHeight: wallpaperHeight * effectiveWallpaperScale
property real parallaxTotalPixelsX: Math.max(0, scaledWallpaperWidth - screen.width)
property real parallaxTotalPixelsY: Math.max(0, scaledWallpaperHeight - screen.height)
readonly property bool verticalParallax: (Config.options.background.parallax.autoVertical && wallpaperHeight > wallpaperWidth) || Config.options.background.parallax.vertical readonly property bool verticalParallax: (Config.options.background.parallax.autoVertical && wallpaperHeight > wallpaperWidth) || Config.options.background.parallax.vertical
// Colors // Colors
property bool shouldBlur: (GlobalStates.screenLocked && Config.options.lock.blur.enable) property bool shouldBlur: (GlobalStates.screenLocked && Config.options.lock.blur.enable)
@@ -111,20 +115,18 @@ Variants {
bgRoot.wallpaperWidth = width; bgRoot.wallpaperWidth = width;
bgRoot.wallpaperHeight = height; bgRoot.wallpaperHeight = height;
if (width <= screenWidth || height <= screenHeight) { // Perfect image; scale = 1
// Undersized/perfectly sized wallpapers // Small picture; scale > 1; will zoom in the picture
bgRoot.effectiveWallpaperScale = Math.max(screenWidth / width, screenHeight / height); // Big picture; scale < 1; will zoom out the picture
} else { // Choose max number so every side will fit
// Oversized = can be zoomed for parallax, yay const minSuitableScale = Math.max(screenWidth / width, screenHeight / height);
bgRoot.effectiveWallpaperScale = Math.min(bgRoot.preferredWallpaperScale, width / screenWidth, height / screenHeight); bgRoot.effectiveWallpaperScale = minSuitableScale * bgRoot.additionalScaleFactor * bgRoot.parallaxRation;
}
} }
} }
} }
Item { Item {
anchors.fill: parent anchors.fill: parent
clip: true
// Wallpaper // Wallpaper
StyledImage { StyledImage {
@@ -133,32 +135,52 @@ Variants {
opacity: (status === Image.Ready && !bgRoot.wallpaperIsVideo) ? 1 : 0 opacity: (status === Image.Ready && !bgRoot.wallpaperIsVideo) ? 1 : 0
cache: false cache: false
smooth: false smooth: false
// Range = groups that workspaces span on
property int chunkSize: Config?.options.bar.workspaces.shown ?? 10 property int workspaceIndex: (bgRoot.monitor.activeWorkspace?.id ?? 1) - 1
property int lower: Math.floor(bgRoot.firstWorkspaceId / chunkSize) * chunkSize property real middleFraction: 0.5
property int upper: Math.ceil(bgRoot.lastWorkspaceId / chunkSize) * chunkSize property real fraction: {
property int range: upper - lower // 0 - start of the picture
property real valueX: { // 1 - end of the picture
let result = 0.5; if (bgRoot.totalWorkspaces <= 1) {
return middleFraction;
}
return Math.max(0, Math.min(1, workspaceIndex / (bgRoot.totalWorkspaces - 1)));
}
property real usedFractionX: {
let usedFraction = middleFraction;
if (Config.options.background.parallax.enableWorkspace && !bgRoot.verticalParallax) { if (Config.options.background.parallax.enableWorkspace && !bgRoot.verticalParallax) {
result = ((bgRoot.monitor.activeWorkspace?.id - lower) / range); usedFraction = fraction;
} }
if (Config.options.background.parallax.enableSidebar) { if (Config.options.background.parallax.enableSidebar) {
result += (0.15 * GlobalStates.sidebarRightOpen - 0.15 * GlobalStates.sidebarLeftOpen); let sidebarFraction = bgRoot.parallaxRation / bgRoot.workspaceChunkSize / 2;
usedFraction += (sidebarFraction * GlobalStates.sidebarRightOpen - sidebarFraction * GlobalStates.sidebarLeftOpen);
} }
return result; return Math.max(0, Math.min(1, usedFraction));
} }
property real valueY: { property real usedFractionY: {
let result = 0.5; let usedFraction = middleFraction;
if (Config.options.background.parallax.enableWorkspace && bgRoot.verticalParallax) { if (Config.options.background.parallax.enableWorkspace && bgRoot.verticalParallax) {
result = ((bgRoot.monitor.activeWorkspace?.id - lower) / range); usedFraction = fraction;
} }
return result; return Math.max(0, Math.min(1, usedFraction));
} }
property real effectiveValueX: Math.max(0, Math.min(1, valueX))
property real effectiveValueY: Math.max(0, Math.min(1, valueY)) x: {
x: -(bgRoot.movableXSpace) - (effectiveValueX - 0.5) * 2 * bgRoot.movableXSpace if (bgRoot.screen.width > bgRoot.scaledWallpaperWidth) {
y: -(bgRoot.movableYSpace) - (effectiveValueY - 0.5) * 2 * bgRoot.movableYSpace // Center the picture
return (bgRoot.screen.width - bgRoot.scaledWallpaperWidth) / 2;
}
return - bgRoot.parallaxTotalPixelsX * usedFractionX;
}
y: {
if (bgRoot.screen.height > bgRoot.scaledWallpaperHeight) {
// Center the picture
return (bgRoot.screen.height - bgRoot.scaledWallpaperHeight) / 2;
}
return - bgRoot.parallaxTotalPixelsY * usedFractionY;
}
source: bgRoot.wallpaperSafetyTriggered ? "" : bgRoot.wallpaperPath source: bgRoot.wallpaperSafetyTriggered ? "" : bgRoot.wallpaperPath
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
Behavior on x { Behavior on x {
@@ -174,11 +196,11 @@ Variants {
} }
} }
sourceSize { sourceSize {
width: bgRoot.screen.width * bgRoot.effectiveWallpaperScale * bgRoot.monitor.scale width: bgRoot.scaledWallpaperWidth
height: bgRoot.screen.height * bgRoot.effectiveWallpaperScale * bgRoot.monitor.scale height: bgRoot.scaledWallpaperHeight
} }
width: bgRoot.wallpaperWidth / bgRoot.wallpaperToScreenRatio * bgRoot.effectiveWallpaperScale width: bgRoot.scaledWallpaperWidth
height: bgRoot.wallpaperHeight / bgRoot.wallpaperToScreenRatio * bgRoot.effectiveWallpaperScale height: bgRoot.scaledWallpaperHeight
} }
Loader { Loader {
@@ -209,53 +231,20 @@ Variants {
WidgetCanvas { WidgetCanvas {
id: widgetCanvas id: widgetCanvas
anchors { width: parent.width
left: wallpaper.left height: parent.height
right: wallpaper.right readonly property real parallaxFactor: {
top: wallpaper.top var f = Config.options.background.parallax.widgetsFactor;
bottom: wallpaper.bottom return f / Config.options.background.parallax.workspaceZoom;
horizontalCenter: undefined
verticalCenter: undefined
readonly property real parallaxFactor: Config.options.background.parallax.widgetsFactor
leftMargin: {
const xOnWallpaper = bgRoot.movableXSpace;
const extraMove = (wallpaper.effectiveValueX * 2 * bgRoot.movableXSpace) * (parallaxFactor - 1);
return xOnWallpaper - extraMove;
}
topMargin: {
const yOnWallpaper = bgRoot.movableYSpace;
const extraMove = (wallpaper.effectiveValueY * 2 * bgRoot.movableYSpace) * (parallaxFactor - 1);
return yOnWallpaper - extraMove;
}
Behavior on leftMargin {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
Behavior on topMargin {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
}
width: wallpaper.width
height: wallpaper.height
states: State {
name: "centered"
when: GlobalStates.screenLocked || bgRoot.wallpaperSafetyTriggered
PropertyChanges {
target: widgetCanvas
width: parent.width
height: parent.height
}
AnchorChanges {
target: widgetCanvas
anchors {
left: undefined
right: undefined
top: undefined
bottom: undefined
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
} }
readonly property real baseWallpaperOffsetX: (bgRoot.screen.width - bgRoot.scaledWallpaperWidth) / 2
readonly property real baseWallpaperOffsetY: (bgRoot.screen.height - bgRoot.scaledWallpaperHeight) / 2
readonly property real wallpaperTotalOffsetX: wallpaper.x - baseWallpaperOffsetX
readonly property real wallpaperTotalOffsetY: wallpaper.y - baseWallpaperOffsetY
readonly property bool locked: GlobalStates.screenLocked
x: wallpaperTotalOffsetX * parallaxFactor * !locked
y: wallpaperTotalOffsetY * parallaxFactor * !locked
transitions: Transition { transitions: Transition {
PropertyAnimation { PropertyAnimation {
properties: "width,height" properties: "width,height"
@@ -275,9 +264,9 @@ Variants {
sourceComponent: WeatherWidget { sourceComponent: WeatherWidget {
screenWidth: bgRoot.screen.width screenWidth: bgRoot.screen.width
screenHeight: bgRoot.screen.height screenHeight: bgRoot.screen.height
scaledScreenWidth: bgRoot.screen.width / bgRoot.effectiveWallpaperScale scaledScreenWidth: bgRoot.screen.width
scaledScreenHeight: bgRoot.screen.height / bgRoot.effectiveWallpaperScale scaledScreenHeight: bgRoot.screen.height
wallpaperScale: bgRoot.effectiveWallpaperScale wallpaperScale: 1
} }
} }
@@ -286,9 +275,9 @@ Variants {
sourceComponent: ClockWidget { sourceComponent: ClockWidget {
screenWidth: bgRoot.screen.width screenWidth: bgRoot.screen.width
screenHeight: bgRoot.screen.height screenHeight: bgRoot.screen.height
scaledScreenWidth: bgRoot.screen.width / bgRoot.effectiveWallpaperScale scaledScreenWidth: bgRoot.screen.width
scaledScreenHeight: bgRoot.screen.height / bgRoot.effectiveWallpaperScale scaledScreenHeight: bgRoot.screen.height
wallpaperScale: bgRoot.effectiveWallpaperScale wallpaperScale: 1
wallpaperSafetyTriggered: bgRoot.wallpaperSafetyTriggered wallpaperSafetyTriggered: bgRoot.wallpaperSafetyTriggered
} }
} }
dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml
+2 -2
View File
@@ -43,8 +43,8 @@ ContentPage {
icon: "loupe" icon: "loupe"
text: Translation.tr("Preferred wallpaper zoom (%)") text: Translation.tr("Preferred wallpaper zoom (%)")
value: Config.options.background.parallax.workspaceZoom * 100 value: Config.options.background.parallax.workspaceZoom * 100
from: 100 from: 10
to: 150 to: 200
stepSize: 1 stepSize: 1
onValueChanged: { onValueChanged: {
Config.options.background.parallax.workspaceZoom = value / 100; Config.options.background.parallax.workspaceZoom = value / 100;