Add brush size settings and shortcuts

CHANGELOG.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 - Improved security by enabling http security headers [#3084](https://github.com/scalableminds/webknossos/pull/3084)
 - Added the possibility to write markdown in the annotation description. [#3081](https://github.com/scalableminds/webknossos/pull/3081)
+- Added the brush size to the settings on the left in volume tracing. The size can now also be adjusted by using only the keyboard. [#3126](https://github.com/scalableminds/webknossos/pull/3126)
 - Added a user documentation for webKnossos [#3011](https://github.com/scalableminds/webknossos/pull/3011)
 
 ### Changed

app/assets/javascripts/admin/help/keyboardshortcut_view.js

@@ -208,7 +208,7 @@ const KeyboardShortcutView = () => {
       action: "Toggle Move / Trace / Brush Mode",
     },
     {
-      keybinding: "Shift + Mousewheel",
+      keybinding: "Shift + Mousewheel or Shift + I,O",
       action: "Change Brush Size (Brush Mode)",
     },
     {

app/assets/javascripts/oxalis/constants.js

@@ -136,6 +136,9 @@ const Constants = {
   MIN_SCALE: 0.5,
   MAX_SCALE: 20,
 
+  MIN_BRUSH_SIZE: 5,
+  MAX_BRUSH_SIZE: 5000,
+
   // The node radius is the actual radius of the node in nm, it's dependent on zoom and dataset scale
   MIN_NODE_RADIUS: 1,
   MAX_NODE_RADIUS: 5000,

app/assets/javascripts/oxalis/controller/viewmodes/plane_controller.js

@@ -303,6 +303,9 @@ class PlaneController extends React.PureComponent<Props> {
         "shift + f": (timeFactor, first) => this.moveZ(getMoveValue(timeFactor) * 5, first),
         "shift + d": (timeFactor, first) => this.moveZ(-getMoveValue(timeFactor) * 5, first),
 
+        "shift + i": () => this.changeBrushSizeIfBrushIsActive(-5),
+        "shift + o": () => this.changeBrushSizeIfBrushIsActive(5),
+
         "shift + space": (timeFactor, first) => this.moveZ(-getMoveValue(timeFactor), first),
         "ctrl + space": (timeFactor, first) => this.moveZ(-getMoveValue(timeFactor), first),
         space: (timeFactor, first) => this.moveZ(getMoveValue(timeFactor), first),
@@ -546,6 +549,16 @@ class PlaneController extends React.PureComponent<Props> {
     Toast.success(moveValueMessage, { key: "CHANGED_MOVE_VALUE" });
   }
 
+  changeBrushSizeIfBrushIsActive(changeValue: number) {
+    const isBrushActive = Utils.maybe(getVolumeTool)(this.props.tracing.volume)
+      .map(tool => tool === VolumeToolEnum.BRUSH)
+      .getOrElse(false);
+    if (isBrushActive) {
+      const currentSize = Store.getState().temporaryConfiguration.brushSize;
+      Store.dispatch(setBrushSizeAction(currentSize + changeValue));
+    }
+  }
+
   scrollPlanes(delta: number, type: ?ModifierKeys): void {
     switch (type) {
       case null: {

app/assets/javascripts/oxalis/view/settings/user_settings_view.js

@@ -16,7 +16,10 @@ import {
   setActiveTreeAction,
   setNodeRadiusAction,
 } from "oxalis/model/actions/skeletontracing_actions";
-import { setActiveCellAction } from "oxalis/model/actions/volumetracing_actions";
+import {
+  setActiveCellAction,
+  setBrushSizeAction,
+} from "oxalis/model/actions/volumetracing_actions";
 import {
   NumberInputSetting,
   SwitchSetting,
@@ -51,8 +54,10 @@ type UserSettingsViewProps = {
   onChangeBoundingBox: (value: ?Vector6) => void,
   onChangeRadius: (value: number) => void,
   onChangeZoomStep: (value: number) => void,
+  onChangeBrushSize: (value: number) => void,
   viewMode: ModeType,
   controlMode: ControlModeType,
+  brushSize: number,
 };
 
 class UserSettingsView extends PureComponent<UserSettingsViewProps> {
@@ -280,6 +285,15 @@ class UserSettingsView extends PureComponent<UserSettingsViewProps> {
       const volumeTracing = enforceVolumeTracing(this.props.tracing);
       panels.push(
         <Panel header="Volume Options" key="3b">
+          <LogSliderSetting
+            label="Brush Size"
+            roundTo={0}
+            min={Constants.MIN_BRUSH_SIZE}
+            max={Constants.MAX_BRUSH_SIZE}
+            step={5}
+            value={this.props.brushSize}
+            onChange={this.props.onChangeBrushSize}
+          />
           <NumberInputSetting
             label="Active Cell ID"
             value={volumeTracing.activeCellId}
@@ -358,6 +372,7 @@ const mapStateToProps = (state: OxalisState) => ({
   maxZoomStep: getMaxZoomStep(state),
   viewMode: state.temporaryConfiguration.viewMode,
   controlMode: state.temporaryConfiguration.controlMode,
+  brushSize: state.temporaryConfiguration.brushSize,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
@@ -373,6 +388,10 @@ const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
   onChangeActiveCellId(id: number) {
     dispatch(setActiveCellAction(id));
   },
+  onChangeBrushSize(size: number) {
+    console.log(`called with size: ${size}`);
+    dispatch(setBrushSizeAction(size));
+  },
   onChangeBoundingBox(boundingBox: ?Vector6) {
     dispatch(setUserBoundingBoxAction(Utils.computeBoundingBoxFromArray(boundingBox)));
   },