Styles & rules

nodus.styles is the declarative way to control appearance: rules that match many elements, reusable classes, theme and state styling. Prefer it over mutating elements one by one. For the model and patterns see Styling and the Styling Elements guide.

Rules

• addRule(opts?) — add a style rule.
• addNodeRule(selectorOrAttrs, attrs?) — add a rule for nodes. Call it with just an attributes object to target every node, or with a selector plus attributes.
• addEdgeRule(selectorOrAttrs, attrs?) — the edge equivalent.
• getRuleList() — all rules.
• getNodeRules(), getEdgeRules() — rules by element kind.

A rule’s attribute values may be functions of the element, evaluated per element — for example deriving a label from your data:

nodus.styles.addNodeRule({
  color: '#0f766e',
  radius: 16,
  text: { content: (node) => node.getData().label, position: 'bottom' },
});

nodus.styles.addEdgeRule({ color: '#94a3b8', width: 2, shape: { head: 'arrow' } });

Classes

• createClass(opts) -> StyleClass — define a reusable named style.
• getClass(name) — fetch a class by name.
• getClassList() — all classes.

Apply a class with element.addClass(name) or nodeList.addClass(name):

nodus.styles.createClass({ name: 'hub', attributes: { color: '#ef4444', radius: 24 } });

const hubs = nodus.getNodes().filter((n) => n.getDegree() > 3);
hubs.addClass('hub');

Visibility toggles

• setNodesVisibility(bool), setEdgesVisibility(bool)
• setNodeTextsVisibility(bool), setEdgeTextsVisibility(bool)

nodus.styles.setEdgeTextsVisibility(false);

State styling and theme

• setHoveredNodeAttributes(attrs, opts?), setHoveredEdgeAttributes(attrs, opts?)
• setSelectedNodeAttributes(attrs, extended?), setSelectedEdgeAttributes(attrs, extended?)
• setDisabledNodeAttributes(attrs, opts?), setDisabledEdgeAttributes(attrs, opts?)
• setTheme(theme)

nodus.styles.setHoveredNodeAttributes({ outerStroke: { color: '#000', width: 2 } });
nodus.styles.setSelectedNodeAttributes({ color: '#f59e0b' });

StyleRule

Returned/managed by the rule methods above.

• getId() — the rule id.
• whenApplied() — resolves when the rule has been applied.
• refresh() — re-evaluate the rule.
• getIndex(), setIndex(i) — read/set its position in the cascade.
• update(options) — update the rule’s definition.
• getDefinition() — the rule’s definition object.
• destroy() — remove the rule.

const rule = nodus.styles.addNodeRule({ color: '#0f766e' });
rule.update({ radius: 18 });
await rule.whenApplied();

StyleClass

Returned by createClass(opts).

• getName() — the class name.
• getIndex(), setIndex(i) — read/set its cascade position.
• update(options) — update the class definition.
• getDefinition() — the definition object.
• getNodes(), getEdges() — the elements that currently have the class.
• clearNodes(), clearEdges() — remove the class from those elements.
• add(elements), remove(elements) — add/remove elements explicitly.
• destroy() — remove the class.

const cls = nodus.styles.createClass({ name: 'flagged', attributes: { color: '#dc2626' } });
cls.add(nodus.getNodes().filter((n) => n.getData('flagged')));
console.log(cls.getNodes().size);

Visual attributes

These are the visual attributes you set on elements (via attributes in the graph JSON, setAttributes, or style rules). They are the same set referenced from the graph data shape.

Node attributes

Attribute	Description
x, y	Position.
color	A CSS color string, or an array of colors that renders as equal-angle pie slices.
radius	Node size (a.k.a. size).
shape	One of: circle, square, triangle, triangleLeft, triangleRight, diamond, pentagon, hexagon, star.
innerStroke / outerStroke	{ color, width, minVisibleSize }.
outline	A boolean that draws a default ring (outline: true). For a custom-coloured ring, use outerStroke: { color, width } instead.
halo	{ color, width } — a glow.
icon	{ content, font, color, scale } — e.g. an icon-font glyph.
badge	A small text/icon overlay.
image	An image drawn on the node.
text	The label. See below.
pulse	{ startRatio, endRatio, width, startColor, endColor, interval, duration } — animated expanding rings.
layer	Z-order; higher draws on top (used for hover/selection/drag).

The node text (label) object:

text: {
  content,            // string or (node) => string; wraps and honors \n
  color,
  font,
  style,
  position,           // 'top' | 'bottom' | 'left' | 'right' | 'center'
  backgroundColor,    // supports 'inherit'
  maxLineLength,
  minVisibleSize,
  secondary: { content, color, font, style, backgroundColor },
}

Edge attributes

Attribute	Description
shape	{ head, tail, style }. Extremities (head/tail): arrow, open-arrow (chevron), square, circle, none. style: dashed, dotted, or plain.
width	Line width.
color	A CSS color string, or a gradient.
halo	A glow around the edge.
outline	An outline around the edge.
text	A rotated label along the edge; primary above, text.secondary below; supports \n.

Curvature is automatic. Multiple edges between the same pair of nodes fan out into separate arcs, and an edge with source === target renders as a self-loop arc beside the node — there is no curvature attribute to set.

Function-valued attributes

Any attribute value in a rule may be a function of the element, evaluated per element. This is how you drive visuals from your data:

nodus.styles.addNodeRule({
  radius: (node) => 8 + node.getDegree() * 2,
  color: (node) => (node.getData('active') ? '#16a34a' : '#94a3b8'),
  text: { content: (node) => node.getData().label },
});