Add callbacks for magnitude, moves and actions

When cursor is moved, the current item is informed of the actions
via callbacks. Eg. when cursor is moved up, the item that had the
cursor will have its movedUp signal fired. It is now also possible
to inform navigable items over incomplete movement, or the magnitude
of the movement. This may be used eg. to make buttons or elements to
flip/rotate to indicate that the cursor is about to be moved.

7 files changed, 123 insertions, 92 deletions

diff --git a/DemoApplication/controls/CNButton.qml b/DemoApplication/controls/CNButton.qml
index 19dcb8e..fb8e1b8 100644
--- a/DemoApplication/controls/CNButton.qml
+++ b/DemoApplication/controls/CNButton.qml
@@ -10,6 +10,27 @@ Button {
     CursorNavigation.acceptsCursor: true
     //property bool hasCursor: CursorNavigation.hasCursor
 
+    Rotation {
+        id: rot
+        origin.x: root.width/2
+        origin.y: root.height/2
+    }
+
+    transform: rot
+
+    CursorNavigation.onHasCursorChanged: {
+        if (!hasCursor)
+            rot.angle = 0
+    }
+
+    CursorNavigation.onMagnitudeChanged: {
+        rot.angle = magnitude*45.0;
+        var a = angle * Math.PI/180.0
+        rot.axis.x = -Math.sin(a)
+        rot.axis.y = Math.cos(a)
+        rot.axis.z = 0
+    }
+
     background: Rectangle {
         anchors.fill: parent
         radius: 40
diff --git a/DemoApplication/controls/CNListView.qml b/DemoApplication/controls/CNListView.qml
new file mode 100644
index 0000000..3d67317
--- /dev/null
+++ b/DemoApplication/controls/CNListView.qml
@@ -0,0 +1,73 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import CursorNavigation 1.0
+
+ListView {
+    id: listView
+    anchors.fill: parent
+    spacing: 4
+    focus: true
+    /* when list view scopes the cursor, the cursor is passed further to its
+     * currently focused child. this means, moving from outside to the list,
+     * will return the cursor to the item that was previously selected
+     * comment this out to make transition directly between individual list items and the rest of the ui
+     */
+    CursorNavigation.acceptsCursor: true
+
+    Rectangle {
+        anchors.fill: parent
+        border.width: 1
+        border.color: listView.activeFocus ? "red" : "black"
+        color: "transparent"
+    }
+
+    highlight: Rectangle {
+        width: listView.width
+        height: 40
+        color: "lightgrey"
+        opacity: 0.3
+    }
+
+    delegate: ItemDelegate {
+        id: deleg
+        width: listView.width
+        height: 40
+        CursorNavigation.acceptsCursor: true
+
+        //make sure the list's current index follows the cursor!
+        CursorNavigation.onHasCursorChanged: {
+            if (CursorNavigation.hasCursor)
+                listView.currentIndex = index
+        }
+
+        contentItem: Rectangle {
+            width: listView.width
+            height: 40
+            border.color: deleg.CursorNavigation.hasCursor ? "red" : "transparent"
+
+            Row {
+                width: (parent.width - x)
+                height: 35
+                x: 5
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 10
+                Rectangle {
+                    width: parent.height
+                    height: parent.height
+                    radius: width/2
+                    color: colorCode
+                }
+                Text {
+                    height: parent.height
+                    font.bold: true
+                    verticalAlignment: Text.AlignVCenter
+                    text: name
+                }
+            }
+        }
+        onClicked: {
+            listView.currentIndex = index;
+        }
+    }
+
+}
diff --git a/DemoApplication/controls/qmldir b/DemoApplication/controls/qmldir
index b1ec146..6def14f 100644
--- a/DemoApplication/controls/qmldir
+++ b/DemoApplication/controls/qmldir
@@ -4,3 +4,4 @@ CNToolButton 1.0 CNToolButton.qml
 CNRadioButton 1.0 CNRadioButton.qml
 CNSwitch 1.0 CNSwitch.qml
 CNCheckBox 1.0 CNCheckBox.qml
+CNListView 1.0 CNListView.qml
diff --git a/DemoApplication/pages/Page2.qml b/DemoApplication/pages/Page2.qml
index 396f6ce..9d5a796 100644
--- a/DemoApplication/pages/Page2.qml
+++ b/DemoApplication/pages/Page2.qml
@@ -20,55 +20,11 @@ Item {
             anchors.top: parent.top
             anchors.topMargin: 20
 
-            CursorNavigation.acceptsCursor: true
-            ListView {
+
+            CNListView {
                 id: listView
                 anchors.fill: parent
                 spacing: 4
-                focus: true
-
-                Rectangle {
-                    anchors.fill: parent
-                    visible: listView.activeFocus
-                    border.width: 2
-                    border.color: "red"
-                    color: "transparent"
-                }
-
-                highlight: Rectangle {
-                    width: listView.width
-                    height: 40
-                    color: "lightgrey"
-                    opacity: 0.3
-                }
-
-                delegate: ItemDelegate {
-                    width: listView.width
-                    height: 40
-
-                    contentItem: Row {
-                        width: (parent.width - x)
-                        height: 35
-                        x: 5
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: 10
-                        Rectangle {
-                            width: parent.height
-                            height: parent.height
-                            radius: width/2
-                            color: colorCode
-                        }
-                        Text {
-                            height: parent.height
-                            font.bold: true
-                            verticalAlignment: Text.AlignVCenter
-                            text: name
-                        }
-                    }
-                    onClicked: {
-                        listView.currentIndex = index;
-                    }
-                }
 
                 model: ListModel {
                     ListElement {
@@ -90,6 +46,22 @@ Item {
                         name: "Green"
                         colorCode: "green"
                     }
+                    ListElement {
+                        name: "Cyan"
+                        colorCode: "cyan"
+                    }
+                    ListElement {
+                        name: "Magenta"
+                        colorCode: "magenta"
+                    }
+                    ListElement {
+                        name: "Yellow"
+                        colorCode: "yellow"
+                    }
+                    ListElement {
+                        name: "Black"
+                        colorCode: "black"
+                    }
                 }
             }
         }
diff --git a/DemoApplication/pages/Page3.qml b/DemoApplication/pages/Page3.qml
index 307dc50..d0ca1bb 100644
--- a/DemoApplication/pages/Page3.qml
+++ b/DemoApplication/pages/Page3.qml
@@ -17,6 +17,11 @@ Item {
                 width: 100
                 height: 100
                 text: "alone!"
+
+                CursorNavigation.onMovedUp: text = "moved up"
+                CursorNavigation.onMovedDown: text = "moved down"
+                CursorNavigation.onMovedRight: text = "moved right"
+                CursorNavigation.onMovedLeft: text = "moved left"
             }
 
             Grid {
diff --git a/DemoApplication/pages/Page4.qml b/DemoApplication/pages/Page4.qml
index a77ce7b..47828dd 100644
--- a/DemoApplication/pages/Page4.qml
+++ b/DemoApplication/pages/Page4.qml
@@ -30,7 +30,8 @@ Item {
                 parent.CursorNavigation.move(Qt.vector2d(axisLeftX, axisLeftY), 10)
                 cooldownTimer.start()
             } else if (v.length() >= 0.1) {
-                var item = parent.CursorNavigation.find(Qt.vector2d(axisLeftX, axisLeftY), 10)
+                parent.CursorNavigation.setMagnitude(v)
+                var item = parent.CursorNavigation.find(v, 10)
                 //cooldownTimer.start()
                 if (item != undefined) {
                     pointerRect.x = item.x
@@ -40,6 +41,7 @@ Item {
                     pointerRect.visible = true
                 }
             } else {
+                parent.CursorNavigation.setMagnitude(0,0)
                 pointerRect.visible = false
             }
         }
diff --git a/DemoApplication/pages/Page5.qml b/DemoApplication/pages/Page5.qml
index 9ab75c6..79dda87 100644
--- a/DemoApplication/pages/Page5.qml
+++ b/DemoApplication/pages/Page5.qml
@@ -105,54 +105,11 @@ Item {
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
         anchors.verticalCenterOffset: -toolBar.height
-        CursorNavigation.acceptsCursor: true
-        ListView {
+
+        CNListView {
             id: listView
             anchors.fill: parent
             spacing: 4
-            focus: true
-
-            Rectangle {
-                anchors.fill: parent
-                border.width: 1
-                border.color: listView.activeFocus ? "red" : "black"
-                color: "transparent"
-            }
-
-            highlight: Rectangle {
-                width: listView.width
-                height: 40
-                color: "lightgrey"
-                opacity: 0.3
-            }
-
-            delegate: ItemDelegate {
-                width: listView.width
-                height: 40
-
-                contentItem: Row {
-                    width: (parent.width - x)
-                    height: 35
-                    x: 5
-                    anchors.verticalCenter: parent.verticalCenter
-                    spacing: 10
-                    Rectangle {
-                        width: parent.height
-                        height: parent.height
-                        radius: width/2
-                        color: colorCode
-                    }
-                    Text {
-                        height: parent.height
-                        font.bold: true
-                        verticalAlignment: Text.AlignVCenter
-                        text: name
-                    }
-                }
-                onClicked: {
-                    listView.currentIndex = index;
-                }
-            }
 
             model: ListModel {
                 ListElement { name: "Joe"; colorCode: "grey" }