Nodes and Groups
A node represents some entity in your application - examples from JsPlumb's own starter apps are the various actions/questions etc in the flowchart, or a table or view in the schema builder, a step in the chatbot builder, etc.
Groups also represent an entity in your application, and they act as a container for zero or more nodes or other groups. A good example of this are the various groups in our network topology builder - a region, or a VPC, etc. Each of these represents an entity in the application which itself contains other nodes and/or groups. On this page we provide an overview of how to render nodes and groups, but groups are covered in more detail on their own page.
Rendering nodes and groups
With Vanilla JsPlumb, nodes and groups are mapped to a template or component inside a view alongside edges and, sometimes, ports:
import { newInstance, DEFAULT } from "@jsplumbtoolkit/browser-ui"
const toolkit = newInstance()
toolkit.render({
container:someDOMElement,
view:{
nodes:{
[DEFAULT]:{
template:`<div class="aNode">{{id}}</div>`,
events:{
click:function(p) {
alert("You clicked on node " + p.obj.id);
}
}
},
"type1":{
template:`<div class="aNode"><h1>TYPE 1</h1><p>{{id}}</p></div>`
}
},
groups:{
[DEFAULT]:{
template:`<div class="aGroup"><h1>{{id}}</h1><div data-jtk-group-content="true"></div></div>`,
events:{
click:function(p) {
alert("You clicked on group " + p.obj.id);
}
}
}
}
}
});
Here, nodes of type type1 have their own mapping to a template. Any other node type is mapped to the "default" mapping, which declares a template and also a click listener. A group of any type maps to the default mapping in the groups section, which provides a template for rendering groups and a click listener.
The templates shown in this code snippet are in JsPlumb's internal template format, which is discussed in detail on the templating page.
The full list of options for node and group mappings inside a view can be found in the views documentation.
The various examples on this page show both nodes and groups, but not every application uses groups. Many applications only use nodes. We include both on this page since the approach to rendering them is exactly the same, although there are various extra options for groups, which are discussed below.
Mapping events
You can map a number of events to nodes and groups in a view, and when the event fires, JsPlumb will supply the event from the browser, the DOM element on which the event occurred, and the model object related to the event.
You can bind a listener to anything listed as a BindableEvent:
type BindableEvent = "click"
| "dblclick"
| "mouseover"
| "mouseout"
| "mousedown"
| "mouseup"
| "tap"
| "dbltap"
| "contextmenu"
To map an event, provide an events object inside a node or group definition:
view:{
nodes:{
"default":{
template:`<div class="aNode">{{id}}</div>`,
events:{
[EVENT_TAP]:(p:{e:MouseEvent, obj:Node}) => {
alert(`You tapped on node ${p.obj.id}`)
},
[EVENT_CONTEXTMENU]:(p:{e:MouseEvent, obj:Node}) => {
alert(`You right-clicked on node ${p.obj.id}`)
}
}
}
}
}
Since version 6.6.0, hover events are not enabled by default, due to the overhead incurred from adding these listeners. So mouseover and mouseout will not be fired by default. You can switch these on by setting hoverEvents:true in your render parameters.
Setting node/group size
The default behaviour of JsPlumb is to render nodes and groups using whatever HTML is provided, and then after the element has been rendered, reading back the size of the element from the DOM. For many types of applications this approach is really useful - you can draw whatever you like for your nodes or groups and JsPlumb will figure out where any connected edges need to be placed.
In some applications, though, you'll want to give your users control over the size of nodes/groups, and JsPlumb supports that too via the useModelForSizes rendering option.
useModelForSizes
You can instruct JsPlumb to extract width and height from your node/group data and to set the DOM element to these values, via the useModelForSizes flag:
import { newInstance } from "@jsplumbtoolkit/browser-ui"
const toolkit = newInstance()
const surface = toolkit.render(someElement, {
"useModelForSizes": true
});
JsPlumb will now set the width and height of rendered DOM elements from the width and height properties in their data. When either of those values are updated, JsPlumb will update the size of the DOM element accordingly. We use this functionality in the Flowchart Builder starter app.
Default node/group size
If a given node or group does not have width or height values in its data, JsPlumb will use a default value, which you can specify in one of two places - either the defaults section of some render options:
import { newInstance } from "@jsplumbtoolkit/browser-ui"
const toolkit = newInstance()
const surface = toolkit.render(someElement, {
"useModelForSizes": true,
"defaults": {
"nodeSize": {
"w": 150,
"h": 100
},
"groupSize": {
"w": 300,
"h": 300
}
}
});
or inside a node or group definition in the view:
import { newInstance,
DEFAULT } from "@jsplumbtoolkit/browser-ui"
const toolkit = newInstance()
const surface = toolkit.render(someElement, {
"useModelForSizes": true,
"defaults": {
"nodeSize": {
"w": 150,
"h": 100
},
"groupSize": {
"w": 300,
"h": 300
}
},
"view": {
"nodes": {
[DEFAULT]: {
"template": "<div class=\"aNode\">{{id}}</div>",
"defaultSize": {
"w": 150,
"h": 100
}
},
"type1": {
"template": "<div class=\"aNode\"><h1>TYPE 1</h1><p>{{id}}</p></div>"
}
},
"groups": {
[DEFAULT]: {
"template": "<div class=\"aGroup\"><h1>{{id}}</h1><div data-jtk-group-content=\"true\"/></div>",
"defaultSize": {
"w": 400,
"h": 400
}
}
}
}
});
You can in fact provide values in both places - as shown above - and JsPlumb will use the values from a node or group definition first. In the above example we see that type1 has no default size set, so JsPlumb will use nodeSize from the defaults block. The default group definition does have a defaultSize, so that will be used for any groups that do not have width or height information in their backing data.
In the absence of any default values, JsPlumb will render nodes with width 100 pixels and height 80 pixels, and groups with a width and height of 300 pixels.