qtdeclarative/examples/quick/pointerhandlers/tapHandler.qml

214 lines
7.4 KiB
QML
Raw Normal View History

// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
import QtQuick.Layouts
import "components"
Item {
width: 1024
height: 480
Rectangle {
id: rect
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
anchors.fill: parent; anchors.margins: 40; anchors.topMargin: 60
border.width: 4; border.color: "transparent"
color: handler.pressed ? "lightsteelblue" : "aliceblue"
TapHandler {
id: handler
acceptedButtons: (leftAllowedCB.checked ? Qt.LeftButton : Qt.NoButton) |
(middleAllowedCB.checked ? Qt.MiddleButton : Qt.NoButton) |
(rightAllowedCB.checked ? Qt.RightButton : Qt.NoButton)
exclusiveSignals: (singleExclusiveCB.checked ? TapHandler.SingleTap : TapHandler.NotExclusive) |
(doubleExclusiveCB.checked ? TapHandler.DoubleTap : TapHandler.NotExclusive)
gesturePolicy: (policyDragThresholdCB.checked ? TapHandler.DragThreshold :
policyWithinBoundsCB.checked ? TapHandler.WithinBounds :
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
policyDragWithinBoundsCB.checked ? TapHandler.DragWithinBounds :
TapHandler.ReleaseWithinBounds)
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
onCanceled: function(point) {
console.log("canceled @ " + point.position)
borderBlink.blinkColor = "red"
borderBlink.start()
}
onSingleTapped: function(point, button) {
console.log("single-tapped button " + button + " @ " + point.scenePosition)
rect.border.width = 4
borderBlink.tapFeedback(button)
}
onDoubleTapped: function(point, button) {
console.log("double-tapped button " + button + " @ " + point.scenePosition)
rect.border.width = 12
borderBlink.tapFeedback(button)
}
onTapped: function(point, button) {
console.log("tapped button " + button + " @ " + point.scenePosition +
" on device '" + point.device.name + "' with modifiers " + handler.point.modifiers +
" " + (tapCount > 1 ? (tapCount + " times") : "for the first time"))
if (tapCount > 1) {
tapCountLabel.text = tapCount
flashAnimation.start()
}
}
onLongPressed: longPressFeedback.createObject(rect,
{"x": point.position.x, "y": point.position.y,
"text": "long press after\n" + handler.timeHeld.toFixed(3) + " sec",
"color": buttonToBlinkColor(point.pressedButtons)})
}
Text {
id: tapCountLabel
anchors.centerIn: parent
font.pixelSize: 72
font.weight: Font.Black
SequentialAnimation {
id: flashAnimation
PropertyAction { target: tapCountLabel; property: "visible"; value: true }
PropertyAction { target: tapCountLabel; property: "opacity"; value: 1.0 }
PropertyAction { target: tapCountLabel; property: "scale"; value: 1.0 }
ParallelAnimation {
NumberAnimation {
target: tapCountLabel
property: "opacity"
to: 0
duration: 500
}
NumberAnimation {
target: tapCountLabel
property: "scale"
to: 1.5
duration: 500
}
}
}
}
Rectangle {
id: expandingCircle
radius: handler.timeHeld * 100
visible: radius > 0 && handler.pressed
border.width: 3
border.color: buttonToBlinkColor(handler.point.pressedButtons)
color: "transparent"
width: radius * 2
height: radius * 2
x: handler.point.pressPosition.x - radius
y: handler.point.pressPosition.y - radius
opacity: 0.25
}
Component {
id: longPressFeedback
Text { }
}
SequentialAnimation {
id: borderBlink
property color blinkColor: "red"
function tapFeedback(button) {
stop();
blinkColor = buttonToBlinkColor(button);
start();
}
ScriptAction { script: rect.border.color = borderBlink.blinkColor }
PauseAnimation { duration: 100 }
ScriptAction { script: rect.border.color = "transparent" }
PauseAnimation { duration: 100 }
}
Text {
text: "tap, click with different buttons, double-click, long press in this area"
anchors {
bottom: parent.bottom
horizontalCenter: parent.horizontalCenter
margins: 6
}
}
}
function buttonToBlinkColor(button) {
switch (button) {
case Qt.MiddleButton: return "orange";
case Qt.RightButton: return "magenta";
default: return "green";
}
}
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
GridLayout {
columnSpacing: 6; rowSpacing: 6
Text {
text: "accepted mouse clicks:"
}
CheckBox {
id: leftAllowedCB
checked: true
text: "left"
}
CheckBox {
id: middleAllowedCB
text: "middle"
}
CheckBox {
id: rightAllowedCB
text: "right"
}
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
Text {
text: "exclusive signals:"
}
CheckBox {
id: singleExclusiveCB
text: "single"
}
CheckBox {
id: doubleExclusiveCB
text: "double"
}
Text {
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
text: "gesture policy:"
horizontalAlignment: Text.AlignRight
Layout.row: 1
Layout.fillWidth: true
}
CheckBox {
id: policyDragThresholdCB
text: "drag threshold"
onCheckedChanged: if (checked) {
policyWithinBoundsCB.checked = false;
policyReleaseWithinBoundsCB.checked = false;
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
policyDragWithinBoundsCB.checked = false;
}
}
CheckBox {
id: policyWithinBoundsCB
text: "within bounds"
onCheckedChanged: if (checked) {
policyDragThresholdCB.checked = false;
policyReleaseWithinBoundsCB.checked = false;
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
policyDragWithinBoundsCB.checked = false;
}
}
CheckBox {
id: policyReleaseWithinBoundsCB
checked: true
text: "release within bounds"
onCheckedChanged: if (checked) {
policyDragThresholdCB.checked = false;
policyWithinBoundsCB.checked = false;
Add TapHandler.gesturePolicy: DragWithinBounds enum value; examples On a touchscreen, right-clicking is not directly possible; so sometimes a long-press gesture is used as a substitute. The next thing a UI designer would want would then be a way of showing feedback that a long-press is in progress, rather than simply waiting for the long-press to occur and then surprising the user with some instant action. For example, a menu might begin to open as the user holds down the touchpoint; but before the long-press gesture is complete, the user can simply release, to cancel the gesture and close the menu. The timeHeld property could drive the animation, to avoid needing a separate animation type; in fact the reason timeHeld exists is to make it easy to emulate this sort of touch-press animation, like one that occurs on touchscreens since Windows 7. But after the menu is open, the user would probably expect to be able to drag the finger to a menu item and release, to select the menu item. For such a purpose, the existing gesture policies weren't very useful: each of them resets the timeHeld property if the user drags beyond the drag threshold; so if the user expects to drag and release over a menu item, then the timeHeld property cannot drive the menu-opening animation, because the menu would disappear as soon as the user drags a little. So it makes more sense to have a gesturePolicy that acts like WithinBounds, but also applies the same policy to the timeHeld property and the longPressed signal. We don't care about the drag threshold: if the user is holding down a finger, it's considered to be a long-press-in-progress, regardless of how far it has moved since press (as long as it stays within the parent's bounds). An example of such a menu is added. The menu must have TapHandler as its root object, because it reacts to press-and-drag within some larger item, larger than the menu itself. For example such a menu could be used in a canvas-like application (drawing, diagramming, dragging things like photos or file icons, or something like that): dragging items on the canvas is possible, but long-pressing anywhere will open a context menu. But in this example so far, only the menu is implemented. It's a pie menu, because those are particularly touch-friendly; but perhaps for the mouse, a conventional context menu would be used. [ChangeLog][QtQuick][Event Handlers] TapHandler now has one more gesturePolicy value: DragWithinBounds; it is similar to WithinBounds, except that timeHeld is not reset during dragging, and the longPressed signal can be emitted regardless of the drag threshold. This is useful for implementing press-drag-release components such as menus, while using timeHeld to directly drive an "opening" animation. Change-Id: I298f8b1ad8f8d7d3c241ef4fdd68e7ec8d8b5bdd Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
2021-10-07 20:27:32 +00:00
policyDragWithinBoundsCB.checked = false;
}
}
CheckBox {
id: policyDragWithinBoundsCB
text: "drag within bounds"
onCheckedChanged: if (checked) {
policyDragThresholdCB.checked = false;
policyWithinBoundsCB.checked = false;
policyReleaseWithinBoundsCB.checked = false;
}
}
}
}