crop region now correct

2026-05-21 15:51:42 +02:00
parent 06c402c050
commit 8dbb88e136
8 changed files with 498 additions and 124 deletions
@@ -0,0 +1,200 @@
+import Quickshell
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Layouts
+
+Variants {
+	model: Quickshell.screens
+
+	PanelWindow {
+		id: root
+
+		required property var modelData
+		readonly property list<ShellScreen> screens: Quickshell.screens
+
+		implicitWidth: 300
+		screen: modelData
+
+		anchors {
+			bottom: true
+			left: false
+			right: true
+			top: true
+		}
+
+		ColumnLayout {
+			id: layout
+
+			anchors.fill: parent
+
+			Repeater {
+				model: Quickshell.screens
+
+				Item {
+					id: delegate
+
+					required property ShellScreen modelData
+
+					Layout.fillHeight: true
+					Layout.fillWidth: true
+
+					Image {
+						id: scaledImg
+
+						property var displayData
+						readonly property real imageRatio: scaledImg.sourceSize.width / scaledImg.sourceSize.height
+						property real monitorScale
+						readonly property real scaleDownX: scaledImg.paintedWidth / scaledImg.sourceSize.width
+						readonly property real scaleDownY: scaledImg.paintedHeight / scaledImg.sourceSize.height
+						readonly property real scaleX: (scaledImg.sourceSize.width * monitorScale) / scaledImg.paintedWidth
+						readonly property real scaleY: (scaledImg.sourceSize.height * monitorScale) / scaledImg.paintedHeight
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						fillMode: Image.PreserveAspectFit
+						height: width / imageRatio
+						source: "/mnt/IronWolf/SDImages/SWWW_Wals/wallhaven-43dyq6.jpg"
+
+						Component.onCompleted: {
+							Hyprland.refreshMonitors();
+							monitorScale = Hyprland.monitorFor(delegate.modelData).scale;
+						}
+						onScaleYChanged: console.log(scaleX, scaleY, "scale")
+						onStatusChanged: {
+							if (scaledImg.status == Image.Ready) {
+								console.log(scaledImg.sourceSize.width, scaledImg.sourceSize.height, scaledImg.paintedWidth, scaledImg.paintedHeight, delegate.modelData.width, delegate.modelData.height);
+							}
+						}
+
+						Connections {
+							function onLoaded(): void {
+								scaledImg.displayData = Wallpapers.getCrop(delegate.modelData.name);
+								cropRect.restoreFromData();
+							}
+
+							target: Wallpapers.monitorCrops
+						}
+
+						Rectangle {
+							id: cropRect
+
+							property real aspectRatio: delegate.modelData.width / delegate.modelData.height
+							readonly property real baseHeight: baseWidth / aspectRatio
+
+							// PreserveAspectFit baseline at zoom = 1
+							readonly property real baseWidth: {
+								let fittedHeight = scaledImg.paintedHeight;
+								let fittedWidth = fittedHeight * aspectRatio;
+
+								if (fittedWidth > scaledImg.paintedWidth) {
+									fittedWidth = scaledImg.paintedWidth;
+									fittedHeight = fittedWidth / aspectRatio;
+								}
+
+								return fittedWidth;
+							}
+
+							// actual visible image origin inside Image item
+							readonly property real imageX: (scaledImg.width - scaledImg.paintedWidth) / 2
+							readonly property real imageY: (scaledImg.height - scaledImg.paintedHeight) / 2
+							property real zoom: scaledImg.displayData.zoom
+
+							function centerInImage() {
+								x = imageX + (scaledImg.paintedWidth - width) / 2;
+								y = imageY + (scaledImg.paintedHeight - height) / 2;
+							}
+
+							function clampToBounds() {
+								x = Math.max(imageX, Math.min(x, imageX + scaledImg.paintedWidth - width));
+
+								y = Math.max(imageY, Math.min(y, imageY + scaledImg.paintedHeight - height));
+							}
+
+							function restoreFromData() {
+								let data = scaledImg.displayData;
+
+								if (data && data.scaledX !== 0 || data.scaledY !== 0 || data.scaledWidth !== 0 || data.scaledHeight !== 0) {
+									console.log("true");
+									zoom = data.zoom ?? 1.0;
+
+									// width/height are authoritative
+									width = data.scaledWidth;
+									height = data.scaledHeight;
+
+									x = imageX + data.scaledX;
+									y = imageY + data.scaledY;
+
+									clampToBounds();
+								} else {
+									console.log("false");
+									zoom = 1.0;
+									centerInImage();
+								}
+							}
+
+							border.color: "lime"
+							border.width: 2
+							color: "transparent"
+							height: baseHeight / zoom
+							width: baseWidth / zoom
+
+							onHeightChanged: clampToBounds()
+							onWidthChanged: clampToBounds()
+						}
+
+						MouseArea {
+							id: mouse
+
+							function updateCrop(mouseX, mouseY) {
+								let nx = mouseX - cropRect.width * 0.5;
+								let ny = mouseY - cropRect.height * 0.5;
+
+								nx = Math.max(cropRect.imageX, Math.min(nx, cropRect.imageX + scaledImg.paintedWidth - cropRect.width));
+
+								ny = Math.max(cropRect.imageY, Math.min(ny, cropRect.imageY + scaledImg.paintedHeight - cropRect.height));
+
+								cropRect.x = nx;
+								cropRect.y = ny;
+							}
+
+							anchors.fill: parent
+							hoverEnabled: true
+							preventStealing: true
+
+							onPositionChanged: mouse => {
+								if (pressed)
+									updateCrop(mouse.x, mouse.y);
+							}
+							onPressed: mouse => {
+								updateCrop(mouse.x, mouse.y);
+							}
+							onReleased: {
+								console.log(cropRect.mapToItem(scaledImg, 0, 0, cropRect.width, cropRect.height), cropRect.width, cropRect.height);
+								const croprect = cropRect.mapToItem(scaledImg, 0, 0, cropRect.width, cropRect.height);
+								const upscaledRect = Qt.rect(croprect.x * scaledImg.scaleX, croprect.y * scaledImg.scaleY, croprect.width * scaledImg.scaleX, croprect.height * scaledImg.scaleY);
+								Wallpapers.setCrop(delegate.modelData.name, upscaledRect, croprect, cropRect.zoom);
+							}
+							onWheel: wheel => {
+								let oldCenterX = cropRect.x + cropRect.width * 0.5;
+								let oldCenterY = cropRect.y + cropRect.height * 0.5;
+
+								if (wheel.angleDelta.y > 0)
+									cropRect.zoom *= 1.1;
+								else
+									cropRect.zoom /= 1.1;
+
+								cropRect.zoom = Math.max(1.0, Math.min(cropRect.zoom, 10.0));
+
+								cropRect.x = oldCenterX - cropRect.width * 0.5;
+								cropRect.y = oldCenterY - cropRect.height * 0.5;
+
+								cropRect.clampToBounds();
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}