[solved] representation of graph model
-
Hello everybody,
i have a directed graph, presented by two ListModels :
- ListModel of nodes
@
ListModel
{
id: model_nodes
ListElement {nodex: 100; nodey: 200}
ListElement {nodex: 400; nodey: 800}
...
}
@
rendered with help of the Repeater
@
Repeater
{
id: view_nodes
model: model_nodes
delegate: Rectangle {x:nodex; y:nodey; with:64; height:64}
}
@and nodes draged with help of MouseArea
- ListModel of links
to draw the lines I wrote custom LinkView item, it gets the x1, y1, x2, y2, and draws a polyline between two points
@
ListModel
{
id: model_links
ListElement {nodeid1:0; nodeid2:1}
...
}Repeater
{
id: view_links
model: model_links
delegate: LinkView {x1: ?; y1: ?; x2: ?; y2: ?}
}
@the question is how to bind the coordinates of the nodes to the coordinates in the LinkViews ?
...
partial solution is to use a javascript binding :
@
itemAt(0).x1 = (function(){return view_nodes.itemAt(0).x});
@but if we want to link not rectangle it self, but some children (some image that represents visual link point), we need to use mapFromItem to map children position to rectangle, but then binding becomes invalid (probably just need property for marshaling position value)
- ListModel of nodes
-
so solution, its not the best, but do the job
@
Repeater
{
id: nodes;
...
delegate:
Item
{
id: nodeRoot;Repeater
{
id: nodesLinks;
...
delegate:
Item
{
property variant linkPoint;
property variant linkPointItem: linkPointInternal;
...
Item
{
id: linkPointInternal;
}
...
}
}
Component.onCompleted:
{
for(var i = 0; i < nodesLinks.count; ++i)
nodesLinks.itemAt(i).linkPoint = nodeRoot.mapFromItem(nodesLinks.itemAt(i).linkPointItem, offsetX, offsetY);
}
}
}Repeater
{
id: connections;
...
delegate:
Connector
{
x1: nodes.itemAt(node1).x + nodes.itemAt(node1).nodesLinks.itemAt(linkId1).linkPoint.x;
y1: nodes.itemAt(node1).y + nodes.itemAt(node1).nodesLinks.itemAt(linkId1).linkPoint.y;
x2: nodes.itemAt(node2).x + nodes.itemAt(node2).nodesLinks.itemAt(linkId2).linkPoint.x;
y2: nodes.itemAt(node2).y + nodes.itemAt(node2).nodesLinks.itemAt(linkId2).linkPoint.y;
}
}
@in solution I expect constant position of link points inside node, so I calculate points positions in Component.onCompleted, also tried to calculate it when linkPointInternal item constructs, but seems Repeater align nodes after Component.onCompleted call