chore: switch tray items to listview

panels/dock/tray/CMakeLists.txt

@@ -17,8 +17,6 @@ qt_add_qml_module(dock-tray
     SOURCES
         traysortordermodel.cpp
         traysortordermodel.h
-        trayitempositionregister.cpp
-        trayitempositionregister.h
         trayitempositionmanager.cpp
         trayitempositionmanager.h
         ksortfilterproxymodel.cpp

panels/dock/tray/package/ActionLegacyTrayPluginDelegate.qml

@@ -26,6 +26,8 @@ AppletItemButton {
 
     required property bool itemVisible
     property bool dragable: true
+    property string dropOnSurfaceId: ""
+    property bool dropOnBefore: true
 
     padding: 0
 
@@ -160,7 +162,7 @@ AppletItemButton {
     Drag.dragType: Drag.Automatic
     DQuickDrag.overlay: overlayWindow
     DQuickDrag.active: Drag.active
-    DQuickDrag.hotSpotScale: Qt.size(0.5, 1)
+    DQuickDrag.hotSpotScale: Qt.size(0.5, 0.5)
     Drag.mimeData: {
         "text/x-dde-shell-tray-dnd-surfaceId": model.surfaceId,
         "text/x-dde-shell-tray-dnd-sectionType": model.sectionType
@@ -172,6 +174,11 @@ AppletItemButton {
             // reset position on drop
             Qt.callLater(() => { x = 0; y = 0; });
         }
+
+        if (!Drag.active && dropOnSurfaceId != "") {
+            DDT.TraySortOrderModel.move(model.surfaceId, dropOnSurfaceId, dropOnBefore);
+            dropOnSurfaceId = "";
+        }
     }
 
     DragHandler {
@@ -182,4 +189,42 @@ AppletItemButton {
             Qt.callLater(function(){ root.Drag.active = dragHandler.active })
         }
     }
+
+    DropArea {
+        enabled: dragable
+        anchors.fill: parent
+        keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
+
+        onEntered: function(drag) {
+            let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
+            if (!legacyTrayPlugin) {
+                return
+            }
+
+            const sourceSurfaceId = drag.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
+            const sourceSectionType = drag.getDataAsString("text/x-dde-shell-tray-dnd-sectionType")
+            if (model.sectionType != "stashed" && sourceSectionType == "stashed") {
+                DDT.TraySortOrderModel.move(sourceSurfaceId, model.surfaceId, false);
+                return
+            }
+
+            if (model.sectionType == "stashed" && sourceSectionType != "stashed") {
+                if (!sourceSurfaceId.startsWith("application-tray::")) {
+                    drag.accepted = false
+                    return
+                }
+                DDT.TraySortOrderModel.move(sourceSurfaceId, model.surfaceId, false);
+                return
+            }
+
+            if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
+                return
+            }
+
+            visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)
+
+            legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
+            legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
+        }
+    }
 }

panels/dock/tray/package/ActionShowStashDelegate.qml

@@ -119,4 +119,26 @@ AppletItemButton {
             }
         }
     }
+
+    DropArea {
+        anchors.fill: parent
+        keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
+
+        onEntered: function(drag) {
+            let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
+            if (!legacyTrayPlugin) {
+                return
+            }
+
+            let surfaceId = drag.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
+            if (!surfaceId.startsWith("application-tray::")) {
+                drag.accepted = false
+                return
+            }
+        }
+        onDropped: function (dropEvent) {
+            let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
+            DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
+        }
+    }
 }

panels/dock/tray/package/ActionToggleCollapseDelegate.qml

@@ -79,4 +79,23 @@ AppletItemButton {
             }
         }
     }
+
+    DropArea {
+        anchors.fill: parent
+        keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
+
+        onEntered: function(drag) {
+            let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
+            if (legacyTrayPlugin) {
+                if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
+                    return
+                }
+
+                visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)
+
+                legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
+                legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
+            }
+        }
+    }
 }

panels/dock/tray/package/StashContainer.qml

@@ -11,15 +11,12 @@ import org.deepin.ds.dock.tray 1.0 as DDT
 Item {
     id: root
 
-    property var model: ListModel {
-        ListElement {
-            delegateType: "dummy"
-            surfaceId: "folder-trash"
-            visualIndex: 0
-        }
-        ListElement {
-            delegateType: "dummy"
-            visualIndex: 1
+    required property DDT.SortFilterProxyModel model: DDT.SortFilterProxyModel {
+        sourceModel: DDT.TraySortOrderModel
+        filterRowCallback: (sourceRow, sourceParent) => {
+            let index = sourceModel.index(sourceRow, 0, sourceParent)
+            return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) === "stashed" &&
+                    sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
         }
     }
 
@@ -59,14 +56,6 @@ Item {
     }
 
     // Delegates
-    StashedItemDelegateChooser {
-        columnCount: root.columnCount
-        rowCount: root.rowCount
-        itemPadding: root.itemPadding
-        id: stashedItemDelegateChooser
-        stashedSurfacePopup: stashSurfacePopup
-    }
-
     // tooltip and menu
     DDT.SurfacePopup {
         id: stashSurfacePopup
@@ -101,19 +90,43 @@ Item {
         }
         onDropped: function (dropEvent) {
             let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
-            DDT.TraySortOrderModel.dropToStashTray(surfaceId, 0, false);
+            DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
         }
     }
 
-    Item {
+    Flow {
+        id: stashedList
         anchors.fill: parent
         anchors.margins: 0
+        spacing: root.itemSpacing
+
+        add: Transition {
+            NumberAnimation {
+                properties: "scale,opacity"
+                from: 0
+                to: 1
+                duration: 200
+            }
+        }
+        move: Transition {
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutQuad
+            }
+        }
 
-        // Tray items
         Repeater {
-            anchors.fill: parent
-            model: root.model
-            delegate: stashedItemDelegateChooser
+            model: DelegateModel {
+                id: visualModel
+                model: root.model
+                delegate: StashedItemDelegateChooser {
+                    columnCount: root.columnCount
+                    rowCount: root.rowCount
+                    itemPadding: root.itemPadding
+                    id: stashedItemDelegateChooser
+                    stashedSurfacePopup: stashSurfacePopup
+                }
+            }
         }
     }
 }

panels/dock/tray/package/TrayContainer.qml

@@ -84,32 +84,24 @@ Item {
     readonly property int itemPadding: DDT.TrayItemPositionManager.itemPadding
 
     property int trayHeight: 50
-    property size containerSize: DDT.TrayItemPositionManager.visualSize
-    property bool isDragging: DDT.TraySortOrderModel.actionsAlwaysVisible
-    property bool animationEnable: true
+    property bool animationEnable: false
     // visiualIndex default value is -1
     property int dropHoverIndex: -1
     required property var surfaceAcceptor
     readonly property bool isDropping: dropArea.containsDrag
 
-    onIsDraggingChanged: {
-        animationEnable = !isDragging
-        animationEnableTimer.start()
-    }
-
+    // 启动时关闭动画，10s 后再启用
     Timer {
         id: animationEnableTimer
-        interval: 10
+        interval: 10000
         repeat: false
         onTriggered: {
             animationEnable = true
         }
     }
 
-    implicitWidth: width
-    width: containerSize.width
-    implicitHeight: height
-    height: containerSize.height
+    implicitWidth: isHorizontal ? trayList.contentItem.childrenRect.width : DDT.TrayItemPositionManager.dockHeight
+    implicitHeight: isHorizontal ? DDT.TrayItemPositionManager.dockHeight : trayList.contentItem.childrenRect.height
 
     Behavior on width {
         enabled: animationEnable
@@ -121,87 +113,84 @@ Item {
         NumberAnimation { duration: 200; easing.type: collapsed || !DDT.TraySortOrderModel.isCollapsing ? Easing.OutQuad : Easing.InQuad }
     }
 
-    // Delegates
-    TrayItemDelegateChooser {
-        id: trayItemDelegateChooser
-        isHorizontal: root.isHorizontal
-        collapsed: root.collapsed
-        itemPadding: root.itemPadding
-        surfaceAcceptor: root.surfaceAcceptor
-        disableInputEvents: root.isDropping
-    }
-
     // debug
     Rectangle {
         color: root.color
         anchors.fill: parent
     }
 
+    // 避免拖拽时鼠标样式改变
     DropArea {
-        id: dropArea
         anchors.fill: parent
         keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
-        onEntered: function (dragEvent) {
-            console.log(dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId"))
-        }
+    }
 
-        onPositionChanged: function (dragEvent) {
-            let surfaceId = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
-            let pos = root.isHorizontal ? drag.x : drag.y
-            let currentItemIndex = pos / (root.itemVisualSize + root.itemSpacing)
-            let currentPosMapToItem = pos % (root.itemVisualSize + root.itemSpacing)
-            let isBefore = currentPosMapToItem < root.itemVisualSize / 2
-            dropHoverIndex = Math.floor(currentItemIndex)
-            let isStash = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-sectionType") === "stashed"
-            // TODO: If this method is used in the stash area, it will cause the drag state to be terminated when dragging to the tray area
-            if (!isStash) {
-                if (dropHoverIndex !== 0) {
-                    dropTrayTimer.handleDrop = function() {
-                        DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore)
-                    }
-                    dropTrayTimer.start()
-                } else if (!surfaceId.startsWith("application-tray")){
-                    dragEvent.accepted = false
+    // Tray items
+    ListView {
+        id: trayList
+        anchors.fill: parent
+        interactive: false
+        orientation: root.isHorizontal ? Qt.Horizontal : Qt.Vertical
+        spacing: root.itemSpacing
+        model: DelegateModel {
+            id: visualModel
+
+            model: DDT.SortFilterProxyModel {
+                sourceModel: root.model
+                filterRowCallback: (sourceRow, sourceParent) => {
+                    let index = sourceModel.index(sourceRow, 0, sourceParent)
+                    return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) !== "stashed" &&
+                           sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
                 }
             }
-        }
-        onDropped: function (dropEvent) {
-            let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
-            let dropIdx = DDT.TrayItemPositionManager.itemIndexByPoint(Qt.point(drag.x, drag.y))
-            let currentItemIndex = dropIdx.index
-            let isBefore = dropIdx.isBefore
-            console.log("dropped", currentItemIndex, isBefore)
-            DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore);
-            DDT.TraySortOrderModel.actionsAlwaysVisible = false
+            delegate: TrayItemDelegateChooser {
+                id: delegateRoot
+                isHorizontal: root.isHorizontal
+                collapsed: root.collapsed
+                itemPadding: root.itemPadding
+                surfaceAcceptor: root.surfaceAcceptor
+                disableInputEvents: root.isDropping
+
+                property int visualIndex: DelegateModel.itemsIndex
+            }
         }
 
-        Timer {
-            id: dropTrayTimer
-            interval: 50
-            repeat: false
-            property var handleDrop
-            onTriggered: {
-                handleDrop()
+        add: Transition {
+            enabled: animationEnable
+            NumberAnimation {
+                properties: "scale,opacity"
+                from: 0
+                to: 1
+                duration: 200
             }
         }
-    }
-
-    // Tray items
-    Repeater {
-        anchors.fill: parent
-        model: root.model
-        delegate: trayItemDelegateChooser
+        remove: Transition {
+            enabled: animationEnable
+            NumberAnimation {
+                properties: "scale,opacity"
+                from: 1
+                to: 0
+                duration: 200
+            }
+        }
+        displaced: Transition {
+            enabled: animationEnable
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutQuad
+            }
+        }
+        move: displaced
     }
 
     Component.onCompleted: {
         DDT.TrayItemPositionManager.orientation = Qt.binding(function() {
             return root.isHorizontal ? Qt.Horizontal : Qt.Vertical
         });
-        DDT.TrayItemPositionManager.visualItemCount = Qt.binding(function() {
-            return root.model.visualItemCount
-        });
         DDT.TrayItemPositionManager.dockHeight = Qt.binding(function() {
             return root.trayHeight
         });
+
+        animationEnableTimer.start()
     }
 }