Scrollable/scalable image with buttons on top of it?

Question

Hey guys,
I've had a few half-goes at doing this before but now have to do it for real in my project and I'm struggling to get something clean and I'm looking for pointers.
I want to have an image (typically a schematic, or a map) which is scrollable and zoomable. I want to overlay some buttons on the image for controlling zoom (and other things, but lets keep it simple for now). I want the whole thing to be a custom component that I can drop into another panel, and for that custom component to be resized nicely inline with its parent (i.e. if I put it in a BorderPane.center it should take up the available space and no more or less).
So I started with something logical/simple, a StackPane at the top-level with a ScrollPane containing an ImageView as the first child, and then an 'overlay' panel as the top child of the StackPane to conatain my buttons. I want to anchor my buttons to the top right of the image so I use an Anchor Pane for this. Something like:
public class MapView extends StackPane
    public MapView()
        ImageView imageView = new ImageView(new Image("C:/temp/my-image.jpg"));
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setPannable(true);
        scrollPane.setContent(imageView);
        getChildren().add(scrollPane);
        HBox zoomButtons = new HBox(5);
        Button zoomInButton = new Button("+");
        zoomButtons.getChildren().add(zoomInButton);
        Button zoomOutButton = new Button("-");
        zoomButtons.getChildren().add(zoomOutButton);
        AnchorPane controls = new AnchorPane();
        AnchorPane.setRightAnchor(zoomButtons, 20.0);
        AnchorPane.setTopAnchor(zoomButtons, 5.0);
        controls.getChildren().add(zoomButtons);
        getChildren().add(controls);
}This gives me the perfect layout but with one massive problem: the AnchorPane is stretched to take up the whole area of the StackPane (which is what I want from a layout perspective) but that means it blocks the mouse input to the underlying image view so I can't scroll.
So I try adding a call to the handy setMouseTransparent method:
controls.setMouseTransparent(true);And now I can scroll my image around, but I have the inverse problem: the buttons are now mouse transparent as well so I can't click them.
Snookered.
So maybe a Group is an option? I try using one instead of the AnchorPane:
ImageView imageView = new ImageView(new Image("C:\\temp\\corso\\pandids\\pandid-2.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setPannable(true);
scrollPane.setContent(imageView);
getChildren().add(scrollPane);
HBox zoomButtons = new HBox(5);
Button zoomInButton = new Button("+");
zoomButtons.getChildren().add(zoomInButton);
Button zoomOutButton = new Button("-");
zoomButtons.getChildren().add(zoomOutButton);
Group group = new Group(zoomButtons);
getChildren().add(group);I get my buttons in the middle of the screen and I can both scroll my image and click my buttons. But I can't figure out a way to anchor the buttons up to the top right. Group seems to resize itself to the contents of its children (I imagine there's a reason for this, but it makes Group completely unusable for every scenario I've had for it), so I can't really adjust the size or position of the Group. Calling resize() seems to have no effect and there's no setMaxSize or setPrefSize. Calling setLayoutX doesn't do anything cause its all within a StackPane. The only horribly hack I can think of is to add a dummy component to the group which is the size of the container the group is in. Too painful and too fragile to be a real option.
Snookered again.
Maybe I need a Group at the top level instead of the StackPane, but then it all goes a bit nuts with the ImageView sizing and layout pretty much totally gone.
The only other hack I can come up with is to put my own mouse listener on the anchor pane and implement 'panning' manually, but then the scroll bars won't work so I'll probably have to turn these off.
It seems like this should be really easy, and the first, logical simple approach was so close it hurts. Am I missing something simple, or is it really this hard?

Answer 1

Hi Zonski,
what about this?
        Group group = new Group(zoomButtons);               
        group.translateXProperty().bind(group.layoutXProperty().subtract(20));
        group.translateYProperty().bind(group.layoutYProperty().multiply(-1).add(20));
        getChildren().add(group);Works for me
Cheers
Michael