Implemented draging a melody view to change order

changes

 1.7.3 git
      - exam melodies can be played in order from melody set
+     - melodies order in set is editable
      - user can define repeats number of melodies from the set
      - updated SoundTouch library version to 2.2 (Windows&Android)
 

src/dialogs/tmelodylistview.cpp

@@ -111,6 +111,16 @@ void TmelodyListView::removeMelody(int id) {
 }
 
 
+void TmelodyListView::swapMelodies(int from, int to) {
+  if (from > -1 && from < m_melodies.count() && to > -1 && to < m_melodies.count()) {
+      m_melodies.move(from, to);
+      m_listWasChanged = true;
+      emit melodiesChanged();
+  } else
+      qDebug() << "[TmelodyListView] FIXME! Wrong melodies to swap";
+}
+
+
 Tmelody* TmelodyListView::getMelody(int melId) {
   return melId > -1 && melId < m_melodies.count() ? m_melodies[melId].melody : nullptr;
 }

src/dialogs/tmelodylistview.h

@@ -57,6 +57,7 @@ public:
 
   Q_INVOKABLE void loadMelody();
   Q_INVOKABLE void removeMelody(int id);
+  Q_INVOKABLE void swapMelodies(int from, int to);
 
   Tmelody* getMelody(int melId);
 

src/qml/level/MelodyListView.qml

@@ -16,6 +16,7 @@ TmelodyListView {
   id: melListView
 
   property int currentMelody: -1
+  property alias viewRoot: viewItem
 
   melodyModel: ListModel {
     id: melMod
@@ -28,33 +29,37 @@ TmelodyListView {
       text: "\n\n" + qsTr("Add here melodies from Music XML files.\nConsider to divide long pieces on parts in external software first.")
       horizontalAlignment: Text.AlignHCenter; wrapMode: Text.WordWrap
     }
-    ListView {
-      id: melView
-      visible: count > 0
-      clip: true; spacing: 1
+    Item {
+      id: viewItem
       width: melListView.width - Noo.fontSize() * 4; height: melListView.height
-      add: Transition {
-        enabled: GLOB.useAnimations
-        NumberAnimation { property: "x"; from: -melListView.width; to: 5 }
-      }
-      remove: Transition {
-        enabled: GLOB.useAnimations
-        NumberAnimation { property: "x"; to: -melListView.width }
-      }
-      populate: Transition {
-        enabled: GLOB.useAnimations
-        NumberAnimation { property: "x"; from: -melListView.width; to: 5 }
-      }
-      move: Transition {
-        enabled: GLOB.useAnimations
-        NumberAnimation { property: "y"; to: -Noo.fontSize() * 4 }
-      }
-      model: melMod
-      delegate: MelodyWrapper {
-        nr: index
-        width: melView.width - 10
-        Component.onCompleted: {
-          updateMelody()
+      ListView {
+        id: melView
+        visible: count > 0
+        clip: true; spacing: 1
+        anchors { fill: parent; margins: 5 }
+        add: Transition {
+          enabled: GLOB.useAnimations
+          NumberAnimation { property: "x"; from: -melListView.width; to: 0 }
+        }
+        remove: Transition {
+          enabled: GLOB.useAnimations
+          NumberAnimation { property: "x"; to: -melListView.width }
+        }
+        populate: Transition {
+          enabled: GLOB.useAnimations
+          NumberAnimation { property: "x"; from: -melListView.width; to: 0 }
+        }
+        move: Transition {
+          enabled: GLOB.useAnimations
+          NumberAnimation { property: "y"; from: -Noo.fontSize() * 4 }
+        }
+        model: melMod
+        delegate: MelodyWrapper {
+          nr: index
+          width: melView.width - 10
+          Component.onCompleted: {
+            updateMelody()
+          }
         }
       }
     }
@@ -70,7 +75,7 @@ TmelodyListView {
       TcuteButton {
         width: Noo.fontSize() * 3
         font { pixelSize: Noo.fontSize() * 2; bold: true; family: "Sans" }
-        text: "-"; textColor: "red"
+        text: "-"; textColor: enabled ? "red" : disdPal.text
         enabled: currentMelody > -1
         onClicked: removeWrapper(currentMelody)
       }
@@ -86,4 +91,8 @@ TmelodyListView {
     removeMelody(id)
     currentMelody = -1
   }
+  function moveMelody(from, to) {
+    melMod.move(from, to, 1)
+    swapMelodies(from, to)
+  }
 }

src/qml/level/MelodyWrapper.qml

@@ -8,66 +8,107 @@ import Nootka.Dialogs 1.0
 import Score 1.0
 import "../score"
 
-
-TmelodyWrapper {
-  score: sc.scoreObj
-  melodyView: melListView
+MouseArea {
+  id: wrapArea
 
   height: Noo.fontSize() * 10
-  x: 5
 
-  Score {
-    id: sc
-    anchors.fill: parent
-    readOnly: true
-    bgColor: nr === melListView.currentMelody ? Qt.tint(activPal.base, Noo.alpha(activPal.highlight, 50)) : activPal.base
-  }
+  property bool held: false
+  property alias nr: wrapper.nr
+
+  function updateMelody() { wrapper.updateMelody() }
+
+  hoverEnabled: true
+  drag.target: wrapArea.held ? wrapper : undefined
+  drag.axis: Drag.YAxis
+
+  onPressAndHold: wrapArea.held = true
+  onReleased: wrapArea.held = false
+  onClicked: melListView.currentMelody = nr
+
+  TmelodyWrapper {
+    id: wrapper
+
+    score: sc.scoreObj
+    melodyView: melListView
 
-  Rectangle { // this is part of covering rectangle
-    height: parent.height; width: parent.height
-    rotation: -90;
-    x: parent.width - scoreCover.width - width
-    gradient: Gradient {
-      GradientStop { position: 0.0; color: "transparent" }
-      GradientStop { position: 0.75; color: sc.bgColor }
+    width: wrapArea.width; height: wrapArea.height
+
+    Drag.active: wrapArea.held
+    Drag.source: wrapArea
+    Drag.hotSpot.x: width / 2
+    Drag.hotSpot.y: height / 2
+
+    anchors {
+      horizontalCenter: parent.horizontalCenter
+      verticalCenter: parent.verticalCenter
     }
-  }
-  Rectangle {
-    id: scoreCover
-    height: parent.height; width: parent.width - parent.height * 4
-    anchors { right: parent.right }
-    color: sc.bgColor
-  }
 
-  Text {
-    x: Noo.fontSize() / 2; y: Noo.fontSize() / 2
-    font { family: "Sans"; bold: true }
-    text: nr + 1; color: Noo.alpha(activPal.text, 150)
-  }
+    states: State {
+      when: wrapArea.held
+      ParentChange { target: wrapper; parent: melListView.viewRoot }
+      AnchorChanges {
+        target: wrapper
+        anchors { horizontalCenter: undefined; verticalCenter: undefined }
+      }
+    }
 
-  Text {
-    text: title
-    x: parent.width - scoreCover.width
-    y: Noo.fontSize() / 4
-    font { bold: true; pixelSize: Noo.fontSize() * 1.3 }
-    color: wrapArea.containsMouse ? activPal.text : Noo.alpha(activPal.text, 150)
-    width: Noo.fontSize() * 25; elide: Text.ElideRight
-    Behavior on color { enabled: GLOB.useAnimations; ColorAnimation {} }
-  }
+    Score {
+      id: sc
+      anchors.fill: parent
+      interactive: false
+      readOnly: true
+      bgColor: wrapArea.held ? Qt.tint(activPal.base, Noo.alpha(activPal.text, 50)) : (nr === melListView.currentMelody ? Qt.tint(activPal.base, Noo.alpha(activPal.highlight, 50)) : activPal.base)
+      //bgColor: nr === melListView.currentMelody ? Qt.tint(activPal.base, Noo.alpha(activPal.highlight, 50)) : activPal.base
+    }
 
-  Text {
-    text: composer
-    anchors { right: parent.right; rightMargin: Noo.fontSize() / 4 }
-    y: Noo.fontSize() * 1.5
-    color: wrapArea.containsMouse ? activPal.text : Noo.alpha(activPal.text, 150)
-    maximumLineCount: 1
-    Behavior on color { enabled: GLOB.useAnimations; ColorAnimation {} }
-  }
+    Rectangle { // this is part of covering rectangle
+      height: parent.height; width: parent.height
+      rotation: -90;
+      x: parent.width - scoreCover.width - width
+      gradient: Gradient {
+        GradientStop { position: 0.0; color: "transparent" }
+        GradientStop { position: 0.75; color: sc.bgColor }
+      }
+    }
+    Rectangle {
+      id: scoreCover
+      height: parent.height; width: parent.width - parent.height * 4
+      anchors { right: parent.right }
+      color: sc.bgColor
+    }
+
+    Text {
+      x: Noo.fontSize() / 2; y: Noo.fontSize() / 2
+      font { family: "Sans"; bold: true }
+      text: nr + 1; color: Noo.alpha(activPal.text, 150)
+    }
+
+    Text {
+      text: wrapper.title
+      x: parent.width - scoreCover.width
+      y: Noo.fontSize() / 4
+      font { bold: true; pixelSize: Noo.fontSize() * 1.3 }
+      color: wrapArea.containsMouse ? activPal.text : Noo.alpha(activPal.text, 150)
+      width: Noo.fontSize() * 25; elide: Text.ElideRight
+      Behavior on color { enabled: GLOB.useAnimations; ColorAnimation {} }
+    }
 
-  MouseArea {
-    id: wrapArea
-    anchors.fill: parent
-    hoverEnabled: true
-    onClicked: melListView.currentMelody = nr
+    Text {
+      text: wrapper.composer
+      anchors { right: parent.right; rightMargin: Noo.fontSize() / 4 }
+      y: Noo.fontSize() * 1.5
+      color: wrapArea.containsMouse ? activPal.text : Noo.alpha(activPal.text, 150)
+      maximumLineCount: 1
+      Behavior on color { enabled: GLOB.useAnimations; ColorAnimation {} }
+    }
+  } // TmelodyWrapper
+
+  DropArea {
+    anchors { fill: parent; margins: 10 }
+    onEntered: {
+      if (drag.source.nr !== wrapArea.nr)
+        melListView.moveMelody(drag.source.nr, wrapArea.nr)
+    }
   }
 }