Interaction examples

Interaction in Nodus comes from two places: built-in hover/select state that you style through nodus.styles, and tools under nodus.tools (lasso, rectangle select, connect-nodes, tooltip). Each tool has enable() and disable() — there is no isEnabled(), so track the on/off state yourself. See the interaction tools guide for the full set.

Every demo runs live in your browser — drag, zoom and use the controls.

Hover & select

Define how hovered and selected nodes look once, then toggle selection on click. Read the current selection with nodus.getSelectedNodes() and reset with nodus.clearSelection().

nodus.styles.setHoveredNodeAttributes({ color: '#f59e0b' });
nodus.styles.setSelectedNodeAttributes({ color: '#0f766e', outerStroke: { color: '#0f766e', width: 3 } });
nodus.tools.tooltip.onNodeClick((node) => node.setSelected(!node.isSelected()));

Hover & select Open in new tab ↗

Hover highlight

Set hover attributes once and the engine maintains the highlight for whichever node or edge the pointer is over.

nodus.styles.setHoveredNodeAttributes({ color: '#f59e0b', outerStroke: { color: '#f59e0b', width: 3 } });
nodus.styles.setHoveredEdgeAttributes({ color: '#f59e0b', width: 4 });

Hover highlight Open in new tab ↗

Lasso select

The lasso tool lets the user draw a freehand loop to select the nodes inside it. Enable it with nodus.tools.lasso.enable() and turn it off with disable().

let on = false;
toggle.addEventListener('click', () => {
  on = !on;
  if (on) nodus.tools.lasso.enable();
  else nodus.tools.lasso.disable();
});

Lasso select Open in new tab ↗

Rectangle select

Rectangle select lets the user drag a box across the canvas to select the nodes within it. Same enable()/disable() pattern as the lasso.

let on = false;
toggle.addEventListener('click', () => {
  on = !on;
  if (on) nodus.tools.rectangleSelect.enable();
  else nodus.tools.rectangleSelect.disable();
});

Rectangle select Open in new tab ↗

Connect nodes

The connect-nodes tool lets the user drag from one node to another to create an edge. Pass an onEdgeCreated callback to react each time a new edge is drawn.

nodus.tools.connectNodes.enable({
  onEdgeCreated: () => { created++; },
});
// later: nodus.tools.connectNodes.disable();

Connect nodes Open in new tab ↗

Drag nodes

Dragging a node to reposition it is on by default — no tool needed. Read a node’s coordinates back with node.getPosition().

nodus.getNodes().forEach((node) => {
  const p = node.getPosition();
  if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) count++;
});

Drag nodes Open in new tab ↗

Tooltips

The tooltip tool fires onNodeHover and onNodeClick callbacks; call nodus.tools.tooltip.show(...) inside them to display content. Node helpers like node.getId() and node.getDegree() give you the data to show.

nodus.tools.tooltip.onNodeHover((node) => {
  nodus.tools.tooltip.show('Node ' + node.getId());
});
nodus.tools.tooltip.onNodeClick((node) => {
  nodus.tools.tooltip.show('Node ' + node.getId() + ' — degree ' + node.getDegree());
});

Tooltips Open in new tab ↗

Resize, rewire & snapping

Three editing tools, each with the same enable()/disable() pattern (track the on/off state yourself). resize drags handles to resize a node, snapping aligns a dragged node to its neighbours, and rewire drags an edge end onto another node — call setEdgesToRewire first to say which edges are eligible.

nodus.tools.resize.enable();   // drag a node's handles
nodus.tools.snapping.enable(); // drag a node to align it

nodus.tools.rewire.setEdgesToRewire(nodus.getEdges());
nodus.tools.rewire.enable();   // drag an edge end onto another node
// later: nodus.tools.resize.disable();

Resize, rewire & snapping Open in new tab ↗

Keyboard panning

nodus.keyboard.isKeyPressed(...) reports whether a key is currently held, so you can poll it and pan the camera with nodus.view.move(...) while the arrow keys are down. Click the graph first to give it focus.

setInterval(() => {
  let dx = 0, dy = 0;
  if (nodus.keyboard.isKeyPressed('ArrowLeft'))  dx -= 12;
  if (nodus.keyboard.isKeyPressed('ArrowRight')) dx += 12;
  if (nodus.keyboard.isKeyPressed('ArrowUp'))    dy -= 12;
  if (nodus.keyboard.isKeyPressed('ArrowDown'))  dy += 12;
  if (dx || dy) nodus.view.move({ x: dx, y: dy });
}, 40);

Keyboard panning Open in new tab ↗