Naming states in a jsPlumb graph


In the pre­vi­ous art­icle in this series I showed you how you can have the user add new states to a graph in jsPlumb and con­nect them. These states all auto­mat­ic­ally got a gen­eric name. In this art­icle I will show you how you can have the user type a name for a new state, or choose a name from a list of options.

When you have fol­lowed along with the pre­vi­ous art­icle, you ended up with the code below. To keep the art­icle brief, this pre­view only shows the first few lines. You can scroll inside the box to see the rest of the code, or click the pop up but­ton in the tool­bar that appears when you hover your mouse over the code to see everything in a pop up. You can also get the code from GitHub.

Typing a name

First, we will add an input field for the user to type the name of the new state in. Replace the code that adds the title to the state (line 49 in list­ing above) with the code below.

These few lines of code cre­ate a new text input and add it to the title. It’s user friendly when the user can dir­ectly type in the input field after he has cre­ated a new state, so let’s put the focus on the field. Almost at the end of the list­ing above, at line 80, put the fol­low­ing code. The input field needs to be vis­ible before we can give it focus, which is why this line is put at the end.

The next step is to accept the title of a state when the user presses enter. Insert the fol­low­ing piece of code just above the code that focuses on the new field. On every keyup event, we check whether the enter key was pressed. If it was, we simply replace the text of the title div with the text the user has entered.

This works because we know for cer­tain that the title div is the par­ent of the input div, and because we don’t do any­thing else with the title. If the divs that rep­res­ent your states are more com­plex, or you want to use the title for other things as well — for example, change the id of the new state — you can use some­thing like this.

Be care­ful with alter­ing the id though! Currently, the user is allowed to enter any­thing into the input field. This could cause duplic­ate ids to appear, which is not allowed in HTML. You could check whether an id already exists and show an error mes­sage to the user when he has entered a duplicate.

Download this example from GitHub

Selecting from a list

You can also offer a selec­tion of pre­defined state names to your user. To start, we define the list of pos­sible states.

At the pos­i­tion where we added the input tag to the doc­u­ment in the pre­vi­ous example, we now add a select tag, like so.

We first add a place­holder that tells the user to select an option from the list. This option receives the value #, which we can use later to avoid that the user selects this place­holder. Then, we code loop through all pos­sible options and add them to the select tag.

Next, we have to accept the selec­tion the user made. We replace the stateName.keyup hand­ler with the fol­low­ing code.

This piece of code first checks whether the user has selec­ted the place­holder. When this is not the case, we change the title text to the text of the selec­ted option.

Making sure each option is only selected once

If you have tried the example above, you will have noticed that each option can be added to the graph as many times as you like. It is pos­sible to restrict this choice so every option can only be selec­ted once.

To achieve this, we are going to alter the id of every state to the selec­ted option. The stateName.change hand­ler now looks as fol­lows. It is now easier to first look for the state div, as I have shown before, and then alter dif­fer­ent attrib­utes and chil­dren of the state div. Since each option has a unique id, we can safely assign this id to the state div.

When the list of pos­sible options is cre­ated, we check for each option whether that option already exists. Only when it does not exist, we add the option to the list.

When you try this code, you will see that states which already have been cre­ated, will not be vis­ible in the list when adding a new state to the graph. Nice!

There still is one prob­lem though: the user can cre­ate mul­tiple states without select­ing an option. This way, it is still pos­sible to have mul­tiple states with the same name. You can try this for your­self: click in the box to cre­ate a new status, but do not select an option from the list. Then click again, and again, every time without select­ing an option. When you have cre­ate mul­tiple states this way, you can select the same option for each of them.

Fortunately, we can solve this prob­lem as well. The only thing that we need to do is remove the selec­ted state from all lists once it has been selec­ted. A small change in the stateName.change hand­ler is sufficient.

And we’re done! You now know how you can have the user type the name for a state, or select the name for a state from a list of pos­sible options.

Download code

Download the code for typ­ing a name from GitHub
Download the code for select­ing a name from a list 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.