feat(Slice): Use keyboard to change slices of the active view

src/components/LayoutGrid.vue

@@ -13,6 +13,7 @@
           :id="item.id"
           :type="item.viewType"
           v-bind="item.props"
+          @focus="onFocusView(item.id!, item.viewType!)"
         />
       </div>
     </div>
@@ -28,6 +29,13 @@ import { useViewStore } from '../store/views';
 
 export default defineComponent({
   name: 'LayoutGrid',
+  methods: {
+    onFocusView(id: string, type: string) {
+      if (type === '2D') {
+        useViewStore().setActiveViewID(id);
+      }
+    },
+  },
   props: {
     layout: {
       type: Object as PropType<Layout>,

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),
 

src/config.ts

@@ -281,6 +281,9 @@ export const ACTION_TO_KEY = {
   mergeNewPolygon: 'Shift',
   select: 's',
 
+  nextSlice: 'arrowdown',
+  previousSlice: 'arrowup',
+
   decrementLabel: 'q',
   incrementLabel: 'w',
 

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',
   },

src/store/views.ts

@@ -12,6 +12,7 @@ import {
 interface State {
   layout: Layout;
   viewSpecs: Record<string, ViewSpec>;
+  activeViewID: string;
 }
 
 export const useViewStore = defineStore('view', {
@@ -21,13 +22,17 @@ export const useViewStore = defineStore('view', {
       items: [],
     },
     viewSpecs: structuredClone(InitViewSpecs),
+    activeViewID: '',
   }),
   getters: {
     viewIDs(state) {
       return Object.keys(state.viewSpecs);
     },
   },
   actions: {
+    setActiveViewID(id: string) {
+      this.activeViewID = id;
+    },
     addView(id: string) {
       if (!(id in this.viewSpecs)) {
         this.viewSpecs[id] = structuredClone(DefaultViewSpec);