line start/end to nested javafx groups/panes

Question

I have some sort of visualization having elements that have ports that can be connected with each other. The ports of an element are children of the javafx pane that represents an element. I was now wondering what could be the best way to bind start and endpoint of connecting lines to the locations of the ports because the ports may be located quite deep in a hierarchy of elements. Thats why I was thinking that I may need the absolute positions of these ports, but did not find an easy way to get them. Right now, the lines are directly under the scene root btw.

Answer 1

Its hard to say without seeing structure of your code. But I had similar problem while working on uml modeling tool written in javafx so my solution might help you.

So in your case I would do something like this:

1. Implement Port in such way that they have DoubleProperty for their X and Y location, now depending on how it should look implementation might be different, in my case I used Circle and its centerXProperty and centerYProperty, another option if using some rectangular shape is to create own centerXProperty and centerYProperty, they can be really easy to calculate by binding to layoutX + (width / 2), same for y just using height. It should look something like this:

   DoubleProperty centerXProperty = new SimpleDoubleProperty(0); centerXProperty.bind(n.layoutXProperty().add(n.widthProperty().divide(2)));

   Where n is some Node on scenegraph, you might use prefWidthProperty as well in case you are using custom width/height

2. Your pane should have list of all ports, now depending on how you want to make this Ports it might differ but in my project I would create Port on intersection of Line that user draws and Pane that it is connected to, you could also just put predefined Ports on every Pane and only make connection if Line end point is inside Port radius.

3. Line already has endXProperty and endYProperty so you can simply bind them to location properties of your Port, this way you can easy allow moving them together.

If you need code example then you need to provide what you got so far so I can help you with that.

EDIT

Regarding parent-child relation, our solution for root of diagram was to extend anchor pane as he gives most control to its children, every node on this anchor pane had to be UmlElement, which further down spreads to UmlNode and UmlEdge, then UmlNode has sub-types ParentUmlNode and ChildUmlNode, Child can be put inside Parent and their position is bound to Parent position, it doesn't care about outside, because of that once Parent moves his children follow him respectively.

IMHO this is much better than to handle deep child position based on root of your view, as there might be some problems keeping everything sync especially if you add resizing, multi-select and similar more complex features.