chris/lumina
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring drag system

Browse source
This commit is contained in:
Chris Cochrun 2022-08-25 05:36:25 -05:00
parent 7c51d4a868
commit 16b068e884
1 changed files with 89 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/qml/presenter/LeftDock.qml
View file

@ -1,10 +1,11 @@
import QtQuick 2.13 import QtQuick 2.13
import QtQuick.Dialogs 1.0 /* import QtQuick.Dialogs 1.0 */
import QtQuick.Controls 2.0 as Controls import QtQuick.Controls 2.0 as Controls
import QtQuick.Window 2.13 /* import QtQuick.Window 2.13 */
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
/* import QtQuick.Shapes 1.15 */
import QtQml.Models 2.12 import QtQml.Models 2.12
import QtMultimedia 5.15 /* import QtMultimedia 5.15 */
/* import QtAudioEngine 1.15 */ /* import QtAudioEngine 1.15 */
import org.kde.kirigami 2.13 as Kirigami import org.kde.kirigami 2.13 as Kirigami
import "./" as Presenter import "./" as Presenter
@ -14,6 +15,7 @@ ColumnLayout {
id: root id: root
property var selectedItem: serviceItemList.selected property var selectedItem: serviceItemList.selected
property var hlItem
Rectangle { Rectangle {
id: headerBackground id: headerBackground
@ -56,7 +58,8 @@ ColumnLayout {
/* } */ /* } */
clip: true clip: true
spacing: 3 spacing: 3
property int dragItemIndex property int indexDragged
property int draggedY
addDisplaced: Transition { addDisplaced: Transition {
NumberAnimation {properties: "x, y"; duration: 100} NumberAnimation {properties: "x, y"; duration: 100}
@ -80,20 +83,24 @@ ColumnLayout {
model: DelegateModel { model: DelegateModel {
id: visualModel id: visualModel
model: serviceItemModel model: serviceItemModel
delegate: DropArea { delegate: DropArea {
id: serviceDrop id: serviceDrop
implicitWidth: serviceItemList.width implicitWidth: serviceItemList.width
height: 50 height: 50
onEntered: (drag) => { onEntered: (drag) => {
/* dropPlacement(drag); */ if (drag.keys[0] === "library") {
const from = (drag.source as visServiceItem) indexedHLRec.visible = true;
visualModel.items.move(dragItemIndex, index); indexedHLRec.y = y - 2;
}
} }
onDropped: (drag) => { onDropped: (drag) => {
print("DROPPED IN ITEM AREA: " + drag.keys); print("DROPPED IN ITEM AREA: " + drag.keys);
print(dragItemIndex + " " + index); print(dragItemIndex + " " + index);
const hlIndex = serviceItemList.currentIndex; const hlIndex = serviceItemList.currentIndex;
if (drag.keys === ["library"]) { if (drag.keys[0] === "library") {
addItem(index, addItem(index,
dragItemTitle, dragItemTitle,
dragItemType, dragItemType,
@ -101,14 +108,16 @@ ColumnLayout {
dragItemBackgroundType, dragItemBackgroundType,
dragItemText, dragItemText,
dragItemIndex); dragItemIndex);
} else if (drag.keys === ["serviceitem"]) { } else if (drag.keys[0] === "serviceitem") {
moveRequested(dragItemIndex, index); moveRequested(dragItemIndex, index);
if (hlIndex === dragItemIndex) if (hlIndex === serviceItemList.indexDragged)
serviceItemList.currentIndex = index; serviceItemList.currentIndex = index;
else if (hlIndex === index) else if (hlIndex === index)
serviceItemList.currentIndex = index + 1; serviceItemList.currentIndex = index + 1;
} }
indexedHLRec.visible = false;
} }
keys: ["library","serviceitem"] keys: ["library","serviceitem"]
Kirigami.BasicListItem { Kirigami.BasicListItem {
@ -124,9 +133,10 @@ ColumnLayout {
hoverEnabled: false hoverEnabled: false
supportsMouseEvents: false supportsMouseEvents: false
backgroundColor: { backgroundColor: {
if (serviceItemList.currentIndex === index || if (serviceItemList.currentIndex === index)
mouseHandler.containsMouse)
Kirigami.Theme.highlightColor; Kirigami.Theme.highlightColor;
else if (mouseHandler.containsMouse)
Kirigami.Theme.hoverColor;
else else
Kirigami.Theme.backgroundColor; Kirigami.Theme.backgroundColor;
} }
@ -138,6 +148,8 @@ ColumnLayout {
Kirigami.Theme.textColor; Kirigami.Theme.textColor;
} }
onYChanged: serviceItemList.updateDrag(Math.round(y));
states: [ states: [
State { State {
when: mouseHandler.drag.active when: mouseHandler.drag.active
@ -179,7 +191,7 @@ ColumnLayout {
drag.onActiveChanged: { drag.onActiveChanged: {
if (mouseHandler.drag.active) { if (mouseHandler.drag.active) {
dragItemIndex = index; serviceItemList.indexDragged = index;
} }
} }
@ -211,27 +223,6 @@ ColumnLayout {
} }
} }
/* Presenter.DragHandle { */
/* id: mouseHandler */
/* anchors.fill: parent */
/* listItem: serviceItem */
/* listView: serviceItemList */
/* onMoveRequested: { */
/* print(oldIndex, newIndex); */
/* serviceItemModel.move(oldIndex, newIndex); */
/* } */
/* onDropped: { */
/* } */
/* onClicked: { */
/* serviceItemList.currentIndex = index; */
/* currentServiceItem = index; */
/* changeServiceItem(index); */
/* } */
/* onRightClicked: rightClickMenu.popup() */
/* } */
Controls.Menu { Controls.Menu {
id: rightClickMenu id: rightClickMenu
x: mouseHandler.mouseX x: mouseHandler.mouseX
@ -242,14 +233,11 @@ ColumnLayout {
} }
} }
function moveRequested(oldIndex, newIndex) {
serviceItemModel.move(oldIndex, newIndex);
}
function dropPlacement(drag) { function dropPlacement(drag) {
print(drag.y); print(drag.y);
} }
} }
} }
@ -265,6 +253,69 @@ ColumnLayout {
anchors.rightMargin: 0 anchors.rightMargin: 0
active: hovered || pressed active: hovered || pressed
} }
function updateDrag(y) {
var newIndex;
print(serviceItemList.indexAt(0,y));
serviceItemList.draggedY = y;
if (y < 30) {
indexedHLRec.y = 0;
newIndex = 0;
moveRequested(indexDragged, newIndex)
}
else if (y < 80) {
indexedHLRec.y = 50;
newIndex = 1;
moveRequested(indexDragged, newIndex)
}
else if (y < 130) {
indexedHLRec.y = 100;
newIndex = 2;
moveRequested(indexDragged, newIndex)
}
}
function moveRequested(oldIndex, newIndex) {
serviceItemModel.move(oldIndex, newIndex);
}
}
Rectangle {
id: indexedHLRec
width: parent.width
height: 4
color: Kirigami.Theme.hoverColor
visible: false
}
Canvas {
/* asynchronous: true; */
x: indexedHLRec.width - 8
y: indexedHLRec.y - 17
z: 1
width: 100; height: 100;
contextType: "2d"
onPaint: {
var ctx = getContext("2d");
ctx.fillStyle = Kirigami.Theme.hoverColor;
ctx.rotate(30);
ctx.transform(0.8, 0, 0, 0.8, 0, 30)
ctx.path = tearDropPath;
ctx.fill();
}
visible: indexedHLRec.visible
}
Path {
id: tearDropPath
startX: indexedHLRec.width
startY: indexedHLRec.y + 4
PathSvg {
path: "M15 3
Q16.5 6.8 25 18
A12.8 12.8 0 1 1 5 18
Q13.5 6.8 15 3z"
}
} }
} }