After translating node The layout x and y stays the same









up vote
0
down vote

favorite












I currently have some stack panes on a pane and when dragged with a mouse they move around the pane. I do this by getting the coordinate of the mouse
and the translate x and y of the stack pane when I press the the stack pane. Then when I start to drag the stack pane I set the the translation x and y of the stack pane to the mouse coordinates when I pressed the stack pane + the difference of the new mouse coordinates and the old mouse coordinates.



My problem is after dragging the StackPane the layout x and y stays the same I want to update this as I used this else where.



My event handler when you press the StackPane:



EventHandler<MouseEvent> circleOnMousePressedEventHandler = 
new EventHandler<MouseEvent>()

@Override
public void handle(MouseEvent t)

currentStackPane = ((StackPane)(t.getSource()));
orgSceneX = t.getSceneX();
orgSceneY = t.getSceneY();
layoutX = currentStackPane.getLayoutX();
layoutY = currentStackPane.getLayoutY();


;


My event handler when i drag the StackPane:



EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 
new EventHandler<MouseEvent>()

@Override
public void handle(MouseEvent t)


double offsetX = t.getSceneX() - orgSceneX;
double offsetY = t.getSceneY() - orgSceneY;
currentStackPane.setTranslateX(offsetX);
currentStackPane.setTranslateY(offsetY);

;


I tried make a event handler after the drag is finished:



EventHandler<MouseEvent> circleOnMouseReleasedEventHandler = 
new EventHandler<MouseEvent>()

@Override
public void handle(MouseEvent t)

currentStackPane.setLayoutX(layoutX + ((StackPane)(t.getSource())).getTranslateX());
currentStackPane.setLayoutY(layoutY + ((StackPane)(t.getSource())).getTranslateY());
currentStackPane.setTranslateX(0);
currentStackPane.setTranslateY(0);

;


But this doesn't seem to work. Any help would be appreciated thanks!



EDIT:



I have changed my event handlers. It seems to be updating the layout x and y correctly for the first time I drag the stack pane but when i first drag the stack pane and then release the mouse the stackpane moves to a different position then every time i drag after it messes up completely. Not sure why, any help appreciated!



EDIT2: I realised I set translate x to 0 but didnt set translate y to 0 in the mouse released event. It all works now!










share|improve this question



























    up vote
    0
    down vote

    favorite












    I currently have some stack panes on a pane and when dragged with a mouse they move around the pane. I do this by getting the coordinate of the mouse
    and the translate x and y of the stack pane when I press the the stack pane. Then when I start to drag the stack pane I set the the translation x and y of the stack pane to the mouse coordinates when I pressed the stack pane + the difference of the new mouse coordinates and the old mouse coordinates.



    My problem is after dragging the StackPane the layout x and y stays the same I want to update this as I used this else where.



    My event handler when you press the StackPane:



    EventHandler<MouseEvent> circleOnMousePressedEventHandler = 
    new EventHandler<MouseEvent>()

    @Override
    public void handle(MouseEvent t)

    currentStackPane = ((StackPane)(t.getSource()));
    orgSceneX = t.getSceneX();
    orgSceneY = t.getSceneY();
    layoutX = currentStackPane.getLayoutX();
    layoutY = currentStackPane.getLayoutY();


    ;


    My event handler when i drag the StackPane:



    EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 
    new EventHandler<MouseEvent>()

    @Override
    public void handle(MouseEvent t)


    double offsetX = t.getSceneX() - orgSceneX;
    double offsetY = t.getSceneY() - orgSceneY;
    currentStackPane.setTranslateX(offsetX);
    currentStackPane.setTranslateY(offsetY);

    ;


    I tried make a event handler after the drag is finished:



    EventHandler<MouseEvent> circleOnMouseReleasedEventHandler = 
    new EventHandler<MouseEvent>()

    @Override
    public void handle(MouseEvent t)

    currentStackPane.setLayoutX(layoutX + ((StackPane)(t.getSource())).getTranslateX());
    currentStackPane.setLayoutY(layoutY + ((StackPane)(t.getSource())).getTranslateY());
    currentStackPane.setTranslateX(0);
    currentStackPane.setTranslateY(0);

    ;


    But this doesn't seem to work. Any help would be appreciated thanks!



    EDIT:



    I have changed my event handlers. It seems to be updating the layout x and y correctly for the first time I drag the stack pane but when i first drag the stack pane and then release the mouse the stackpane moves to a different position then every time i drag after it messes up completely. Not sure why, any help appreciated!



    EDIT2: I realised I set translate x to 0 but didnt set translate y to 0 in the mouse released event. It all works now!










    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I currently have some stack panes on a pane and when dragged with a mouse they move around the pane. I do this by getting the coordinate of the mouse
      and the translate x and y of the stack pane when I press the the stack pane. Then when I start to drag the stack pane I set the the translation x and y of the stack pane to the mouse coordinates when I pressed the stack pane + the difference of the new mouse coordinates and the old mouse coordinates.



      My problem is after dragging the StackPane the layout x and y stays the same I want to update this as I used this else where.



      My event handler when you press the StackPane:



      EventHandler<MouseEvent> circleOnMousePressedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)

      currentStackPane = ((StackPane)(t.getSource()));
      orgSceneX = t.getSceneX();
      orgSceneY = t.getSceneY();
      layoutX = currentStackPane.getLayoutX();
      layoutY = currentStackPane.getLayoutY();


      ;


      My event handler when i drag the StackPane:



      EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)


      double offsetX = t.getSceneX() - orgSceneX;
      double offsetY = t.getSceneY() - orgSceneY;
      currentStackPane.setTranslateX(offsetX);
      currentStackPane.setTranslateY(offsetY);

      ;


      I tried make a event handler after the drag is finished:



      EventHandler<MouseEvent> circleOnMouseReleasedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)

      currentStackPane.setLayoutX(layoutX + ((StackPane)(t.getSource())).getTranslateX());
      currentStackPane.setLayoutY(layoutY + ((StackPane)(t.getSource())).getTranslateY());
      currentStackPane.setTranslateX(0);
      currentStackPane.setTranslateY(0);

      ;


      But this doesn't seem to work. Any help would be appreciated thanks!



      EDIT:



      I have changed my event handlers. It seems to be updating the layout x and y correctly for the first time I drag the stack pane but when i first drag the stack pane and then release the mouse the stackpane moves to a different position then every time i drag after it messes up completely. Not sure why, any help appreciated!



      EDIT2: I realised I set translate x to 0 but didnt set translate y to 0 in the mouse released event. It all works now!










      share|improve this question















      I currently have some stack panes on a pane and when dragged with a mouse they move around the pane. I do this by getting the coordinate of the mouse
      and the translate x and y of the stack pane when I press the the stack pane. Then when I start to drag the stack pane I set the the translation x and y of the stack pane to the mouse coordinates when I pressed the stack pane + the difference of the new mouse coordinates and the old mouse coordinates.



      My problem is after dragging the StackPane the layout x and y stays the same I want to update this as I used this else where.



      My event handler when you press the StackPane:



      EventHandler<MouseEvent> circleOnMousePressedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)

      currentStackPane = ((StackPane)(t.getSource()));
      orgSceneX = t.getSceneX();
      orgSceneY = t.getSceneY();
      layoutX = currentStackPane.getLayoutX();
      layoutY = currentStackPane.getLayoutY();


      ;


      My event handler when i drag the StackPane:



      EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)


      double offsetX = t.getSceneX() - orgSceneX;
      double offsetY = t.getSceneY() - orgSceneY;
      currentStackPane.setTranslateX(offsetX);
      currentStackPane.setTranslateY(offsetY);

      ;


      I tried make a event handler after the drag is finished:



      EventHandler<MouseEvent> circleOnMouseReleasedEventHandler = 
      new EventHandler<MouseEvent>()

      @Override
      public void handle(MouseEvent t)

      currentStackPane.setLayoutX(layoutX + ((StackPane)(t.getSource())).getTranslateX());
      currentStackPane.setLayoutY(layoutY + ((StackPane)(t.getSource())).getTranslateY());
      currentStackPane.setTranslateX(0);
      currentStackPane.setTranslateY(0);

      ;


      But this doesn't seem to work. Any help would be appreciated thanks!



      EDIT:



      I have changed my event handlers. It seems to be updating the layout x and y correctly for the first time I drag the stack pane but when i first drag the stack pane and then release the mouse the stackpane moves to a different position then every time i drag after it messes up completely. Not sure why, any help appreciated!



      EDIT2: I realised I set translate x to 0 but didnt set translate y to 0 in the mouse released event. It all works now!







      javafx






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 12 at 12:17

























      asked Nov 11 at 21:50









      Jaman

      165




      165






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          To understand the problem, I would first recommend to have a look at the documentation of layoutX/layoutY properties of a Node.




          public final DoubleProperty layoutXProperty



          Defines the x coordinate of the translation that is added to this
          Node's transform for the purpose of layout. The value should be
          computed as the offset required to adjust the position of the node
          from its current layoutBounds minX position (which might not be 0) to
          the desired location.



          For example, if textnode should be positioned at finalX



           textnode.setLayoutX(finalX - textnode.getLayoutBounds().getMinX()); 


          Failure to subtract layoutBounds minX may result in misplacement of
          the node. The relocate(x, y) method will automatically do the correct
          computation and should generally be used over setting layoutX
          directly.



          The node's final translation will be computed as layoutX + translateX,
          where layoutX establishes the node's stable position and translateX
          optionally makes dynamic adjustments to that position.



          If the node is managed and has a Region as its parent, then the layout
          region will set layoutX according to its own layout policy. If the
          node is unmanaged or parented by a Group, then the application may set
          layoutX directly to position it.




          In short,for every node that is rendered in the scene, its position is actually a sum of its layoutX/Y and translateX/Y values in relative to its parent node. The layoutX/Y are initially updated as per its parents layout policy. For that reason, there is no point in updating/relying on layoutX/Y values of node, IF its parent (eg,.StackPane,HBox,VBox,..etc) manages it position.



          Pane will not manage/decide its children layout. For that reason the default layoutX/Y values of its children is always 0.



          From the above info,if we now look into your code, you are updating the translate values and setting the layout values wrongly. Instead what you have to actually do is:



          1. Take intial values of layoutX/Y.

          2. Update the translateX/Y while dragging.

          3. And on mouse released recompute layoutX/Y values and reset
            translateX/Y values.

          Below is a quick demo of what I have described.



          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;

          public class PaneLayoutDemo extends Application
          double sceneX, sceneY, layoutX, layoutY;

          @Override
          public void start(Stage stage) throws Exception
          Pane root = new Pane();
          Scene sc = new Scene(root, 600, 600);
          stage.setScene(sc);
          stage.show();
          root.getChildren().addAll(getBox("green"), getBox("red"), getBox("yellow"));


          private StackPane getBox(String color)
          StackPane box = new StackPane();
          box.getChildren().add(new Label("Drag me !!"));
          box.setStyle("-fx-background-color:" + color + ";-fx-border-width:2px;-fx-border-color:black;");
          box.setPrefSize(150, 150);
          box.setMaxSize(150, 150);
          box.setMinSize(150, 150);
          box.setOnMousePressed(e ->
          sceneX = e.getSceneX();
          sceneY = e.getSceneY();
          layoutX = box.getLayoutX();
          layoutY = box.getLayoutY();
          System.out.println(color.toUpperCase() + " Box onStart :: layoutX ::" + layoutX + ", layoutY::" + layoutY);
          );
          box.setOnMouseDragged(e ->
          double offsetX = e.getSceneX() - sceneX;
          double offsetY = e.getSceneY() - sceneY;
          box.setTranslateX(offsetX);
          box.setTranslateY(offsetY);
          );
          box.setOnMouseReleased(e ->
          // Updating the new layout positions
          box.setLayoutX(layoutX + box.getTranslateX());
          box.setLayoutY(layoutY + box.getTranslateY());

          // Resetting the translate positions
          box.setTranslateX(0);
          box.setTranslateY(0);
          );
          return box;


          public static void main(String args)
          Application.launch(args);




          Once you are familiar with the demo, try changing the root from Pane to StackPane and see the behaviour difference.






          share|improve this answer






















          • Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
            – Jaman
            Nov 12 at 11:54










          • Glad that it worked :) Can you please update the question as Answered if it solves your problem.
            – Sai Dandem
            Nov 12 at 22:49










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253603%2fafter-translating-node-the-layout-x-and-y-stays-the-same%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          1
          down vote



          accepted










          To understand the problem, I would first recommend to have a look at the documentation of layoutX/layoutY properties of a Node.




          public final DoubleProperty layoutXProperty



          Defines the x coordinate of the translation that is added to this
          Node's transform for the purpose of layout. The value should be
          computed as the offset required to adjust the position of the node
          from its current layoutBounds minX position (which might not be 0) to
          the desired location.



          For example, if textnode should be positioned at finalX



           textnode.setLayoutX(finalX - textnode.getLayoutBounds().getMinX()); 


          Failure to subtract layoutBounds minX may result in misplacement of
          the node. The relocate(x, y) method will automatically do the correct
          computation and should generally be used over setting layoutX
          directly.



          The node's final translation will be computed as layoutX + translateX,
          where layoutX establishes the node's stable position and translateX
          optionally makes dynamic adjustments to that position.



          If the node is managed and has a Region as its parent, then the layout
          region will set layoutX according to its own layout policy. If the
          node is unmanaged or parented by a Group, then the application may set
          layoutX directly to position it.




          In short,for every node that is rendered in the scene, its position is actually a sum of its layoutX/Y and translateX/Y values in relative to its parent node. The layoutX/Y are initially updated as per its parents layout policy. For that reason, there is no point in updating/relying on layoutX/Y values of node, IF its parent (eg,.StackPane,HBox,VBox,..etc) manages it position.



          Pane will not manage/decide its children layout. For that reason the default layoutX/Y values of its children is always 0.



          From the above info,if we now look into your code, you are updating the translate values and setting the layout values wrongly. Instead what you have to actually do is:



          1. Take intial values of layoutX/Y.

          2. Update the translateX/Y while dragging.

          3. And on mouse released recompute layoutX/Y values and reset
            translateX/Y values.

          Below is a quick demo of what I have described.



          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;

          public class PaneLayoutDemo extends Application
          double sceneX, sceneY, layoutX, layoutY;

          @Override
          public void start(Stage stage) throws Exception
          Pane root = new Pane();
          Scene sc = new Scene(root, 600, 600);
          stage.setScene(sc);
          stage.show();
          root.getChildren().addAll(getBox("green"), getBox("red"), getBox("yellow"));


          private StackPane getBox(String color)
          StackPane box = new StackPane();
          box.getChildren().add(new Label("Drag me !!"));
          box.setStyle("-fx-background-color:" + color + ";-fx-border-width:2px;-fx-border-color:black;");
          box.setPrefSize(150, 150);
          box.setMaxSize(150, 150);
          box.setMinSize(150, 150);
          box.setOnMousePressed(e ->
          sceneX = e.getSceneX();
          sceneY = e.getSceneY();
          layoutX = box.getLayoutX();
          layoutY = box.getLayoutY();
          System.out.println(color.toUpperCase() + " Box onStart :: layoutX ::" + layoutX + ", layoutY::" + layoutY);
          );
          box.setOnMouseDragged(e ->
          double offsetX = e.getSceneX() - sceneX;
          double offsetY = e.getSceneY() - sceneY;
          box.setTranslateX(offsetX);
          box.setTranslateY(offsetY);
          );
          box.setOnMouseReleased(e ->
          // Updating the new layout positions
          box.setLayoutX(layoutX + box.getTranslateX());
          box.setLayoutY(layoutY + box.getTranslateY());

          // Resetting the translate positions
          box.setTranslateX(0);
          box.setTranslateY(0);
          );
          return box;


          public static void main(String args)
          Application.launch(args);




          Once you are familiar with the demo, try changing the root from Pane to StackPane and see the behaviour difference.






          share|improve this answer






















          • Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
            – Jaman
            Nov 12 at 11:54










          • Glad that it worked :) Can you please update the question as Answered if it solves your problem.
            – Sai Dandem
            Nov 12 at 22:49














          up vote
          1
          down vote



          accepted










          To understand the problem, I would first recommend to have a look at the documentation of layoutX/layoutY properties of a Node.




          public final DoubleProperty layoutXProperty



          Defines the x coordinate of the translation that is added to this
          Node's transform for the purpose of layout. The value should be
          computed as the offset required to adjust the position of the node
          from its current layoutBounds minX position (which might not be 0) to
          the desired location.



          For example, if textnode should be positioned at finalX



           textnode.setLayoutX(finalX - textnode.getLayoutBounds().getMinX()); 


          Failure to subtract layoutBounds minX may result in misplacement of
          the node. The relocate(x, y) method will automatically do the correct
          computation and should generally be used over setting layoutX
          directly.



          The node's final translation will be computed as layoutX + translateX,
          where layoutX establishes the node's stable position and translateX
          optionally makes dynamic adjustments to that position.



          If the node is managed and has a Region as its parent, then the layout
          region will set layoutX according to its own layout policy. If the
          node is unmanaged or parented by a Group, then the application may set
          layoutX directly to position it.




          In short,for every node that is rendered in the scene, its position is actually a sum of its layoutX/Y and translateX/Y values in relative to its parent node. The layoutX/Y are initially updated as per its parents layout policy. For that reason, there is no point in updating/relying on layoutX/Y values of node, IF its parent (eg,.StackPane,HBox,VBox,..etc) manages it position.



          Pane will not manage/decide its children layout. For that reason the default layoutX/Y values of its children is always 0.



          From the above info,if we now look into your code, you are updating the translate values and setting the layout values wrongly. Instead what you have to actually do is:



          1. Take intial values of layoutX/Y.

          2. Update the translateX/Y while dragging.

          3. And on mouse released recompute layoutX/Y values and reset
            translateX/Y values.

          Below is a quick demo of what I have described.



          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;

          public class PaneLayoutDemo extends Application
          double sceneX, sceneY, layoutX, layoutY;

          @Override
          public void start(Stage stage) throws Exception
          Pane root = new Pane();
          Scene sc = new Scene(root, 600, 600);
          stage.setScene(sc);
          stage.show();
          root.getChildren().addAll(getBox("green"), getBox("red"), getBox("yellow"));


          private StackPane getBox(String color)
          StackPane box = new StackPane();
          box.getChildren().add(new Label("Drag me !!"));
          box.setStyle("-fx-background-color:" + color + ";-fx-border-width:2px;-fx-border-color:black;");
          box.setPrefSize(150, 150);
          box.setMaxSize(150, 150);
          box.setMinSize(150, 150);
          box.setOnMousePressed(e ->
          sceneX = e.getSceneX();
          sceneY = e.getSceneY();
          layoutX = box.getLayoutX();
          layoutY = box.getLayoutY();
          System.out.println(color.toUpperCase() + " Box onStart :: layoutX ::" + layoutX + ", layoutY::" + layoutY);
          );
          box.setOnMouseDragged(e ->
          double offsetX = e.getSceneX() - sceneX;
          double offsetY = e.getSceneY() - sceneY;
          box.setTranslateX(offsetX);
          box.setTranslateY(offsetY);
          );
          box.setOnMouseReleased(e ->
          // Updating the new layout positions
          box.setLayoutX(layoutX + box.getTranslateX());
          box.setLayoutY(layoutY + box.getTranslateY());

          // Resetting the translate positions
          box.setTranslateX(0);
          box.setTranslateY(0);
          );
          return box;


          public static void main(String args)
          Application.launch(args);




          Once you are familiar with the demo, try changing the root from Pane to StackPane and see the behaviour difference.






          share|improve this answer






















          • Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
            – Jaman
            Nov 12 at 11:54










          • Glad that it worked :) Can you please update the question as Answered if it solves your problem.
            – Sai Dandem
            Nov 12 at 22:49












          up vote
          1
          down vote



          accepted







          up vote
          1
          down vote



          accepted






          To understand the problem, I would first recommend to have a look at the documentation of layoutX/layoutY properties of a Node.




          public final DoubleProperty layoutXProperty



          Defines the x coordinate of the translation that is added to this
          Node's transform for the purpose of layout. The value should be
          computed as the offset required to adjust the position of the node
          from its current layoutBounds minX position (which might not be 0) to
          the desired location.



          For example, if textnode should be positioned at finalX



           textnode.setLayoutX(finalX - textnode.getLayoutBounds().getMinX()); 


          Failure to subtract layoutBounds minX may result in misplacement of
          the node. The relocate(x, y) method will automatically do the correct
          computation and should generally be used over setting layoutX
          directly.



          The node's final translation will be computed as layoutX + translateX,
          where layoutX establishes the node's stable position and translateX
          optionally makes dynamic adjustments to that position.



          If the node is managed and has a Region as its parent, then the layout
          region will set layoutX according to its own layout policy. If the
          node is unmanaged or parented by a Group, then the application may set
          layoutX directly to position it.




          In short,for every node that is rendered in the scene, its position is actually a sum of its layoutX/Y and translateX/Y values in relative to its parent node. The layoutX/Y are initially updated as per its parents layout policy. For that reason, there is no point in updating/relying on layoutX/Y values of node, IF its parent (eg,.StackPane,HBox,VBox,..etc) manages it position.



          Pane will not manage/decide its children layout. For that reason the default layoutX/Y values of its children is always 0.



          From the above info,if we now look into your code, you are updating the translate values and setting the layout values wrongly. Instead what you have to actually do is:



          1. Take intial values of layoutX/Y.

          2. Update the translateX/Y while dragging.

          3. And on mouse released recompute layoutX/Y values and reset
            translateX/Y values.

          Below is a quick demo of what I have described.



          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;

          public class PaneLayoutDemo extends Application
          double sceneX, sceneY, layoutX, layoutY;

          @Override
          public void start(Stage stage) throws Exception
          Pane root = new Pane();
          Scene sc = new Scene(root, 600, 600);
          stage.setScene(sc);
          stage.show();
          root.getChildren().addAll(getBox("green"), getBox("red"), getBox("yellow"));


          private StackPane getBox(String color)
          StackPane box = new StackPane();
          box.getChildren().add(new Label("Drag me !!"));
          box.setStyle("-fx-background-color:" + color + ";-fx-border-width:2px;-fx-border-color:black;");
          box.setPrefSize(150, 150);
          box.setMaxSize(150, 150);
          box.setMinSize(150, 150);
          box.setOnMousePressed(e ->
          sceneX = e.getSceneX();
          sceneY = e.getSceneY();
          layoutX = box.getLayoutX();
          layoutY = box.getLayoutY();
          System.out.println(color.toUpperCase() + " Box onStart :: layoutX ::" + layoutX + ", layoutY::" + layoutY);
          );
          box.setOnMouseDragged(e ->
          double offsetX = e.getSceneX() - sceneX;
          double offsetY = e.getSceneY() - sceneY;
          box.setTranslateX(offsetX);
          box.setTranslateY(offsetY);
          );
          box.setOnMouseReleased(e ->
          // Updating the new layout positions
          box.setLayoutX(layoutX + box.getTranslateX());
          box.setLayoutY(layoutY + box.getTranslateY());

          // Resetting the translate positions
          box.setTranslateX(0);
          box.setTranslateY(0);
          );
          return box;


          public static void main(String args)
          Application.launch(args);




          Once you are familiar with the demo, try changing the root from Pane to StackPane and see the behaviour difference.






          share|improve this answer














          To understand the problem, I would first recommend to have a look at the documentation of layoutX/layoutY properties of a Node.




          public final DoubleProperty layoutXProperty



          Defines the x coordinate of the translation that is added to this
          Node's transform for the purpose of layout. The value should be
          computed as the offset required to adjust the position of the node
          from its current layoutBounds minX position (which might not be 0) to
          the desired location.



          For example, if textnode should be positioned at finalX



           textnode.setLayoutX(finalX - textnode.getLayoutBounds().getMinX()); 


          Failure to subtract layoutBounds minX may result in misplacement of
          the node. The relocate(x, y) method will automatically do the correct
          computation and should generally be used over setting layoutX
          directly.



          The node's final translation will be computed as layoutX + translateX,
          where layoutX establishes the node's stable position and translateX
          optionally makes dynamic adjustments to that position.



          If the node is managed and has a Region as its parent, then the layout
          region will set layoutX according to its own layout policy. If the
          node is unmanaged or parented by a Group, then the application may set
          layoutX directly to position it.




          In short,for every node that is rendered in the scene, its position is actually a sum of its layoutX/Y and translateX/Y values in relative to its parent node. The layoutX/Y are initially updated as per its parents layout policy. For that reason, there is no point in updating/relying on layoutX/Y values of node, IF its parent (eg,.StackPane,HBox,VBox,..etc) manages it position.



          Pane will not manage/decide its children layout. For that reason the default layoutX/Y values of its children is always 0.



          From the above info,if we now look into your code, you are updating the translate values and setting the layout values wrongly. Instead what you have to actually do is:



          1. Take intial values of layoutX/Y.

          2. Update the translateX/Y while dragging.

          3. And on mouse released recompute layoutX/Y values and reset
            translateX/Y values.

          Below is a quick demo of what I have described.



          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;

          public class PaneLayoutDemo extends Application
          double sceneX, sceneY, layoutX, layoutY;

          @Override
          public void start(Stage stage) throws Exception
          Pane root = new Pane();
          Scene sc = new Scene(root, 600, 600);
          stage.setScene(sc);
          stage.show();
          root.getChildren().addAll(getBox("green"), getBox("red"), getBox("yellow"));


          private StackPane getBox(String color)
          StackPane box = new StackPane();
          box.getChildren().add(new Label("Drag me !!"));
          box.setStyle("-fx-background-color:" + color + ";-fx-border-width:2px;-fx-border-color:black;");
          box.setPrefSize(150, 150);
          box.setMaxSize(150, 150);
          box.setMinSize(150, 150);
          box.setOnMousePressed(e ->
          sceneX = e.getSceneX();
          sceneY = e.getSceneY();
          layoutX = box.getLayoutX();
          layoutY = box.getLayoutY();
          System.out.println(color.toUpperCase() + " Box onStart :: layoutX ::" + layoutX + ", layoutY::" + layoutY);
          );
          box.setOnMouseDragged(e ->
          double offsetX = e.getSceneX() - sceneX;
          double offsetY = e.getSceneY() - sceneY;
          box.setTranslateX(offsetX);
          box.setTranslateY(offsetY);
          );
          box.setOnMouseReleased(e ->
          // Updating the new layout positions
          box.setLayoutX(layoutX + box.getTranslateX());
          box.setLayoutY(layoutY + box.getTranslateY());

          // Resetting the translate positions
          box.setTranslateX(0);
          box.setTranslateY(0);
          );
          return box;


          public static void main(String args)
          Application.launch(args);




          Once you are familiar with the demo, try changing the root from Pane to StackPane and see the behaviour difference.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 12 at 2:43

























          answered Nov 12 at 1:27









          Sai Dandem

          86128




          86128











          • Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
            – Jaman
            Nov 12 at 11:54










          • Glad that it worked :) Can you please update the question as Answered if it solves your problem.
            – Sai Dandem
            Nov 12 at 22:49
















          • Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
            – Jaman
            Nov 12 at 11:54










          • Glad that it worked :) Can you please update the question as Answered if it solves your problem.
            – Sai Dandem
            Nov 12 at 22:49















          Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
          – Jaman
          Nov 12 at 11:54




          Hi Sai. Thank you for the answer I really appreciate it. I took your example and tried to implement it in my solution however it doesn't seem to work as expected. I have added an edit to my post it would be great if you could check my code out to see if I missed something. Thanks
          – Jaman
          Nov 12 at 11:54












          Glad that it worked :) Can you please update the question as Answered if it solves your problem.
          – Sai Dandem
          Nov 12 at 22:49




          Glad that it worked :) Can you please update the question as Answered if it solves your problem.
          – Sai Dandem
          Nov 12 at 22:49

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253603%2fafter-translating-node-the-layout-x-and-y-stays-the-same%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Barbados

          How to read a connectionString WITH PROVIDER in .NET Core?

          Node.js Script on GitHub Pages or Amazon S3