feat(KeyboardShortcut): Add left and right arrow to cycle through images

src/composables/actions.ts

@@ -5,6 +5,7 @@ import { useRulerStore } from '../store/tools/rulers';
 import { usePolygonStore } from '../store/tools/polygons';
 import { Action } from '../constants';
 import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
+import { useDatasetStore } from '../store/datasets';
 
 const applyLabelOffset = (offset: number) => () => {
   const toolToStore = {
@@ -36,6 +37,14 @@ const showKeyboardShortcuts = () => {
   keyboardStore.settingsOpen = true;
 };
 
+const changeNextImage = () => () => {
+  useDatasetStore().changeNextImage();
+};
+
+const changePreviousImage = () => () => {
+  useDatasetStore().changePreviousImage();
+};
+
 export const ACTION_TO_FUNC = {
   windowLevel: setTool(Tools.WindowLevel),
   pan: setTool(Tools.Pan),
@@ -51,5 +60,8 @@ export const ACTION_TO_FUNC = {
   decrementLabel: applyLabelOffset(-1),
   incrementLabel: applyLabelOffset(1),
 
+  changeNextImage: changeNextImage(),
+  changePreviousImage: changePreviousImage(),
+
   showKeyboardShortcuts,
 } as const satisfies Record<Action, () => void>;

src/config.ts

@@ -301,5 +301,8 @@ export const ACTION_TO_KEY = {
   decrementLabel: 'q',
   incrementLabel: 'w',
 
+  changeNextImage: 'ArrowRight',
+  changePreviousImage: 'ArrowLeft',
+
   showKeyboardShortcuts: '?',
 } satisfies Record<Action, string>;

src/constants.ts

@@ -60,6 +60,13 @@ export const ACTIONS = {
     readable: 'Activate next Label',
   },
 
+  changeNextImage: {
+    readable: 'Next Image',
+  },
+  changePreviousImage: {
+    readable: 'Previous Image',
+  },
+
   showKeyboardShortcuts: {
     readable: 'Show keyboard shortcuts dialog',
   },

src/store/datasets.ts

@@ -57,6 +57,37 @@ export const useDatasetStore = defineStore('dataset', () => {
     }
   }
 
+  function changeNextImage() {
+    if (!primaryImageID.value) return;
+
+    const currentImageID = primaryImageID.value;
+    const { idList } = imageStore;
+    const maxIdx = idList.length - 1;
+
+    let currentIdx = idList.indexOf(currentImageID);
+    if (currentIdx >= maxIdx) {
+      // Reset Idx to -1 as it will be increased later
+      currentIdx = -1;
+    }
+
+    setPrimarySelection(idList[currentIdx + 1]);
+  }
+
+  function changePreviousImage() {
+    if (!primaryImageID.value) return;
+
+    const currentImageID = primaryImageID.value;
+    const { idList } = imageStore;
+    const maxIdx = idList.length - 1;
+
+    let currentIdx = idList.indexOf(currentImageID);
+    if (currentIdx <= 0) {
+      currentIdx = maxIdx + 1;
+    }
+
+    setPrimarySelection(idList[currentIdx - 1]);
+  }
+
   async function serialize(stateFile: StateFile) {
     await dicomStore.serialize(stateFile);
     await imageStore.serialize(stateFile);
@@ -87,6 +118,8 @@ export const useDatasetStore = defineStore('dataset', () => {
     primaryDataset,
     idsAsSelections,
     setPrimarySelection,
+    changeNextImage,
+    changePreviousImage,
     serialize,
     remove,
   };