mobile/profile: enable zoom and pan for the QML profile

When running mobile on desktop there are some odd jumps in the mouse position while in
drag mode (press and hold, then move). They make the user interface seem jerky.
But I haven't observed the same behavior on the mobile device when testing. So
I'm not sure what to do with that.

Using opacity to indicate that the user is able to pan the profile seems reasonably
obvious; not sure if it's the best possible way to do this.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 66 insertions, 4 deletions

diff --git a/mobile-widgets/qml/DiveDetailsView.qml b/mobile-widgets/qml/DiveDetailsView.qml
index a7fbf4412..0227c4785 100644
--- a/mobile-widgets/qml/DiveDetailsView.qml
+++ b/mobile-widgets/qml/DiveDetailsView.qml
@@ -1,8 +1,5 @@
 // SPDX-License-Identifier: GPL-2.0
-import QtQuick 2.6
-/*
-import QtWebView 1.0
-*/
+import QtQuick 2.10
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.2
 import QtQuick.Controls 2.2 as Controls
@@ -229,6 +226,8 @@ Item {
 				id: qmlProfile
 				visible: !noDive
 				anchors.fill: parent
+				clip: true
+				property real lastScale: 1.0 // final scale at the end of previous pinch
 				Rectangle {
 					color: "transparent"
 					opacity: 0.6
@@ -236,6 +235,69 @@ Item {
 					border.color: subsurfaceTheme.primaryColor
 					anchors.fill: parent
 				}
+				PinchArea {
+					anchors.fill: parent
+					pinch.dragAxis: Pinch.XAndYAxis
+					onPinchStarted: {
+						if (manager.verboseEnabebled)
+							manager.appendTextToLog("pinch started w/ previousScale " + qmlProfile.lastScale)
+					}
+					onPinchUpdated: {
+						if (pinch.scale * qmlProfile.lastScale < 1.0)
+							qmlProfile.lastScale = 1.0 / pinch.scale // this way we never shrink and the changes stay smooth
+						// the underlying widget deals with the scaling, no need to send an update request
+						qmlProfile.scale = pinch.scale * qmlProfile.lastScale
+						if (manager.verboseEnabled)
+							manager.appendTextToLog("pinch updated to scale " + qmlProfile.scale);
+					}
+					onPinchFinished: {
+						// remember the final scale value so we can continue from there next time the user pinches
+						qmlProfile.lastScale = pinch.scale * qmlProfile.lastScale
+					}
+
+					MouseArea {
+						anchors.fill: parent
+						drag.target: qmlProfile
+						drag.axis: Drag.XAndYAxis
+						drag.smoothed: true
+						pressAndHoldInterval: 150 // very short - feels about right
+						// cursor/finger position as we start dragging
+						property real initialX
+						property real initialY
+						// the offset previously used to show the profile
+						property real oldXOffset
+						property real oldYOffset
+						// this indicates that we are actually dragging
+						property bool dragging: false
+						onPressAndHold: {
+							dragging = true;
+							oldXOffset = qmlProfile.xOffset
+							oldYOffset = qmlProfile.yOffset
+							initialX = mouse.x
+							initialY = mouse.y
+							if (manager.verboseEnabled)
+								manager.appendTextToLog("press and hold at mouse" + Math.round(10 * mouse.x) / 10 + " / " + Math.round(10 * mouse.y) / 10)
+							// give visual feedback to the user that they now can drag
+							qmlProfile.opacity = 0.5
+						}
+						onPositionChanged: {
+							if (dragging) {
+								var x = (mouse.x - initialX) / qmlProfile.scale
+								var y = (mouse.y - initialY) / qmlProfile.scale
+								if (manager.verboseEnabled)
+									manager.appendTextToLog("drag mouse "  + Math.round(10 * mouse.x) / 10 + " / " + Math.round(10 * mouse.y) / 10 + " delta " + Math.round(x) + " / " + Math.round(y))
+								qmlProfile.xOffset = oldXOffset + x
+								qmlProfile.yOffset = oldYOffset + y
+								qmlProfile.update()
+							}
+						}
+						onReleased: {
+							// reset things
+							dragging = false
+							qmlProfile.opacity = 1.0
+						}
+					}
+				}
 			}
 		}
 		Controls.Label {