feat: add keyboard shortcuts to change paint brush size

[ and ] decrease and increase brush size.

Author: PaulHax

src/components/tools/paint/PaintWidget2D.vue

@@ -174,7 +174,7 @@ export default defineComponent({
     // Brush size scroll wheel control with customizable modifier key
     const keys = useMagicKeys();
     const enableBrushSizeAdjustment = computed(
-      () => keys[actionToKey.value.brushSize].value
+      () => keys[actionToKey.value.brushSizeModifier].value
     );
 
     const handleWheelEvent = (event: WheelEvent) => {

src/composables/actions.ts

@@ -68,14 +68,22 @@ const deleteCurrentImage = () => () => {
   }
 };
 
+const changeBrushSize = (delta: number) => () => {
+  const paintStore = usePaintToolStore();
+  const newSize = Math.max(1, paintStore.brushSize + delta);
+  paintStore.setBrushSize(newSize);
+};
+
 export const ACTION_TO_FUNC = {
   windowLevel: setTool(Tools.WindowLevel),
   pan: setTool(Tools.Pan),
   zoom: setTool(Tools.Zoom),
   ruler: setTool(Tools.Ruler),
   paint: startPaintInMode(PaintMode.CirclePaint),
   paintEraser: startPaintInMode(PaintMode.Erase),
-  brushSize: NOOP, // act as modifier key rather than immediate effect, so no-op
+  brushSizeModifier: NOOP, // act as modifier key rather than immediate effect, so no-op
+  decreaseBrushSize: changeBrushSize(-1),
+  increaseBrushSize: changeBrushSize(1),
   rectangle: setTool(Tools.Rectangle),
   crosshairs: setTool(Tools.Crosshairs),
   temporaryCrosshairs: NOOP, // behavior implemented elsewhere

src/config.ts

@@ -209,7 +209,9 @@ export const ACTION_TO_KEY = {
   ruler: 'm',
   paint: 'p',
   paintEraser: 'e',
-  brushSize: 'ctrl',
+  brushSizeModifier: 'ctrl',
+  decreaseBrushSize: '[',
+  increaseBrushSize: ']',
   rectangle: 'r',
   crosshairs: 'c',
   temporaryCrosshairs: 'shift-c',

src/constants.ts

@@ -43,9 +43,15 @@ export const ACTIONS = {
   paintEraser: {
     readable: 'Activate Paint tool with eraser',
   },
-  brushSize: {
+  brushSizeModifier: {
     readable: 'Change brush size by holding key and scrolling',
   },
+  decreaseBrushSize: {
+    readable: 'Decrease brush size',
+  },
+  increaseBrushSize: {
+    readable: 'Increase brush size',
+  },
   rectangle: {
     readable: 'Activate Rectangle tool',
   },