Merge pull request Kitware#714 from PaulHax/grab-slice

feat: change slice with key and mouse movement

Author: floryst

docs/mouse_controls.md

@@ -9,18 +9,19 @@
 
 ## Slice
 
-| Shortcut    | Action         |
-| ----------- | -------------- |
-| Up arrow    | Next Slice     |
-| Right arrow | Next Slice     |
-| Down array  | Previous Slice |
-| Left array  | Previous Slice |
+| Shortcut            | Action          |
+| ------------------- | --------------- |
+| Up arrow            | Next Slice      |
+| Right arrow         | Next Slice      |
+| Down array          | Previous Slice  |
+| Left array          | Previous Slice  |
+| Alt + mouse up/down | navigate slices |
 
 ## Mouse Controls
 
 | Action       | 2D              | 3D     |
 | ------------ | --------------- | ------ |
-| Left         | grayscale       | rotate |
+| Left         | window level    | rotate |
 | Mid          | pan             | pan    |
 | Right        | zoom            | zoom   |
 | Ctrl + Left  | zoom            | zoom   |

package-lock.json

@@ -70,6 +70,11 @@
             :image-id="currentImageID"
             :view-direction="viewDirection"
           ></vtk-slice-view-slicing-manipulator>
+          <vtk-slice-view-slicing-key-manipulator
+            :view-id="id"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          ></vtk-slice-view-slicing-key-manipulator>
           <vtk-slice-view-window-manipulator
             :view-id="id"
             :image-id="currentImageID"
@@ -179,6 +184,7 @@ import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
+import VtkSliceViewSlicingKeyManipulator from '@/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue';
 import VtkMouseInteractionManipulator from '@/src/components/vtk/VtkMouseInteractionManipulator.vue';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';

src/components/SliceViewer.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { Maybe } from '@/src/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import vtkGatedMouseRangeManipulator from '@/src/vtk/GatedMouseRangeManipulator';
+import { IMouseRangeManipulatorInitialValues } from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { syncRef, useMagicKeys } from '@vueuse/core';
+import { inject, toRefs, unref, watch, computed } from 'vue';
+import { useViewStore } from '@/src/store/views';
+import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  viewDirection: LPSAxisDir;
+  manipulatorConfig?: IMouseRangeManipulatorInitialValues;
+}
+
+const props = defineProps<Props>();
+const { viewId, imageId, viewDirection, manipulatorConfig } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const config = computed(() => {
+  return {
+    button: -1,
+    dragEnabled: false,
+    scrollEnabled: false,
+    ...manipulatorConfig?.value,
+  };
+});
+
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkGatedMouseRangeManipulator,
+  config
+);
+
+rangeManipulator.value.setupMouseMove(view.interactor);
+
+const keys = useMagicKeys();
+const enableGrabSlice = computed(() => keys[actionToKey.value.grabSlice].value);
+watch(
+  enableGrabSlice,
+  (value) => {
+    rangeManipulator.value.setGateEnabled(value);
+  },
+  { immediate: true }
+);
+
+const sliceConfig = useSliceConfig(viewId, imageId);
+useSliceConfigInitializer(viewId, imageId, viewDirection);
+
+const scroll = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'vertical',
+  sliceConfig.range,
+  1,
+  sliceConfig.slice.value
+);
+
+syncRef(scroll, sliceConfig.slice, { immediate: true });
+
+// set just scrolled view as active view
+watch(scroll, () => {
+  const viewStore = useViewStore();
+  if (unref(viewId) !== viewStore.activeViewID) {
+    viewStore.setActiveViewID(unref(viewId));
+  }
+});
+</script>
+
+<template><slot></slot></template>

src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue

@@ -4,7 +4,7 @@ import { useRectangleStore } from '../store/tools/rectangles';
 import { useRulerStore } from '../store/tools/rulers';
 import { usePolygonStore } from '../store/tools/polygons';
 import { useViewStore } from '../store/views';
-import { Action } from '../constants';
+import { Action, NOOP } from '../constants';
 import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
 import { useCurrentImage } from './useCurrentImage';
 import { useSliceConfig } from './useSliceConfig';
@@ -75,14 +75,15 @@ export const ACTION_TO_FUNC = {
 
   nextSlice: changeSlice(1),
   previousSlice: changeSlice(-1),
+  grabSlice: NOOP, // acts as a modifier key rather than immediate effect, so no-op
 
   decrementLabel: applyLabelOffset(-1),
   incrementLabel: applyLabelOffset(1),
 
   deleteCurrentImage: deleteCurrentImage(),
   clearScene: clearScene(),
 
-  mergeNewPolygon: () => {}, // acts as a modifier key rather than immediate effect, so no-op
+  mergeNewPolygon: NOOP, // acts as a modifier key rather than immediate effect, so no-op
 
   showKeyboardShortcuts,
 } as const satisfies Record<Action, () => void>;

src/composables/actions.ts

@@ -283,6 +283,7 @@ export const ACTION_TO_KEY = {
 
   nextSlice: 'arrowdown',
   previousSlice: 'arrowup',
+  grabSlice: 'Alt',
 
   decrementLabel: 'q',
   incrementLabel: 'w',

src/config.ts

@@ -54,17 +54,20 @@ export const ACTIONS = {
   },
 
   nextSlice: {
-    readable: 'Next Slice',
+    readable: 'Next slice',
   },
   previousSlice: {
-    readable: 'Previous Slice',
+    readable: 'Previous slice',
+  },
+  grabSlice: {
+    readable: 'Change slice by holding key and moving mouse up or down',
   },
 
   decrementLabel: {
-    readable: 'Activate previous Label',
+    readable: 'Activate previous label',
   },
   incrementLabel: {
-    readable: 'Activate next Label',
+    readable: 'Activate next label',
   },
 
   deleteCurrentImage: {
@@ -76,7 +79,8 @@ export const ACTIONS = {
   },
 
   mergeNewPolygon: {
-    readable: 'Hold to merge new polygons with overlapping polygons',
+    readable:
+      'Merge new polygons by holding key and finishing an overlapping polygon',
   },
 
   showKeyboardShortcuts: {

src/constants.ts

@@ -0,0 +1,66 @@
+import macro from '@kitware/vtk.js/macro';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+
+function vtkGatedMouseRangeManipulator(publicAPI, model) {
+  model.classHierarchy.push('vtkGatedMouseRangeManipulator');
+
+  model.gateEnabled = true;
+
+  model.mouseMoveListener = null;
+  model.viewContainer = null;
+  model.newInteraction = true;
+
+  const superOnMouseMove = publicAPI.onMouseMove;
+
+  publicAPI.onMouseMove = (interactor, renderer, position) => {
+    if (!model.gateEnabled) {
+      return;
+    }
+    superOnMouseMove(interactor, renderer, position);
+  };
+
+  publicAPI.setGateEnabled = (enabled) => {
+    model.newInteraction = !model.gateEnabled && enabled;
+    model.gateEnabled = enabled;
+    publicAPI.modified();
+  };
+
+  const cleanupListener = () => {
+    model.mouseMoveListenerSubscription?.unsubscribe();
+    model.mouseMoveListenerSubscription = null;
+  };
+
+  publicAPI.setupMouseMove = (interactor) => {
+    cleanupListener();
+    model.mouseMoveListenerSubscription = interactor.onMouseMove((event) => {
+      const invertY = {
+        ...event.position,
+        y: interactor.getView().getSize()[1] - event.position.y,
+      };
+      if (model.newInteraction) {
+        model.newInteraction = false;
+        publicAPI.onButtonDown(interactor, event.pokedRenderer, invertY);
+      }
+      publicAPI.onMouseMove(interactor, event.pokedRenderer, invertY);
+    });
+  };
+
+  publicAPI.delete = macro.chain(publicAPI.delete, cleanupListener);
+}
+
+function extend(publicAPI, model, initialValues = {}) {
+  vtkMouseRangeManipulator.extend(publicAPI, model, initialValues);
+  Object.assign(model, {
+    gateEnabled: true,
+    mouseMoveListener: null,
+    viewContainer: null,
+  });
+  vtkGatedMouseRangeManipulator(publicAPI, model);
+}
+
+export const newInstance = macro.newInstance(
+  extend,
+  'vtkGatedMouseRangeManipulator'
+);
+
+export default { newInstance, extend };