The Flowchart Builder application uses the Toolkit's basic set of tools to help with the positioning and resizing of nodes. From version 1.1.6 onwards these are bundled in the Toolkit's JS file; previously they were an optional import.
The drawing tools perform two main functions: they automatically decorate selected nodes with resize handles, a visual indicator of selected state, and a drag handle, and they provide the ability for a user to resize a node.
For the tools to work you also need to ensure that you are using the default templating engine.
Now, whenever a node is added to the underlying Toolkit's currentSelection, the drawing tools will add an appropriate class to it, and remove it once the node is no longer selected.
Here's what the defaults look like - this is a selected node in the Flowchart Builder application:
By default, the drawing tools store a node's current position using the parameters
top in the node's data, and the size of the node as
h. This can be overridden in the constructor:
There are defaults for all of these classes defined in jsplumbtoolkit-defaults.css.
|jtk-draw-skeleton||Assigned to the element that is drawn around some other element when it is selected|
|jtk-draw-handle||Assigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.|
|jtk-draw-handle-tl||Assigned to the top left handle in a draw skeleton|
|jtk-draw-handle-tr||Assigned to the top right handle in a draw skeleton|
|jtk-draw-handle-bl||Assigned to the bottom left handle in a draw skeleton|
|jtk-draw-handle-br||Assigned to the bottom right handle in a draw skeleton|
|jtk-draw-drag||Assigned to the center handle in a draw skeleton (the handle by which the element may be dragged)|
|jtk-draw-select-defeat||Added to the document body on drag resize start and removed at the end of resizing. Its purpose is to switch off text selection on all elements while the user is resizing an element.|