Allow cursors to be keyboard navigable

[jaredjj3]

There are two use cases that I can think of from the top of my head:

• In Create mechanism to programmatically navigate rendering #158 (comment), we want to facilitate an editing experience by letting cursors navigate through voice entry elements (e.g. notes in a chord).
• For accessibility and convenience, we may want voice entry cursors to be controlled by the keyboard when the overlay element is focused. For example, if a cursor is in system 0 and you press the down arrow key, it should navigate you to a timestamp directly below in system 1.

[jaredjj3]

Just ideating...

First, we need a data container. I propose using a graph-like data structure whose nodes are interactable elements and there's an optional edge for each cardinal direction.

type NavigationNode {
  value: Interactable;
  parent: unknown; // probably VoiceEntryRendering, but maybe we need to navigate things that aren't voice entry children.
  left: NavigationNode | null;
  right: NavigationNode | null;
  up: NavigationNode | null;
  down: NavigationNode | null;
}

Materializing the graph is the most difficult part of this project. I think I should be able to leverage the spatial.QuadTree to determine left, right, up, down for each node.

I need to be careful connecting nodes. For example, if I'm connecting nodeB to the left of nodeA the following should be true: nodeA.left === nodeB && nodeB.right === nodeA. Maybe I should make NavigationNode a class with mutation methods that validate connections.

I think the graph should "wrap" around, but I need to be extra careful when traversing it to not cause infinite loops. Maybe the NavigationNode class can have a traverse method that manages a list of seen nodes.

We can probably get away having one graph for intra voice entries. When traversing inter voice entries, you can use the following algorithm:

class Cursor {
  moveDownToNextVoiceEntry(opts) {
    const parent = this.navigationNode.parent;
    const seen = new Set<NavigationNode>();
    let node = this.navigationNode;
    while (node.down && !seen.has(node)) {
      seen.add(node);
      node = node.down;
      if (node.parent !== parent) {
        this.updateNavigationNode(node);
        return;
      }
    }
    // otherwise, nothing should happen
  }
}

Updating the navigation node might need to update the playback sequence index and vice versa.

The cursor needs an API for each of the use cases mentioned in #243 (comment).

type NavigationScope = 'inter' | 'intra'; // inter-voice entry and intra-voice entry

interface KeyboardNavigable {
  left(scope: NavigationScope);
  right(scope: NavigationScope);
  up(scope: NavigationScope);
  down(scope: NavigationScope);
}