d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-10-30 01:30:46 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make the image overlay behave better

Browse source 
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).
This commit is contained in:
Loren Burkholder 2023-12-23 16:27:07 -05:00
parent df88eccfb7
commit 52346d972e
No known key found for this signature in database
GPG key ID: AB62CB312CEC2BBC
1 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
resources/qml/dialogs/ImageOverlay.qml
View file

@ -48,8 +48,10 @@ Window {
Item {
id: imgContainer
property int imgSrcWidth: (imageOverlay.originalWidth && imageOverlay.originalWidth > 100) ? imageOverlay.originalWidth : Screen.width
property int imgSrcHeight: imageOverlay.proportionalHeight ? imgSrcWidth * imageOverlay.proportionalHeight : Screen.height
property int imgSrcWidth: (imageOverlay.originalWidth && imageOverlay.originalWidth > 100) ? imageOverlay.originalWidth : imageOverlay.width
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)
@ -59,6 +61,22 @@ Window {
x: (parent.width - width) / 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 {
id: img
@ -89,13 +107,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 {
@ -105,10 +140,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 > imageOverlay.width
yAxis.enabled: imgContainer.physicalHeight > imageOverlay.height
onGrabChanged: handlerContainer.snapImageRotation()
}
HoverHandler {