@gluonjs/graph / packages/graph/src / GraphNode

Interface: GraphNode

A graph node rendered by GluonGraphElement.

Properties

group?

readonly optional group?: string

id

readonly id: string

label

readonly label: string

weight?

readonly optional weight?: number

Example

Describe a labelled, weighted node and optionally assign it to a color-coded group:

import '@gluonjs/graph';
import { graphTagName, type GluonGraphElement, type GluonGraphEvents, type GraphGroup, type GraphLink, type GraphNode, type GraphNodeSelection, type GraphViewport } from '@gluonjs/graph';

const groups = [{ id: 'research', label: 'Research', color: '#8ba9ff' }] satisfies readonly GraphGroup[];
const nodes = [{ id: 'brief', label: 'Research brief', group: 'research', weight: 3 }] satisfies readonly GraphNode[];
const links = [] satisfies readonly GraphLink[];
const graph = document.createElement(graphTagName) as GluonGraphElement;
Object.assign(graph, { groups, nodes, links, showLabels: true });
const selection = (event: CustomEvent<GluonGraphEvents['graph-node-select']>) => {
  const detail: GraphNodeSelection = event.detail;
  console.log(detail.node.label, detail.selected);
};
graph.addEventListener('graph-node-select', selection as EventListener);
const viewport: GraphViewport = graph.getViewport();
graph.recenter();
console.log(viewport.scale);