[vlc-commits] qml: Update the drag and drop implementation

Benjamin Arnaud git at videolan.org
Mon Mar 15 10:34:58 UTC 2021


vlc | branch: master | Benjamin Arnaud <benjamin.arnaud at videolabs.io> | Thu Mar 11 10:16:56 2021 +0100| [b2708155160e31287fd63b93dfde384ff6743519] | committer: Pierre Lamot

qml: Update the drag and drop implementation

qml/DragItem: Add the 'getSelectedInputItem' function

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=b2708155160e31287fd63b93dfde384ff6743519
---

 modules/gui/qt/Makefile.am                         |   1 -
 modules/gui/qt/medialibrary/qml/MusicAlbums.qml    |   4 +-
 modules/gui/qt/medialibrary/qml/MusicArtist.qml    |   8 +-
 .../qt/medialibrary/qml/MusicArtistsDisplay.qml    |   4 +-
 modules/gui/qt/medialibrary/qml/MusicGenres.qml    |   4 +-
 .../gui/qt/medialibrary/qml/MusicTracksDisplay.qml |   4 +-
 .../qt/medialibrary/qml/PlaylistMediaDisplay.qml   |   9 +-
 .../gui/qt/medialibrary/qml/PlaylistMediaList.qml  |   8 +-
 modules/gui/qt/medialibrary/qml/VideoAll.qml       |   5 +-
 .../gui/qt/network/qml/NetworkBrowseDisplay.qml    |   4 +-
 modules/gui/qt/playlist/qml/PlaylistDroppable.qml  |  31 -------
 modules/gui/qt/playlist/qml/PlaylistListView.qml   |  48 +++++-----
 modules/gui/qt/vlc.qrc                             |   1 -
 modules/gui/qt/widgets/qml/DragItem.qml            | 102 +++++++++++++++------
 14 files changed, 122 insertions(+), 111 deletions(-)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index f762e5035c..7857c8390a 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -715,7 +715,6 @@ libqt_plugin_la_QML = \
 	gui/qt/player/qml/VolumeWidget.qml \
 	gui/qt/player/qml/ButtonsLayout.qml \
 	gui/qt/playlist/qml/PlaylistDelegate.qml \
-	gui/qt/playlist/qml/PlaylistDroppable.qml \
 	gui/qt/playlist/qml/PlaylistListView.qml \
 	gui/qt/playlist/qml/PlaylistOverlayMenu.qml \
 	gui/qt/playlist/qml/PlaylistToolbar.qml \
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
index ff950c33cd..9fb277ff77 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
@@ -113,8 +113,8 @@ Widgets.NavigableFocusScope {
           }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index, albumModelId.getIdsForIndexes(selectionModel.selectedIndexes))
+        function getSelectedInputItem() {
+            return albumModelId.getItemsForIndexes(selectionModel.selectedIndexes);
         }
     }
 
diff --git a/modules/gui/qt/medialibrary/qml/MusicArtist.qml b/modules/gui/qt/medialibrary/qml/MusicArtist.qml
index 48d11dddf2..d880e0391a 100644
--- a/modules/gui/qt/medialibrary/qml/MusicArtist.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicArtist.qml
@@ -230,8 +230,8 @@ Widgets.NavigableFocusScope {
           }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index, albumModel.getIdsForIndexes(albumSelectionModel.selectedIndexes))
+        function getSelectedInputItem() {
+            return albumModel.getItemsForIndexes(albumSelectionModel.selectedIndexes);
         }
     }
 
@@ -382,8 +382,8 @@ Widgets.NavigableFocusScope {
                   }
                 }
 
-                function insertIntoPlaylist(index) {
-                    medialib.insertIntoPlaylist(index, trackModel.getIdsForIndexes(trackSelectionModel.selectedIndexes))
+                function getSelectedInputItem() {
+                    return trackModel.getItemsForIndexes(trackSelectionModel.selectedIndexes);
                 }
             }
 
diff --git a/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
index 798c168d03..7a1b7c9516 100644
--- a/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
@@ -123,8 +123,8 @@ Widgets.PageLoader {
                   }
                 }
 
-                function insertIntoPlaylist(index) {
-                    medialib.insertIntoPlaylist(index, artistModel.getIdsForIndexes(selectionModel.selectedIndexes))
+                function getSelectedInputItem() {
+                    return artistModel.getItemsForIndexes(selectionModel.selectedIndexes);
                 }
             }
 
diff --git a/modules/gui/qt/medialibrary/qml/MusicGenres.qml b/modules/gui/qt/medialibrary/qml/MusicGenres.qml
index 6b6bbab9a3..d12230a5c2 100644
--- a/modules/gui/qt/medialibrary/qml/MusicGenres.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicGenres.qml
@@ -114,8 +114,8 @@ Widgets.NavigableFocusScope {
           }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index, genreModel.getIdsForIndexes(selectionModel.selectedIndexes))
+        function getSelectedInputItem() {
+            return genreModel.getItemsForIndexes(selectionModel.selectedIndexes);
         }
     }
 
diff --git a/modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
index a98621ac73..be92b6bac3 100644
--- a/modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
@@ -46,8 +46,8 @@ Widgets.NavigableFocusScope {
           }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index, model.getIdsForIndexes(selectionModel.selectedIndexes))
+        function getSelectedInputItem() {
+            return model.getItemsForIndexes(selectionModel.selectedIndexes);
         }
     }
 
diff --git a/modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml b/modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml
index d982c633f6..20a0277184 100644
--- a/modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml
@@ -173,9 +173,8 @@ Widgets.NavigableFocusScope {
             }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index,
-                                        model.getIdsForIndexes(modelSelect.selectedIndexes));
+        function getSelectedInputItem() {
+            return model.getItemsForIndexes(modelSelect.selectedIndexes);
         }
     }
 
@@ -195,7 +194,7 @@ Widgets.NavigableFocusScope {
     {
         id: view
 
-        //-------------------------------------------------------------------------------------
+        //-----------------------------------------------------------------------------------------
         // Settings
 
         anchors.left  : parent.left
@@ -222,7 +221,7 @@ Widgets.NavigableFocusScope {
         navigationParent: root
         navigationUpItem: (headerItem) ? headerItem.focus : undefined
 
-        //-------------------------------------------------------------------------------------
+        //-----------------------------------------------------------------------------------------
         // Events
 
         onContextMenuButtonClicked: contextMenu.popup(modelSelect.selectedIndexes,
diff --git a/modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml b/modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml
index 0cd637e76d..1bbdec00e4 100644
--- a/modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml
+++ b/modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml
@@ -174,6 +174,9 @@ Widgets.NavigableFocusScope {
     Widgets.DragItem {
         id: dragItemPlaylist
 
+        //---------------------------------------------------------------------------------------------
+        // DragItem implementation
+
         function updateComponents(maxCovers) {
             var items = modelSelect.selectedIndexes.slice(0, maxCovers).map(function (x){
                 return model.getDataAt(x.row);
@@ -194,9 +197,8 @@ Widgets.NavigableFocusScope {
             };
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index,
-                                        model.getIdsForIndexes(modelSelect.selectedIndexes));
+        function getSelectedInputItem() {
+            return model.getItemsForIndexes(modelSelect.selectedIndexes);
         }
     }
 
diff --git a/modules/gui/qt/medialibrary/qml/VideoAll.qml b/modules/gui/qt/medialibrary/qml/VideoAll.qml
index 0287a61907..52245bb9a3 100644
--- a/modules/gui/qt/medialibrary/qml/VideoAll.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoAll.qml
@@ -179,9 +179,8 @@ Widgets.NavigableFocusScope {
             }
         }
 
-        function insertIntoPlaylist(index) {
-            medialib.insertIntoPlaylist(index,
-                                        model.getIdsForIndexes(modelSelect.selectedIndexes));
+        function getSelectedInputItem() {
+            return model.getItemsForIndexes(modelSelect.selectedIndexes);
         }
     }
 
diff --git a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
index b7e8bfc291..025083037b 100644
--- a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
+++ b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
@@ -86,8 +86,8 @@ Widgets.NavigableFocusScope {
           }
         }
 
-        function insertIntoPlaylist(index) {
-            providerModel.insertIntoPlaylist(filterModel.mapIndexesToSource(selectionModel.selectedIndexes), index)
+        function getSelectedInputItem() {
+            return providerModel.getItemsForIndexes(selectionModel.selectedIndexes);
         }
 
         Component {
diff --git a/modules/gui/qt/playlist/qml/PlaylistDroppable.qml b/modules/gui/qt/playlist/qml/PlaylistDroppable.qml
deleted file mode 100644
index 671990fb9f..0000000000
--- a/modules/gui/qt/playlist/qml/PlaylistDroppable.qml
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Copyright (C) 2020 VLC authors and VideoLAN
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * ( at your option ) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
- *****************************************************************************/
-import QtQuick 2.11
-
-Item {
-    id: root
-
-    function insertIntoPlaylist(index /* <int>: index to insert at*/) {
-        console.assert(false, "parent should reimplement this function")
-    }
-
-    function canInsertIntoPlaylist(index) {
-        return true
-    }
-}
-
diff --git a/modules/gui/qt/playlist/qml/PlaylistListView.qml b/modules/gui/qt/playlist/qml/PlaylistListView.qml
index 54c0d7dded..9b1840422e 100644
--- a/modules/gui/qt/playlist/qml/PlaylistListView.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistListView.qml
@@ -54,26 +54,34 @@ Widgets.NavigableFocusScope {
 
     function isDropAcceptable(drop, index) {
         return drop.hasUrls || // external drop (i.e. from filesystem)
-                (isValidInstanceOf(drop.source, Widgets.DragItem) && drop.source.canInsertIntoPlaylist(index)) // internal drop (inter-view or intra-playlist)
+                (isValidInstanceOf(drop.source, Widgets.DragItem)) // internal drop (inter-view or intra-playlist)
     }
 
     function acceptDrop(index, drop) {
-        if (isValidInstanceOf(drop.source, Widgets.DragItem)) {
-            // dropping Medialib view content into playlist or intra-playlist dragging:
-            drop.source.insertIntoPlaylist(index)
+        var item = drop.source;
+
+        // NOTE: Move implementation.
+        if (dragItem == item) {
+            model.moveItemsPre(model.getSelection(), index);
+
+        // NOTE: Dropping medialibrary content into the queue.
+        } else if (isValidInstanceOf(item, Widgets.DragItem)) {
+            mainPlaylistController.insert(index, item.getSelectedInputItem());
+
+        // NOTE: Dropping an external item (i.e. filesystem) into the queue.
         } else if (drop.hasUrls) {
-            // dropping an external item (i.e. filesystem drag) into playlist:
-            // force conversion to an actual list
-            var urlList = []
-            for ( var url in drop.urls)
-                urlList.push(drop.urls[url])
-            mainPlaylistController.insert(index, urlList, false)
-
-            // This is required otherwise backend may handle the drop as well yielding double addition
-            drop.accept(Qt.IgnoreAction)
+            var urlList = [];
+
+            for (var url in drop.urls)
+                urlList.push(drop.urls[url]);
+
+            mainPlaylistController.insert(index, urlList, false);
+
+            // NOTE This is required otherwise backend may handle the drop as well yielding double addition.
+            drop.accept(Qt.IgnoreAction);
         }
 
-        listView.forceActiveFocus()
+        listView.forceActiveFocus();
     }
 
     PlaylistOverlayMenu {
@@ -118,16 +126,8 @@ Widgets.NavigableFocusScope {
                 return ({covers: covers, title: title, count: root.model.selectedCount})
             }
 
-            function insertIntoPlaylist(index) {
-                root.model.moveItemsPre(root.model.getSelection(), index)
-            }
-
-            function canInsertIntoPlaylist(index) {
-                var diff = dragItem.index - index
-                if (diff === 0 || diff === -1)
-                    return false
-                else
-                    return true
+            function getSelectedInputItem(index) {
+                return model.getItemsForIndexes(model.getSelection())
             }
 
             property point _pos: null
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 4576eb4545..3cda8faf6c 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -304,7 +304,6 @@
     </qresource>
     <qresource prefix="/playlist">
         <file alias="PlaylistDelegate.qml">playlist/qml/PlaylistDelegate.qml</file>
-        <file alias="PlaylistDroppable.qml">playlist/qml/PlaylistDroppable.qml</file>
         <file alias="PlaylistListView.qml">playlist/qml/PlaylistListView.qml</file>
         <file alias="PlaylistOverlayMenu.qml">playlist/qml/PlaylistOverlayMenu.qml</file>
         <file alias="PlaylistToolbar.qml">playlist/qml/PlaylistToolbar.qml</file>
diff --git a/modules/gui/qt/widgets/qml/DragItem.qml b/modules/gui/qt/widgets/qml/DragItem.qml
index 723ed2ec28..746c0fa008 100644
--- a/modules/gui/qt/widgets/qml/DragItem.qml
+++ b/modules/gui/qt/widgets/qml/DragItem.qml
@@ -15,60 +15,91 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  *****************************************************************************/
-import QtQuick 2.11
+
+import QtQuick          2.11
 import QtQuick.Controls 2.4
-import QtQml.Models 2.2
-import "qrc:///style/"
-import "qrc:///playlist/" as Playlist
+import QtQml.Models     2.2
 
 import QtGraphicalEffects 1.0
 
-Playlist.PlaylistDroppable {
+import "qrc:///style/"
+import "qrc:///playlist/" as Playlist
+
+Item {
     id: dragItem
 
-    property VLCColors colors: VLCStyle.colors
+    //---------------------------------------------------------------------------------------------
+    // Properties
+    //---------------------------------------------------------------------------------------------
 
     readonly property int coverSize: VLCStyle.icon_normal
+
+    property VLCColors colors: VLCStyle.colors
+
+    //---------------------------------------------------------------------------------------------
+    // Private
+
+    property var _model: {"covers": [], "title": "", "count": 0}
+
     readonly property int _maxCovers: 3
+
     readonly property int _displayedCoversCount: Math.min(_model.count, _maxCovers + 1)
 
-    property var _model: {"covers": [], "title": "", "count": 0}
+    //---------------------------------------------------------------------------------------------
+    // Settings
+    //---------------------------------------------------------------------------------------------
 
-    // return {covers: [{artwork: <string> or cover: <component>},..maxCovers]
-    //         , title: <string>, *subtitle: <string>, count: <int> /*all selected*/}
-    // * - optional
-    function updateComponents(maxCovers) {
-        console.assert(false, "parent should reimplement this function")
-    }
+    parent: g_mainDisplay
+
+    width: VLCStyle.colWidth(2)
+
+    height: coverSize + VLCStyle.margin_small * 2
+
+    opacity: visible ? 0.90 : 0
+
+    visible: Drag.active
+
+    //---------------------------------------------------------------------------------------------
+    // Events
+    //---------------------------------------------------------------------------------------------
 
     Drag.onActiveChanged: {
         if (Drag.active) {
-            _model = updateComponents(_maxCovers)
-            mainInterface.setCursor(Qt.DragMoveCursor)
+            _model = updateComponents(_maxCovers);
+            mainInterface.setCursor(Qt.DragMoveCursor);
         } else {
-            mainInterface.restoreCursor()
+            mainInterface.restoreCursor();
         }
     }
 
+    //---------------------------------------------------------------------------------------------
+    // Functions
+    //---------------------------------------------------------------------------------------------
+
     function coversXPos(index) {
-        return VLCStyle.margin_small + (coverSize / 3) * index
+        return VLCStyle.margin_small + (coverSize / 3) * index;
     }
 
-    parent: g_mainDisplay
-    width: VLCStyle.colWidth(2)
-    height: coverSize + VLCStyle.margin_small * 2
-    opacity: visible ? 0.90 : 0
-    visible: Drag.active
+    //---------------------------------------------------------------------------------------------
+    // Pure virtual
 
-    Rectangle {
-        /* background */
-        anchors.fill: parent
-        color: colors.button
-        border.color: colors.buttonBorder
-        border.width: VLCStyle.dp(1, VLCStyle.scale)
-        radius: VLCStyle.dp(6, VLCStyle.scale)
+    // return {covers: [{artwork: <string> or cover: <component>},..maxCovers]
+    //         , title: <string>, *subtitle: <string>, count: <int> /*all selected*/}
+    // * - optional
+    function updateComponents(maxCovers) {
+        console.assert(false, "updateComponents is not implemented.");
+    }
+
+    function getSelectedInputItem() {
+        console.assert(false, "getSelectedInputItem is not implemented.");
+
+        return undefined;
     }
 
+    //---------------------------------------------------------------------------------------------
+    // Animations
+    //---------------------------------------------------------------------------------------------
+
     Behavior on opacity {
         NumberAnimation {
             easing.type: Easing.InOutSine
@@ -76,6 +107,19 @@ Playlist.PlaylistDroppable {
         }
     }
 
+    //---------------------------------------------------------------------------------------------
+    // Childs
+    //---------------------------------------------------------------------------------------------
+
+    Rectangle {
+        /* background */
+        anchors.fill: parent
+        color: colors.button
+        border.color: colors.buttonBorder
+        border.width: VLCStyle.dp(1, VLCStyle.scale)
+        radius: VLCStyle.dp(6, VLCStyle.scale)
+    }
+
     RectangularGlow {
         anchors.fill: parent
         glowRadius: VLCStyle.dp(8, VLCStyle.scale)



More information about the vlc-commits mailing list