@gluonjs/graph / packages/graph/src / GluonGraphEvents

Interface: GluonGraphEvents

Typed DOM events emitted by GluonGraphElement.

Properties

graph-node-select

readonly graph-node-select: GraphNodeSelection

graph-viewport-change

readonly graph-viewport-change: GraphViewport

Example

Subscribe to the typed node-selection and viewport-change events emitted by the public graph element:

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);