z-bar-qt/Modules/Settings/Controls/WallpaperCropper.qml

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Hyprland
import ZShell.Internal
import qs.Config
import qs.Components
import qs.Helpers

Item {
	id: wrapper

	property bool changesMade: false

	signal requestCrop

	Layout.fillWidth: true
	Layout.preferredHeight: 400

	IconButton {
		anchors.margins: Appearance.padding.normal
		anchors.right: parent.right
		anchors.top: parent.top
		icon: "check"
		opacity: wrapper.changesMade ? 1 : 0
		scale: wrapper.changesMade ? 1 : 0
		z: 2

		Behavior on opacity {
			Anim {
			}
		}
		Behavior on scale {
			Anim {
			}
		}

		onClicked: {
			wrapper.requestCrop();
			wrapper.changesMade = false;
		}
	}

	RowLayout {
		id: root

		anchors.fill: parent
		spacing: Appearance.spacing.normal

		Repeater {
			model: ScriptModel {
				values: [...Quickshell.screens].sort((a, b) => {
					return a.x - b.x;
				})
			}

			Item {
				id: delegate

				required property ShellScreen modelData

				function applyCrop(): void {
					const croprect = cropRect.mapToItem(scaledImg, 0, 0, cropRect.width, cropRect.height);
					const upscaledRect = Qt.rect((croprect.x - cropRect.imageX) / scaledImg.paintedWidth, (croprect.y - cropRect.imageY) / scaledImg.paintedHeight, croprect.width / scaledImg.paintedWidth, croprect.height / scaledImg.paintedHeight);
					Wallpapers.setCrop(delegate.modelData.name, upscaledRect, croprect, cropRect.zoom);
				}

				function zoomClipRect(zoom: real): void {
					let oldCenterX = cropRect.x + cropRect.width * 0.5;
					let oldCenterY = cropRect.y + cropRect.height * 0.5;

					cropRect.zoom = zoom;

					cropRect.x = oldCenterX - cropRect.width * 0.5;
					cropRect.y = oldCenterY - cropRect.height * 0.5;

					cropRect.clampToBounds();
				}

				Layout.fillHeight: true
				Layout.fillWidth: true

				Connections {
					function onRequestCrop(): void {
						delegate.applyCrop();
					}

					target: wrapper
				}

				RowLayout {
					id: sliderLayout

					anchors.bottom: parent.bottom
					anchors.left: parent.left
					anchors.right: parent.right
					implicitHeight: 30
					spacing: Appearance.spacing.large

					CustomText {
						text: qsTr("Crop scale")
					}

					CustomSlider {
						id: zoomSlider

						Layout.fillWidth: true
						Layout.preferredHeight: 10
						from: 1.0
						to: 5.0
						value: cropRect.zoom

						onMoved: {
							delegate.zoomClipRect(value);
							wrapper.changesMade = true;
						}
					}
				}

				CachingImage {
					id: scaledImg

					property var displayData
					property real monitorScale: 1.0

					anchors.bottom: sliderLayout.top
					anchors.bottomMargin: Appearance.spacing.normal
					anchors.left: parent.left
					anchors.right: parent.right
					anchors.top: parent.top
					asynchronous: true
					fillMode: Image.PreserveAspectFit
					// retainWhileLoading: true
					source: Wallpapers.current
					sourceSize.height: parent.height
					sourceSize.width: parent.width

					onPaintedWidthChanged: {
						if (paintedWidth > 0) {
							scaledImg.displayData = Wallpapers.getCrop(delegate.modelData.name);
							cropRect.zoom = Wallpapers.getCrop(delegate.modelData.name).zoom;
							cropRect.restoreFromData();
						}
					}
					onSourceChanged: cropRect.clampToBounds()
					onStatusChanged: if (scaledImg.status == Image.Ready)
						cropRect.clampToBounds()

					CustomText {
						id: monitorId

						anchors.centerIn: parent
						color: Qt.alpha(DynamicColors.palette.m3surface, 0.85)
						font.pointSize: Appearance.font.size.large * 4
						style: Text.Outline
						styleColor: DynamicColors.palette.m3onSurface
						text: delegate.modelData.name
					}

					CustomRect {
						id: cropRect

						property real aspectRatio: delegate.modelData.width / delegate.modelData.height
						readonly property real baseHeight: baseWidth / aspectRatio
						readonly property real baseWidth: {
							let fittedHeight = scaledImg.paintedHeight;
							let fittedWidth = fittedHeight * aspectRatio;

							if (fittedWidth > scaledImg.paintedWidth) {
								fittedWidth = scaledImg.paintedWidth;
								fittedHeight = fittedWidth / aspectRatio;
							}

							return fittedWidth;
						}
						readonly property real imageX: (scaledImg.width - scaledImg.paintedWidth) / 2
						readonly property real imageY: (scaledImg.height - scaledImg.paintedHeight) / 2
						property real imgAspectRatio: scaledImg.paintedWidth / scaledImg.paintedHeight
						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) {
								x = data.scaledX;
								y = data.scaledY;

								clampToBounds();
							} else {
								zoom = 1.0;
								centerInImage();
							}
						}

						border.color: DynamicColors.palette.m3primary
						border.width: 2
						height: baseHeight / zoom
						opacity: 1
						width: baseWidth / zoom

						Behavior on opacity {
							Anim {
							}
						}

						Component.onCompleted: clampToBounds()
						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);
								wrapper.changesMade = true;
							}
						}
						onPressed: mouse => {
							updateCrop(mouse.x, mouse.y);
							wrapper.changesMade = true;
						}
						onReleased: {
							wrapper.changesMade = true;
						}
					}
				}
			}
		}
	}
}