Events, tools & selection

This page covers the three ways you respond to and drive user interaction: events for lifecycle and keys, tools for pointer-driven behaviors, and the selection methods. See also the Handling Events, Interaction Tools and Selection guides.

Events

nodus.events is a chainable emitter.

on(event, handler) -> this — subscribe.
off(event) -> this — unsubscribe.
once(event, handler) -> this — subscribe for a single emission.
onKeyPress(key, handler) — handle a key press.

Class events

onNodesClassAdded, onNodesClassRemoved
onEdgesClassAdded, onEdgesClassRemoved

Emitted event names

Verified events you can pass to on / once:

Structural: addNodes, addEdges, removeNodes, removeEdges, clearGraph
Camera: move
Attribute change: updateAttributes

nodus.events
  .on('addNodes', () => console.log('nodes now:', nodus.getNodes().size))
  .on('move', () => console.log('camera moved'));

nodus.events.onKeyPress('Escape', () => nodus.clearSelection());

Tools

nodus.tools groups the interaction tools. The input modules nodus.keyboard and nodus.mouse back them.

Toggleable tools

Each of these is a sub-tool with enable(opts?) and disable():

lasso — free-form selection.
rectangleSelect — rectangular selection.
connectNodes — draw edges between nodes (see options below).
resize — resize elements.
rewire — re-target edges; also setEdgesToRewire(edges).
snapping — snap positions.

There are also legend and brand tools.

Track the on/off state yourself when you build a toggle (keep a boolean alongside the enable()/disable() calls).

let lassoOn = false;
function toggleLasso() {
  lassoOn = !lassoOn;
  if (lassoOn) nodus.tools.lasso.enable();
  else nodus.tools.lasso.disable();
}

nodus.tools.rewire.setEdgesToRewire(nodus.getEdges());
nodus.tools.rewire.enable();

`connectNodes` options

connectNodes.enable(opts) accepts ConnectNodesOptions:

Option	Description
`continueDrawing?`	Keep drawing after one edge completes.
`cursorStyle?`	Cursor while drawing.
`strokeColor?`	Color of the in-progress line.
`strokeWidth?`	Width of the in-progress line.
`dashLength?`	Dash length of the in-progress line.
`dashed?`	Whether the in-progress line is dashed.
`createNodes?`	Allow creating a node when releasing on empty space.
`condition?(source, target?)`	Decide whether a connection is allowed.
`onNodeCreated?(node)`	Called when a node is created.
`onEdgeCreated?(edge)`	Called when an edge is created.
`createEdge?(rawEdge)`	Customize the created edge.
`createNode?(rawNode)`	Customize the created node.
`onComplete?(source, target, edge?)`	Called when a connection completes.

nodus.tools.connectNodes.enable({
  createNodes: true,
  condition: (source, target) => source !== target,
  onComplete: (source, target, edge) => console.log('connected', source.getId(), target?.getId()),
});

nodus.tools.tooltip provides pointer handlers and a tooltip element.

Pointer handlers:

onNodeHover(handler, options?), onNodeClick(...), onNodeRightClick(...), onNodeDoubleClick(...)
onEdgeHover(...), onEdgeClick(...), onEdgeRightClick(...), onEdgeDoubleClick(...)
onBackgroundClick(...), onBackgroundRightClick(...), onBackgroundDoubleClick(...)

Tooltip element:

show(content, options?) — show the tooltip.
hide() — hide it.
isShown() — whether it is visible.
refresh() — refresh its position/content.

nodus.tools.tooltip.onNodeHover((node) => {
  nodus.tools.tooltip.show(`<strong>${node.getData().label}</strong>`);
});
nodus.tools.tooltip.onNodeClick((node) => console.log('clicked', node.getId()));
nodus.tools.tooltip.onBackgroundClick(() => nodus.tools.tooltip.hide());

Selection

Selection methods are mixed directly onto the instance.

getSelectedNodes(), getNonSelectedNodes()
getSelectedEdges(), getNonSelectedEdges()
clearSelection()

Per element you can also use element.setSelected(bool) / element.isSelected(), and across a collection nodeList.setSelected(bool).

const selected = nodus.getSelectedNodes();
selected.setAttributes({ color: '#f59e0b' });

nodus.getNode('a').setSelected(true);
nodus.clearSelection();