Add pointer interactions

The vanilla attachGraphInput() binding adds primary-pointer hover, node and edge single selection, node drag, background pan, and wheel zoom. It uses the same container, engine, and renderer as the graph view.

Open the live interaction example or view its deployed source.

Attach and dispose the binding

import { createGraphEngine } from '@graphora/engine'
import { attachGraphInput } from '@graphora/interactions'
import { CanvasGraphRenderer } from '@graphora/renderer'

const renderer = new CanvasGraphRenderer()
const engine = createGraphEngine({
  graph,
  renderer,
  layout,
  viewport,
  interactionStyles: {
    hover: { node: { stroke: '#0284c7', strokeWidth: 3 } },
    selection: { node: { stroke: '#7c3aed', strokeWidth: 4 } },
    drag: { node: { opacity: 0.75 } }
  }
})

engine.mount(container)
await engine.runLayout({ fitToView: { padding: 48 } })

const disposeInput = attachGraphInput(container, engine, renderer, {
  onClick(pick) {
    if (pick?.type === 'node') {
      console.log('selected node', pick.nodeId)
    } else if (pick?.type === 'edge') {
      console.log('selected edge', pick.edgeId)
    } else {
      console.log('selection cleared')
    }
  },
  onDragEnd() {
    console.log('node position updated')
  }
})

window.addEventListener(
  'pagehide',
  () => {
    disposeInput()
    engine.destroy()
  },
  { once: true }
)

Call the disposer before destroying the engine or removing the surface. The binding removes its listeners and restores the container's previous touch-action style.

Add app-owned UI

Graphora exposes picking and pure payload helpers for UI that belongs in the application. For example, a context-menu listener can call renderer.pick(screenPoint), then pass the result and current viewport to contextMenuEventFromPick(). tooltipEventFromPick() follows the same pattern. Your application owns menu or tooltip DOM, content, dismissal, focus management, and async loading.

The React Graph component already integrates hover, click, selection, drag, pan, and zoom. Use callbacks such as onNodeClick, onEdgeClick, onCanvasClick, onSelectionChange, and onNodeDragEnd. Context-menu, tooltip, lasso, and keyboard UI remain app integrations rather than first-class React overlays.

Provide a non-Canvas path

The React Graph surface has one accessible image role and label. The Canvas renderer itself does not expose each node and edge as semantic DOM. If users need to search, inspect, or operate on graph items without a pointer, add companion DOM such as a result list, details panel, status region, and explicit fit or selection buttons. The dependency explorer demonstrates this pattern.

Shared keyboard helpers are available, but applications own DOM listeners, focus order, editable-field protection, and announcements. Current automated evidence covers Chromium keyboard workflows. It does not certify screen-reader behavior, physical touch devices, every browser, or an accessible semantic node/edge tree.

See accessibility and input and the interactions API.