If you are using JointJS and you need a user interface for building diagrams, Rappid is the answer to your needs. It provides almost every feature that you would need, like tooltip, toolbar, select box, halo (UI for creating links and cell manipulation), some algorithms for layout and pathfinding etc. They make all JointJS-based applications more usable and easy to implement. Check out the complete list of features that Rappid provides.
In this article, we will go through the implementation of Stencil, Inspector, and layout algorithms usage.
Let’s assume that we are building an app using JointJS. The functionality that we need is the ability to add cells to canvas where every cell has its own properties, some auto-positioning of the graph would be also nice.
Here is an example screen from a Rappid demo of implemented stencil and inspector. There are also some other Rappid components in the picture, but they are not our main focus in this article.
ui.Stencil – one container to keep it simple
If we wanted to build a JointJS app without Rappid, we would need to implement a sidebar with all the cells, handle onclick events, implement drag’n’drops. These are just a few examples of the quite time-consuming things that would have to be done if it weren’t for Rappid. But when we do use Rappid, all we need is ui.Stencil and a few lines of code to bring it alive.