JavaFx path transition in gridPane

Question

I can not understand how moveTo method work in javafx. here is my example I have a GridPane that consist of 4 columns and 1 row. All the columns h has a StackPane and the last Stackpane also has an empty label.

public class PathTransitionTExample extends Application {

StackPane pane;
GridPane grid;
Label label;
 Scene scene;

@Override
public void start(Stage primaryStage) {

    label = new Label();
    label.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
    grid = new GridPane();
    grid.getStyleClass().add("gridPane");

    for (int x = 0; x < 4; x++) {
        grid.add(pane = new StackPane(), x, 0);
        pane.setPrefSize(50, 50);
        pane.getStyleClass().add("stackPane");
    }

    pane = (StackPane) grid.getChildren().get(3);
    pane.getChildren().add(label);

     scene = new Scene(grid, 260, 50);


  scene.getStylesheets().add(PathTransitionTest.class.getResource("pathCSS.css").toExternalForm());
     scene.setOnMouseClicked(me ->  pathTransition()); 
    primaryStage.setTitle("Path Transition");
    primaryStage.setScene(scene);
    primaryStage.show();
}

  //pathCSS.css

.gridPane{
-fx-background-color: red;
-fx-hGap: 20;
}
.stackPane{
-fx-background-color: orange;
}
.label {
-fx-background-color: blue;
}

I want to move the label in the grid pane from 0.3 to 0.0 however when I am trying to do that the whole transition slips.

private void pathTransition() {
    //the Coordinates of the label
    double oldMinX = grid.getChildren().get(3).getLayoutX();
    double oldMinY = grid.getChildren().get(3).getLayoutY();

    //the coordinates of the stack pane where i want the label move
    double newMinX = grid.getChildren().get(1).getLayoutX();
    double newMinY = grid.getChildren().get(1).getLayoutY();

    Path path = new Path();
    path.getElements().add(new MoveTo(oldMinX, oldMinY ));
    path.getElements().add(new LineTo(newMinX,newMinY ));
    PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(new Duration(500));
    pathTransition.setPath(path);
    pathTransition.setNode(label);
    pathTransition.play();
}

If I change the arguments of MoveTo and LineTo by the following I can achieve the animation I want but I cant understand why. :\\

    double oldMinX = grid.getChildren().get(3).getLayoutX() -185;
    double oldMinY = grid.getChildren().get(3).getLayoutY()+ grid.getChildren().get(3).getBoundsInLocal().getHeight()/2 ;
    double newMinX = grid.getChildren().get(1).getLayoutX()-255 ;
    double newMinY = grid.getChildren().get(1).getLayoutY() + grid.getChildren().get(0).getBoundsInLocal().getHeight()/2 ;

I guess It is because transitions use different coordinate systems than scenes but I cant really find anything that explains well :( Could someone give me some hints how It is working? Thank you so much in advance.

Answer 1

I realized that i shouldn't use GridPane. If i do it without using containers the transition is working fine.