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 1948ef0
Showing 1 changed file with 42 additions and 1 deletion.
43 changes: 42 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,16 @@ Window {
// and we don't yet distinguish mice and trackpads on Wayland either
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
target: imgContainer

onWheel: 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 1948ef0

Please sign in to comment.