Improve settings

src/page/config-pane.ts

@@ -81,6 +81,16 @@ const getNumberBindingParams = (config: NumberControlConfig): BindingParams => {
   return params;
 };
 
+const getInvertedNumberControlValue = (
+  value: number,
+  config: NumberControlConfig
+): number => {
+  if (!config.inverted || config.min === undefined || config.max === undefined) {
+    return value;
+  }
+  return config.min + config.max - value;
+};
+
 export class ConfigPane {
   private readonly container: HTMLDivElement;
   private readonly closeButton: HTMLButtonElement;
@@ -264,9 +274,10 @@ export class ConfigPane {
     }
 
     settings[key] = normalizeNumberControlValue(settings[key], config);
+    const bindingTarget = this.getRuntimeBindingTarget(key, config);
 
     container
-      .addBinding(settings, key, getNumberBindingParams(config))
+      .addBinding(bindingTarget, key, getNumberBindingParams(config))
       .on('change', () => {
         const nextValue = normalizeNumberControlValue(settings[key], config);
         if (nextValue !== settings[key]) {
@@ -277,6 +288,25 @@ export class ConfigPane {
       });
   }
 
+  private getRuntimeBindingTarget(
+    key: RuntimeControlKey,
+    config: NumberControlConfig
+  ): typeof settings | Record<RuntimeControlKey, number> {
+    if (!config.inverted) {
+      return settings;
+    }
+
+    const bindingTarget = {} as Record<RuntimeControlKey, number>;
+    Object.defineProperty(bindingTarget, key, {
+      enumerable: true,
+      get: () => getInvertedNumberControlValue(settings[key], config),
+      set: (value: number) => {
+        settings[key] = getInvertedNumberControlValue(value, config);
+      },
+    });
+    return bindingTarget;
+  }
+
   private getRuntimeControlConfig(
     key: RuntimeControlKey
   ): NumberControlConfig | undefined {

src/page/eraser-size-control.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+
+import { appConfig } from '../config';
+import {
+  getEraserSizeFromSliderRatio,
+  getEraserSliderRatioFromSize,
+} from './eraser-size-control';
+
+describe('eraser size slider mapping', () => {
+  it('maps slider position quadratically to eraser size', () => {
+    const { max, min } = appConfig.toolbar.eraser;
+
+    expect(getEraserSizeFromSliderRatio(0)).toBe(min);
+    expect(getEraserSizeFromSliderRatio(0.5)).toBe(min + (max - min) * 0.25);
+    expect(getEraserSizeFromSliderRatio(1)).toBe(max);
+  });
+
+  it('maps eraser size back to the inverse slider position', () => {
+    const { max, min } = appConfig.toolbar.eraser;
+    const quarterRangeSize = min + (max - min) * 0.25;
+
+    expect(getEraserSliderRatioFromSize(min)).toBe(0);
+    expect(getEraserSliderRatioFromSize(quarterRangeSize)).toBe(0.5);
+    expect(getEraserSliderRatioFromSize(max)).toBe(1);
+  });
+});

src/page/eraser-size-control.ts

@@ -9,11 +9,28 @@ const clampEraserSize = (value: number): number => {
   return Math.min(max, Math.max(min, Math.round(safeValue)));
 };
 
+const ERASER_SLIDER_MIN = 0;
+const ERASER_SLIDER_MAX = 1;
+const ERASER_SLIDER_STEP = 0.001;
+
+const clampSliderRatio = (value: number): number => {
+  const safeValue = Number.isFinite(value) ? value : ERASER_SLIDER_MIN;
+  return Math.min(ERASER_SLIDER_MAX, Math.max(ERASER_SLIDER_MIN, safeValue));
+};
+
 const getEraserSizeRatio = (size: number): number => {
   const { max, min } = appConfig.toolbar.eraser;
-  return (size - min) / (max - min);
+  return (clampEraserSize(size) - min) / (max - min);
 };
 
+export const getEraserSizeFromSliderRatio = (sliderRatio: number): number => {
+  const { max, min } = appConfig.toolbar.eraser;
+  return clampEraserSize(min + (max - min) * clampSliderRatio(sliderRatio) ** 2);
+};
+
+export const getEraserSliderRatioFromSize = (size: number): number =>
+  Math.sqrt(getEraserSizeRatio(size));
+
 interface EraserSizeControlOptions {
   getGame: () => GameLoop | null;
   onActivate: () => void;
@@ -33,7 +50,7 @@ export class EraserSizeControl {
     this.control.addEventListener('click', this.activate);
     this.slider.addEventListener('focus', this.activate);
     this.slider.addEventListener('input', () => {
-      settings.eraserSize = clampEraserSize(Number(this.slider.value));
+      settings.eraserSize = getEraserSizeFromSliderRatio(Number(this.slider.value));
       this.activate();
       this.render();
       this.options.onChange();
@@ -46,19 +63,20 @@ export class EraserSizeControl {
       settings.eraserSize = size;
     }
 
-    this.slider.min = appConfig.toolbar.eraser.min.toString();
-    this.slider.max = appConfig.toolbar.eraser.max.toString();
-    this.slider.step = appConfig.toolbar.eraser.step.toString();
-    this.slider.value = size.toString();
+    const sliderRatio = getEraserSliderRatioFromSize(size);
+    this.slider.min = ERASER_SLIDER_MIN.toString();
+    this.slider.max = ERASER_SLIDER_MAX.toString();
+    this.slider.step = ERASER_SLIDER_STEP.toString();
+    this.slider.value = sliderRatio.toString();
     this.slider.setAttribute('aria-valuetext', `${size}px`);
 
-    const ratio = getEraserSizeRatio(size);
+    const sizeRatio = getEraserSizeRatio(size);
     const scale =
       appConfig.toolbar.eraser.controlScaleMin +
       (appConfig.toolbar.eraser.controlScaleMax -
         appConfig.toolbar.eraser.controlScaleMin) *
-        ratio;
-    this.control.style.setProperty('--eraser-progress', `${ratio * 100}%`);
+        sizeRatio;
+    this.control.style.setProperty('--eraser-progress', `${sliderRatio * 100}%`);
     this.control.style.setProperty('--eraser-control-scale', scale.toFixed(3));
     this.syncActiveState();
     this.options.getGame()?.updateEraserPreview();