Selection

Selection is a first-class piece of state in Nodus. Nodes and edges can be selected or not, you can query the current selection at the instance level, set it programmatically on any element or collection, and style the selected state so it stands out. This page covers the full selection surface and how it connects to the interaction tools.

Reading the selection

The instance exposes four readers and a reset. Each reader returns a NodeList or EdgeList:

nodus.getSelectedNodes();    // selected nodes
nodus.getNonSelectedNodes(); // everything else
nodus.getSelectedEdges();    // selected edges
nodus.getNonSelectedEdges(); // everything else

Because the result is a list, you can chain the usual collection operations:

const labels = nodus.getSelectedNodes()
  .map((node) => node.getData()?.label ?? node.getId());

console.log(`${nodus.getSelectedNodes().size} nodes selected:`, labels);

Clearing the selection

clearSelection() deselects everything in one call:

nodus.clearSelection();

A common pattern is to clear when the user clicks empty space, using the tooltip tool:

nodus.tools.tooltip.onBackgroundClick(() => nodus.clearSelection());

Selecting individual elements

Every Node and Edge carries its own selected flag:

const node = nodus.getNode('a');

node.setSelected(true);   // select
node.isSelected();        // -> true
node.setSelected(false);  // deselect

This works the same on edges:

const edge = nodus.getEdge('a→b');
edge.setSelected(true);

Selecting a whole collection

NodeList and EdgeList broadcast setSelected to every member, so you can select the result of any query at once:

// Select every node whose data marks it active.
nodus.getNodes().filter((n) => n.getData()?.active === true).setSelected(true);

// Select a node and its neighbours.
const node = nodus.getNode('a');
node.setSelected(true);
node.getAdjacentNodes().setSelected(true);

Combine readers and broadcast to invert a selection:

const toSelect = nodus.getNonSelectedNodes();
nodus.clearSelection();
toSelect.setSelected(true);

Styling the selected state

Selection is visual only if you style it. nodus.styles.setSelectedNodeAttributes and setSelectedEdgeAttributes define the visual attributes applied to selected elements — set them once, and every selected element picks them up automatically.

nodus.styles.setSelectedNodeAttributes({
  outline: { color: '#2563eb' },
  halo: { color: '#2563eb', width: 6 },
});

nodus.styles.setSelectedEdgeAttributes({
  color: '#2563eb',
  width: 3,
});

These use the same visual attributes you’d set anywhere else (color, width, outline, halo, and so on). Defining them up front keeps your click handlers simple — they just toggle setSelected, and the styling follows.

Tip

Selection styling is separate from hover styling. Use nodus.styles.setHoveredNodeAttributes / setHoveredEdgeAttributes for the hover state so the two don’t conflict.

Driving selection from tools and clicks

From the lasso and rectangle tools

The lasso and rectangle-select tools populate the instance selection directly. Enable one, let the user draw, then read the result:

nodus.tools.rectangleSelect.enable();

// after the user drags a box:
const chosen = nodus.getSelectedNodes();

Try it live — drag a box to select several nodes at once:

Box select Open in new tab ↗

From click handlers

For point-and-click selection, use the tooltip tool’s pointer handlers and toggle setSelected yourself:

// Single-select: clicking a node replaces the selection.
nodus.tools.tooltip.onNodeClick((node) => {
  nodus.clearSelection();
  node.setSelected(true);
});

// Toggle-select: clicking adds or removes that node.
nodus.tools.tooltip.onNodeClick((node) => {
  node.setSelected(!node.isSelected());
});

Try it live — click a node to select it and hover to highlight:

Click to select Open in new tab ↗

Select a node’s connected component

Use the element’s adjacency helpers to grow a selection outward:

nodus.tools.tooltip.onNodeDoubleClick((node) => {
  nodus.clearSelection();
  node.getConnectedComponent().setSelected(true);
});

Putting it together

A minimal selection setup — styled state, click to toggle, drag a box for multi-select, click empty space to clear:

import { Nodus } from '@kortexya/nodus';

const nodus = new Nodus({ container: document.getElementById('graph') });

await nodus.setGraph({
  nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
  edges: [{ source: 'a', target: 'b' }, { source: 'b', target: 'c' }],
});
await nodus.layouts.force({ duration: 0 });
await nodus.view.locateGraph();

// Style the selected state once.
nodus.styles.setSelectedNodeAttributes({
  outline: { color: '#2563eb' },
  halo: { color: '#2563eb', width: 6 },
});

// Click toggles a single node; the box selects many.
nodus.tools.tooltip.onNodeClick((node) => node.setSelected(!node.isSelected()));
nodus.tools.tooltip.onBackgroundClick(() => nodus.clearSelection());
nodus.tools.rectangleSelect.enable();

// Read the selection whenever you need it.
function currentSelection() {
  return nodus.getSelectedNodes().map((n) => n.getId());
}

Next

• Interaction Tools — lasso, rectangle select, and the tooltip handlers that drive selection.
• Styling Nodes & Edges — the visual attributes used for the selected and hovered states.
• API: Interaction — the full selection and tools reference.