Question about VBox/HBox and drawing things between things like a Mind Map

Question

Hi people!
I'm toying with some techniques to draw something like a mind map using JavaFX. The idea was to make one HBox with two elements, left is the content node and the right element is a VBox with the child nodes.
The problem is drawing lines between the left node and the child nodes.
I suspect the double binding might be a problem in the lines definition, or perhaps that VBox/HBox don't actually change the x,y for the children, but rather translate them.
Here's a working buggy example:
package tree;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class MyNode extends CustomNode {
    var children : MyNode[] = [];
    def rect = Rectangle {
        width: 20
        height: 20
        fill: Color.RED
        onMouseClicked: function( e: MouseEvent ) {
            insert MyNode { } into children;
    public def leftConnectorX = bind rect.x;
    public def leftConnectorY = bind rect.y + rect.height / 2;
    public def rightConnectorX = bind rect.x + rect.width;
    public def rightConnectorY = bind rect.y + rect.height / 2;
    // A vertical layout box of the child nodes
    def childs = VBox {
        spacing: 5
        content: bind children };
    // These are the lines between this node and its direct children
    def lines = bind for(child in children) Line {
        startX: bind rightConnectorX
        startY: bind rightConnectorY
        endX: bind child.leftConnectorX
        endY: bind child.leftConnectorY
    override function create():Node {
        return Group {
            content: bind [
                lines,
                HBox {
                    spacing: 15
                    content: [ rect, childs ]
function run(args : String[]) {
    return Stage {
        title: "Tree of trees"
        width: 800
        height: 600
        scene: Scene {
            content: MyNode {
}Any ideas why the lines aren't drawn? Or any idea of a better way to achieve mind mapping-ish tree?

Answer 1

I'm sure there will be some updates soon to fix those small problems. I mean, how hard can it be? ;-)
I got my code working, had to move the lines to outside the nested HBox/VBox'es to be able to positioning them freely.
package tree2;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class MyNode extends CustomNode {
    var children : MyNode[] = [];
    def rect = Rectangle {
        width: 20
        height: 20
        fill: Color.RED
        onMouseClicked: function( e: MouseEvent ) {
            insert MyNode { } into children;
    public def leftConnectorX = bind rect.boundsInScene.minX;
    public def leftConnectorY = bind rect.boundsInScene.minY + rect.height / 2;
    public def rightConnectorX = bind rect.boundsInScene.minX + rect.width;
    public def rightConnectorY = bind rect.boundsInScene.minY + rect.height / 2;
    // A vertical layout box of the child nodes
    def childs = VBox {
        spacing: 5
        content: bind children };
    // These are the lines between this node and its direct children
    public def lines : Line[] = bind
    for(child in children) [
        child.lines,
        Line {
            startX: bind rightConnectorX
            startY: bind rightConnectorY
            endX: bind child.leftConnectorX
            endY: bind child.leftConnectorY
    override function create():Node {
        return Group {
            content: bind
                HBox {
                    spacing: 15
                    content: [ rect, childs ]
function run(args : String[]) {
def node = MyNode {};
return Stage {
    title: "Tree of trees"
    width: 800
    height: 600
    scene: Scene {
        content: Group {
            content: bind [ node, node.lines ]
}