From 86d72bfb1b60ee2249f7698433b66bb11b42306f Mon Sep 17 00:00:00 2001
From: Laurent Chauvin <lchauvin@neurorx.com>
Date: Mon, 28 Oct 2024 13:45:03 -0400
Subject: [PATCH 1/2] feat(Slice): Use keyboard to change slices

---
 src/composables/actions.ts | 22 ++++++++++++++++++++++
 src/config.ts              |  3 +++
 src/constants.ts           |  7 +++++++
 3 files changed, 32 insertions(+)

diff --git a/src/composables/actions.ts b/src/composables/actions.ts
index beb0a9a3..b9a7de1e 100644
--- a/src/composables/actions.ts
+++ b/src/composables/actions.ts
@@ -3,8 +3,11 @@ import { Tools } from '../store/tools/types';
 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 { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
+import { useCurrentImage } from './useCurrentImage';
+import { useSliceConfig } from './useSliceConfig';
 
 const applyLabelOffset = (offset: number) => () => {
   const toolToStore = {
@@ -36,6 +39,22 @@ const showKeyboardShortcuts = () => {
   keyboardStore.settingsOpen = !keyboardStore.settingsOpen;
 };
 
+const nextSlice = () => () => {
+  const { currentImageID } = useCurrentImage();
+  const { activeViewID } = useViewStore();
+
+  const { slice: currentSlice } = useSliceConfig(activeViewID, currentImageID);
+  currentSlice.value += 1;
+};
+
+const previousSlice = () => () => {
+  const { currentImageID } = useCurrentImage();
+  const { activeViewID } = useViewStore();
+
+  const { slice: currentSlice } = useSliceConfig(activeViewID, currentImageID);
+  currentSlice.value -= 1;
+};
+
 export const ACTION_TO_FUNC = {
   windowLevel: setTool(Tools.WindowLevel),
   pan: setTool(Tools.Pan),
@@ -48,6 +67,9 @@ export const ACTION_TO_FUNC = {
   polygon: setTool(Tools.Polygon),
   select: setTool(Tools.Select),
 
+  nextSlice: nextSlice(),
+  previousSlice: previousSlice(),
+
   decrementLabel: applyLabelOffset(-1),
   incrementLabel: applyLabelOffset(1),
 
diff --git a/src/config.ts b/src/config.ts
index d0511aa9..d2e95b39 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -281,6 +281,9 @@ export const ACTION_TO_KEY = {
   mergeNewPolygon: 'Shift',
   select: 's',
 
+  nextSlice: 'arrowdown',
+  previousSlice: 'arrowup',
+
   decrementLabel: 'q',
   incrementLabel: 'w',
 
diff --git a/src/constants.ts b/src/constants.ts
index 8cb5403d..fd4f54d5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -53,6 +53,13 @@ export const ACTIONS = {
     readable: 'Activate Select tool',
   },
 
+  nextSlice: {
+    readable: 'Next Slice',
+  },
+  previousSlice: {
+    readable: 'Previous Slice',
+  },
+
   decrementLabel: {
     readable: 'Activate previous Label',
   },

From a38efebeb6b0319edefc98ea754065eb19896151 Mon Sep 17 00:00:00 2001
From: Laurent Chauvin <lchauvin@neurorx.com>
Date: Thu, 16 Jan 2025 11:38:35 -0500
Subject: [PATCH 2/2] fix(Slice): Refactor code and set active view when mouse
 scrolling

---
 .../vtk/VtkSliceViewSlicingManipulator.vue       | 10 +++++++++-
 src/composables/actions.ts                       | 16 ++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/vtk/VtkSliceViewSlicingManipulator.vue b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
index 11c8fb91..32972155 100644
--- a/src/components/vtk/VtkSliceViewSlicingManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
@@ -11,7 +11,8 @@ import vtkMouseRangeManipulator, {
 } from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import { syncRef } from '@vueuse/core';
-import { inject, toRefs, computed } from 'vue';
+import { inject, toRefs, unref, watch, computed } from 'vue';
+import { useViewStore } from '@/src/store/views';
 
 interface Props {
   viewId: string;
@@ -58,6 +59,13 @@ const scroll = useMouseRangeManipulatorListener(
   sliceConfig.slice.value
 );
 
+watch(scroll, () => {
+  const viewStore = useViewStore();
+  if (unref(viewId) !== viewStore.activeViewID) {
+    viewStore.setActiveViewID(unref(viewId));
+  }
+});
+
 syncRef(scroll, sliceConfig.slice, { immediate: true });
 </script>
 
diff --git a/src/composables/actions.ts b/src/composables/actions.ts
index b9a7de1e..faa91e25 100644
--- a/src/composables/actions.ts
+++ b/src/composables/actions.ts
@@ -39,20 +39,12 @@ const showKeyboardShortcuts = () => {
   keyboardStore.settingsOpen = !keyboardStore.settingsOpen;
 };
 
-const nextSlice = () => () => {
+const changeSlice = (offset: number) => () => {
   const { currentImageID } = useCurrentImage();
   const { activeViewID } = useViewStore();
 
   const { slice: currentSlice } = useSliceConfig(activeViewID, currentImageID);
-  currentSlice.value += 1;
-};
-
-const previousSlice = () => () => {
-  const { currentImageID } = useCurrentImage();
-  const { activeViewID } = useViewStore();
-
-  const { slice: currentSlice } = useSliceConfig(activeViewID, currentImageID);
-  currentSlice.value -= 1;
+  currentSlice.value += offset;
 };
 
 export const ACTION_TO_FUNC = {
@@ -67,8 +59,8 @@ export const ACTION_TO_FUNC = {
   polygon: setTool(Tools.Polygon),
   select: setTool(Tools.Select),
 
-  nextSlice: nextSlice(),
-  previousSlice: previousSlice(),
+  nextSlice: changeSlice(1),
+  previousSlice: changeSlice(-1),
 
   decrementLabel: applyLabelOffset(-1),
   incrementLabel: applyLabelOffset(1),