Compare commits

...

2 commits

Author SHA1 Message Date
Loren Burkholder
d509ef93d6
Merge 52346d972e into 048af42780 2024-09-26 03:03:14 +00:00
Loren Burkholder
52346d972e
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).
2024-04-18 20:19:21 -04:00

View file

@ -48,8 +48,10 @@ Window {
Item { Item {
id: imgContainer id: imgContainer
property int imgSrcWidth: (imageOverlay.originalWidth && imageOverlay.originalWidth > 100) ? imageOverlay.originalWidth : Screen.width property int imgSrcWidth: (imageOverlay.originalWidth && imageOverlay.originalWidth > 100) ? imageOverlay.originalWidth : imageOverlay.width
property int imgSrcHeight: imageOverlay.proportionalHeight ? imgSrcWidth * imageOverlay.proportionalHeight : Screen.height property int imgSrcHeight: imageOverlay.proportionalHeight ? imgSrcWidth * imageOverlay.proportionalHeight : imageOverlay.height
readonly property int physicalWidth: width * scale
readonly property int physicalHeight: height * scale
property double initialScale: Math.min(Window.height/imgSrcHeight, Window.width/imgSrcWidth, 1.0) property double initialScale: Math.min(Window.height/imgSrcHeight, Window.width/imgSrcWidth, 1.0)
@ -59,6 +61,22 @@ Window {
x: (parent.width - width) / 2 x: (parent.width - width) / 2
y: (parent.height - height) / 2 y: (parent.height - height) / 2
onXChanged: {
if (physicalWidth < imageOverlay.width)
x = (parent.width - width) / 2;
}
onYChanged: {
if (physicalHeight < imageOverlay.height)
y = (parent.height - height) / 2;
}
Behavior on rotation {
NumberAnimation {
duration: 100
easing.type: Easing.InOutQuad
}
}
Image { Image {
id: img id: img
@ -89,13 +107,30 @@ Window {
} }
Item { 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 { PinchHandler {
target: imgContainer target: imgContainer
maximumScale: 10 maximumScale: 10
minimumScale: 0.1 minimumScale: 0.1
onGrabChanged: handlerContainer.snapImageRotation()
} }
WheelHandler { WheelHandler {
@ -105,10 +140,16 @@ Window {
// and we don't yet distinguish mice and trackpads on Wayland either // and we don't yet distinguish mice and trackpads on Wayland either
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
target: imgContainer target: imgContainer
onWheel: handlerContainer.snapImageRotation()
} }
DragHandler { DragHandler {
target: imgContainer target: imgContainer
xAxis.enabled: imgContainer.physicalWidth > imageOverlay.width
yAxis.enabled: imgContainer.physicalHeight > imageOverlay.height
onGrabChanged: handlerContainer.snapImageRotation()
} }
HoverHandler { HoverHandler {