Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the image overlay behave better #1643

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 44 additions & 3 deletions resources/qml/dialogs/ImageOverlay.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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

Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down