Merge pull request #800 from Kitware/paint-hotkeys

Paint hotkeys: eraser and brush size

Author: PaulHax

src/components/AboutBox.vue

@@ -127,6 +127,16 @@
             https://github.com/Kitware/VolView/issues
           </a>
         </li>
+        <li>
+          <span>Submit feedback: </span>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://volview.kitware.com/feedback/"
+          >
+            https://volview.kitware.com/feedback/
+          </a>
+        </li>
       </ul>
       <h2>Version Info</h2>
       <v-divider class="mb-2" />

src/components/AppBar.vue

@@ -5,11 +5,13 @@ import CloseableDialog from '@/src/components/CloseableDialog.vue';
 import AboutBox from '@/src/components/AboutBox.vue';
 import VolViewFullLogo from '@/src/components/icons/VolViewFullLogo.vue';
 import VolViewLogo from '@/src/components/icons/VolViewLogo.vue';
+import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
 
 const emit = defineEmits(['click:left-menu']);
 
 const { mobile } = useDisplay();
 const aboutBoxDialog = ref(false);
+const keyboardStore = useKeyboardShortcutsStore();
 </script>
 
 <template>
@@ -24,12 +26,11 @@ const aboutBoxDialog = ref(false);
       icon
       :rounded="0"
       class="toolbar-button"
-      href="https://volview.kitware.com/feedback/"
-      target="_blank"
+      @click="keyboardStore.settingsOpen = !keyboardStore.settingsOpen"
     >
-      <v-icon icon="mdi-comment-question-outline"></v-icon>
+      <v-icon icon="mdi-keyboard"></v-icon>
       <v-tooltip activator="parent" location="bottom">
-        Ask Question/Submit Feedback
+        Keyboard Shortcuts
       </v-tooltip>
     </v-btn>
     <v-btn

src/components/ControlsModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <closeable-dialog v-model="keyboardStore.settingsOpen">
+  <closeable-dialog v-model="keyboardStore.settingsOpen" :close-offset-x="24">
     <v-card class="pa-4">
       <div class="text-h4 pb-2">View Controls</div>
       <v-table>

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

@@ -9,6 +9,8 @@ import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
 import { useCurrentImage } from './useCurrentImage';
 import { useSliceConfig } from './useSliceConfig';
 import { useDatasetStore } from '../store/datasets';
+import { usePaintToolStore } from '../store/tools/paint';
+import { PaintMode } from '../core/tools/paint';
 
 const applyLabelOffset = (offset: number) => () => {
   const toolToStore = {
@@ -35,6 +37,11 @@ const setTool = (tool: Tools) => () => {
   useToolStore().setCurrentTool(tool);
 };
 
+const startPaintInMode = (mode: PaintMode) => () => {
+  useToolStore().setCurrentTool(Tools.Paint);
+  usePaintToolStore().setMode(mode);
+};
+
 const showKeyboardShortcuts = () => {
   const keyboardStore = useKeyboardShortcutsStore();
   keyboardStore.settingsOpen = !keyboardStore.settingsOpen;
@@ -61,13 +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: setTool(Tools.Paint),
-  brushSize: NOOP, // act as modifier key rather than immediate effect, so no-op
+  paint: startPaintInMode(PaintMode.CirclePaint),
+  paintEraser: startPaintInMode(PaintMode.Erase),
+  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

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

src/constants.ts

@@ -40,9 +40,18 @@ export const ACTIONS = {
   paint: {
     readable: 'Activate Paint tool',
   },
-  brushSize: {
+  paintEraser: {
+    readable: 'Activate Paint tool with eraser',
+  },
+  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',
   },