JavaFX ScrollPane programmatically moving the viewport - centering content

Question

I can use the setVvalue(double) and setHvalue(double) methods to move a viewport in a JavaFX ScrollPane. What I'm struggling to do is center a particular node in the content of the scroll pane based on its position. I've tried all sorts of combos of localToScene() and boundsInParent(). I've read (a lot) and seen this example

How to scroll to make a Node within the content of a ScrollPane visible?

Which is close but doesn't center the objects just puts them visible. Having the built in mouse panning is brilliant but I'm making heavy weather of the programmatic panning.

Ultimately I need to be able to do a zoom too so I have put the actual shapes in a Group and added the group to the scroll pane content. I think I'm supposed to do the zooming on the group and again I need to be able to zoom around the center of the group so we are back to manipulating and identifying the current center position. Any pointers or examples that can be provided would be really really appreciated. The code sample in the link above is a good SSCCE.

Thanks in advance,

Andy

Answer 1

I'll try explaining this without code, because I don't think that's necessary here.

Let's say the content of your scrollpane has height h, and the height of the viewport is v. If h = v, then the content would fit perfectly into the viewport, and you would need no scrollbar. In this situation (with a non-movable scrollbar), for an element to be centered, it would need to be positioned at the center of the scrollpane's content. You can't move it to the viewport's center by means of scrolling.

Now consider h to be twice the size of v (i.e. h = 2v). In this situation the upper 1/4 and the lower 1/4 of the scrollpane's content could not be centered by scrolling.

(If you absolutely needed to center any component by scrolling you should consider padding your content pane, but we'll continue with the unpadded solution here)

When you think about it, you'll realize the possible scrollable distance of the scrollbar is h - v, and you will scroll that amount by setting vvalue to 1.0.

To center a point y (here the point y is a coordinate of the scrollpane's content pane) you can use the following vvalue:

vvalue = (y - 0.5 * v) / (h - v) 

The nominator of this expression is the y-coordinate of what is shown at the top of the viewport when the point y is centered inside the viewport. The denominator is the total scrollable distance.

Edit: Adding some code anyway!

public void centerNodeInScrollPane(ScrollPane scrollPane, Node node) {
    double h = scrollPane.getContent().getBoundsInLocal().getHeight();
    double y = (node.getBoundsInParent().getMaxY() + 
                node.getBoundsInParent().getMinY()) / 2.0;
    double v = scrollPane.getViewportBounds().getHeight();
    scrollPane.setVvalue(scrollPane.getVmax() * ((y - 0.5 * v) / (h - v)));
}

(Please note this assumes that the node is a direct child of the scrollpane's contentpane)

Hope this helps! :)