Implement keyboard grid cell navigation #39

yishn · Jan 22, 2020 · 1319a8d · 1319a8d
1 parent cacbb0d
commit 1319a8d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 53 deletions.
diff --git a/css/master.css b/css/master.css
@@ -89,11 +89,11 @@ a, img {
     white-space: nowrap;
     transition: background-color .2s;
   }
-  .pan .grid-cell:hover, .grid-cell.selected {
+  .grid-cell.selected {
     background: #eee;
     outline: none;
   }
-  .grid-cell.edit, .pan .grid-cell.edit {
+  .grid-cell.edit {
     background: #e4e4e4;
   }
   .grid-cell .grabber {

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,6 +1,7 @@
 import {h, render, Component} from 'preact'
 import copyText from 'copy-text-to-clipboard'
 import * as diagram from '../diagram'
+import {arrAdd} from '../helper'
 
 import Grid from './Grid'
 import Properties from './Properties'
@@ -15,7 +16,7 @@ export default class App extends Component {
       tool: 'pan',
       cellSize: 130,
       cameraPosition: [-65, -65],
-      selectedCell: null,
+      selectedCell: [0, 0],
       selectedEdge: null,
       cellEditMode: false,
       confirmLinkCopy: false,
@@ -36,35 +37,50 @@ export default class App extends Component {
       ' ': 'pan'
     }
 
+    let arrowControl = {
+      ArrowLeft: [-1, 0],
+      ArrowRight: [1, 0],
+      ArrowUp: [0, -1],
+      ArrowDown: [0, 1]
+    }
+
     document.addEventListener('keydown', evt => {
       if (toolControl[evt.key] != null) {
         if (this.prevTool != null) return
 
         this.prevTool = this.state.tool
         this.setState({tool: toolControl[evt.key]})
+      } else if (Object.keys(arrowControl).includes(evt.key)) {
+        // Arrow keys
+
+        this.setState(state =>
+          state.cellEditMode || state.selectedEdge != null
+            ? null
+            : {selectedCell: arrAdd(state.selectedCell, arrowControl[evt.key])}
+        )
+      } else if (evt.key === 'Enter') {
+        this.setState(state =>
+          state.cellEditMode || state.selectedEdge != null
+            ? null
+            : {cellEditMode: true}
+        )
       }
     })
 
     document.addEventListener('keyup', evt => {
-      if (Object.keys(toolControl).includes(evt.key.toString())) {
+      if (Object.keys(toolControl).includes(evt.key)) {
         // Space or Control
 
         if (this.prevTool == null) return
 
         this.setState({tool: this.prevTool})
         this.prevTool = null
-      }
-    })
-
-    document.addEventListener('keyup', evt => {
-      if (evt.key === 'Escape') {
+      } else if (evt.key === 'Escape') {
         this.setState(state =>
-          state.cellEditMode
-            ? {cellEditMode: false}
-            : state.selectedCell != null
-            ? {selectedCell: null}
-            : state.selectedEdge != null
+          state.selectedEdge != null
             ? {selectedEdge: null}
+            : state.cellEditMode
+            ? {cellEditMode: false}
             : null
         )
       }
@@ -211,18 +227,13 @@ export default class App extends Component {
 
     this.setState({
       diagram: evt.data,
+      ...(evt.selectedCell != null ? {selectedCell: evt.selectedCell} : {}),
       selectedEdge: edgeAdded
         ? evt.data.edges.length - 1
         : this.state.selectedEdge
     })
   }
 
-  handleCellSelect = evt => {
-    this.setState({
-      selectedCell: evt.position
-    })
-  }
-
   handleCellClick = evt => {
     this.setState({
       selectedCell: evt.position,
@@ -319,12 +330,13 @@ export default class App extends Component {
           cameraPosition={this.state.cameraPosition}
           data={this.state.diagram}
           mode={this.state.tool}
-          selectedCell={this.state.selectedCell}
+          selectedCell={
+            this.state.selectedEdge == null ? this.state.selectedCell : null
+          }
           selectedEdge={this.state.selectedEdge}
           cellEditMode={this.state.cellEditMode}
           onPan={this.handlePan}
           onDataChange={this.handleDataChange}
-          onCellSelect={this.handleCellSelect}
           onCellClick={this.handleCellClick}
           onCellSubmit={this.handleCellSubmit}
           onEdgeClick={this.handleEdgeClick}

diff --git a/src/components/Grid.js b/src/components/Grid.js
@@ -103,6 +103,7 @@ export default class Grid extends Component {
         let {onDataChange = () => {}} = this.props
 
         onDataChange({
+          selectedCell: newPosition,
           data: {
             nodes: this.props.data.nodes.map((x, i) =>
               i !== nodeIndex ? x : {...x, position: newPosition}
@@ -155,7 +156,7 @@ export default class Grid extends Component {
     }
   }
 
-  handleNodeGrabberMouseDown = evt => {
+  handleCellGrabberMouseDown = evt => {
     if (evt.button !== 0) return
 
     evt.stopPropagation()
@@ -175,7 +176,7 @@ export default class Grid extends Component {
     }
   }
 
-  handleNodeAddLoopClick = evt => {
+  handleCellAddLoopClick = evt => {
     if (evt.button !== 0) return
 
     evt.stopPropagation()
@@ -216,12 +217,7 @@ export default class Grid extends Component {
     onCellClick({position})
   }
 
-  handleNodeSubmit = evt => {
-    let {onCellSubmit = () => {}} = this.props
-    onCellSubmit(evt)
-  }
-
-  handleNodeChange = evt => {
+  handleCellChange = evt => {
     let {onDataChange = () => {}} = this.props
 
     let nodes = [...this.props.data.nodes]
@@ -345,10 +341,10 @@ export default class Grid extends Component {
                       selected={selected}
                       edit={selected && this.props.cellEditMode}
                       value={node && node.value}
-                      onGrabberMouseDown={this.handleNodeGrabberMouseDown}
-                      onAddLoopClick={this.handleNodeAddLoopClick}
-                      onSubmit={this.handleNodeSubmit}
-                      onChange={this.handleNodeChange}
+                      onGrabberMouseDown={this.handleCellGrabberMouseDown}
+                      onAddLoopClick={this.handleCellAddLoopClick}
+                      onSubmit={this.props.onCellSubmit}
+                      onChange={this.handleCellChange}
                       onTypesetFinish={this.handleTypesetFinish}
                     />
                   )

diff --git a/src/components/GridCell.js b/src/components/GridCell.js
@@ -47,7 +47,6 @@ export default class GridCell extends Component {
     let {onGrabberMouseDown = () => {}} = this.props
 
     evt.position = this.props.position
-
     onGrabberMouseDown(evt)
   }
 
@@ -57,9 +56,15 @@ export default class GridCell extends Component {
 
   handleEditSubmit = evt => {
     evt.preventDefault()
+  }
+
+  handleEditKeyDown = evt => {
+    if (evt.key === 'Enter') {
+      evt.stopPropagation()
 
-    let {onSubmit = () => {}} = this.props
-    onSubmit({position: this.props.position})
+      let {onSubmit = () => {}} = this.props
+      onSubmit({position: this.props.position})
+    }
   }
 
   handleInputBlur = evt => {
@@ -94,21 +99,6 @@ export default class GridCell extends Component {
         })}
         data-position={this.props.position.join(',')}
       >
-        <img
-          class="grabber"
-          src="./img/grabber.svg"
-          onMouseDown={this.handleGrabberMouseDown}
-          onDragStart={this.handleGrabberDragStart}
-        />
-
-        <img
-          class="loop"
-          src="./img/loop.svg"
-          title="Create Loop"
-          alt="Create Loop"
-          onClick={this.handleAddLoop}
-        />
-
         <div class="value" ref={el => (this.valueElement = el)}>
           {this.props.value ? (
             `\\(${this.props.value}\\)`
@@ -126,10 +116,25 @@ export default class GridCell extends Component {
               onBlur={this.handleInputBlur}
               onInput={this.handleInputChange}
               onMouseDown={this.stopPropagation}
-              onKeyDown={this.stopPropagation}
+              onKeyDown={this.handleEditKeyDown}
             />
           </form>
         )}
+
+        <img
+          class="grabber"
+          src="./img/grabber.svg"
+          onMouseDown={this.handleGrabberMouseDown}
+          onDragStart={this.handleGrabberDragStart}
+        />
+
+        <img
+          class="loop"
+          src="./img/loop.svg"
+          title="Create Loop"
+          alt="Create Loop"
+          onClick={this.handleAddLoop}
+        />
       </li>
     )
   }