3 Replies Latest reply: Dec 6, 2012 4:15 PM by jsmith RSS

    Drawing a line between two nodes

      I am busying writing a simple application using JavaFX2. The goal is just to plot 2 nodes (the nodes are movable by dragging them) and then have a function to draw lines between these nodes. I finished the functions to add and move nodes (at the moment I am just using Ellipse shapes but I am going to replace it later with my own node class) but now I am struggling with the connecting lines. The actions to add a node or a line is from a dropdown menu and I have the following code on the line function:
       private void drawLine(MenuItem line) {
          final BooleanProperty lineActive = new SimpleBooleanProperty(false);
          final BooleanProperty clickOne = new SimpleBooleanProperty(false);
          final BooleanProperty clickTwo = new SimpleBooleanProperty(false);
          line.setOnAction(new EventHandler<ActionEvent>() {
              public void handle(ActionEvent t) {              
          nodeGroup.setOnMousePressed(new EventHandler<MouseEvent>() {
              public void handle(final MouseEvent t1) {
                  if (lineActive.get()) {
                      if (clickOne.get()) {
                          //get x and y of first node
                          x1 = ((Ellipse) t1.getTarget()).getCenterX();
                          y1 = ((Ellipse) t1.getTarget()).getCenterY();
                      if (clickTwo.get()) {
                          nodeGroup.setOnMouseClicked(new EventHandler<MouseEvent>() {
                              public void handle(MouseEvent t2) {
                                  //get x and y of second node
                                  x2 = ((Ellipse) t2.getTarget()).getCenterX();
                                  y2 = ((Ellipse) t2.getTarget()).getCenterY();
                                  //draw line between nodes
                                  final Line line = new Line();
      I just have the booleans to check for the first and second click to get the center of each node. My first question is when I click on the line function and add a line between 2 nodes, it doesn't seem to end the function, and any other nodes I click on gets a line to it. How can I prevent it from executing more than once.

      And my second question is how can I "connect" the line to the nodes that if the node moves, the line stays in the center of the node?

        • 1. Re: Drawing a line between two nodes
          I added this code wher I created the new line:
                final Line line = new Line();
                                          line.startXProperty().bind(((Ellipse) t1.getTarget()).layoutXProperty().add(((Ellipse) t1.getTarget()).centerXProperty()));
                                          line.startYProperty().bind(((Ellipse) t1.getTarget()).layoutYProperty().add(((Ellipse) t1.getTarget()).centerYProperty()));
                                          line.endXProperty().bind(((Ellipse) t2.getTarget()).layoutXProperty().add(((Ellipse) t2.getTarget()).centerXProperty()));
                                          line.endYProperty().bind(((Ellipse) t2.getTarget()).layoutYProperty().add(((Ellipse) t2.getTarget()).centerYProperty()));
          Now it seems to work.

          But I still have the problem that the function draws multiple lines everytime I click a node. How can I solve that problem. And regards to my line connecting method. Is there perhaps a more elegant way of doing it?
          • 2. Re: Drawing a line between two nodes
            I checked where the program gets stuck, it doesn't leave the "if(lineActive.get())" if. Then it just gets stuck adding more lines. How can I prevent this since I am setting lineActive to false right after I draw the line?
            • 3. Re: Drawing a line between two nodes
              I created a sample application a long time back which had nodes which you could drag around connected by lines.
              You can find the source here: https://gist.github.com/1441960

              The solution to keep the line end points and draggable nodes in synch was a binding method the same as you have in your app.

              With regards to your click issue I don't really understand that, so I can't help you there.