import QtQuick 2.13 /* import QtQuick.Dialogs 1.0 */ import QtQuick.Controls 2.0 as Controls /* import QtQuick.Window 2.13 */ import QtQuick.Layouts 1.2 import QtQuick.Shapes 1.15 /* import QtQml.Models 2.12 */ /* import QtMultimedia 5.15 */ /* import QtAudioEngine 1.15 */ import QtGraphicalEffects 1.15 import org.kde.kirigami 2.13 as Kirigami import "./" as Presenter import org.presenter 1.0 Item { id: root property var selectedItem: serviceItemList.selected property var hlItem Rectangle { id: background color: Kirigami.Theme.backgroundColor anchors.fill: parent } FastBlur { id: backgroundBlur source: ShaderEffectSource { sourceItem: background sourceRect: Qt.rect(0, 0, backgroundBlur.width, backgroundBlur.height) } anchors.fill: parent radius: 82 opacity: 0.60 } ColumnLayout { id: layout anchors.fill: parent Rectangle { id: headerBackground color: Kirigami.Theme.backgroundColor height: 40 opacity: 1.0 Layout.fillWidth: true Kirigami.Heading { id: serviceTitle text: "Service List" anchors.centerIn: headerBackground padding: 5 level: 3 } } DropArea { id: serviceDropEnd Layout.fillHeight: true Layout.fillWidth: true onDropped: (drag) => { print("DROPPED AT END"); showPassiveNotification(drag.source.title); appendItem(dragItemTitle, dragItemType, dragItemBackground, dragItemBackgroundType, dragItemText, dragItemAudio, dragItemFont, dragItemFontSize, dragItemIndex); dropHighlightLine.visible = false; } keys: ["library"] onEntered: (drag) => { if (drag.keys[0] === "library") { dropHighlightLine.visible = true; var lastItem = serviceItemList.itemAtIndex(serviceItemModel.rowCount() - 1); dropHighlightLine.y = lastItem.y + lastItem.height; } } /* onExited: dropHighlightLine.visible = false; */ ListView { id: serviceItemList anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left width: serviceListScrollBar.visible ? parent.width - serviceListScrollBar.width : parent.width clip: true spacing: 3 property int indexDragged property int moveToIndex property int draggedY addDisplaced: Transition { NumberAnimation {properties: "x, y"; duration: 100} } moveDisplaced: Transition { NumberAnimation { properties: "x, y"; duration: 100 } } remove: Transition { NumberAnimation { properties: "x, y"; duration: 100 } NumberAnimation { properties: "opacity"; duration: 100 } } removeDisplaced: Transition { NumberAnimation { properties: "x, y"; duration: 100 } } displaced: Transition { NumberAnimation {properties: "x, y"; duration: 100} } model: serviceItemModel delegate: DropArea { id: serviceDrop implicitWidth: serviceItemList.width height: 30 /* enabled: false */ onEntered: (drag) => { if (drag.keys[0] === "library") { dropHighlightLine.visible = true; dropHighlightLine.y = y - 2; } } /* onExited: dropHighlightLine.visible = false; */ onDropped: (drag) => { print("DROPPED IN ITEM AREA: " + drag.keys); print(dragItemIndex + " " + index); const hlIndex = serviceItemList.currentIndex; if (drag.keys[0] === "library") { addItem(index, dragItemTitle, dragItemType, dragItemBackground, dragItemBackgroundType, dragItemText, dragItemAudio, dragItemFont, dragItemFontSize, dragItemIndex); } else if (drag.keys[0] === "serviceitem") { serviceItemModel.move(serviceItemList.indexDragged, serviceItemList.moveToIndex); serviceItemList.currentIndex = moveToIndex; } dropHighlightLine.visible = false; } keys: ["library","serviceitem"] Rectangle { id: visServiceItem width: serviceDrop.width height: serviceDrop.height anchors { horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } color: { if (active) Kirigami.Theme.highlightColor; else if (selected) Kirigami.Theme.focusColor; else if (mouseHandler.containsMouse) Kirigami.Theme.hoverColor; else Kirigami.Theme.backgroundColor; } Controls.Label { id: label anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: 5 text: name elide: Text.ElideRight width: parent.width - trailing.width - 15 color: { if (selected || mouseHandler.containsMouse || active) Kirigami.Theme.highlightedTextColor; else Kirigami.Theme.textColor; } } Controls.Label { id: trailing anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter anchors.rightMargin: 5 text: type color: { if (selected || mouseHandler.containsMouse || active) Kirigami.Theme.highlightedTextColor; else Kirigami.Theme.disabledTextColor; } } onYChanged: serviceItemList.updateDrag(Math.round(y)); states: [ State { when: mouseHandler.drag.active ParentChange { target: visServiceItem parent: serviceItemList } PropertyChanges { target: visServiceItem /* backgroundColor: Kirigami.Theme.backgroundColor */ /* textColor: Kirigami.Theme.textColor */ anchors.verticalCenter: undefined anchors.horizontalCenter: undefined } } ] /* Drag.dragType: Drag.Automatic */ Drag.active: mouseHandler.drag.active Drag.hotSpot.x: width / 2 Drag.hotSpot.y: height / 2 Drag.keys: ["serviceitem"] MouseArea { id: mouseHandler anchors.fill: parent hoverEnabled: true acceptedButtons: Qt.LeftButton | Qt.RightButton preventStealing: true drag { target: visServiceItem axis: Drag.YAxis /* minimumY: root.y */ /* maximumY: serviceItemList.height - serviceDrop.height */ smoothed: false } drag.onActiveChanged: { if (mouseHandler.drag.active) { serviceItemList.indexDragged = index; } } /* onPositionChanged: { */ /* if (!pressed) { */ /* return; */ /* } */ /* mouseArea.arrangeItem(); */ /* } */ onPressed: { serviceItemList.interactive = false; } onClicked: { if (mouse.button === Qt.RightButton) rightClickMenu.popup(); else { serviceItemList.currentIndex = index; serviceItemModel.select(index); /* currentServiceItem = index; */ /* changeItem(index); */ } } onDoubleClicked: { /* showPassiveNotification("Double Clicked") */ /* serviceItemList.currentIndex = index; */ changeServiceItem(index); } onReleased: { print("should drop"); visServiceItem.Drag.drop(); } } } Controls.Menu { id: rightClickMenu x: mouseHandler.mouseX y: mouseHandler.mouseY + 10 Kirigami.Action { text: "delete" onTriggered: removeItem(index); } } } Kirigami.WheelHandler { id: wheelHandler target: serviceItemList filterMouseEvents: true /* keyNavigationEnabled: true */ } Controls.ScrollBar.vertical: Controls.ScrollBar { id: serviceListScrollBar parent: serviceItemList.parent anchors.right: background.right anchors.left: serviceItemList.right anchors.top: serviceItemList.top anchors.bottom: serviceItemList.bottom active: hovered || pressed } function updateDrag(y) { if (moveToIndex === serviceItemList.indexAt(0,y)) return; else moveToIndex = serviceItemList.indexAt(0,y); moveRequested(indexDragged, moveToIndex); } function moveRequested(oldIndex, newIndex) { print("moveRequested: ", oldIndex, newIndex); serviceItemModel.move(oldIndex, newIndex); indexDragged = newIndex; serviceItemList.currentIndex = newIndex; } } Rectangle { id: dropHighlightLine width: parent.width height: 4 color: Kirigami.Theme.hoverColor visible: false } Canvas { /* asynchronous: true; */ x: dropHighlightLine.width - 8 y: dropHighlightLine.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: dropHighlightLine.visible } Path { id: tearDropPath startX: dropHighlightLine.width startY: dropHighlightLine.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" } } /* Shape { */ /* x: dropHighlightLine.width - 8 */ /* y: dropHighlightLine.y - 17 */ /* z: 1 */ /* width: 100; height: 100; */ /* ShapePath { */ /* fillColor: Kirigami.Theme.hoverColor */ /* startX: 0; startY: 0 */ /* PathLine { x: 180; y: 130 } */ /* PathLine { x: 20; y: 130 } */ /* PathLine { x: 20; y: 20 } */ /* PathArc { */ /* x: 40; y: 200; */ /* radiusX: 200; */ /* radiusY: 200; */ /* useLargeArc: true */ /* } */ /* PathLine { x: 40; y: 120 } */ /* PathArc { */ /* x: -40; y: 120; */ /* radiusX: 120; */ /* radiusY: 120; */ /* useLargeArc: true; */ /* direction: PathArc.Counterclockwise */ /* } */ /* PathLine { x: -40; y: 200 } */ /* } */ /* } */ } Kirigami.ActionToolBar { id: serviceToolBar Layout.fillWidth: true opacity: 1.0 actions: [ Kirigami.Action { /* text: "Up" */ icon.name: "arrow-up" onTriggered: { const oldid = serviceItemList.currentIndex; if (oldid <= 0) { showPassiveNotification("wow stop trying to go nego"); return; } const newid = serviceItemList.currentIndex - 1; showPassiveNotification(oldid + " " + newid); showPassiveNotification("Up"); const ans = serviceItemModel.move(oldid, newid); if (ans) { serviceItemList.currentIndex = newid; showPassiveNotification("move was successful, newid: " + serviceItemList.currentIndex); } else showPassiveNotification("move was unsuccessful") } }, Kirigami.Action { /* text: "Down" */ icon.name: "arrow-down" onTriggered: { const id = serviceItemList.currentIndex; if (id + 1 >= serviceItemList.count) { showPassiveNotification("wow you dummy you can't got further down"); return; }; showPassiveNotification("moving ", id, " down"); const ans = serviceItemModel.moveDown(id); if (ans) { serviceItemList.currentIndex = id + 1; showPassiveNotification("move was successful, newid: " + serviceItemList.currentIndex); } else showPassiveNotification("move was unsuccessful, id: " + id); } }, Kirigami.Action { /* text: "Remove" */ icon.name: "delete" onTriggered: { showPassiveNotification("remove"); removeItem(serviceItemList.currentIndex); } } ] } } Component.onCompleted: { totalServiceItems = serviceItemList.count; print("THE TOTAL SERVICE ITEMS: " + totalServiceItems); } function removeItem(index) { serviceItemModel.removeItem(index); totalServiceItems--; } function addItem(index, name, type, background, backgroundType, text, audio, font, fontSize, itemID) { if (type === "song") { const newtext = songsqlmodel.getLyricList(itemID); print("adding: " + name + " of type " + type); serviceItemModel.insertItem(index, name, type, background, backgroundType, newtext, audio, font, fontSize); totalServiceItems++; return; } print("adding: " + name + " of type " + type); serviceItemModel.insertItem(index, name, type, background, backgroundType); totalServiceItems++; } function appendItem(name, type, background, backgroundType, text, audio, font, fontSize, itemID) { print("adding: " + name + " of type " + type); let lyrics; if (type === "song") { print("THIS IS A SONG!!!!!"); print(itemID); lyrics = songsqlmodel.getLyricList(itemID); print(lyrics); serviceItemModel.addItem(name, type, background, backgroundType, lyrics, audio, font, fontSize); totalServiceItems++; return; }; print(background); print(backgroundType); serviceItemModel.addItem(name, type, background, backgroundType); totalServiceItems++; } function changeItem() { } }