Layout with overlaying nodes and anchor-like positioning

Question

I try to make a layout with JavaFX that allows overlaying nodes, resizing them to match (fill) container size and aligning them to container sides. Which layout pane should I use and how to set it to achieve the layout shown on the picture.

I tried to put TreeView node and SwingNode in an AnchorPane and setting anchors to fill the container, like that TreeView: top 0, left 0, bottom 0 (no right anchor to let is resize to fit content) SwingNode: all to 0 TreeView was displayed correctly but underlaying SwingNode didn't fit to the whole container. It looked like its right anchor was applied to the TreeView right side, not the right side of the container. So it had the same size as the TreeView. I was able to see it after setting margins on TreeView.

My code looked like that when using TornadoFX DSL:

anchorpane {
    swingnode {
        AnchorPane.setTopAnchor(this, 5.0)
        AnchorPane.setLeftAnchor(this, 5.0)
        AnchorPane.setBottomAnchor(this, 5.0)
        AnchorPane.setRightAnchor(this, 5.0)
    }

    treeview {
        AnchorPane.setTopAnchor(this, 5.0)
        AnchorPane.setLeftAnchor(this, 5.0)
        AnchorPane.setBottomAnchor(this, 5.0)
    }
}

I want the layout to look like on the picture:

. So that the part of the SwingNode is hidden under the TreeView and the TreeView has a fixed width (or fit to its content if possible).

Answer 1

For that you have to use a stackpane. So your treeview can be on a different layer than your swingnode for example.

The Element Added first in a stackpane will be below the second one. So what you have to do is: first add your stackpane which has to elements overlapping each other in this case i used anchorpane and inside the first anchorpane you can add your swingnode and in the second you can add your treeview.

Youst a rough example:

stackpane {
    alignment = Pos.CENTER_LEFT
    vgrow = Priority.ALWAYS
    anchorpane {       //Layer 0
        vgrow = Priority.ALWAYS
        swingnode {
            anchorpaneConstraints { topAnchor = 5.0; rightAnchor = 5.0; bottomAnchor = 5.0; leftAnchor = 5.0 }
        }
    }
    anchorpane {       //Layer 1 would be above Layer 0
        minWidth = 115.0
        maxWidth = 115.0
        translateX = -115.0   //Default width of treeview anchorpane negativ for hiding it at start otherwithe remove this line
        treeview {
            anchorpaneConstraints { topAnchor = 5.0; bottomAnchor = 5.0 }
        }
    }
}

you could even hide and show it with an animation:

For that you have to define to val's:

companion object {
    val openTreeView = TranslateTransition(Duration(500.0), <your anchorpane>)
    val closeTreeView = TranslateTransition(Duration(500.0), <your anchorpane>)
    ...
}

init {
    openTreeView.toX = 0.0
    ...
}

And you could open and close it for example with an setOnMouseClicked:

setOnMouseClicked {
    if (<your anchorpane>.translateX != 0.0) {
        openTreeView.play()
    } else {
        closeTreeView.toX = -<your anchorpane>.width
        closeTreeView.play()
    }
}