Scroll faster through tree comments

CHANGELOG.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 - Added two new properties to mapping json files. The `colors: [<hsvHueValue1>, <hsvHueValue2>, ...]` property can be used to specify up to 256 custom colors for the first 256 equivalence classes of the mapping. The `hideUnmappedIds: <true|false>` property indicates whether segments that were not mapped should be rendered transparently or not. [#2965](https://github.com/scalableminds/webknossos/pull/2965)
 - Added a button for refreshing the dataset in the backend cache. [#2975](https://github.com/scalableminds/webknossos/pull/2975)
+- Comments of tracing trees can now be cycled through by keeping n and p pressed. [#3041](https://github.com/scalableminds/webknossos/pull/3041)
 - All dates in webknossos will be shown in the browser's timezone. On hover, a tooltip will show the date in UTC. [#2916](https://github.com/scalableminds/webknossos/pull/2916) ![image](https://user-images.githubusercontent.com/2486553/42888385-74c82bc0-8aa8-11e8-9c3e-7cfc90ce93bc.png)
 - When merging datasets within a tracing via the merge-modal, the user can choose whether the merge should be executed directly in the currently opened tracing. Alternatively, a new annotation can be created which is accessible via the dashboard (as it has been before).
 - Added shortcuts for moving along the current tracing direction in orthogonal mode. Pressing 'e' (and 'r' for the reverse direction) will move along the "current direction", which is defined by the vector between the last two created nodes.

app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment_tab_view.js

@@ -8,11 +8,13 @@ import * as React from "react";
 import Maybe from "data.maybe";
 import Utils from "libs/utils";
 import update from "immutability-helper";
+import Store from "oxalis/store";
 import { connect } from "react-redux";
 import { Input, Menu, Dropdown, Tooltip, Icon, Modal, Button, Row, Col } from "antd";
 import ButtonComponent from "oxalis/view/components/button_component";
 import InputComponent from "oxalis/view/components/input_component";
-import { InputKeyboardNoLoop } from "libs/input";
+import { InputKeyboard } from "libs/input";
+import { listenToStoreProperty } from "oxalis/model/helpers/listener_helpers";
 import { getActiveTree, getActiveNode } from "oxalis/model/accessors/skeletontracing_accessor";
 import {
   setActiveNodeAction,
@@ -115,6 +117,19 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
     isMarkdownModalVisible: false,
   };
 
+  componentDidMount() {
+    this.storePropertyUnsubscribers.push(
+      listenToStoreProperty(
+        state => state.userConfiguration.keyboardDelay,
+        keyboardDelay => {
+          if (this.keyboard != null) {
+            this.keyboard.delay = keyboardDelay;
+          }
+        },
+      ),
+    );
+  }
+
   componentDidUpdate(prevProps) {
     if (
       this.listRef != null &&
@@ -128,12 +143,18 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
 
   componentWillUnmount() {
     this.keyboard.destroy();
+    this.unsubscribeStoreListeners();
   }
 
-  keyboard = new InputKeyboardNoLoop({
-    n: () => this.nextComment(),
-    p: () => this.previousComment(),
-  });
+  storePropertyUnsubscribers: Array<() => void> = [];
+
+  keyboard = new InputKeyboard(
+    {
+      n: () => this.nextComment(),
+      p: () => this.previousComment(),
+    },
+    { delay: Store.getState().userConfiguration.keyboardDelay },
+  );
 
   nextComment = (forward: boolean = true) => {
     getActiveNode(this.props.skeletonTracing).map(activeNode => {
@@ -193,6 +214,11 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
     }));
   };
 
+  unsubscribeStoreListeners() {
+    this.storePropertyUnsubscribers.forEach(unsubscribe => unsubscribe());
+    this.storePropertyUnsubscribers = [];
+  }
+
   getActiveComment(createIfNotExisting: boolean = false) {
     return Utils.zipMaybe(
       getActiveTree(this.props.skeletonTracing),