QML nested rectangles

Question

Goal:

I have an XML file with nested rectangles as data. Each rectangle has x and y coordinates along with width and height. The depth of these nested rectangles are unknown, could be 1 or whatever the limit of nested elements for XML. In the example below, the depth is only 4, but with real data it is unknown.

<?xml version="1.0" encoding="UTF-8"?>
<rect x="0" y="0" width="600" height="200" name="scan">
    <rect name="keyboard" x="0" y="50" width="450" height="150" >
        <rect x="0" y="50" width="150" height="50" name="eta">
            <rect x="0" y="0" width="50" height="50" name="e">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="t">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="a">
            </rect>
        </rect>
        <rect x="150" y="50" width="150" height="50" name="oin">
            <rect x="0" y="0" width="50" height="50" name="o">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="i">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="n">
            </rect>
        </rect>
        <rect x="300" y="50" width="150" height="50" name="shr">
            <rect x="0" y="0" width="50" height="50" name="s">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="h">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="r">
            </rect>
        </rect>
        <rect x="0" y="100" width="150" height="50" name="dlc">
            <rect x="0" y="0" width="50" height="50" name="d">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="l">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="c">
            </rect>
        </rect>
        <rect x="150" y="100" width="150" height="50" name="umw">
            <rect x="0" y="0" width="50" height="50" name="u">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="m">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="w">
            </rect>
        </rect>
        <rect x="300" y="100" width="150" height="50" name="fgy">
            <rect x="0" y="0" width="50" height="50" name="f">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="g">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="y">
            </rect>
        </rect>
        <rect x="0" y="150" width="150" height="50" name="pbv">
            <rect x="0" y="0" width="50" height="50" name="p">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="b">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="v">
            </rect>
        </rect>
        <rect x="150" y="150" width="150" height="50" name="kjx">
            <rect x="0" y="0" width="50" height="50" name="k">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="j">
            </rect>
            <rect x="100" y="0" width="50" height="50" name="x">
            </rect>
        </rect>
        <rect x="300" y="150" width="150" height="50" name="qz">
            <rect x="0" y="0" width="50" height="50" name="q">
            </rect>
            <rect x="50" y="0" width="50" height="50" name="z">
            </rect>
            <rect x="100" y="0" width="50" height="50" name=".">
            </rect>
        </rect>
    </rect>
</rect>

I'm trying to create a model for these rectangles using QAbstractItemModel and have QML display the rectangles with Repeaters. My goal is to display these rectangles in a view overlapping each other according to their positions, sizes, and relations.

Implementation Attempt

After some research, I attempted to model the XML data as a tree using QAbstractItemModel and display them using QTreeView. I successfully display all the data for each rectangle inside a QTreeView, but I would like to draw these rectangles instead. If I try to delegate each tree item as rectangle, the rectangles simply just stack on top of one another.

Here's the python code of what I have so far:

import os
import sys
from PyQt5.QtCore import (
    QAbstractItemModel, QFile,
    QIODevice, QModelIndex, Qt,
    QUrl, QVariant
)
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQuick import QQuickView

from PyQt5.QtQml import QQmlApplicationEngine,QQmlEngine, QQmlComponent
import xml.etree.ElementTree as ET

class TreeItem(object):
    def __init__(self, data, parent=None):
        self.parentItem = parent
        self.itemData = data
        self.childItems = []

    def appendChild(self, item):
        self.childItems.append(item)

    def child(self, row):
        return self.childItems[row]

    def childCount(self):
        return len(self.childItems)

    def children(self):
        return self.childItems

    def columnCount(self):
        return len(self.itemData)

    def data(self, column):
        try:
            return self.itemData[column]
        except IndexError:
            return None

    def parent(self):
        return self.parentItem

    def row(self):
        if self.parentItem:
            return self.parentItem.childItems.index(self)
        return 0


class TreeModel(QAbstractItemModel):

    def __init__(self, parent=None):
        super(TreeModel, self).__init__(parent)
        self.rootItem = TreeItem(("Name", "Description", "Top", "Left", "Width", "Height"))
        self.setupModelDataXML(self.rootItem)

    def roleNames(self):
        roles = {
            Qt.UserRole + 1: b"name",
            Qt.UserRole + 2: b"description",
            Qt.UserRole + 3: b"top",
            Qt.UserRole + 4: b"left",
            Qt.UserRole + 5: b"width",
            Qt.UserRole + 6: b"height",
            Qt.UserRole + 7: b"count",
            Qt.UserRole + 8: b"children"
        }
        return roles

    def columnCount(self, parent):
        if parent.isValid():
            return parent.internalPointer().columnCount()
        else:
            return self.rootItem.columnCount()

    def data(self, index, role):
        if not index.isValid():
            return None
        item = index.internalPointer()
        if role == Qt.UserRole + 1:
            return item.data(0)
        elif role == Qt.UserRole + 2:
            return item.data(1)
        elif role == Qt.UserRole + 3:
            return item.data(2)
        elif role == Qt.UserRole + 4:
            return item.data(3)
        elif role == Qt.UserRole + 5:
            return item.data(4)
        elif role == Qt.UserRole + 6:
            return item.data(5)
        elif role == Qt.UserRole + 7:
            return item.childCount()
        elif role == Qt.UserRole + 8:
            return item.children()

    def flags(self, index):
        if not index.isValid():
            return Qt.NoItemFlags

        return Qt.ItemIsEnabled | Qt.ItemIsSelectable

    def headerData(self, section, orientation, role):
        if orientation == Qt.Horizontal and role == Qt.DisplayRole:
            return self.rootItem.data(section)

        return None

    def index(self, row, column, parent):
        if not self.hasIndex(row, column, parent):
            return QModelIndex()

        if not parent.isValid():
            parentItem = self.rootItem
        else:
            parentItem = parent.internalPointer()

        childItem = parentItem.child(row)
        if childItem:
            return self.createIndex(row, column, childItem)
        else:
            return QModelIndex()

    def parent(self, index):
        if not index.isValid():
            return QModelIndex()

        childItem = index.internalPointer()
        parentItem = childItem.parent()

        if parentItem == self.rootItem:
            return QModelIndex()

        return self.createIndex(parentItem.row(), 0, parentItem)

    def rowCount(self, parent):
        if parent.column() > 0:
            return 0

        if not parent.isValid():
            parentItem = self.rootItem
        else:
            parentItem = parent.internalPointer()

        return parentItem.childCount()

    def parseXML(self, element, parent):
        name = element.attrib["name"]
        x = element.attrib["x"]
        y = element.attrib["y"]
        width = element.attrib["width"]
        height = element.attrib["height"]

        node = TreeItem((element.tag, name, x, y, width, height), parent)
        parent.appendChild(node)
        for child in element:
            self.parseXML(child, node)

    def setupModelDataXML(self, parent):
        dir_path = os.path.dirname(os.path.realpath(__file__))
        tree = ET.parse(dir_path + '/' + 'rect.xml')
        root = tree.getroot()
        self.parseXML(root, parent)

if __name__ == '__main__':
    model = TreeModel()
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    ctx = engine.rootContext()
    ctx.setContextProperty("tmodel", model)

    dir_path = os.path.dirname(os.path.realpath(__file__))
    engine.load(dir_path + '/' + 'simpletreemodel.qml')
    win = engine.rootObjects()[0]
    win.show()

    sys.exit(app.exec_())

Here's the the QML file:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQml.Models 2.2
import QtQuick.Window 2.2

ApplicationWindow {
    width: 480
    height: 640
    TreeView {
        id: treeView
        anchors.fill: parent
        anchors.margins: 6
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter

        model: tmodel

        TableViewColumn {
            title: "Name"
            role: "name"
            resizable: true
        }

        TableViewColumn {
            title: "Description"
            role: "description"
            resizable: true
        }
        TableViewColumn {
            title: "Top"
            role: "top"
            resizable: true
        }

        TableViewColumn {
            title: "Left"
            role: "left"
            resizable: true
        }
        TableViewColumn {
            title: "Width"
            role: "width"
            resizable: true
        }

        TableViewColumn {
            title: "height"
            role: "height"
            resizable: true
        }

        TableViewColumn {
            title: "Count"
            role: "count"
            resizable: true
        }
    }
}

Questions:

Is it possible to re-purpose QTreeView for displaying these rectangles? If not, can I use repeaters to display the rectangles with the current model implementation? I tried using repeaters, but the children roles return as a list of QVariant, which I don't know what to do with.

Answer 1

Instead of using your model I used QStandardItemModel because it is easier to use (I avoid testing your code). In the case of QML I have used a combination of Repeater, Loaders and DelegateModel as this answer points out.

main.py

import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
import xml.etree.ElementTree as ET


class XMLModel(QtGui.QStandardItemModel):
    def loadFromPath(self, filename, attributes):
        roles = {}
        for i, attr in enumerate(attributes):
            roles[QtCore.Qt.UserRole + i] = attr.encode()
        self.setItemRoleNames(roles)

        tree = ET.parse(filename)
        root = tree.getroot()
        self.parseXML(root)

    def parseXML(self, element, parent=None):
        if parent is None:
            parent = self.invisibleRootItem()
        it = QtGui.QStandardItem()
        parent.appendRow(it)
        for role, tag in self.roleNames().items():
            value = element.attrib[tag.data().decode()]
            it.setData(value, role)
        for child in element:
            self.parseXML(child, it)

if __name__ == '__main__':
    dir_path = os.path.dirname(os.path.realpath(__file__))
    app = QtGui.QGuiApplication(sys.argv)
    model = XMLModel()
    model.loadFromPath(os.path.join(dir_path, 'rect.xml'), ["name", "x", "y", "width", "height"])
    engine = QtQml.QQmlApplicationEngine()
    ctx = engine.rootContext()
    ctx.setContextProperty("tmodel", model)
    file_path = os.path.join(dir_path, 'simpletreemodel.qml')
    engine.load(QtCore.QUrl.fromLocalFile(file_path))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

simpletreemodel.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

ApplicationWindow {
    width: 480
    height: 640
    visible: true
    Repeater {
        model: RectDelegateModel{
            model: tmodel
        }
    }
}

RectDelegateModel.qml

import QtQml.Models 2.2
import QtQuick 2.5

DelegateModel {
    id: mainModel
    delegate: Rectangle{
        Repeater {
            id: repeater
            model: childrenLoader.item
        }
        x: model.x
        y: model.y
        width: model.width
        height: model.height
        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
        Text {
            anchors.centerIn: parent
            text: model.name
        }
        Loader {
            id: childrenLoader
            asynchronous: true
        }
        Component.onCompleted: {
            if (model && model.hasModelChildren) {
                childrenLoader.setSource("RectDelegateModel.qml", {
                                             "model": mainModel.model,
                                             "rootIndex": mainModel.modelIndex(index)
                                         });
            }
        }
    }
}