contents/ui/DragPage.qml

0001 /*
0002     SPDX-FileCopyrightText: 2013 Sebastian Kügler <sebas@kde.org>
0003     SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
0004
0005     SPDX-License-Identifier: GPL-2.0-or-later
0006 */
0007
0008 import QtQuick
0009 import QtQuick.Layouts
0010 import QtQuick.Templates as T
0011 import org.kde.kirigami as Kirigami
0012 import org.kde.draganddrop as DragAndDrop
0013 import org.kde.plasma.components as PlasmaComponents
0014 import org.kde.plasma.extras as PlasmaExtras
0015 import org.kde.plasma.plasmoid
0016
0017 PlasmaComponents.Page {
0018     id: root
0019
0020     property int _h: 48
0021     property bool isDragging: false
0022
0023     padding: Kirigami.Units.largeSpacing
0024
0025     contentItem: ColumnLayout {
0026
0027         spacing: 0
0028
0029         Kirigami.Heading {
0030             Layout.fillWidth: true
0031             horizontalAlignment: Text.AlignHCenter
0032             elide: Text.ElideMiddle
0033
0034             level: 1
0035             text: "Drag & Drop"
0036         }
0037
0038         RowLayout {
0039             spacing: 0
0040
0041             Layout.fillWidth: true
0042             Layout.fillHeight: true
0043
0044             ColumnLayout {
0045                 id: dragCol
0046
0047                 property int itemHeight: _h*1.5
0048
0049                 spacing: _h/4
0050
0051                 Layout.fillWidth: true
0052                 Layout.fillHeight: true
0053                 Layout.preferredWidth: 1
0054
0055                 DragItem {
0056                     text: "Image and URL"
0057                     icon.name: "image-png"
0058                     Layout.preferredHeight: parent.itemHeight
0059                     DragAndDrop.DragArea {
0060                         objectName: "imageandurl"
0061                         anchors { fill: parent; }
0062                         //delegateImage: "akonadi"
0063                         mimeData.url: "https://plasma.kde.org/"
0064                         onDragStarted: {
0065                             isDragging = true;
0066                             print(" drag started for " + objectName);
0067                             ooo.text = objectName
0068                         }
0069                         onDrop: {
0070                             isDragging = false;
0071                             print(" item dropped " + objectName);
0072                             ooo.text = objectName
0073                         }
0074                         //Rectangle { anchors.fill: parent; color: "blue"; opacity: 0.4; }
0075                     }
0076                 }
0077                 DragItem {
0078                     text: "Delegate Image"
0079                     icon.name: "image-png"
0080                     Layout.preferredHeight: parent.itemHeight
0081                     DragAndDrop.DragArea {
0082                         objectName: "image"
0083                         anchors { fill: parent; }
0084                         //delegateImage: "akonadi"
0085                         //mimeData.url: "https://plasma.kde.org"
0086                         onDragStarted: {
0087                             isDragging = true;
0088                             print(" drag started for " + objectName);
0089                             ooo.text = objectName
0090                         }
0091                         onDrop: {
0092                             isDragging = false;
0093                             print(" item dropped " + objectName);
0094                             ooo.text = objectName
0095                         }
0096                         //Rectangle { anchors.fill: parent; color: "green"; opacity: 0.4; }
0097                     }
0098                 }
0099                 DragItem {
0100                     text: "HTML"
0101                     icon.name: "text-html"
0102                     Layout.preferredHeight: parent.itemHeight
0103                     DragAndDrop.DragArea {
0104                         objectName: "html"
0105                         anchors { fill: parent; }
0106                         mimeData.html: "<b>One <i> Two <u> Three </b> Four </i>Five </u> "
0107                         onDragStarted: {
0108                             isDragging = true;
0109                             print(" drag started for " + objectName);
0110                             ooo.text = objectName
0111                         }
0112                         onDrop: {
0113                             isDragging = false;
0114                             print(" item dropped " + objectName);
0115                             ooo.text = objectName
0116                         }
0117                     }
0118                 }
0119                 DragItem {
0120                     text: "Color"
0121                     icon.name: "preferences-color"
0122                     Layout.preferredHeight: parent.itemHeight
0123                     DragAndDrop.DragArea {
0124                         objectName: "color"
0125                         anchors { fill: parent; }
0126                         mimeData.color: "orange"
0127                         onDragStarted: {
0128                             isDragging = true;
0129                             print(" drag started for " + objectName);
0130                             ooo.text = objectName
0131                         }
0132                         onDrop: {
0133                             isDragging = false;
0134                             print(" item dropped " + objectName);
0135                             ooo.text = objectName
0136                             //mimeData.
0137                         }
0138                     }
0139                 }
0140                 DragItem {
0141                     text: "Lots of Stuff"
0142                     icon.name: "ksplash"
0143                     Layout.preferredHeight: parent.itemHeight
0144
0145                     DragAndDrop.DragArea {
0146                         id: dragArea2
0147                         objectName: "stuff"
0148                         anchors.fill: parent
0149
0150                         mimeData.text: "Clownfish"
0151                         mimeData.html: "<h2>Swimming in a Sea of Cheese</h2><pre>Primus->perform();</pre><br/>"
0152                         mimeData.color: "darkred"
0153                         mimeData.url: "https://plasma.kde.org"
0154                         mimeData.urls: ["https://planet.kde.org", "https://fsfe.org", "https://techbase.kde.org", "https://qt.io"]
0155
0156                         //Rectangle { anchors.fill: parent; color: "yellow"; opacity: 0.6; }
0157
0158                         onDragStarted: {
0159                             isDragging = true;
0160                             print(" drag started for " + objectName);
0161                             ooo.text = objectName
0162                         }
0163                         onDrop: {
0164                             isDragging = false;
0165                             print(" item dropped " + objectName);
0166                             ooo.text = objectName
0167                         }
0168                     }
0169                 }
0170                 PlasmaComponents.Label {
0171                     id: ooo
0172                 }
0173             }
0174
0175             DragAndDrop.DropArea {
0176                 Layout.fillWidth: true
0177                 Layout.fillHeight: true
0178                 Layout.preferredWidth: 1
0179
0180                 PlasmaExtras.Highlight {
0181                     id: dropHightlight
0182                     anchors.fill: parent
0183                     opacity: 0
0184
0185                     PropertyAnimation { properties: "opacity"; easing.type: Easing.Linear; duration: 2000; }
0186                 }
0187
0188                 Rectangle { id: clr; anchors.fill: parent; color: "transparent"; opacity: color != "transparent" ? 1 : 0; }
0189
0190                 PlasmaComponents.Label {
0191                     id: ilabel
0192                     font.pointSize: _h / 2
0193                     text: "Drop here."
0194                     opacity: isDragging ? 0.7 : 0
0195                     anchors.centerIn: parent
0196                     horizontalAlignment: Text.AlignCenter
0197                     PropertyAnimation { properties: "opacity"; easing.type: Easing.Linear; duration: 2000; }
0198                 }
0199
0200                 PlasmaComponents.Label {
0201                     id: slabel
0202                     font.pointSize: _h / 4
0203                     //text: "Drop here."
0204                     //opacity: isDragging ? 1 : 0
0205                     //onTextChanged: print("droparea changed to " + text)
0206                     anchors.top: parent.top
0207                     anchors.right: parent.right
0208                     anchors.left: parent.left
0209                     //horizontalAlignment: Text.AlignCenter
0210                 }
0211
0212                 onDragEnter: {
0213         //             slabel.text = "drop item here";
0214                     dropHightlight.opacity = 1;
0215                 }
0216                 onDragLeave: {
0217         //             slabel.text = "drop left";
0218                     dropHightlight.opacity = 0;
0219                 }
0220                 onDrop: {
0221                     var txt = event.mimeData.html;
0222                     txt += event.mimeData.text;
0223                     if (event.mimeData.url != "") {
0224                         txt += "<br />Url: " + event.mimeData.url;
0225                     }
0226                     var i = 0;
0227                     var u;
0228                     for (u in event.mimeData.urls) {
0229                         txt += "<br />  Url " + i + " : " + event.mimeData.urls[i];
0230                         i++;
0231                     }
0232         //             print("COLOR: " + event.mimeData.color);
0233                     if (event.mimeData.hasColor()) {
0234                         clr.color = event.mimeData.color;
0235                     } else {
0236                         clr.color = "transparent";
0237                     }
0238                     slabel.text = txt
0239                     dropHightlight.opacity = 0.5;
0240                 }
0241             }
0242         }
0243     }
0244 }