Input

The input module handles keyboard events and manages navigation state.

Adding Navigation Rules

Tell Data Navigator which keys do what:

const structure = {
  nodes: { /* ... */ },
  edges: { /* ... */ },
  navigationRules: {
    left: { key: 'ArrowLeft', direction: 'source' },
    right: { key: 'ArrowRight', direction: 'target' },
    exit: { key: 'Escape', direction: 'target' }
  }
}

Each rule specifies:

• A name — left, right, exit
• A key — The keyboard key code
• A direction — Follow edge to source or target

Applying Rules to Edges

Tell each edge which rules apply:

edges: {
  '_0-_1': {
    source: '_0',
    target: '_1',
    navigationRules: ['left', 'right']
  },
  '_1-_2': {
    source: '_1',
    target: '_2',
    navigationRules: ['left', 'right']
  },
  '_2-_3': {
    source: '_2',
    target: '_3',
    navigationRules: ['left', 'right']
  },
  'any-exit': {
    source: (d, c) => c,
    target: () => '',
    navigationRules: ['exit']
  }
}

The any-exit edge is special—it uses functions so it works from any node.

Creating the Input Handler

import dataNavigator from 'data-navigator'

const input = dataNavigator.input({
  structure: structure,
  navigationRules: structure.navigationRules,
  entryPoint: '_0',
  exitPoint: 'exit-element-id'
})

Key Methods

Method	Description
input.enter()	Returns the entry point node
input.exit()	Returns the exit point ID
input.move(currentId, direction)	Returns the next node
input.keydownValidator(event)	Converts KeyboardEvent to direction
input.focus(renderId)	Focuses a rendered element

Usage Example

document.addEventListener('keydown', (event) => {
  const direction = input.keydownValidator(event)
  
  if (direction) {
    event.preventDefault()
    const nextNode = input.move(currentNodeId, direction)
    if (nextNode) {
      currentNodeId = nextNode.id
      // Update UI...
    }
  }
})

Next Steps

Continue to Rendering to create the accessible HTML layer.