Skip to content

Commit

Permalink
Make the image overlay behave better
Browse files Browse the repository at this point in the history
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).
  • Loading branch information
LorenDB committed Feb 1, 2024
1 parent 2245667 commit 5bdd6d7
Showing 1 changed file with 43 additions and 1 deletion.
44 changes: 43 additions & 1 deletion resources/qml/dialogs/ImageOverlay.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -87,13 +105,30 @@ Window {
}

Item {
anchors.fill: parent
id: handlerContainer

function snapImageRotation()
{
// snap to 15-degree angles
let rotationOffset = imgContainer.rotation % 15;
if (rotationOffset != 0)
{
if (rotationOffset < 7.5)
imgContainer.rotation -= rotationOffset;
else
imgContainer.rotation += rotationOffset;

}
}

anchors.fill: parent

PinchHandler {
target: imgContainer
maximumScale: 10
minimumScale: 0.1

onGrabChanged: handlerContainer.snapImageRotation()
}

WheelHandler {
Expand All @@ -103,10 +138,17 @@ Window {
// and we don't yet distinguish mice and trackpads on Wayland either
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
target: imgContainer

// TODO: in theory this should work, but in practice it's not triggering
onGrabChanged: handlerContainer.snapImageRotation()
}

DragHandler {
target: imgContainer
xAxis.enabled: imgContainer.physicalWidth > Screen.width
yAxis.enabled: imgContainer.physicalHeight > Screen.height

onGrabChanged: handlerContainer.snapImageRotation()
}

HoverHandler {
Expand Down

0 comments on commit 5bdd6d7

Please sign in to comment.