@gluonjs/graph / packages/graph/src / GraphNodeSelection

Interface: GraphNodeSelection

Details emitted when a node is focused with pointer or keyboard interaction.

Properties

node

readonly node: GraphNode

selected

readonly selected: boolean

Example

Read the node and selected state from an interaction without querying the canvas:

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