Improve Slider Scrolling

CHANGELOG.unreleased.md

@@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Measurement tools are now accessible when viewing datasets outside of an annotation. [#8334](https://github.com/scalableminds/webknossos/pull/8334)
 
 ### Changed
+- Improved the scrolling behaviour of sliders: Sliders must be focused to scroll them. Additionally, parent element scrolling is prevented when using the slider. [#8321](https://github.com/scalableminds/webknossos/pull/8321) [#8321](https://github.com/scalableminds/webknossos/pull/8321)
 
 ### Fixed
 - Fixed a bug that lead to trees being dropped when merging to trees together. [#8359](https://github.com/scalableminds/webknossos/pull/8359)

frontend/javascripts/components/slider.tsx

@@ -2,14 +2,15 @@ import { Slider as AntdSlider, type SliderSingleProps } from "antd";
 import type { SliderRangeProps } from "antd/lib/slider";
 import { clamp } from "libs/utils";
 import _ from "lodash";
-import type { WheelEventHandler } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const DEFAULT_WHEEL_FACTOR = 0.02;
 const DEFAULT_STEP = 1;
 
 type SliderProps = (SliderSingleProps | SliderRangeProps) & {
   wheelFactor?: number;
   onWheelDisabled?: boolean;
+  onResetToDefault?: () => void;
 };
 
 const getDiffPerSliderStep = (
@@ -23,6 +24,8 @@ const getDiffPerSliderStep = (
 };
 
 const getWheelStepFromEvent = (step: number, deltaY: number, wheelStep: number) => {
+  const absDeltaY = Math.abs(deltaY);
+  if (absDeltaY === 0 || step === 0) return 0;
   // Make sure that result is a multiple of step
   return step * Math.round((wheelStep * deltaY) / Math.abs(deltaY) / step);
 };
@@ -32,6 +35,7 @@ export function Slider(props: SliderProps) {
     min,
     max,
     onChange,
+    onResetToDefault,
     value,
     range,
     defaultValue,
@@ -40,49 +44,78 @@ export function Slider(props: SliderProps) {
     step,
     disabled,
   } = props;
+  const isFocused = useRef(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const handleWheelEvent = useCallback(
+    (event: { preventDefault: () => void; deltaY: number }) => {
+      if (
+        onWheelDisabled ||
+        value == null ||
+        min == null ||
+        max == null ||
+        !isFocused.current ||
+        onChange == null
+      )
+        return;
+      event.preventDefault();
+      const diff = getWheelStepFromEvent(ensuredStep, event.deltaY, wheelStep);
+      // differentiate between single value and range slider
+      if (range === false || range == null) {
+        const newValue = value - diff;
+        const clampedNewValue = clamp(min, newValue, max);
+        onChange(clampedNewValue);
+      } else if (range === true || typeof range === "object") {
+        const newLowerValue = Math.round(value[0] + diff);
+        const newUpperValue = Math.round(value[1] - diff);
+        const clampedNewLowerValue = clamp(min, newLowerValue, Math.min(newUpperValue, max));
+        const clampedNewUpperValue = clamp(newLowerValue, newUpperValue, max);
+        onChange([clampedNewLowerValue, clampedNewUpperValue]);
+      }
+    },
+    [value, min, max, onChange, range, onWheelDisabled],
+  );
+
+  // Reacts onWheel is passive by default, this means that it can't preventDefault.
+  // Thus we need to add the event listener manually.
+  // (See https://github.com/facebook/react/pull/19654)
+  useEffect(() => {
+    const sliderElement = sliderRef.current;
+    if (sliderElement) {
+      sliderElement.addEventListener("wheel", handleWheelEvent, { passive: false });
+      return () => {
+        sliderElement.removeEventListener("wheel", handleWheelEvent);
+      };
+    }
+  }, [handleWheelEvent]);
+
   if (min == null || max == null || onChange == null || value == null || disabled)
     return <AntdSlider {...props} />;
   const sliderRange = max - min;
   const ensuredStep = step || DEFAULT_STEP;
-  let handleWheelEvent: WheelEventHandler<HTMLDivElement> = _.noop;
-  let handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = _.noop;
+
   const wheelStep = getDiffPerSliderStep(sliderRange, wheelFactor, ensuredStep);
 
-  handleDoubleClick = (event) => {
+  const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
     if (
       event.target instanceof HTMLElement &&
       event.target.className.includes("ant-slider-handle") &&
       defaultValue != null
     )
+      if (onResetToDefault != null) onResetToDefault();
       // @ts-ignore Argument of type 'number | number[]' is not assignable to parameter of type 'number'.
       //TypeScript doesn't understand that onChange always takes the type of defaultValue.
-      onChange(defaultValue);
+      else onChange(defaultValue);
   };
 
-  // differentiate between single value and range slider
-  if (range === false || range == null) {
-    if (!onWheelDisabled) {
-      handleWheelEvent = (event) => {
-        const newValue = value - getWheelStepFromEvent(ensuredStep, event.deltaY, wheelStep);
-        const clampedNewValue = clamp(min, newValue, max);
-        onChange(clampedNewValue);
-      };
-    }
-  } else if (range === true || typeof range === "object") {
-    if (!onWheelDisabled) {
-      handleWheelEvent = (event) => {
-        const diff = getWheelStepFromEvent(ensuredStep, event.deltaY, wheelStep);
-        const newLowerValue = Math.round(value[0] + diff);
-        const newUpperValue = Math.round(value[1] - diff);
-        const clampedNewLowerValue = clamp(min, newLowerValue, Math.min(newUpperValue, max));
-        const clampedNewUpperValue = clamp(newLowerValue, newUpperValue, max);
-        onChange([clampedNewLowerValue, clampedNewUpperValue]);
-      };
-    }
-  }
-
   return (
-    <div onWheel={handleWheelEvent} onDoubleClick={handleDoubleClick} style={{ flexGrow: 1 }}>
+    <div
+      ref={sliderRef}
+      onDoubleClick={handleDoubleClick}
+      style={{ flexGrow: 1, touchAction: "none" }}
+      onFocus={() => (isFocused.current = true)}
+      onBlur={() => (isFocused.current = false)}
+    >
       <AntdSlider {...props} />
     </div>
   );

frontend/javascripts/oxalis/view/components/setting_input_views.tsx

@@ -194,6 +194,11 @@ export class LogSliderSetting extends React.PureComponent<LogSliderSettingProps>
     return Math.round(scaleValue);
   };
 
+  resetToDefaultValue = () => {
+    if (this.props.defaultValue == null) return;
+    this.onChangeInput(this.props.defaultValue);
+  };
+
   render() {
     const { label, roundTo, value, min, max, disabled, defaultValue } = this.props;
     return (
@@ -210,6 +215,7 @@ export class LogSliderSetting extends React.PureComponent<LogSliderSettingProps>
             value={this.getSliderValue()}
             disabled={disabled}
             defaultValue={defaultValue}
+            onResetToDefault={this.resetToDefaultValue}
           />
         </Col>
         <Col span={this.props.spans[2]}>