QObjectTreeView.qml

pragma ComponentBehavior: Bound
pragma ValueTypeBehavior: Addressable

import QtQuick as QtQ
import QtQuick.Controls as QtC
import QtQuick.Layouts as QtL

import QObjectTreeModel as QObjectTreeModel

QtQ.TreeView {
    id: treeView
    width: parent.width / 2
    height: parent.height

    alternatingRows: true

    property int _counter: 0
    readonly property int _insertDropAreaDefaultHeight: 15

    required property QObjectTreeModel.QObjectTreeModel qobjectTreeModel
    model: this.qobjectTreeModel

    // The below "Add child" button will add an instance of this component as a
    // child to the associated QObject.
    QtQ.Component {
        id: childComponent

        QtQ.QtObject {}
    }

    QtQ.Connections {
        target: treeView.model
        function onRowsInserted(parent, first, last) {
            // Must defer this via Qt.callLater due to this bug:
            // https://qt-project.atlassian.net/browse/QTBUG-144391
            Qt.callLater(() => {
                treeView.expandRecursively()
            })
        }

        function onRowsMoved(sourceParent, sourceFirst, sourceLast, destinationParent, destinationRow) {
            Qt.callLater(() => {
                treeView.expandRecursively()
            })
        }
    }

    QtC.ScrollBar.vertical: QtC.ScrollBar {
        orientation: Qt.Vertical
    }

    delegate: QtQ.Rectangle {
        id: treeDelegate

        required property var model
        required property int index

        implicitWidth: Math.max(dragTarget.implicitWidth, this.treeView.width)
        implicitHeight: dragTarget.height

        readonly property real indent: 20

        // Assigned to by TreeView:
        required property QtQ.TreeView treeView
        required property bool isTreeNode
        required property bool expanded
        required property int hasChildren
        required property int depth
        required property int row
        required property int column
        required property string objectName
        required property string metaTypeName

        function getObject() : QtQ.QtObject {
            const model = treeView.qobjectTreeModel
            const modelIndex = treeView.index(treeDelegate.row, treeDelegate.column)
            if (!modelIndex || !modelIndex.valid) {
              return null
            }
            return model.objectFromIndex(modelIndex)
        }

        color: treeDelegate.model.row % 2 == 0 || !treeDelegate.treeView.alternatingRows ? "#E2E2E2" : "#F0F0F0"

        QtQ.Rectangle {
            id: dragTarget

            readonly property int row: treeDelegate.row
            property QtQ.QtObject object

            implicitWidth: content.implicitWidth
            width: treeDelegate.width
            height: content.height

            opacity: dragArea.drag.active ? 0.7 : 1
            color: treeDelegate.color

            QtQ.Drag.active: dragArea.drag.active
            QtQ.Drag.source: dragTarget
            QtQ.Drag.hotSpot.x: dragArea.mouseX
            QtQ.Drag.hotSpot.y: dragArea.mouseY

            QtQ.MouseArea {
                id: dragArea
                anchors.fill: parent
                drag.target: dragTarget
                drag.axis: QtQ.Drag.YAxis

                onPressed: mouse => {
                    dragTarget.object = treeDelegate.getObject()
                }

                onReleased: mouse => {
                    dragTarget.QtQ.Drag.drop()
                    dragTarget.y = 0
                }
            }

            QtL.RowLayout {
                id: content

                width: dragTarget.width

                QtC.Label {
                    QtL.Layout.leftMargin: (treeDelegate.depth * treeDelegate.indent) + 16
                    color: "black"
                    text: "objectName: " + treeDelegate.objectName + " (" + treeDelegate.metaTypeName + ")"
                    font.bold: true
                }

                QtC.Button {
                    id: expandButton
                    text: expandButton.checked ? "▼" : "▲"
                    QtL.Layout.maximumWidth: 20
                    QtL.Layout.maximumHeight: 20

                    checkable: true
                    checked: treeDelegate.expanded
                    onToggled: treeDelegate.treeView.toggleExpanded(
                                   treeDelegate.row)

                    visible: treeDelegate.hasChildren
                }

                QtQ.Item {
                    QtL.Layout.fillWidth: true
                    QtL.Layout.minimumHeight: expandButton.height
                }

                QtC.Button {
                    text: "Update name"

                    // Update the objects objectName to check display values update.
                    onClicked: {
                        const object = treeDelegate.getObject()
                        if (!object) {
                            return
                        }
                        object.objectName = "child " + treeView._counter++
                    }
                }

                QtC.Button {
                    text: "Add child"

                    // Add a new child.
                    onClicked: {
                        const object = treeDelegate.getObject()
                        if (!object) {
                            return
                        }

                        let child = childComponent.createObject(object, {})
                        child.objectName = "child " + treeView._counter++
                    }
                }

                QtC.Button {
                    text: "Delete"

                    // Delete the current object.
                    onClicked: {
                        const model = treeView.qobjectTreeModel

                        const modelIndex = treeView.index(treeDelegate.row, treeDelegate.column)
                        model.removeRows(modelIndex.row, 1, modelIndex.parent)
                    }
                }

                QtC.Button {
                    text: "Debug"

                    // Print debug info.
                    onClicked: {
                        const object = treeDelegate.getObject()
                        if (!object) {
                            return
                        }

                        console.log()
                        console.log(
                            "//////////////////// Object Info /////////////////")
                        console.log("index:", treeDelegate.index)
                        console.log("row:", treeDelegate.row)
                        console.log("column:", treeDelegate.column)

                        const modelIndex = treeDelegate.treeView.model.indexOf(object)
                        console.log("modelIndex:", modelIndex)

                        const qObjectTreeModel = treeView.model as QObjectTreeModel.QObjectTreeModel
                        if (!qObjectTreeModel) {
                            console.warn("model is not a QObjectTreeModel")
                            return
                        }

                        console.log("dumpObjectInfo:")
                        qObjectTreeModel.dumpObjectInfo(object)

                        console.log("dumpObjectTree:")
                        qObjectTreeModel.dumpObjectTree(object)
                    }
                }
            }
        }

        QtQ.DropArea {
            id: dropArea
            anchors.fill: parent

            // Prevent drags from dropping onto itself
            enabled: !dragArea.drag.active

            property bool validDrag: false

            onEntered: drag => {
                const source = drag.source
                if (!source || !source.object) {
                    dropArea.validDrag = false
                    return
                }
                const delegateObject = treeDelegate.getObject()
                // Reject if the dragged object is an ancestor of (or is) the
                // drop target — reparenting would create a circular hierarchy.
                dropArea.validDrag = delegateObject
                    && !treeView.qobjectTreeModel.IsAncestorOf(source.object, delegateObject)
            }

            onExited: {
                dropArea.validDrag = false
            }

            onDropped: drop => {
                drop.action = Qt.MoveAction
                dropArea.validDrag = false

                const delegateObject = treeDelegate.getObject()
                if (!delegateObject) {
                    return
                }

                const dragTarget = drop.source
                const object = dragTarget.object
                const model = treeView.qobjectTreeModel
                const oldParent = model.GetParent(object)
                const newParent = delegateObject

                if (oldParent !== newParent && newParent !== object
                    && newParent
                    && !treeView.qobjectTreeModel.IsAncestorOf(object, newParent)) {
                    model.SetParent(object, newParent)
                }
            }

            QtQ.Rectangle {
                anchors.fill: parent
                opacity: dropArea.validDrag ? 0.5 : 0
                color: dropArea.validDrag ? "#FFFF0000" : "#00FF0000"
            }
        }

        QtQ.DropArea {
            id: insertBeforeDropArea

            height: treeView._insertDropAreaDefaultHeight
            width: parent.width

            z: 2

            // Cannot move before a root object
            enabled: treeDelegate.depth > 0

            property bool validDrag: false

            onEntered: drag => {
                const source = drag.source
                if (!source || !source.object) {
                    insertBeforeDropArea.validDrag = false
                    return
                }
                const delegateObject = treeDelegate.getObject()
                const model = treeView.qobjectTreeModel
                const newParent = delegateObject ? model.GetParent(delegateObject) : null
                insertBeforeDropArea.validDrag = newParent
                    && !treeView.qobjectTreeModel.IsAncestorOf(source.object, newParent)
            }

            onExited: {
                insertBeforeDropArea.validDrag = false
            }

            onDropped: drop => {
                drop.action = Qt.MoveAction
                insertBeforeDropArea.validDrag = false

                const delegateObject = treeDelegate.getObject()
                if (!delegateObject) {
                    return
                }

                const model = treeView.qobjectTreeModel
                const dragTarget = drop.source
                const object = dragTarget.object

                const oldParent = model.GetParent(object)
                const newParent = model.GetParent(delegateObject)
                let insertIndex = model.indexOf(delegateObject).row
                if (oldParent === newParent) {
                    const currentIndex = model.indexOf(object).row
                    if (currentIndex < insertIndex) {
                        insertIndex--
                    }
                }
                if (newParent !== object && newParent
                    && !treeView.qobjectTreeModel.IsAncestorOf(object, newParent)) {
                    model.SetParent(object, newParent, insertIndex)
                }
            }

            QtQ.Rectangle {
                anchors.fill: parent
                opacity: insertBeforeDropArea.validDrag ? 0.5 : 0
                color: insertBeforeDropArea.validDrag ? "#FF00FF00" : "#0000FF00"
            }
        }

        QtQ.DropArea {
            id: insertAfterDropArea

            y: parent.height - insertAfterDropArea.height
            height: treeView._insertDropAreaDefaultHeight
            width: parent.width

            z: 2

            // Cannot move after a root object
            enabled: treeDelegate.depth > 0

            property bool validDrag: false

            onEntered: drag => {
                const source = drag.source
                if (!source || !source.object) {
                    insertAfterDropArea.validDrag = false
                    return
                }
                const delegateObject = treeDelegate.getObject()
                const model = treeView.qobjectTreeModel
                const newParent = delegateObject ? model.GetParent(delegateObject) : null
                insertAfterDropArea.validDrag = newParent
                    && !treeView.qobjectTreeModel.IsAncestorOf(source.object, newParent)
            }

            onExited: {
                insertAfterDropArea.validDrag = false
            }

            onDropped: drop => {
                drop.action = Qt.MoveAction
                insertAfterDropArea.validDrag = false

                const delegateObject = treeDelegate.getObject()
                if (!delegateObject) {
                    return
                }

                const model = treeView.qobjectTreeModel
                const dragTarget = drop.source
                const object = dragTarget.object

                const oldParent = model.GetParent(object)
                const newParent = model.GetParent(delegateObject)

                let insertIndex = model.indexOf(delegateObject).row + 1
                if (oldParent === newParent) {
                    const currentIndex = model.indexOf(object).row
                    if (currentIndex < insertIndex) {
                        insertIndex--
                    }
                }

                if (newParent !== object && newParent
                    && !treeView.qobjectTreeModel.IsAncestorOf(object, newParent)) {
                    model.SetParent(object, newParent, insertIndex)
                }
            }

            QtQ.Rectangle {
                anchors.fill: parent
                opacity: insertAfterDropArea.validDrag ? 0.5 : 0
                color: insertAfterDropArea.validDrag ? "#FF0000FF" : "#000000FF"
            }
        }
    }
}