Work in progress

app/package.json

@@ -38,6 +38,7 @@
     "react-ace": "^6.3.2",
     "react-dom": "^16.7.0",
     "react-json-view": "^1.19.1",
+    "react-keyboard-event-handler": "^1.4.1",
     "react-redux": "^6.0.0",
     "react-resize-detector": "^3.4.0",
     "react-split-pane": "^0.1.85",

app/src/TopicViewModel.ts

@@ -3,6 +3,7 @@ import { EventDispatcher } from '../../events'
 export class TopicViewModel {
   private selected: boolean
   public change = new EventDispatcher<void, TopicViewModel>(this)
+  public attached = true // When the viewmodel is attached it's always visible
 
   public constructor() {
     this.selected = false

app/src/actions/Settings.ts

@@ -1,5 +1,4 @@
 import { Action, ActionTypes, TopicOrder } from '../reducers/Settings'
-import { ActionTypes as TreeActionTypes } from '../reducers/Tree'
 import { Dispatch } from 'redux'
 import { showTree } from './Tree'
 import { AppState } from '../reducers'

app/src/actions/Tree.ts

@@ -5,6 +5,7 @@ import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../TopicViewModel'
 import { batchActions } from 'redux-batched-actions'
+import { treeActions } from '.';
 const debounce = require('lodash.debounce')
 
 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
@@ -43,6 +44,26 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispat
   }
 }, 70)
 
+export const handleKeyEvent = (key: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const state = getState()
+  const { tree, selectedTopic } = state.tree
+  if (!tree) {
+    return
+  }
+
+  if (!selectedTopic) {
+    return dispatch(selectTopic(tree.firstNode()))
+  }
+
+  const visibleTopics: q.TreeNode<TopicViewModel>[] = tree.childTopics().filter(topic => topic.viewModel && topic.viewModel.attached)
+  if (key === 'down') {
+    debugger
+    const selectedIndex = visibleTopics.indexOf(selectedTopic)
+    const nextIndex = (visibleTopics.length - 1) % (selectedIndex + 1)
+    return dispatch(selectTopic(visibleTopics[nextIndex]))
+  }
+}
+
 export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
   const visibleTree = getState().tree.tree
   const connectionTree = getState().connection.tree

app/src/components/Tree/Tree.tsx

@@ -8,6 +8,7 @@ import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
+const ReactKeyboardEventHandler = require('react-keyboard-event-handler')
 
 const MovingAverage = require('moving-average')
 
@@ -86,6 +87,12 @@ class Tree extends React.PureComponent<Props, State> {
     }, Math.max(0, timeUntilNextUpdate))
   }
 
+  private handleKeyEvent = (key: string, event: any) => {
+    event.stopPropagation()
+    event.preventDefault()
+    this.props.actions.handleKeyEvent(key)
+  }
+
   public render() {
     const { tree, filter } = this.props
     if (!tree) {
@@ -99,6 +106,11 @@ class Tree extends React.PureComponent<Props, State> {
 
     return (
       <div style={style}>
+        <ReactKeyboardEventHandler
+          isExclusive={true}
+          handleKeys={['space', 'enter', 'delete', 'backspace', 'left', 'up', 'down', 'right']}
+          onKeyEvent={this.handleKeyEvent}
+        />
         <TreeNode
           key={tree.hash()}
           animateChages={true}

app/yarn.lock

@@ -4520,6 +4520,11 @@ react-json-view@^1.19.1:
     react-lifecycles-compat "^3.0.4"
     react-textarea-autosize "^6.1.0"
 
+react-keyboard-event-handler@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-keyboard-event-handler/-/react-keyboard-event-handler-1.4.1.tgz#3122ab3ceab3df0414a8afb58aa07e93fc34f30e"
+  integrity sha512-F7e/nHXyfY8Szle1lxTf7iJ7Vnnq9xGV5Jcu1nB1+lmLRkLiLFhMk4Kc1iOJWdxuhj9pg5xsB8IuAAVpawkTwg==
+
 react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"