contents/ui/DelegateDragItem.qml

0001 // SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Layouts
0006
0007 import org.kde.kirigami 2.20 as Kirigami
0008 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0009
0010 import "./delegate"
0011
0012 Item {
0013     id: root
0014     width: Folio.HomeScreenState.pageCellWidth
0015     height: Folio.HomeScreenState.pageCellHeight
0016
0017     property Folio.FolioDelegate delegate
0018
0019     readonly property real dropAnimationRunning: dragXAnim.running || dragYAnim.running
0020
0021     // ignore widget dragging, that is not handled by this component
0022     readonly property bool isWidgetDrag: Folio.HomeScreenState.dragState.dropDelegate && Folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget
0023
0024     visible: false
0025     x: Folio.HomeScreenState.delegateDragX
0026     y: Folio.HomeScreenState.delegateDragY
0027
0028     function setXBinding() {
0029         x = Qt.binding(() => Folio.HomeScreenState.delegateDragX);
0030     }
0031     function setYBinding() {
0032         y = Qt.binding(() => Folio.HomeScreenState.delegateDragY);
0033     }
0034
0035     // animate drop x
0036     XAnimator on x {
0037         id: dragXAnim
0038         running: false
0039         duration: Kirigami.Units.longDuration
0040         easing.type: Easing.OutCubic
0041         onFinished: {
0042             root.visible = false;
0043             root.setXBinding();
0044         }
0045     }
0046
0047     // animate drop y
0048     YAnimator on y {
0049         id: dragYAnim
0050         running: false
0051         duration: Kirigami.Units.longDuration
0052         easing.type: Easing.OutCubic
0053         onFinished: {
0054             root.visible = false;
0055             root.setYBinding();
0056         }
0057     }
0058
0059     // animate scale if it's an app being placed into a folder
0060     ScaleAnimator on scale {
0061         id: scaleAnim
0062         to: 0
0063         running: false
0064         duration: Kirigami.Units.longDuration
0065         easing.type: Easing.InOutCubic
0066     }
0067
0068     Connections {
0069         id: stateWatcher
0070         target: Folio.HomeScreenState
0071
0072         property var delegateDroppedOn: null
0073
0074         // reset and show drag item
0075         function onSwipeStateChanged() {
0076             if (Folio.HomeScreenState.swipeState === Folio.HomeScreenState.DraggingDelegate && !isWidgetDrag) {
0077                 root.scale = 1.0;
0078                 root.visible = true;
0079             }
0080         }
0081
0082         // save the existing delegate at the spot (this is called before the delegate is dropped)
0083         function onDelegateDragEnded() {
0084             if (root.isWidgetDrag) {
0085                 return;
0086             }
0087
0088             let dragState = Folio.HomeScreenState.dragState;
0089             let dropPosition = dragState.candidateDropPosition;
0090
0091             switch (dropPosition.location) {
0092                 case Folio.DelegateDragPosition.Pages:
0093                     stateWatcher.delegateDroppedOn = Folio.HomeScreenState.getPageDelegateAt(dropPosition.page, dropPosition.pageRow, dropPosition.pageColumn);
0094                     break;
0095                 case Folio.DelegateDragPosition.Favourites:
0096                     stateWatcher.delegateDroppedOn = Folio.HomeScreenState.getFavouritesDelegateAt(dropPosition.favouritesPosition);
0097                     break;
0098                 case Folio.DelegateDragPosition.Folder:
0099                     stateWatcher.delegateDroppedOn = null;
0100                     break;
0101             }
0102         }
0103     }
0104
0105     Connections {
0106         target: Folio.HomeScreenState.dragState
0107
0108         // animate from when the delegate is dropped to its drop position
0109         function onDelegateDroppedAndPlaced() {
0110             if (root.isWidgetDrag) {
0111                 return;
0112             }
0113
0114             let dragState = Folio.HomeScreenState.dragState;
0115             let dropPosition = dragState.candidateDropPosition;
0116
0117             let pos = null;
0118
0119             switch (dropPosition.location) {
0120                 case Folio.DelegateDragPosition.Pages:
0121                     pos = Folio.HomeScreenState.getPageDelegateScreenPosition(dropPosition.page, dropPosition.pageRow, dropPosition.pageColumn);
0122                     break;
0123                 case Folio.DelegateDragPosition.Favourites:
0124                     pos = Folio.HomeScreenState.getFavouritesDelegateScreenPosition(dropPosition.favouritesPosition);
0125                     break;
0126                 case Folio.DelegateDragPosition.Folder:
0127                     pos = Folio.HomeScreenState.getFolderDelegateScreenPosition(dropPosition.folderPosition);
0128                     break;
0129             }
0130
0131             dragXAnim.to = pos.x;
0132             dragYAnim.to = pos.y;
0133             dragXAnim.restart();
0134             dragYAnim.restart();
0135
0136             if (stateWatcher.delegateDroppedOn &&
0137                 stateWatcher.delegateDroppedOn.type != Folio.FolioDelegate.None &&
0138                 dragState.dropDelegate.type === Folio.FolioDelegate.Application) {
0139
0140                 // scale animation if we are creating, or inserting into a folder
0141                 scaleAnim.restart();
0142             }
0143         }
0144
0145         // if the drop has been abandoned, just hide
0146         function onNewDelegateDropAbandoned() {
0147             root.visible = false;
0148         }
0149     }
0150
0151     // simulate an icon delegate
0152     ColumnLayout {
0153         anchors.fill: parent
0154         spacing: 0
0155
0156         // icon
0157         DelegateIconLoader {
0158             id: loader
0159             Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
0160             Layout.minimumWidth: Folio.FolioSettings.delegateIconSize
0161             Layout.minimumHeight: Folio.FolioSettings.delegateIconSize
0162             Layout.preferredHeight: Layout.minimumHeight
0163
0164             delegate: root.delegate
0165
0166             layer.enabled: true
0167             layer.effect: DelegateShadow {}
0168         }
0169
0170         // simulate the delegate label for positioning purposes
0171         DelegateLabel {
0172             id: label
0173             opacity: 0
0174
0175             Layout.fillWidth: true
0176             Layout.preferredHeight: Folio.HomeScreenState.pageDelegateLabelHeight
0177             Layout.topMargin: Folio.HomeScreenState.pageDelegateLabelSpacing
0178             Layout.leftMargin: -parent.anchors.leftMargin + Kirigami.Units.smallSpacing
0179             Layout.rightMargin: -parent.anchors.rightMargin + Kirigami.Units.smallSpacing
0180         }
0181     }
0182 }