Make the image overlay behave better

Previously, the image would not try to stay centered; furthermore,
on mobile devices, it was impossible to zoom images without dropping
them at a slightly off rotation. This bothered me enough that I've
clamped images to the center of the screen (as long as they aren't
zoomed larger than the screen) and snapped rotations to 45-degree
increments (with a nice animation to boot).

resources/qml/dialogs/ImageOverlay.qml

@@ -50,13 +50,31 @@ Window {
 
         property int imgSrcWidth: (imageOverlay.originalWidth && imageOverlay.originalWidth > 100) ? imageOverlay.originalWidth : Screen.width
         property int imgSrcHeight: imageOverlay.proportionalHeight ? imgSrcWidth * imageOverlay.proportionalHeight : Screen.height
+        readonly property int physicalWidth: width * scale
+        readonly property int physicalHeight: height * scale
 
         height: Math.min(parent.height || Screen.height, imgSrcHeight)
         width: Math.min(parent.width || Screen.width, imgSrcWidth)
 
         x: (parent.width - width) / 2
         y: (parent.height - height) / 2
 
+        onXChanged: {
+            if (physicalWidth < Screen.width)
+                x = (parent.width - width) / 2;
+        }
+        onYChanged: {
+            if (physicalHeight < Screen.height)
+                y = (parent.height - height) / 2;
+        }
+
+        Behavior on rotation {
+            NumberAnimation {
+                duration: 100
+                easing.type: Easing.InOutQuad
+            }
+        }
+
         Image {
             id: img
 
@@ -94,6 +112,12 @@ Window {
             target: imgContainer
             maximumScale: 10
             minimumScale: 0.1
+
+            onGrabChanged: (transition, point) => {
+                // snap to 45-degree angles
+                if (imgContainer.rotation % 45 != 0)
+                    imgContainer.rotation -= imgContainer.rotation % 45;
+            }
         }
 
         WheelHandler {
@@ -107,6 +131,8 @@ Window {
 
         DragHandler {
             target: imgContainer
+            xAxis.enabled: imgContainer.physicalWidth > Screen.width
+            yAxis.enabled: imgContainer.physicalHeight > Screen.height
         }
 
         HoverHandler {