To view the data managed by an instance of the jsPlumb Toolkit, you must arrange for it to be rendered. The Toolkit can render its data to an arbitrary number of elements, and each renderer is backed with its own instance of jsPlumb. The component used by the Toolkit to render is known as a Surface. It supports pan/zoom/select, and has the ability to save and load its state locally in the user's browser.
Before reading this section it is important that you are thoroughly acquainted with the data model used by the Toolkit. It would also be useful to be have at least a basic knowledge of jsPlumb, since the appearance of Endpoints and Connections is jsPlumb's responsibility and you'll want to learn the syntax.
The render method returns a Surface object. It is important to remember that for view related functionality you use a Surface object, whereas for operations on the data model you use a jsPlumb Toolkit instance. Operations on the data model are reflected in all registered Surfaces for the specific instance of the jsPlumb Toolkit as they occur. If you wish to add a Node to the data model, for instance, you need to call addNode on a Toolkit instance. If you want to center the view in some element, you would call centerContent on the Surface registered for that element.
There is one required parameter to a render call - container.
Container
For anyone who has used the jsPlumb Community edition, the container parameter is probably familiar (and it's perhaps useful to know that the Toolkit passes container into the jsPlumb instance backing the Surface as the Container for that instance of jsPlumb). This is the element to be used as the parent for every element added by the Surface. In addition, all artefacts added to the UI by the associated jsPlumb instance will have this element as their parent. For a deeper discussion of this, see the jsPlumb documentation.
The vast majority of setups will also need to specify a view (the only exception being when you are happy to use the Community edition's default connection styles and you're using inferred template ids.
________________________________________
A View contains configuration information for all of the Nodes, Ports, Groups and Edges in your UI; it is what you use to define the appearance and behaviour of the various parts of your UI, and also offers event binding to numerous lifecycle events. For a full discussion of Views, see here.
________________________________________
You can call render as many times as you like on a single Toolkit instance. If the target container already has a Surface, that Surface is discarded. Every Surface that an instance of the Toolkit is tracking will be notified of changes to the data model. An example of multiple views on one Toolkit instance is given in the Multiple Renderers demonstration.
For more details on our products and services, please feel free to visit us at typescript, vue, react, angular, javascript