JavaFX Collection of Shapes - events

Question

I am trying to create a JavaFX control that is essentially a bunch of interactable shapes. This is what I have so far:
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
public class ScenarioViewer extends Group {
// I want 1mm == 1px so scale everything so that 0.001 == 1px
private static final int DEFAULT_SCALE = 1000;
private static final int DEFAULT_SENSITIVITY = 100;
private double sensitivity;
private Rectangle testRect;
public ScenarioViewer() {
sensitivity = DEFAULT_SENSITIVITY;
testRect = new Rectangle(0.0, 0.0, 0.005, 0.01);
testRect.setStroke(Color.BLACK);
testRect.setFill(null);
testRect.setStrokeWidth(0.001);
getChildren().add(testRect);
setupScale();
setupEventHandlers();
}
private void scale(double change) {
setScaleX(getScaleX() + change);
setScaleY(getScaleY() + change);
}
private void translate(double x, double y) {
setTranslateX(getTranslateX() + x);
setTranslateY(getTranslateY() + y);
}
private void setupScale() {
setScaleX(DEFAULT_SCALE);
setScaleY(DEFAULT_SCALE);
}
private EventHandler<ScrollEvent> onScroll = new EventHandler<ScrollEvent>() {
public void handle(ScrollEvent event) {
scale(event.getDeltaY() * sensitivity);
}
};
private EventHandler<MouseEvent> onDrag = new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
if(event.isPrimaryButtonDown()) {
translate(event.getX() * sensitivity,
event.getY() * sensitivity);
}
}
};
private void setupEventHandlers() {
addEventHandler(ScrollEvent.SCROLL, onScroll);
addEventHandler(MouseEvent.MOUSE_DRAGGED, onDrag);
}
}
The problem with the above is that the events are only triggered if the mouse is over the rectangle, more specifically, the edges of the rectangle as it is not filled. I want the opposite, such that, the events are only triggered when the mouse is not over a shape so that specific event handlers can be registered to each shape.
Why is this happening?
I believe it is because my control extends Group, and this relevant line in the documentation:
Any transform, effect, or state applied to a Group will be applied to
all children of that group. Such transforms and effects will NOT be
included in this Group's layout bounds, however if transforms and
effects are set directly on children of this Group, those will be
included in this Group's layout bounds.
Is there a more appropriate class to extend?
Update
I've changed the base class to Region, this makes events trigger properly but now the scaling and translations don't work like before. I have to instead iterate over everything and scale/translate each individual shape? Why does calling getScaleX/Y and setTranslateX/Y act differently between Region and Group?

Answer 1

On your group, call setPickOnBounds(true), this will allow the group to intercept any mouse/touch/input events within it's bounds.
specific event handlers can be registered to each shape.
Just invoke shape.setOnMouseClicked(eventHandler), etc (you can also use such setters on your enclosing group to handle events at the group level). You can consume the events in the event handler if you don't want them to bubble up to the enclosing group, similarly you can add filters to the parent group if you don't want the events to reach the children.
It may help if you review the Oracle tutorials on JavaFX event handling.