Introduction
This is a follow up article on the previous one which introduced simple concepts to build a Tree View in QML. It assumes that the previous article is completely read and understood. In this we will improve some hastily written code in the previous article with little better alternatives and more importantly we will learn how to move data around in the tree view as requested in one of the comments in Part-I.
Please read/refer the previous article here.
Using the code
The fundamentals of Tree-view construction remain the same - Component Recursion with an appropriate JS object-model and functionality to control the recursion. The JS model previously had 3 roles: "name" for the name of the node in the tree-view, "level" which was primarily used for indentation and "subNode" for nested models (and hence ultimately Component Recursion). The 1st thing we will do here is add another role and call it "parentModel". This will allow us to hold the parent node to the current node, hence every child will know the parent model that constructed it.
For sometime now, unless mentioned, we will be referring to the final code listing in the previous article.
So let's set up the parent node. There are two places in the code where we create new nodes for the tree. Both are inside the onAccepted signal of the TextInput. One is for the special case of level 0 and other for levels > 0. In both these places we will add the new mentioned role. Thus replace
objModel.append({"name": szSplit[0], "level": 0, "subNode": []})with
objModel.append({"name": szSplit[0], "level": 0, "parentModel": objModel, "subNode": []})and
node.subNode.append({"name": szSplit[i], "level": i, "subNode": []})with
node.subNode.append({"name": szSplit[i], "level": i, "parentModel": node.subNode, "subNode": []})The above code is easy - to whatever model we are appending a new object, pass that very model to the object to be created.
The code to expand/collapse nodes with sub-nodes via double clicking is modified to traverse all its immediate children and toggle their visibility if the objectName is anything other than that of the MouseArea itself (if the MouseArea is itself rendered invisible, we would have no way to bring back its visibility). This is done because QML repeater positioning within a parent View (Row, Column, GridView etc) seems bizzarre if the content is updated dynamically - I currently lack knowledge of the behavior. When repeater creates stuffs statically, it's easy to predict which child it itself is (0th, 1st, 2nd etc), but moment there is a dynamic update to the model of the repeater things take a subtle turn (try printing the objectNames of all children of a Row which has a Repeater which in turn has its model dynamically updated. I noticed the index of the repeater itself changes). In order to avoid complications, visibility is toggled based on filtering children via objectNames. The loop to toggle visibility in the MouseArea now looks like this:
onDoubleClicked: {
for(var i = 0; i < parent.children.length; ++i) {
if(parent.children[i].objectName !== "objMouseArea") {
parent.children[i].visible = !parent.children[i].visible
}
}
}where objMouseArea is the objectName of the MouseArea itself, the visibility of which must not be switched off.
To shuffle nodes, we will require drag-drop facilities and thus MouseArea will define a draggable target and also will contain a DropArea to accept drops. This is pretty standard for a drag-drop operation. In brief the concept is this: We give a drag target (eg., a Rectangle) to the MouseArea. This drag target will be dragged whenever there is a drag on the MouseArea. The drag event makes
drag.active = true
for MouseArea. This is what we monitor. Whenever there is an active drag we will "un-anchor" the drag target if it is anchored (otherwise it won't move :) ) and set its parent to the most-root item. This latter part is necessary because normally there would be lot of other components created after this drag target. Thus the drag target will be hidden as it travels across the screen whenever it comes across any component which was created after it, or after its parent etc. To avoid this, we will change its parent for the duration of drag to the most-root item so that the dragged object is always visible. This is done via
states: State {
when: ....
}Similarly, we define a DropArea (QML component). This recognizes active drags being entered, exited or dropped. Now an important point: in this article we will only want to shuffle items which have same immediate parent. We will restrict this with the drag-drop keys. Normally DropArea will acknowledge every drag. If there are only a few which it must handle and reject the rest we need to make use of Drag.keys of the source being dragged and keys property of DropArea. Then, only when these match does DropArea acknowledge the drag (See Docs.). In our case we will use the stuff held by the role "parentModel" as the drag as well as the drop keys. This "stuff" will actually be the address in memory of the parent model. Since all unique parent models will have different physical addresses in the memory, we will have achieved our goal of allowing only nodes under the same immediate parent to be shuffled. When the mouse is released (after the drag) we will check if the dragged object was dragged to a valid (accepting) DropArea. This happens when the keys match and when it happens the dragged object's Drag.target attached property will be non-null. We check for this condition on the release of the mouse and if it's non-null we fire a drop signal which will invoke onDropped slot of the DropArea (this is all QML behaviour - we don't need to make these connections - only call the appropriate signal). In the onDropped slot of the DropArea we will enquire about the index of the object/node which was being dragged and move it appropriately. For eg., if index 2 was dragged and released over index 4, index 4 object would be positioned at index 3 and 4th index would be occupied by the object with index 2. If index 4 object is dragged and released over index 2 object, then index 2 object would become the index 3 object and index 2 would now be occupied by the index 4 object. (Note the subtle difference between the lower index being released over a higher one and vice-versa).
To let the user know if the DropArea for the chosen object/node is valid, we will use an animation to indicate it.
Here's a complete code listing that should (I hope) work without corrections:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0
Rectangle {
id: objRoot
objectName: "objRoot"
width: 600
height: 600
color: "black"
ListModel {
id: objModel
objectName: "objModel"
}
Component {
id: objRecursiveDelegate
Column {
id: objRecursiveColumn
objectName: "objRecursiveColumn"
property int m_iIndex: model.index
property var m_parentModel: model.parentModel
clip: true
MouseArea {
id: objMouseArea
objectName: "objMouseArea"
width: objRow.implicitWidth
height: objRow.implicitHeight
onDoubleClicked: {
for(var i = 0; i < parent.children.length; ++i) {
if(parent.children[i].objectName !== "objMouseArea") {
parent.children[i].visible = !parent.children[i].visible
}
}
}
drag.target: objDragRect
onReleased: {
if(objDragRect.Drag.target) {
objDragRect.Drag.drop()
}
}
Row {
id: objRow
Item {
id: objIndentation
height: 20
width: model.level * 20
}
Rectangle {
id: objDisplayRowRect
height: objNodeName.implicitHeight + 5
width: objCollapsedStateIndicator.width + objNodeName.implicitWidth + 5
border.color: "green"
border.width: 2
color: "#31312c"
DropArea {
keys: [model.parentModel]
anchors.fill: parent
onEntered: objValidDropIndicator.visible = true
onExited: objValidDropIndicator.visible = false
onDropped: {
objValidDropIndicator.visible = false
if(drag.source.m_objTopParent.m_iIndex !== model.index) {
objRecursiveColumn.m_parentModel.move(
drag.source.m_objTopParent.m_iIndex,
model.index,
1
)
}
}
Rectangle {
id: objValidDropIndicator
anchors.fill: parent
visible: false
onVisibleChanged: {
visible ? objAnim.start() : objAnim.stop()
}
SequentialAnimation on color {
id: objAnim
loops: Animation.Infinite
running: false
ColorAnimation { from: "#31312c"; to: "green"; duration: 400 }
ColorAnimation { from: "green"; to: "#31312c"; duration: 400 }
}
}
}
Rectangle {
id: objDragRect
property var m_objTopParent: objRecursiveColumn
Drag.active: objMouseArea.drag.active
Drag.keys: [model.parentModel]
border.color: "magenta"
border.width: 2
opacity: .85
states: State {
when: objMouseArea.drag.active
AnchorChanges {
target: objDragRect
anchors { horizontalCenter: undefined; verticalCenter: undefined }
}
ParentChange {
target: objDragRect
parent: objRoot
}
}
anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
height: objDisplayRowRect.height
width: objDisplayRowRect.width
visible: Drag.active
color: "red"
Text {
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: model.name
font { bold: true; pixelSize: 18 }
color: "blue"
}
}
Text {
id: objCollapsedStateIndicator
anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
width: 20
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: objRepeater.count > 0 ? objRepeater.visible ? qsTr("-") : qsTr("+") : qsTr("")
font { bold: true; pixelSize: 18}
color: "yellow"
}
Text {
id: objNodeName
anchors { left: objCollapsedStateIndicator.right; top: parent.top; bottom: parent.bottom }
text: model.name
color: objRepeater.count > 0 ? "yellow" : "white"
font { bold: true; pixelSize: 18 }
verticalAlignment: Text.AlignVCenter
}
}
}
}
Rectangle {
id: objSeparator
anchors { left: parent.left; right: parent.right; }
height: 1
color: "black"
}
Repeater {
id: objRepeater
objectName: "objRepeater"
model: subNode
delegate: objRecursiveDelegate
}
}
}
ColumnLayout {
objectName: "objColLayout"
anchors.fill: parent
ScrollView {
Layout.fillHeight: true
Layout.fillWidth: true
ListView {
objectName: "objListView"
model: objModel
delegate: objRecursiveDelegate
interactive: false
}
}
Window {
id: objModalInput
objectName: "objModalInput"
modality: Qt.ApplicationModal
visible: false
height: 30
width: 200
color: "yellow"
TextInput {
anchors.fill: parent
font { bold: true; pixelSize: 20 }
verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter
validator: RegExpValidator {
regExp: /(\d{1,},)*.{1,}/
}
onFocusChanged: {
if(focus) {
selectAll()
}
}
text: qsTr("node0")
onAccepted: {
if(acceptableInput) {
objModalInput.close()
var szSplit = text.split(',')
if(szSplit.length === 1) {
objModel.append({"name": szSplit[0], "level": 0, "parentModel": objModel, "subNode": []})
}
else {
if(objModel.get(parseInt(szSplit[0])) === undefined) {
console.log("Error - Given node does not exist !")
return
}
var node = objModel.get(parseInt(szSplit[0]))
for(var i = 1; i < szSplit.length - 1; ++i) {
if(node.subNode.get(parseInt(szSplit[i])) === undefined) {
console.log("Error - Given node does not exist !")
return
}
node = node.subNode.get(parseInt(szSplit[i]))
}
node.subNode.append({"name": szSplit[i], "level": i, "parentModel": node.subNode, "subNode": []})
}
}
}
}
}
Button {
text: "add data to tree"
onClicked: {
objModalInput.show()
}
}
}
} Operations (in order):
<1> click on "add data to tree" button -> enter "node0" (without quotes) and press carriage-return.
<2> click on "add data to tree" button -> enter "node1" (without quotes) and press carriage-return.
<3> click on "add data to tree" button -> enter "node2" (without quotes) and press carriage-return.
<4> click on "add data to tree" button -> enter "node3" (without quotes) and press carriage-return.
<5> click on "add data to tree" button -> enter "1,node0" (without quotes) and press carriage-return.
<6> click on "add data to tree" button -> enter "1,node1" (without quotes) and press carriage-return.
<7> click on "add data to tree" button -> enter "1,node2" (without quotes) and press carriage-return.
<9> click on "add data to tree" button -> enter "1,node3" (without quotes) and press carriage-return.
<10> click on "add data to tree" button -> enter "1,2,node0" (without quotes) and press carriage-return.
<11> click on "add data to tree" button -> enter "1,2,node1" (without quotes) and press carriage-return.
<12> click on "add data to tree" button -> enter "1,2,node2" (without quotes) and press carriage-return.
<13> click on "add data to tree" button -> enter "1,2,node3" (without quotes) and press carriage-return.
<14> click on "add data to tree" button -> enter "3,nodeA" (without quotes) and press carriage-return.
<15> click on "add data to tree" button -> enter "3,nodeB" (without quotes) and press carriage-return.
<16> click on "add data to tree" button -> enter "3,nodeC" (without quotes) and press carriage-return.
<17> click on "add data to tree" button -> enter "3,nodeD" (without quotes) and press carriage-return.
<18> click on "add data to tree" button -> enter "3,1,nodeQ" (without quotes) and press carriage-return.
<19> click on "add data to tree" button -> enter "3,1,nodeR" (without quotes) and press carriage-return.
<20> click on "add data to tree" button -> enter "3,1,nodeS" (without quotes) and press carriage-return.
<21> click on "add data to tree" button -> enter "3,1,nodeT" (without quotes) and press carriage-return.
Double-click nodes to expand/collapse.
Drag nodes over each other slowly first to see what places the drop will be allowed (there will be an animated indication for allowed drop areas). Move nodes around to get a feel. Moving nodes around in expanded stated might be a bit visually confusing (although the code will do the correct thing). If so, 1st collapse the node and then move it around.
That's all. Use, complicate, improve and enjoy (and maybe rate this article if you find it worthy of being rated) !!
