• Requirements
• Initialization
• Attribute Names
• CSS Classes

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.

// 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:

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,
  widthAttribute:"width",
  heightAttribute:"height",
  leftAttribute:"x",
  topAttribute:"y"
});

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