apply button, wheel doesn't zoom

Modules/Settings/Categories/Background.qml

@@ -36,7 +36,6 @@ SettingsPage {
 		}
 
 		WallpaperCropper {
-			screen: root.screen
 		}
 	}
 

Modules/Settings/Controls/WallpaperCropper.qml

@@ -9,13 +9,44 @@ import qs.Config
 import qs.Components
 import qs.Helpers
 
-RowLayout {
+Item {
-	id: root
+	id: wrapper
 
-	required property ShellScreen screen
+	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 {
@@ -30,6 +61,12 @@ RowLayout {
 
 				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;
@@ -45,6 +82,14 @@ RowLayout {
 				Layout.fillHeight: true
 				Layout.fillWidth: true
 
+				Connections {
+					function onRequestCrop(): void {
+						delegate.applyCrop();
+					}
+
+					target: wrapper
+				}
+
 				RowLayout {
 					id: sliderLayout
 
@@ -67,7 +112,10 @@ RowLayout {
 						to: 5.0
 						value: cropRect.zoom
 
-					onMoved: delegate.zoomClipRect(value)
+						onMoved: {
+							delegate.zoomClipRect(value);
+							wrapper.changesMade = true;
+						}
 					}
 				}
 
@@ -78,6 +126,7 @@ RowLayout {
 					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
@@ -95,6 +144,9 @@ RowLayout {
 							cropRect.restoreFromData();
 						}
 					}
+					onSourceChanged: cropRect.clampToBounds()
+					onStatusChanged: if (scaledImg.status == Image.Ready)
+						cropRect.clampToBounds()
 
 					CustomText {
 						id: monitorId
@@ -153,10 +205,10 @@ RowLayout {
 							}
 						}
 
-					border.color: "lime"
+						border.color: DynamicColors.palette.m3primary
 						border.width: 2
 						height: baseHeight / zoom
-					opacity: zoom > 1.0 ? 1 : Math.abs(aspectRatio - imgAspectRatio) > 0.1 ? 1 : 0
+						opacity: 1
 						width: baseWidth / zoom
 
 						Behavior on opacity {
@@ -164,6 +216,7 @@ RowLayout {
 							}
 						}
 
+						Component.onCompleted: clampToBounds()
 						onHeightChanged: clampToBounds()
 						onWidthChanged: clampToBounds()
 					}
@@ -188,35 +241,19 @@ RowLayout {
 						preventStealing: true
 
 						onPositionChanged: mouse => {
-						if (pressed)
+							if (pressed) {
 								updateCrop(mouse.x, mouse.y);
+								wrapper.changesMade = true;
+							}
 						}
 						onPressed: mouse => {
 							updateCrop(mouse.x, mouse.y);
+							wrapper.changesMade = true;
 						}
 						onReleased: {
-						if (cropRect.opacity > 0) {
+							wrapper.changesMade = true;
-							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);
 						}
 					}
-					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, 5.0));
-
-						cropRect.x = oldCenterX - cropRect.width * 0.5;
-						cropRect.y = oldCenterY - cropRect.height * 0.5;
-
-						cropRect.clampToBounds();
-					}
 				}
 			}
 		}