Register a custom tool

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Choose Checkpoint or press K while the canvas has focus, then click or drag to create a checkpoint. Its label, minimum size and appearance come from the shape definition. Creation returns to selection and adds one undo entry. The ordinary rectangle tool remains available alongside it.

The example registers a new tool identity and reuses DiagramShapeTool, the same behavior as built-in shape tools. There is no editor switch on the custom type and no second drawing or history implementation. Duplicate identities or shortcuts fail registration rather than silently replacing a default.

For a different interaction, implement DiagramToolBehavior and use its DiagramToolContext mechanics or canonical gesture transactions. This example focuses on reusing existing shape mechanics; it does not demonstrate every custom gesture. Text editing retains ownership of letter shortcuts.

returnToDefault: true applies to both direct context.dispatch(...) tools and gesture tools. An admitted direct dispatch returns after the callback; a gesture returns after its admitted commit. Denied dispatches or commits keep the tool active for retry. Retained callback contexts cannot dispatch after the callback has ended. If the final creation preview is denied, the gesture rolls back and releases the pointer without resetting the active tool or adding an undo entry.

See Configuration and Shapes.

Source

actions: {
  'Checkpoint — K': (session) => session.setActiveTool(checkpointTool),
  'Rectangle — R': (session) => session.setActiveTool(DiagramTools.rectangle),
  'Select — V': (session) => session.setActiveTool(DiagramTools.select),
},