JavaFX Dragged Element is flipping - javafx

Question

im trying an easy drag-pane setup. My results are funny.
Dragging an Node within an Pane results in an jumping effect?
While dragging the dot jumps to a given position and with the next drag back to the last position.
Any help?
import java.util.concurrent.atomic.AtomicReference;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.PickResult;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class DrawPolygon extends Application {
Group g ;
PickResult pickResult;
Node intersectedNode;
final AtomicReference<MouseEvent> deltaEvent = new AtomicReference<MouseEvent>();
#Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 600, 800);
stage.setScene(scene);
g = new Group();
Rectangle blue = new Rectangle();
blue.setFill(Color.BLUE);
blue.setWidth(25);
blue.setHeight(25);
blue.setX(50);
blue.setY(50);
Rectangle red = new Rectangle();
red.setFill(Color.RED);
red.setWidth(25);
red.setHeight(25);
red.setX(150);
red.setY(150);
Rectangle yellow = new Rectangle();
yellow.setFill(Color.YELLOW);
yellow.setWidth(25);
yellow.setHeight(25);
yellow.setX(250);
yellow.setY(250);
blue.addEventFilter(MouseEvent.MOUSE_CLICKED, onMouseClickedEventHandler);
red.addEventFilter(MouseEvent.MOUSE_CLICKED, onMouseClickedEventHandler);
yellow.addEventFilter(MouseEvent.MOUSE_CLICKED, onMouseClickedEventHandler);
blue.addEventFilter(MouseEvent.MOUSE_PRESSED, onMousePressedEventHandler);
red.addEventFilter(MouseEvent.MOUSE_PRESSED, onMousePressedEventHandler);
yellow.addEventFilter(MouseEvent.MOUSE_PRESSED, onMousePressedEventHandler);
blue.addEventFilter(MouseEvent.MOUSE_DRAGGED, onMouseDraggedEventHandler);
red.addEventFilter(MouseEvent.MOUSE_DRAGGED, onMouseDraggedEventHandler);
yellow.addEventFilter(MouseEvent.MOUSE_DRAGGED, onMouseDraggedEventHandler);
blue.addEventFilter(MouseEvent.MOUSE_RELEASED, onMouseReleasedEventHandler);
red.addEventFilter(MouseEvent.MOUSE_RELEASED, onMouseReleasedEventHandler);
yellow.addEventFilter(MouseEvent.MOUSE_RELEASED, onMouseReleasedEventHandler);
g.getChildren().add(blue);
g.getChildren().add(red);
g.getChildren().add(yellow);
scene.setRoot(g);
stage.show();
}
EventHandler<MouseEvent> onMouseClickedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.print("C");
}
};
EventHandler<MouseEvent> onMousePressedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.print("P");
pickResult = event.getPickResult();
intersectedNode = pickResult.getIntersectedNode();
deltaEvent.set(event);
}
};
EventHandler<MouseEvent> onMouseDraggedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.print("D");
final double deltaX = event.getX() - deltaEvent.get().getX();
final double deltaY = event.getY() - deltaEvent.get().getY();
intersectedNode.setLayoutX(event.getX() - deltaX);
intersectedNode.setLayoutY(event.getY() - deltaY);
deltaEvent.set(event);
g.layout();
}
};
EventHandler<MouseEvent> onMouseReleasedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.println("R");
}
};
public static void main(String[] args) {
launch(args);
}
}

Answer 1

You're using positions relative to the Nodes, which messes up the calculations, and in addition to that the Node is also being moved:
newLayoutX = event.getX() - deltaX
= event.getX() - (event.getX() - deltaEvent.get().getX())
= deltaEvent.get().getX()
which is obviously wrong, since the event coordinates are in the coordinates Node the EventHandler is registered to.
Solution
Use parent coordinates
Additional Notes:
You don't get any benefit from using AtomicReference instead of a non-final field.
You are not filtering events, you're handling them; Therefore addEventHandler should be used instead of addEventFilter. Furthermore you can use the convenience methods which makes your code simpler.
Instead of adding the event handlers to every child node, you could also add the event handler to the Group which also removes the need of transforming the coordinates "manually".
Group g;
Node intersectedNode;
private Point2D dragStart;
private final Set<Node> draggable = new HashSet<>();
#Override
public void start(Stage stage) {
g = new Group();
Scene scene = new Scene(g, 600, 800);
stage.setScene(scene);
Rectangle blue = new Rectangle();
...
yellow.setY(250);
draggable.addAll(Arrays.asList(red, blue, yellow));
g.getChildren().addAll(blue, red, yellow);
g.setOnMouseClicked(onMouseClickedEventHandler);
g.setOnMousePressed(onMousePressedEventHandler);
g.setOnMouseDragged(onMouseDraggedEventHandler);
g.setOnMouseReleased(onMouseReleasedEventHandler);
scene.setRoot(g);
stage.show();
}
EventHandler<MouseEvent> onMousePressedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.print("P");
PickResult pickResult = event.getPickResult();
intersectedNode = pickResult.getIntersectedNode();
System.out.println(intersectedNode);
if (draggable.contains(intersectedNode)) {
dragStart = new Point2D(intersectedNode.getLayoutX() - event.getX(), intersectedNode.getLayoutY() - event.getY());
} else {
intersectedNode = null;
}
}
};
EventHandler<MouseEvent> onMouseDraggedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.print("D");
if (intersectedNode != null) {
intersectedNode.setLayoutX(event.getX() + dragStart.getX());
intersectedNode.setLayoutY(event.getY() + dragStart.getY());
}
}
};