medvedych/harbour-fernschreiber
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Tweaked ImagePage behavior

Browse source 
This should made reaction to a single tap more reliable and
flicking back easier.
This commit is contained in:
Slava Monich 2020-10-25 02:15:31 +03:00
parent 5d14d9b000
commit 79e06bd4c4
1 changed files with 67 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
qml/pages/ImagePage.qml
View file

@ -91,11 +91,9 @@ Page {
}
SilicaFlickable {
id: imageFlickable
anchors.fill: parent
clip: true
contentWidth: imagePinchArea.width;
contentHeight: imagePinchArea.height;
flickableDirection: Flickable.VerticalFlick
interactive: !imageOnly
PullDownMenu {
visible: !imageOnly && imageUrl
@ -107,76 +105,86 @@ Page {
}
}
transitions: Transition {
NumberAnimation { properties: "contentX, contentY"; easing.type: Easing.Linear }
}
AppNotification {
id: imageNotification
}
MouseArea {
SilicaFlickable {
id: imageFlickable
anchors.fill: parent
visible: singleImage.visible
onClicked: imageOnly = !imageOnly // Toggle "Image only" mode on tap
}
clip: true
contentWidth: imagePinchArea.width
contentHeight: imagePinchArea.height
flickableDirection: Flickable.HorizontalAndVerticalFlick
quickScrollEnabled: false
PinchArea {
id: imagePinchArea
width: Math.max( singleImage.width * singleImage.scale, imageFlickable.width )
height: Math.max( singleImage.height * singleImage.scale, imageFlickable.height )
PinchArea {
id: imagePinchArea
width: Math.max( singleImage.width * singleImage.scale, imageFlickable.width )
height: Math.max( singleImage.height * singleImage.scale, imageFlickable.height )
enabled: singleImage.visible
pinch {
target: singleImage
minimumScale: 1
maximumScale: 4
}
enabled: singleImage.status === Image.Ready
pinch {
target: singleImage
minimumScale: 1
maximumScale: 4
}
onPinchUpdated: {
imagePage.centerX = pinch.center.x;
imagePage.centerY = pinch.center.y;
}
onPinchUpdated: {
imagePage.centerX = pinch.center.x
imagePage.centerY = pinch.center.y
imageFlickable.returnToBounds()
}
Image {
id: singleImage
source: imageUrl
width: imagePage.imageWidth * imagePage.sizingFactor
height: imagePage.imageHeight * imagePage.sizingFactor
anchors.centerIn: parent
Image {
id: singleImage
source: imageUrl
width: imagePage.imageWidth * imagePage.sizingFactor
height: imagePage.imageHeight * imagePage.sizingFactor
anchors.centerIn: parent
fillMode: Image.PreserveAspectFit
asynchronous: true
fillMode: Image.PreserveAspectFit
asynchronous: true
visible: status === Image.Ready ? true : false
opacity: status === Image.Ready ? 1 : 0
Behavior on opacity { NumberAnimation {} }
onScaleChanged: {
var newWidth = singleImage.width * singleImage.scale;
var newHeight = singleImage.height * singleImage.scale;
var oldWidth = singleImage.width * imagePage.previousScale;
var oldHeight = singleImage.height * imagePage.previousScale;
var widthDifference = newWidth - oldWidth;
var heightDifference = newHeight - oldHeight;
visible: opacity > 0
opacity: status === Image.Ready ? 1 : 0
Behavior on opacity { FadeAnimation {} }
onScaleChanged: {
var newWidth = singleImage.width * singleImage.scale;
var newHeight = singleImage.height * singleImage.scale;
var oldWidth = singleImage.width * imagePage.previousScale;
var oldHeight = singleImage.height * imagePage.previousScale;
var widthDifference = newWidth - oldWidth;
var heightDifference = newHeight - oldHeight;
if (oldWidth > imageFlickable.width || newWidth > imageFlickable.width) {
var xRatioNew = imagePage.centerX / newWidth;
var xRatioOld = imagePage.centerX / oldHeight;
imageFlickable.contentX = imageFlickable.contentX + ( xRatioNew * widthDifference );
}
if (oldHeight > imageFlickable.height || newHeight > imageFlickable.height) {
var yRatioNew = imagePage.centerY / newHeight;
var yRatioOld = imagePage.centerY / oldHeight;
imageFlickable.contentY = imageFlickable.contentY + ( yRatioNew * heightDifference );
if (oldWidth > imageFlickable.width || newWidth > imageFlickable.width) {
var xRatioNew = imagePage.centerX / newWidth;
var xRatioOld = imagePage.centerX / oldHeight;
imageFlickable.contentX = imageFlickable.contentX + ( xRatioNew * widthDifference );
}
if (oldHeight > imageFlickable.height || newHeight > imageFlickable.height) {
var yRatioNew = imagePage.centerY / newHeight;
var yRatioOld = imagePage.centerY / oldHeight;
imageFlickable.contentY = imageFlickable.contentY + ( yRatioNew * heightDifference );
}
imagePage.previousScale = singleImage.scale;
imagePage.oldCenterX = imagePage.centerX;
imagePage.oldCenterY = imagePage.centerY;
}
}
imagePage.previousScale = singleImage.scale;
imagePage.oldCenterX = imagePage.centerX;
imagePage.oldCenterY = imagePage.centerY;
MouseArea {
anchors.fill: parent
visible: singleImage.visible
onClicked: imageOnly = !imageOnly // Toggle "Image only" mode on tap
onDoubleClicked: ; // This introduces a delay before onClicked is invoked
}
}
}
ScrollDecorator { flickable: imageFlickable }
}
}
Image {
@ -191,7 +199,7 @@ Page {
asynchronous: true
fillMode: Image.PreserveAspectFit
opacity: 0.15
opacity: visible ? 0.15 : 0
Behavior on opacity { FadeAnimation {} }
}
}