Saving a jsPlumb graph


In the pre­vi­ous art­icles in this series, we have built func­tion­al­ity that allows our users to cre­ate a graph and give a name to the states in that graph. In this art­icle we will take a look at how we can have the user save the graph he has created.

There are two ways to save your graph. The first approach is to send a call to the server every time the user cre­ates a con­nec­tion. The second one is to save the entire graph in one go when the user clicks a save button.

This art­icle shows how to save your graph every time the user cre­ates a con­nec­tion. This approach uses the events that jsPlumb offers.

Events in jsPlumb

Out of the box, jsPlumb sup­ports a large num­ber of use­ful events, like click, connection and beforeDrop, amongst many oth­ers. The doc­u­ment­a­tion on jsPlumb con­tains a com­plete list of all sup­por­ted events.

You can attach a call­back method to each of these events. This method will be called every time an event fires. When you attach a method to the connection event, like we will do in this example, this method is called every time the user makes a new con­nec­tion in the graph.

The fol­low­ing code is used to bind a method to an event:

As you can see, this method receives an info para­meter. This para­meter con­tains inform­a­tion on the con­nec­tion that has just been made, like its source and tar­get. This is exactly the inform­a­tion we want to store! To quickly see what’s inside, you can use an alert or use console.log.

Saving the new connection

Now that we know how to detect when a new con­nec­tion has been made, we can eas­ily put the inform­a­tion we receive from jsPlumb in a call to the server. It is then up to the server to store this inform­a­tion. In this art­icle, I will only show the cli­ent side; how the server handles the inform­a­tion that is sent to it is out­side of the scope of this article.

To send the data to the server, we will be using the $.post call from jQuery. This sends the data to the server using a POST call, just like usu­ally hap­pens when you sub­mit a form.

You will of course have to replace the example URL with the URL of your ser­vice that needs to receive the con­nec­tion data. Even this example URL can be use­ful, how­ever. Load the code in your browser and fire up its developer tools. You can then check the net­work tab to see that this call is made for each con­nec­tion that you add to the graph.

It’s import­ant to make sure that we don’t inad­ver­tedly save a con­nec­tion from or to a state that doesn’t have a name yet. To accom­plish this, we simply move the makeSource and makeTarget meth­ods inside the event hand­ler for stateName.change. This way, the user can only con­nect to a state when the state has been given a name.

Saving the position of the states

We also want to save the pos­i­tion of the states, so that we can accur­ately redraw the graph upon load­ing. There are two events that we need to react to in order to always keep the pos­i­tion inform­a­tion up to date: the cre­ation of a new state and the drag­ging of an exist­ing state. Since both events need to per­form the same action, we will cre­ate a sep­ar­ate method for this action. It looks sim­ilar to the code we have seen before:

We can pass a state div or a jQuery selector to this method and it will post the id and the pos­i­tion of the state to the server. Let’s see how we call this method. The first time it’s called is upon the cre­ation of a new state. We only want to save the state when the user has selec­ted a name for it. To accom­plish this, we need to call our new method saveState from the event hand­ler for stateName.change. The call looks like this:

Simple enough, right? Saving the state when it is moved is almost just as simple. We need to add an event hand­ler that is called when the user stops drag­ging. We can add this to the call to jsPlumb.draggable, like this.

stop is a para­meter that can be added to the con­fig­ur­a­tion object of draggable. It con­tains a method that will be called whenever the user stops drag­ging that object.

Since we do not want to save a state for which the user hasn’t selec­ted a name yet, we need to check this. The simple way to do this is to check whether the state div con­tains a select. If it does, this means that the user hasn’t selec­ted a name yet and we should not save the pos­i­tion of the state yet.

When we take a look at the developer con­sole in our browser, we can see that the browser saves the inform­a­tion about the state when we cre­ate it and every time we drag it.

Download code

Download the code for this example from GitHub

All articles about jsPlumb

Further reading

After read­ing this art­icle, head over to the jsPlumb demos to see what this frame­work can do. There is a lot more than we have seen in this art­icle! Head over to the doc­u­ment­a­tion to have a look at how some of the other things work.