If I have two Nodes stacked on top of each other and overlapping, how can I make the Node on top mouseTransparent (so that the bottom Node can react to MouseEvents) but also have the Node on top react to some MouseEvents like onMouseEntered?
For example, consider two (let's say rectangular) Panes inside a StackPane, with the bottom one smaller and completely underneath the top one:
<StackPane>
<Pane onMouseEntered="#printA" onMouseClicked="#printB" />
<Pane onMouseEntered="#printC" />
</StackPane>
If the user moves his mouse over the top Pane then C should be printed in the console. If he also moves his mouse over the bottom Pane then A should be printed too. If he clicks with mouse over the bottom Pane then B should be printed. Clicking over the top Pane but not over the bottom Pane should do nothing.
Why do I want to do something like this? I want to detect when the mouse moves near the center of a Pane so that I can change the Pane's center content (basically from display mode to edit mode) and let the user interact with the new content. I want the detection area to be larger than the center itself and thus it will overlap with some other things inside the Pane. So the Pane center can't be the detector, it has to be something transparent stacked on top. The detector also has to remain there so it can detect when the mouse moves away again.
There are lots of questions on Stackoverflow that appear similar, but almost all of them are solved by setMouseTransparent(true)
or setPickOnBounds(true)
. setMouseTransparent
doesn't work here since then the top Pane won't print C. setPickOnBounds
makes the Pane mouseTransparent everywhere the Pane is alpha/visually transparent, but then the transparent parts won't print C and the opaque parts prevent the lower Pane from printing A or B. So even if the top Pane is completely transparent or completely opaque it doesn't solve my issue. Setting the visibility to false for the top Pane also won't work since then the top Pane cannot print C.
Here is a potential strategy which might be used.
The effect will be that two events occur and can be separately handled by the target node and by the detection node.
import javafx.application.Application;
import javafx.event.Event;
import javafx.event.EventType;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import java.util.concurrent.atomic.AtomicBoolean;
public class LayersFX extends Application {
private final ListView<String> logViewer = new ListView<>();
// set to true if you with to see move events in the log.
private final boolean LOG_MOVES = false;
@Override
public void start(Stage stage) {
Rectangle square = new Rectangle(200, 200, Color.LIGHTSKYBLUE);
Circle circle = new Circle(80, Color.LEMONCHIFFON);
StackPane stack = new StackPane(square, circle);
addEventHandlers(square);
addEventHandlers(circle);
VBox layout = new VBox(10, stack, logViewer);
layout.setPadding(new Insets(10));
logViewer.setPrefSize(200, 200);
Scene scene = new Scene(layout);
routeMouseEventsToNode(scene, circle);
stage.setScene(scene);
stage.show();
}
/**
* Intercepts mouse events from the scene and created duplicate events which
* are routed to the node when appropriate.
*/
private void routeMouseEventsToNode(Scene scene, Node node) {
// make the node transparent to standard mouse events.
// it will only receive mouse events we specifically create and send to it.
node.setMouseTransparent(true);
// consume all events for the target node so that we don't
// accidentally let a duplicated event bubble back up to the scene
// and inadvertently cause an infinite loop.
node.addEventHandler(EventType.ROOT, Event::consume);
// Atomic isn't used here for concurrency, it is just
// a trick to make the boolean value effectively final
// so that it can be used in the lambda.
AtomicBoolean inNode = new AtomicBoolean(false);
scene.setOnMouseMoved(
event -> {
boolean wasInNode = inNode.get();
boolean nowInNode = node.contains(
node.sceneToLocal(
event.getSceneX(),
event.getSceneY()
)
);
inNode.set(nowInNode);
if (nowInNode) {
node.fireEvent(
event.copyFor(
node,
node,
MouseEvent.MOUSE_MOVED
)
);
}
if (!wasInNode && nowInNode) {
node.fireEvent(
event.copyFor(
node,
node,
MouseEvent.MOUSE_ENTERED_TARGET
)
);
}
if (wasInNode && !nowInNode) {
node.fireEvent(
event.copyFor(
node,
node,
MouseEvent.MOUSE_EXITED_TARGET
)
);
}
}
);
}
private void addEventHandlers(Node node) {
String nodeName = node.getClass().getSimpleName();
node.setOnMouseEntered(
event -> log("Entered " + nodeName)
);
node.setOnMouseExited(
event -> log("Exited " + nodeName)
);
node.setOnMouseClicked(
event -> log("Clicked " + nodeName)
);
node.setOnMouseMoved(event -> {
if (LOG_MOVES) {
log(
"Moved in " + nodeName +
" (" + Math.floor(event.getX()) + "," + Math.floor(event.getY()) + ")"
);
}
});
}
private void log(String msg) {
logViewer.getItems().add(msg);
logViewer.scrollTo(logViewer.getItems().size() - 1);
}
public static void main(String[] args) {
launch(args);
}
}
There is probably some better way of doing this using a custom event dispatch chain, but the logic above is what I came up with. The logic appears to do what you asked in your question, though it may not have the full functionality that you need for your actual application.