qt: qml: implement rubber band selection
Qt Quick is oriented towards touch screen, and it does not provide some features that are essential for desktop applications. One of these feature is rubber band selection, which allows multiple selection by dragging views.
This merge request implements a generic rubber band selection. It works by asynchronously checking child items if they are overlapped on the rectangle selection indicator.
It has O(n) complexity because of running through all items. This can be optimized for specific usages, such as list view 1. But this generic approach allows it to be used in other places, such as custom views. I propose it as is, with room for potential improvements.
Note: Obviously, it does not work on touch screen.
Fixes #25568.
simplescreenrecorder-2021-11-22_20.20.42
Merge request reports
Activity
added MRStatus::Reviewable label
added Component::Interface: Qt label
changed milestone to %4.0
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
added MRStatus::InReview label and removed MRStatus::Reviewable label
some feedback on the usability, probably for a future MR.
- we should probably allow to move the view while selecting when the mouse is at the top/bottom of the view:
- selecting in ListView is a bit hard as clicking on the item will trigger the DnD, file browser usually tackle this by making only the name & thumbnail activating the drag&drop or by making the item not DnD in the view margin
Auto scroll should be factored. There exists two auto scrolling based on dragging (in toolbar editor, and in the playlist). Also, they use SmoothedAnimation and it alters the animation based on content size. I thought using
velocity
instead ofduration
would correct this behavior, but turns out it just changes the average velocity. I will create a new issue for this, now.For the other issue, what comes to my mind is that childAt() can be used to determine the first visible item of the parent (delegate), and if it is the background, don't accept the event so it propagates. I can try to do that if this gets accepted.
I will create a new issue for this, now.
OK
For the other issue, what comes to my mind is that childAt() can be used to determine the first visible item of the parent (delegate), and if it is the background, don't accept the event so it propagates. I can try to do that if this gets accepted.
isn't that already what happens? my understanding is that when you click, your mouse event is first intercepted by the child, which starts a drag, otherwise it goes to the parent (so the background) and here it goes to your rubber hander
Yes that is what happens from the context of the view. But when I think about the delegates specifically, because it has a MouseArea that is filled itself, it handles mouse events itself.
The question is, should the delegate accept mouse events, if the mouse is over its background (not the view's background)?
Maybe childAt() to check if the result is control.background can be used, to determine whether the mouse event would be accepted or not.
added 7 commits
- 61a7a7e2 - qt: add ItemOverlapNotifier
- a22ff5a1 - qt: qml register type ItemOverlapNotifier
- d4d6c5f2 - qml: add rubberband rectangle selector style properties
- 89b7550c - qml: add RubberBandOverlapNotifier
- bb8b3d11 - qml: add RubberBandSelector
- 41121117 - qml: use RubberBandSelector
- 7c449c35 - qml: connect context menu signals in medialib views
Toggle commit list- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
- Resolved by Fatih Uzunoğlu
added MRStatus::NotCompliant label and removed MRStatus::InReview label
mentioned in issue #26377
added 181 commits
-
7c449c35...c8797d1a - 174 commits from branch
videolan:master
- fed788a6 - qt: add ItemOverlapNotifier
- ccdba3a9 - qt: qml register type ItemOverlapNotifier
- d520f966 - qml: add rubberband rectangle selector style properties
- 8ddad711 - qml: add RubberBandOverlapNotifier
- c5cd3d0a - qml: add RubberBandSelector
- b6639029 - qml: use RubberBandSelector
- fbc9e615 - qml: connect context menu signals in medialib views
Toggle commit list-
7c449c35...c8797d1a - 174 commits from branch
added MRStatus::InReview label and removed MRStatus::NotCompliant label
added MRStatus::NotCompliant label and removed MRStatus::InReview label
added 1854 commits
-
fbc9e615...47514893 - 1847 commits from branch
videolan:master
- bb57a6c0 - qt: add ItemOverlapNotifier
- c6719ce5 - qt: qml register type ItemOverlapNotifier
- b958c57c - qml: add rubberband rectangle selector style properties
- 6e9376b8 - qml: add RubberBandOverlapNotifier
- 2942f5ad - qml: add RubberBandSelector
- 9180ef77 - qml: use RubberBandSelector
- 840f7042 - qml: connect context menu signals in medialib views
Toggle commit list-
fbc9e615...47514893 - 1847 commits from branch
changed milestone to %Qt redesign (VLC 4.0)
changed milestone to %4.0
added 2638 commits
-
840f7042...e3b28612 - 2631 commits from branch
videolan:master
- b3db3fff - qt: add ItemOverlapNotifier
- d70e4509 - qt: qml register type ItemOverlapNotifier
- 9367875f - qml: add rubberband rectangle selector style properties
- 44154185 - qml: add RubberBandOverlapNotifier
- 86f653de - qml: add RubberBandSelector
- 44f38883 - qml: use RubberBandSelector
- 06186eb7 - qml: connect context menu signals in medialib views
Toggle commit list-
840f7042...e3b28612 - 2631 commits from branch
Did some more research, does not seem a good way to go actually... A proxy model that maps to a grid, at the same time allows splitting might not even be possible. There are more concerns, delegate size might be variable, and the tableview does not support spacing (understandable, given it is a table).
I could not find a reliable way in Qt Quick world to achieve this, considering a year has passed, I want to either implement this for views that support
delayRemove
, or close this merge request. I'm in favor of the former, please let me know.This will at least be useful for lists, both in medialibrary views, and playlist listview.
added 490 commits
-
06186eb7...f28a4b2b - 484 commits from branch
videolan:master
- 86bd110d - qt: add ItemOverlapNotifier
- 3523ccc8 - qt: qml register type ItemOverlapNotifier
- 96a29f40 - qml: add rubberband rectangle selector style properties
- b9be4294 - qml: add RubberBandOverlapNotifier
- 4e519368 - qml: add RubberBandSelector
- 83f65809 - qml: use RubberBandSelector
Toggle commit list-
06186eb7...f28a4b2b - 484 commits from branch
- Resolved by Fatih Uzunoğlu
The only reason this is still waiting is because @jagannatharjun still has not updated the grid view to support
delayRemove
andreuseItems
in that 2 years. I'm not sure if I should keep this open or just close it if it's never going to be added.
added 5455 commits
-
83f65809...cb58ece0 - 5445 commits from branch
videolan:master
- eb9513a8 - qml: document required properties from delegate of ExpandGridView
- 6bf838a9 - qml: minor refactor code in positioning item in ExpandGridView
- e7357206 - qml: implement 'delayRemove' for delegates of ExpandGridView
- c50093ec - qml: implement 'reuseItems' for ExpandGridView
- 236a4a51 - qt: add ItemOverlapNotifier
- 43640525 - qml: add RubberBandOverlapNotifier
- 0bfca376 - qml: add RubberBandSelector
- ee3f50f3 - qt: qml register type ItemOverlapNotifier
- bd5a4bfa - qml: add rubberband rectangle selector style properties
- d5a246e1 - qml: use RubberBandSelector
Toggle commit list-
83f65809...cb58ece0 - 5445 commits from branch
I have tried this yesterday with the
ExpandGridView
's newreuseItems
, it seems it is working for me. @chub Can you check if it seems alright?
added MRStatus::InReview label and removed MRStatus::NotCompliant label
added MRStatus::NotCompliant label and removed MRStatus::InReview label
added 53 commits
-
137565fb...4e47bd35 - 47 commits from branch
videolan:master
- 9b412c87 - qt: add ItemOverlapNotifier
- d754ddd9 - qml: add RubberBandOverlapNotifier
- abfdc09c - qml: add RubberBandSelector
- 5f20ef6d - qt: qml register type ItemOverlapNotifier
- cde65831 - qml: add rubberband rectangle selector style properties
- 4f0614e1 - qml: use RubberBandSelector
Toggle commit list-
137565fb...4e47bd35 - 47 commits from branch
added MRStatus::InReview label and removed MRStatus::NotCompliant label
added 6 commits
Toggle commit listadded 6 commits
Toggle commit listAlso, #28023 negatively affects the working principle of this feature.
added MRStatus::NotCompliant label and removed MRStatus::InReview label
@chub Regarding today's discussion, I meant that I tried capturing the items as well as their geometry so that it would not be affected by item re-using, but it did not work well. Currently, only the item addresses are captured for identification purposes (whether to inverse toggling).
As you're dealing with a grid (or a list) you should be able to know what indices are in your rectangle without having to retain the graphical items.
for instance let say that your grid has 10x10 elements and no margins/gutter. if your your grid is 100x100 and your selection rectangle as its corners at (5,5) -> (25,25), you know that your selected indices are (0,1,2,10,11,12,20,21,22)
ListView provides the indexAt that "may" be usable (I don't know how it reacts regarding headers or section delegates)