UI States
A common use case is the requirement to temporarily paint a set of Nodes and/or Edges with some set of styles. The Surface supports this through the concept of UI States.
First, an example. This is a snippet from the view
parameter passed to a render
call:
toolkitInstance.render({
container:"someElementId",
view:{
... other view content...
"states":{
"mintyGreenState":{
"default":{
cssClass:"mintyGreen",
paintStyle:{ "strokeStyle":"#00FF00" },
endpointStyle: { fillStyle:"#00EE00" }
}
}
}
}
});
Here we have declared a state called mintyGreenState. When this state is active, all Nodes of type default
to which it applies will have a CSS class of mintyGreen
added, and all Edges of type default
will be painted with a stroke style of #00FF00
(for the eagle-eyed, not quite minty green, it's true). All Ports - which are represented via jsPlumb Endpoints - will have a fill style of #00EE00
.
Note also that Edges and Ports - represented by jsPlumb Connections and Endpoints respectively - will be assigned the CSS class of mintyGreen
. So you need to ensure that any CSS rules related to UI states are specific enough that you do not accidentally apply Node styles to a Connection.
Applying UI States
You can apply a state to any of the following:
- The entire dataset
- The current Selection
- A Path
Using the activateState
method.
Methods available
activateState(stateId, [target])
Activate the given state, optionally on the given target. If target is not supplied then the state will be applied to the entire dataset.
deactivateState(stateId, [target])
Deactivate the given state, optionally on the given target. If target is not supplied then the state deactivation will be applied to the entire dataset.
resetState()
Deactivates all states across the entire dataset.
A typical use case for this functionality is when you want to select a Path and highlight it:
Wildcard states
In the above example, the state specification applied to all Nodes, Edges and Ports that have a type of default
.
Should you wish to indicate that a state can be applied to any object, you can use a wildcard:
"states":{
"mintyGreenState":{
"*":{
cssClass:"mintyGreen"
},
"aSpecificType":{
cssClass:"FOO"
}
}
}
In this example, which contains only cssClass
directives (remember that the cssClass
will be added to all Nodes, Edges and Ports), when mintyGreenState
is activated, all objects will get the mintyGreen
CSS class. But objects of type aSpecificType
will get the FOO
CSS class also.
Note on updateEdge
and updateNode
When you call updateEdge
or updateNode
on a Toolkit instance, any edge or node states that are active for the given object will be cancelled and it will revert to its default state (albeit with the new data you provided).