When adding a second item to my stackpane, the first item loses its Event/MouseOn. Why? How can I fix? JavaFX

Question

I have a stackpane. When I add a second item to my stack pane, both show up, but I can't click on my first item anymore. It becomes 'unclickable'.

what ever I defined in my .setonmouse does not work. It works for my second item. If I switch the order they are in the stack pane, the other one works, but not both.

is there a fix for this? This is what my program looks like:

I want my 'grid' centered ALWAYS. There are buttons to the left centered in a column, there will be buttons on the right later on, and there will be buttons/Text on top of the grid and buttom in the margins later on too.

I want everything to be clickable.

http://img688.imageshack.us/img688/6025/examplerg.png

Answer 1

StackPane orders items in Z-order: latter above the former. So, your second item gots all mouse clicks and first one (being covered by second) doesn't get anything.

For layout you've described you can use BorderPane:

public void start(Stage stage) throws Exception {
    BorderPane root = new BorderPane();
    root.setCenter(new Rectangle(100,100, Color.RED));
    root.setLeft(new Rectangle(10,10, Color.BLUE));
    root.setRight(new Rectangle(10,10, Color.CYAN));

    stage.setScene(new Scene(root,300,300));

    stage.show();
}

Answer 2

You can make any Pane "mouse transparent", so that it doesn't consume any click events, and lets them pass through to the stack under it.

Here's some example code... this example sets up 4 panes in a stack, with just the mainPane accepting clicks to begin with.

StackPane rootPane = new StackPane();
VBox mainPane = new VBox(80);

BorderPane helpOverlayPane = new BorderPane();
helpOverlayPane.setMouseTransparent(true);

Canvas fullScreenOverlayCanvas = new Canvas();
fullScreenOverlayCanvas.setMouseTransparent(true);

VBox debugPane = new VBox();
debugPane.setAlignment(Pos.BASELINE_RIGHT);
AnchorPane debugOverlay = new AnchorPane();
debugOverlay.setMouseTransparent(true);
debugOverlay.getChildren().add(debugPane);
AnchorPane.setBottomAnchor(debugPane, 80.0);
AnchorPane.setRightAnchor(debugPane, 20.0);

rootPane.getChildren().addAll(mainPane, fullScreenOverlayCanvas, debugOverlay, helpOverlayPane);

Now, when you want to use your canvas to draw on top, make sure you change mouse transparent to false for just that stack, and keep all panes on top of it mouse transparent.

fullScreenOverlayCanvas.setMouseTransparent(false);
debugOverlay.setMouseTransparent(true);
fullScreenOverlayCanvas.setVisible(true);

doSomethingWithCanvasThatNeedsMouseClicks();

P.S. I did some editing of the code I had, so it may not run as-is. Also, see discussion of making only parts of panes transparent here: JavaFX Pass MouseEvents through Transparent Node to Children