contents/ui/WidgetDragItem.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 import QtQuick.Controls as QQC2
0007 import Qt5Compat.GraphicalEffects
0008
0009 import org.kde.kirigami as Kirigami
0010 import org.kde.plasma.core as PlasmaCore
0011 import org.kde.ksvg 1.0 as KSvg
0012
0013 import org.kde.plasma.components 3.0 as PC3
0014 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0015
0016 import './delegate'
0017 import './private'
0018
0019 Item {
0020     id: root
0021     width: widgetLoader.item ? widgetLoader.item.width : 0
0022     height: widgetLoader.item ? widgetLoader.item.height : 0
0023
0024     property Folio.FolioWidget widget
0025
0026     readonly property bool isWidgetDelegate: Folio.HomeScreenState.dragState.dropDelegate && Folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget
0027     readonly property bool dropAnimationRunning: dragXAnim.running || dragYAnim.running
0028
0029     visible: false
0030     x: Math.round(Folio.HomeScreenState.delegateDragX)
0031     y: Math.round(Folio.HomeScreenState.delegateDragY)
0032
0033     function startDrag(widget) {
0034         root.widget = widget;
0035         visible = true;
0036     }
0037
0038     function setXBinding() {
0039         x = Qt.binding(() => Math.round(Folio.HomeScreenState.delegateDragX));
0040     }
0041     function setYBinding() {
0042         y = Qt.binding(() => Math.round(Folio.HomeScreenState.delegateDragY));
0043     }
0044
0045     // animate drop x
0046     XAnimator on x {
0047         id: dragXAnim
0048         running: false
0049         duration: Kirigami.Units.longDuration
0050         easing.type: Easing.OutCubic
0051         onFinished: {
0052             root.visible = false;
0053             root.widget = null;
0054             root.setXBinding();
0055         }
0056     }
0057
0058     // animate drop y
0059     YAnimator on y {
0060         id: dragYAnim
0061         running: false
0062         duration: Kirigami.Units.longDuration
0063         easing.type: Easing.OutCubic
0064         onFinished: {
0065             root.visible = false;
0066             root.widget = null;
0067             root.setYBinding();
0068         }
0069     }
0070
0071     Connections {
0072         id: stateWatcher
0073         target: Folio.HomeScreenState
0074
0075         function onSwipeStateChanged() {
0076             if (Folio.HomeScreenState.swipeState === Folio.HomeScreenState.DraggingDelegate &&
0077                 Folio.HomeScreenState.dragState.dropDelegate &&
0078                 Folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget) {
0079
0080                 root.startDrag(Folio.HomeScreenState.dragState.dropDelegate.widget);
0081             }
0082         }
0083     }
0084
0085     Connections {
0086         target: Folio.HomeScreenState.dragState
0087
0088         // animate from when the delegate is dropped to its drop position
0089         function onDelegateDroppedAndPlaced() {
0090             if (!root.isWidgetDelegate) {
0091                 return;
0092             }
0093
0094             let dragState = Folio.HomeScreenState.dragState;
0095             let dropPosition = dragState.candidateDropPosition;
0096
0097             let pos = Folio.HomeScreenState.getPageDelegateScreenPosition(dropPosition.page, dropPosition.pageRow, dropPosition.pageColumn);
0098
0099             dragXAnim.to = pos.x;
0100             dragYAnim.to = pos.y;
0101             dragXAnim.restart();
0102             dragYAnim.restart();
0103         }
0104
0105         // if the drop has been abandoned, just hide
0106         function onNewDelegateDropAbandoned() {
0107             root.visible = false;
0108         }
0109     }
0110
0111     Loader {
0112         id: widgetLoader
0113
0114         active: root.widget
0115
0116         sourceComponent: WidgetDelegate {
0117             widget: root.widget
0118
0119             layer.enabled: true
0120             layer.effect: DarkenEffect {}
0121         }
0122     }
0123 }