feat(WindowLevelTool): Add an option to reset window/level values

src/components/ToolStrip.vue

@@ -5,17 +5,16 @@
     @update:model-value="setCurrentTool($event)"
   >
     <div class="my-1 tool-separator" />
-    <groupable-item
-      v-slot:default="{ active, toggle }"
-      :value="Tools.WindowLevel"
-    >
-      <tool-button
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.WindowLevel">
+      <menu-tool-button
         icon="mdi-circle-half-full"
         name="Window & Level"
-        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :active="active"
         :disabled="noCurrentImage"
         @click="toggle"
-      />
+      >
+        <window-level-controls />
+      </menu-tool-button>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Pan">
       <tool-button
@@ -138,6 +137,7 @@ import CropControls from './tools/crop/CropControls.vue';
 import RulerControls from './RulerControls.vue';
 import RectangleControls from './RectangleControls.vue';
 import PolygonControls from './PolygonControls.vue';
+import WindowLevelControls from './tools/windowing/WindowLevelControls.vue';
 
 export default defineComponent({
   components: {
@@ -150,6 +150,7 @@ export default defineComponent({
     RulerControls,
     RectangleControls,
     PolygonControls,
+    WindowLevelControls,
   },
   setup() {
     const dataStore = useDatasetStore();
@@ -160,10 +161,12 @@ export default defineComponent({
 
     const paintMenu = ref(false);
     const cropMenu = ref(false);
+    const windowingMenu = ref(false);
 
     onKeyDown('Escape', () => {
       paintMenu.value = false;
       cropMenu.value = false;
+      windowingMenu.value = false;
     });
 
     return {
@@ -173,6 +176,7 @@ export default defineComponent({
       Tools,
       paintMenu,
       cropMenu,
+      windowingMenu,
     };
   },
 });

src/components/VtkTwoView.vue

@@ -199,7 +199,7 @@ import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
-import WindowLevelTool from './tools/WindowLevelTool.vue';
+import WindowLevelTool from './tools/windowing/WindowLevelTool.vue';
 import SliceScrollTool from './tools/SliceScrollTool.vue';
 import PanTool from './tools/PanTool.vue';
 import ZoomTool from './tools/ZoomTool.vue';

src/components/tools/windowing/WindowLevelControls.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ToolButton from '@/src/components/ToolButton.vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import useWindowingStore from '@/src/store/view-configs/windowing';
+import { useViewStore } from '@/src/store/views';
+
+export default defineComponent({
+  components: {
+    ToolButton,
+  },
+  setup() {
+    const { currentImageID } = useCurrentImage();
+    const windowingStore = useWindowingStore();
+    const viewStore = useViewStore();
+
+    const resetWindowLevel = () => {
+      const imageID = currentImageID.value;
+      if (imageID) {
+        // Get the relevant view ids
+        const viewIDs = viewStore.viewIDs.filter((viewID) =>
+          !!windowingStore.getConfig(viewID, imageID)
+        );
+        // Reset the window/level for all views
+        viewIDs.map((viewID) =>
+          windowingStore.resetWindowLevel(viewID, imageID)
+        );
+      }
+    };
+
+    return {
+      resetWindowLevel,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card dark>
+    <tool-button
+      size="40"
+      icon="mdi-restore"
+      name="Reset Window & Level"
+      @click="resetWindowLevel"
+    />
+  </v-card>
+</template>