Drawing Tools

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 - Rotors.


// first get a Surface
var surface = someToolkitInstance.render({

// then initialize the drawing tools
new jsPlumbToolkit.DrawingTools({renderer: surface});

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:

Selected Node

Attribute Names

By default, the drawing tools store a node's current position using the parameters left and top in the node's data, and the size of the node as w and h. This can be overridden in the constructor:

new jsPlumbToolkit.DrawingTools({
  renderer: surface,

CSS Classes

There are defaults for all of these classes defined in jsplumbtoolkit-defaults.css.

jtk-draw-skeletonAssigned to the element that is drawn around some other element when it is selected
jtk-draw-handleAssigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.
jtk-draw-handle-tlAssigned to the top left handle in a draw skeleton
jtk-draw-handle-trAssigned to the top right handle in a draw skeleton
jtk-draw-handle-blAssigned to the bottom left handle in a draw skeleton
jtk-draw-handle-brAssigned to the bottom right handle in a draw skeleton
jtk-draw-dragAssigned to the center handle in a draw skeleton (the handle by which the element may be dragged)
jtk-draw-select-defeatAdded 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.