pivotick v3.0.0

---

pivotick / RendererOptions / GraphRendererOptions

Interface: GraphRendererOptions

Defined in: interfaces/RendererOptions.ts:10

Properties

beforeRender()

beforeRender: (graph) => void

Defined in: interfaces/RendererOptions.ts:289

Callback executed during the init phase, before the first rendering

Parameters

graph

Pivotick

The Graph instance

Returns

void

---

defaultEdgeStyle

defaultEdgeStyle: EdgeStyle

Defined in: interfaces/RendererOptions.ts:114

The default edge style to be applied on all nodes

Default Value

defaultEdgeStyleValue

---

defaultLabelStyle

defaultLabelStyle: LabelStyle

Defined in: interfaces/RendererOptions.ts:119

The default edge's label style to be applied on all nodes

Default Value

defaultLabelStyleValue

---

defaultNodeStyle

defaultNodeStyle: NodeStyle

Defined in: interfaces/RendererOptions.ts:109

The default node style to be applied on all nodes

Default Value

defaultNodeStyleValue

---

detailTransition?

optional detailTransition: number

Defined in: interfaces/RendererOptions.ts:267

How long, in milliseconds, a drawing takes to fade into or out of the graph as the zoom changes what is worth drawing. 0 makes every such change in a single frame, which is what a graph declaring no transition does.

It covers a node swapping between its NodeStyle.tiers, its NodeStyle.focusTier drawing arriving and leaving, and a label crossing GraphRendererOptions.minLabelFontSize. An outgoing drawing is kept alive on a layer of its own and the two fade past each other, so a node is never absent mid-swap — only briefly softer where they overlap.

Every node on screen crosses a threshold at the same moment, so this starts as many fades as there are nodes changing. prefers-reduced-motion turns it off.

Measured on 210 nodes each holding a 140x44 card: the fade itself costs nothing — the canvas holds 60fps for its whole length — but keeping that many outgoing cards alive for an instant adds about 26ms to the one frame the crossing already spends. Set it to 0 on a graph where that frame matters more than the transition.

Default

160

---

dragEnabled

dragEnabled: boolean

Defined in: interfaces/RendererOptions.ts:313

Default

true

---

edgeStyleMap?

optional edgeStyleMap: Record<string, Partial<EdgeStyle>>

Defined in: interfaces/RendererOptions.ts:223

Maps edge kinds to their styles.

Each key is an edge kind (as returned by edgeTypeAccessor) and maps to a partial EdgeStyle. An edge's own styleCb still wins over the map, exactly as it does over nodeStyleMap.

Remarks

Used in conjuction with edgeTypeAccessor

Example

edgeStyleMap: {
  'object-reference': { strokeColor: '#428bca' },
  'correlation': { strokeColor: '#888', dashed: true },
}

---

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Defined in: interfaces/RendererOptions.ts:204

Function to access the kind of an edge — the dimension edgeStyleMap keys on, and the one an edge legend section and edge filter facets derive from when they aren't given a data key of their own.

Parameters

edge

Edge

Returns

string | undefined

Remarks

Used in conjuction with edgeStyleMap

Example

edgeTypeAccessor: (edge) => edge.getData()?.kind

---

enableFocusMode

enableFocusMode: boolean

Defined in: interfaces/RendererOptions.ts:228

Controls whether non-connected nodes and edges are grayed out when a node is selected

Default

true

---

enableNodeExpansion

enableNodeExpansion: boolean

Defined in: interfaces/RendererOptions.ts:234

Controls whether nodes can be expanded or collapsed to show their children. false also drops the chevron, the Enter shortcut and the dashed collapsed outline.

Default

true

---

fitAnchor?

optional fitAnchor: string

Defined in: interfaces/RendererOptions.ts:311

The node a fit held at minFitScale centres on, by id; a folded node's group stands in for it. The view stops at the content's edges, so an anchor near one sits near that side of the canvas. Unset, or not drawn, the fit centres on the content.

---

focusTierTrigger?

optional focusTierTrigger: "off" | "selection" | "both" | "hover"

Defined in: interfaces/RendererOptions.ts:245

When a node's NodeStyle.focusTier drawing fires. The style says what the focus drawing is; this says when.

Selection only promotes a node that is selected on its own — a box-select of fifty would be a wall of overlapping cards. 'off' suppresses the behaviour without editing the style, which is what an integrator embedding someone else's preset needs.

Default

'both'

---

groupOutline()?

optional groupOutline: (group) => string | void | HTMLElement

Defined in: interfaces/RendererOptions.ts:173

What the chip over an open group shows, in place of its label. A string is shown as text. The chip keeps its close mark and still folds the group back when clicked. Return nothing to keep the label.

Parameters

group

GroupInfo

Returns

string | void | HTMLElement

---

groupStyle()?

optional groupStyle: (group, base) => void | Partial<NodeStyle>

Defined in: interfaces/RendererOptions.ts:167

The look of a group made by UI.simplify, layered over the default: a disc in the type's colour inside a ring, the count on the disc once there is room, the label below. A group is drawn as a node, so tiers, focusTier, html, shape and badges work as they do on one. Return nothing to keep the default.

base is the style the library would draw. What you return replaces its keys, so to keep the count on the disc while adding a tier, spread base.tiers.

Parameters

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Returns

void | Partial<NodeStyle>

Examples

groupStyle: (group) => group.rule === 'bySource' ? { color: '#6b7280' } : undefined

groupStyle: (group, base) => ({ tiers: [...(base.tiers ?? []), { width: 140, height: 44, style: { html: () => chip(group) } }] })

---

interactionEnabled

interactionEnabled: boolean

Defined in: interfaces/RendererOptions.ts:315

Default

true

---

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Defined in: interfaces/RendererOptions.ts:135

Defines custom styles for marker shapes used in the graph.

Each key is a marker type (e.g., 'diamond', 'arrow') and maps to a MarkerStyle object.

Default Value

defaultMarkerStyleMap

Example

markerStyleMap: {
  'diamond': {
    fill: '#44c77f',
  },
}

---

maxZoom

maxZoom: number

Defined in: interfaces/RendererOptions.ts:299

Default

10

---

minFitScale?

optional minFitScale: number

Defined in: interfaces/RendererOptions.ts:305

The lowest scale a fit zooms out to. Content that would need less is shown at this scale, centred on fitAnchor, and runs past the canvas edges. Unset, a fit always shows everything. An explicit scale passed to fitAndCenter ignores it.

---

minLabelFontSize?

optional minLabelFontSize: number

Defined in: interfaces/RendererOptions.ts:284

The rendered font size, in CSS pixels, below which a label is not drawn.

A label rides the graph and scales with it, so past a certain zoom it is text nobody can read — and on a graph large enough to open zoomed out, every label at once. Below this size the library draws none of them, which also takes them out of the pass that repositions a label on every simulation tick.

One number for the whole canvas: an edge's label and a node's alike. The difference between them falls out of the font size already, since a node's label is derived from its size — a big node keeps its label longer than a small one.

0 draws every label at every zoom.

Default

9

---

minZoom

minZoom: number

Defined in: interfaces/RendererOptions.ts:297

Default

0.05

---

nodeStyleMap?

optional nodeStyleMap: Record<string, Partial<NodeStyle>>

Defined in: interfaces/RendererOptions.ts:190

Maps node types to their styles.

Each key is a node type (as returned by nodeTypeAccessor) and maps to a NodeStyle object.

Remarks

Used in conjuction with nodeTypeAccessor

Example

nodeStyleMap: {
  'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
  'spoke': { shape: 'triangle', color: '#f00' },
}

---

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Defined in: interfaces/RendererOptions.ts:148

Function to access the type of a node. Used in

Used to style nodes based on their type.

Parameters

node

Node

Returns

string | undefined

Remarks

Used in conjuction with nodeStyleMap

Example

nodeTypeAccessor: (node) => node.getData()?.type

---

renderCluster()?

optional renderCluster: (cluster) => string | void | HTMLElement

Defined in: interfaces/RendererOptions.ts:104

Custom renderer for clusters.

Allows full control over how a cluster is displayed The function can return either:

• An HTMLElement to be used as the cluster, or
• A string to render inside the cluster

Parameters

cluster

Node

Returns

string | void | HTMLElement

Example

renderCluster: (cluster: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

renderLabel()?

optional renderLabel: (edge) => string | void | HTMLElement

Defined in: interfaces/RendererOptions.ts:77

Custom renderer for edge labels.

Allows full control over how edge labels are displayed. The function can return either:

• An HTMLElement to be used as the edge's label, or
• A string to render inside the label

Parameters

edge

Edge

Returns

string | void | HTMLElement

Example

renderLabel: (edge: Edge): HTMLElement | string | void => {
  const style = [
    'display:inline-block',
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  const text = edge.getData().label;
  return `<span style="${style}">${text}</span>`;
}

---

renderNode()?

optional renderNode: (node) => string | void | HTMLElement

Defined in: interfaces/RendererOptions.ts:52

Custom renderer for nodes.

Allows full control over how a node is displayed The function can return either:

• An HTMLElement to be used as the node,
• A string to render inside the node, or
• nothing, to leave that node to the normal styling pipeline

A card returned here is the node: no shape, icon, picture or label is drawn behind it, and its measured size drives the collision radius and edge anchors. Returning nothing for a node instead gives it its nodeStyleMap entry, shape and label as usual — so this can card a few nodes rather than all of them.

For a card that composes with the rest of the styling chain, declare NodeStyle.html with shape: 'none' instead; it resolves per type or per node, where this one is global.

Parameters

node

Node

Returns

string | void | HTMLElement

Example

renderNode: (node: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

selectionBox

selectionBox: SelectionBox

Defined in: interfaces/RendererOptions.ts:316

---

type

type: RendererType

Defined in: interfaces/RendererOptions.ts:15

Defines the rendering method used by the graph.

---

zoomAnimation

zoomAnimation: boolean

Defined in: interfaces/RendererOptions.ts:293

Default

true

---

zoomAnimationDuration

zoomAnimationDuration: number

Defined in: interfaces/RendererOptions.ts:295

Default

300

---

zoomEnabled

zoomEnabled: boolean

Defined in: interfaces/RendererOptions.ts:291

Default

true