change cursor according to annotation tool

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 
 ### Changed
+- The mouse cursor now changes appearance to indicate the currently selected annotation tool  [#6132](https://github.com/scalableminds/webknossos/pull/6132)
 - Various changes to the Dataset table in the dashboard  [#6131](https://github.com/scalableminds/webknossos/pull/6131):
   - Renamed "Allowed Teams" column to "Access Permissions".
   - Add filter functionality to "Access Permissions" column to filter for public datasets.

frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts

@@ -243,7 +243,7 @@ export const highlightAndSetCursorOnHoveredBoundingBox = _.throttle(
       getSceneController().highlightUserBoundingBox(null);
 
       if (inputCatcher != null) {
-        inputCatcher.style.cursor = "auto";
+        inputCatcher.style.cursor = "move";
       }
     }
   },

frontend/javascripts/oxalis/controller/combinations/tool_controls.ts

@@ -1,11 +1,6 @@
 import type { ModifierKeys } from "libs/input";
 import type { OrthoView, Point2, ShowContextMenuFunction, AnnotationTool } from "oxalis/constants";
-import {
-  OrthoViews,
-  ContourModeEnum,
-  AnnotationToolEnum,
-  OrthoViewValuesWithoutTDView,
-} from "oxalis/constants";
+import { OrthoViews, ContourModeEnum, AnnotationToolEnum } from "oxalis/constants";
 import {
   enforceActiveVolumeTracing,
   getContourTracingMode,
@@ -619,15 +614,6 @@ export class BoundingBoxTool {
     if (body == null) {
       return;
     }
-
-    for (const planeId of OrthoViewValuesWithoutTDView) {
-      const inputCatcher = document.getElementById(`inputcatcher_${planeId}`);
-
-      if (inputCatcher) {
-        inputCatcher.style.cursor = "auto";
-      }
-    }
-
     getSceneController().highlightUserBoundingBox(null);
   }
 }

frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx

@@ -642,6 +642,7 @@ export default function ToolbarView() {
                 className="fas fa-fill-drip"
                 style={{
                   opacity: disabledInfosForTools[AnnotationToolEnum.FILL_CELL].isDisabled ? 0.5 : 1,
+                  transform: "scaleX(-1)",
                 }}
               />
               {adaptedActiveTool === AnnotationToolEnum.FILL_CELL

frontend/javascripts/oxalis/view/input_catcher.tsx

@@ -4,24 +4,23 @@ import { ArbitraryViewport } from "oxalis/constants";
 import { setInputCatcherRects } from "oxalis/model/actions/view_mode_actions";
 import Scalebar from "oxalis/view/scalebar";
 import ViewportStatusIndicator from "oxalis/view/viewport_status_indicator";
-import type { BusyBlockingInfo } from "oxalis/store";
+import type { BusyBlockingInfo, OxalisState } from "oxalis/store";
 import Store from "oxalis/store";
 import makeRectRelativeToCanvas from "oxalis/view/layouting/layout_canvas_adapter";
 import { waitForCondition } from "libs/utils";
+import { useKeyPress } from "libs/react_hooks";
+import { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { adaptActiveToolToShortcuts } from "oxalis/model/accessors/tool_accessor";
+
 const emptyViewportRect = {
   top: 0,
   left: 0,
   width: 0,
   height: 0,
 };
-type Props = {
-  viewportID: Viewport;
-  children?: React.ReactNode;
-  displayScalebars?: boolean;
-  busyBlockingInfo: BusyBlockingInfo;
-};
 
-function ignoreContextMenu(event: React.SyntheticEvent) {
+function ignoreContextMenu(event: React.MouseEvent) {
   // hide contextmenu, while rightclicking a canvas
   event.preventDefault();
 }
@@ -85,47 +84,77 @@ export function recalculateInputCatcherSizes() {
   Store.dispatch(setInputCatcherRects(viewportRects));
 }
 
-class InputCatcher extends React.PureComponent<Props, {}> {
-  domElement: HTMLElement | null | undefined;
+const cursorForTool = {
+  MOVE: "move",
+  SKELETON: "crosshair",
+  BRUSH: "url(/assets/images/paint-brush-solid-border.svg) 0 10,auto",
+  ERASE_BRUSH: "url(/assets/images/eraser-solid-border.svg) 0 8,auto",
+  TRACE: "url(/assets/images/lasso-pointed-solid-border.svg) 0 14,auto",
+  ERASE_TRACE: "url(/assets/images/eraser-pointed-solid-border.svg) 0 16,auto",
+  FILL_CELL: "url(/assets/images/fill-pointed-solid-border.svg) 0 16,auto",
+  PICK_CELL: "url(/assets/images/eye-dropper-solid-border.svg) 0 12,auto",
+  BOUNDING_BOX: "move",
+};
 
-  componentDidMount() {
-    if (this.domElement) {
-      renderedInputCatchers.set(this.props.viewportID, this.domElement);
+function InputCatcher({
+  viewportID,
+  children,
+  displayScalebars,
+  busyBlockingInfo,
+}: {
+  viewportID: Viewport;
+  children?: React.ReactNode;
+  displayScalebars?: boolean;
+  busyBlockingInfo: BusyBlockingInfo;
+}) {
+  const domElementRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    if (domElementRef.current) {
+      renderedInputCatchers.set(viewportID, domElementRef.current);
     }
-  }
+    return () => {
+      if (domElementRef.current) {
+        renderedInputCatchers.delete(viewportID);
+      }
+    };
+  }, []);
 
-  componentWillUnmount() {
-    if (this.domElement) {
-      renderedInputCatchers.delete(this.props.viewportID);
-    }
-  }
+  const activeTool = useSelector((state: OxalisState) => state.uiInformation.activeTool);
+
+  const isShiftPressed = useKeyPress("Shift");
+  const isControlPressed = useKeyPress("Control");
+  const isAltPressed = useKeyPress("Alt");
 
-  render() {
-    const { viewportID } = this.props;
-    return (
-      <div className="flexlayout-dont-overflow">
-        <div
-          id={`inputcatcher_${viewportID}`}
-          ref={(domElement) => {
-            this.domElement = domElement;
-          }}
-          onContextMenu={ignoreContextMenu}
-          data-value={viewportID}
-          className={`inputcatcher ${viewportID}`}
-          style={{
-            position: "relative",
-            cursor: this.props.busyBlockingInfo.isBusy ? "wait" : "auto",
-          }}
-        >
-          <ViewportStatusIndicator />
-          {this.props.displayScalebars && viewportID !== "arbitraryViewport" ? (
-            <Scalebar viewportID={viewportID} />
-          ) : null}
-          {this.props.children}
-        </div>
+  const adaptedTool = adaptActiveToolToShortcuts(
+    activeTool,
+    isShiftPressed,
+    isControlPressed,
+    isAltPressed,
+  );
+
+  return (
+    <div className="flexlayout-dont-overflow">
+      <div
+        id={`inputcatcher_${viewportID}`}
+        ref={(domElement) => {
+          domElementRef.current = domElement;
+        }}
+        onContextMenu={ignoreContextMenu}
+        data-value={viewportID}
+        className={`inputcatcher ${viewportID}`}
+        style={{
+          position: "relative",
+          cursor: busyBlockingInfo.isBusy ? "wait" : cursorForTool[adaptedTool],
+        }}
+      >
+        <ViewportStatusIndicator />
+        {displayScalebars && viewportID !== "arbitraryViewport" ? (
+          <Scalebar viewportID={viewportID} />
+        ) : null}
+        {children}
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default InputCatcher;