- Dynamic label values
- Shortcut label syntax
- Positioning Labels
- Changing the label location attribute
- Dragging Labels
- Importing the label drag manager
- Instantiating the label drag manager
- How label dragging works
A common requirement for interfaces using the Toolkit is the ability to label edges. This is supported by the underlying instance of the Community edition via the concept of
Overlays. For instance, here's an edge definition inside a view that has an arrow at its terminus and a label halfway:
In this example the
location of the
Label overlay is in fact unnecessary - the default location for all overlays is 0.5.
We see also in the example above that the label text is fixed to
"Label Text". Labels can instead extract their value from the data backing the edge on which they reside:
The backing data for this edge could then be:
to achieve the same result as before. But of course in this case if you update the edge, using the
updateEdge method on an instance of the Toolkit, the label will be changed appropriately.
Since labels are a very common overlay, the Toolkit (since version 1.16.1) supports a shortcut syntax for them:
Note that here we have used an interpolated value for the label, but hardcoded values are of course also supported.
As mentioned above, the default location for a label (indeed, any overlay) is 0.5. This is a measure of the length of the path traversed by the edge on which the label resides. 0.5 means halfway along this path. If using longhand syntax for a label, location is specified inside the label overlay declaration:
The equivalent declaration using shorthand syntax would be:
labelLocation is the default name for the attribute from which the label's location should be derived, and of course given that it is declared here in the edge definition it is a fixed value. However, it does not need to be declared in the edge definition - it can instead be provided in the edge data:
If you need to, you can change
labelLocation to some other attribute, by declaring inside the edge definition what the name of this attribute will be:
In version 1.18.1 the ability to drag labels was introduced, via an optional include -
jsplumbtoolkit-labels. In this include, the class
jsPlumbToolkitLabelDragManager is available.
To import the label drag manager using npm:
To import the label drag manager directly:
jsplumbtoolkit-labels.js is available in the
dist/js directory of your licensed package. For evaluators and licensees,
jsplumbtoolkit-labels-min.js is available in the
To instantiate a label drag manager:
- IMPORTANT If you use the shortcut syntax to set edge labels as discussed above, the Toolkit assigns an ID of
"label"to the overlay that is created. The label drag manager currently only operates on the overlay that has this id. If you add a Label overlay yourself in the
overlaysfor some edge type, you need to ensure you set its id to
- The label drag manager uses the same underlying library that supports dragging throughout the Toolkit to enable dragging on labels.
- Labels are constrained to the path inscribed by their edge.
- After a label is dragged, the edge's backing data is updated with the new label location. By default this means that the label drag manager will update the value of
labelLocation, but if, as discussed above, you have altered the name of the attribute to write, the label drag manager will use that attribute name instead.
edgeUpdatedevent will be fired after a label is dragged.