New Feature: Multiplanar Oblique Views

src/components/App.vue

@@ -66,7 +66,7 @@
                 @click="handleSave"
               />
               <div class="my-1 tool-separator" />
-              <v-menu location="right" :close-on-content-click="false">
+              <v-menu location="right" :close-on-content-click="true">
                 <template v-slot:activator="{ props }">
                   <div>
                     <tool-button
@@ -224,6 +224,7 @@ import {
   defineComponent,
   nextTick,
   onMounted,
+  provide,
   Ref,
   ref,
   watch,
@@ -242,6 +243,12 @@ import {
   ImportDataSourcesResult,
   convertSuccessResultToDataSelection,
 } from '@/src/io/import/importDataSources';
+import vtkResliceCursorWidget, {
+  ResliceCursorWidgetState,
+} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import ToolButton from './ToolButton.vue';
 import LayoutGrid from './LayoutGrid.vue';
 import ModulePanel from './ModulePanel.vue';
@@ -275,6 +282,7 @@ import { useWebGLWatchdog } from '../composables/useWebGLWatchdog';
 import { useAppLoadingNotifications } from '../composables/useAppLoadingNotifications';
 import { partition, wrapInArray } from '../utils';
 import { useKeyboardShortcuts } from '../composables/useKeyboardShortcuts';
+import { VTKResliceCursor } from '../constants';
 
 async function loadFiles(
   sources: DataSource[],
@@ -365,6 +373,7 @@ export default defineComponent({
     useKeyboardShortcuts();
 
     const { runAsLoading } = useAppLoadingNotifications();
+    const { currentImageData, currentImageMetadata } = useCurrentImage();
 
     // --- layout --- //
 
@@ -391,6 +400,62 @@ export default defineComponent({
       }
     });
 
+    // --- ResliceCursorWidget --- //
+    // Construct the common instance of vtkResliceCursorWidget and provide it
+    // to all the child ObliqueView components.
+    const resliceCursor = vtkResliceCursorWidget.newInstance({
+      scaleInPixels: true,
+      rotationHandlePosition: 0.75,
+    }) as vtkResliceCursorWidget;
+    provide(VTKResliceCursor, resliceCursor);
+
+    // TODO: Move this to a store/global-state for reslicing.
+    // Orient the planes of the vtkResliceCursorWidget to the orientation
+    // of the currently set image.
+    const resliceCursorState =
+      resliceCursor.getWidgetState() as ResliceCursorWidgetState;
+
+    // Temporary fix to disable race between PanTool and ResliceCursorWidget
+    resliceCursorState.setScrollingMethod(-1);
+
+    watch(currentImageData, (image) => {
+      if (image && resliceCursor) {
+        resliceCursor.setImage(image);
+        // Reset to default plane values before transforming based on current image-data.
+        resliceCursorState.setPlanes({
+          [ViewTypes.YZ_PLANE]: {
+            normal: [1, 0, 0],
+            viewUp: [0, 0, 1],
+          },
+          [ViewTypes.XZ_PLANE]: {
+            normal: [0, -1, 0],
+            viewUp: [0, 0, 1],
+          },
+          [ViewTypes.XY_PLANE]: {
+            normal: [0, 0, -1],
+            viewUp: [0, -1, 0],
+          },
+        });
+        const planes = resliceCursorState.getPlanes();
+        if (currentImageMetadata.value) {
+          planes[ViewTypes.XY_PLANE].normal = currentImageMetadata.value
+            .lpsOrientation.Inferior as Vector3;
+          planes[ViewTypes.XY_PLANE].viewUp = currentImageMetadata.value
+            .lpsOrientation.Anterior as Vector3;
+
+          planes[ViewTypes.XZ_PLANE].normal = currentImageMetadata.value
+            .lpsOrientation.Anterior as Vector3;
+          planes[ViewTypes.XZ_PLANE].viewUp = currentImageMetadata.value
+            .lpsOrientation.Superior as Vector3;
+
+          planes[ViewTypes.YZ_PLANE].normal = currentImageMetadata.value
+            .lpsOrientation.Left as Vector3;
+          planes[ViewTypes.YZ_PLANE].viewUp = currentImageMetadata.value
+            .lpsOrientation.Superior as Vector3;
+        }
+      }
+    });
+
     // --- file handling --- //
 
     async function openFiles(files: FileList | null) {

src/components/LayoutGrid.vue

@@ -22,6 +22,8 @@
 import { Component, computed, defineComponent, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
 import VtkTwoView from './VtkTwoView.vue';
+import VtkObliqueView from './VtkObliqueView.vue';
+import VtkObliqueThreeView from './VtkObliqueThreeView.vue';
 import VtkThreeView from './VtkThreeView.vue';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewStore } from '../store/views';
@@ -30,6 +32,8 @@ import { ViewType } from '../types/views';
 const TYPE_TO_COMPONENT: Record<ViewType, Component> = {
   '2D': VtkTwoView,
   '3D': VtkThreeView,
+  Oblique: VtkObliqueView,
+  Oblique3D: VtkObliqueThreeView,
 };
 
 export default defineComponent({

src/components/ToolStrip.vue

@@ -45,7 +45,7 @@
         icon="mdi-crosshairs"
         name="Crosshairs"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       />
     </groupable-item>
@@ -64,7 +64,7 @@
         icon="mdi-brush"
         name="Paint"
         :active="active"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       >
         <paint-controls />
@@ -79,7 +79,7 @@
         name="Rectangle"
         :mobileOnlyMenu="true"
         :active="active"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       >
         <rectangle-controls />
@@ -91,7 +91,7 @@
         name="Polygon"
         :mobileOnlyMenu="true"
         :active="active"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       >
         <polygon-controls />
@@ -103,7 +103,7 @@
         name="Ruler"
         :mobileOnlyMenu="true"
         :active="active"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       >
         <ruler-controls />
@@ -116,27 +116,32 @@
         icon="mdi-crop"
         name="Crop"
         :active="active"
-        :disabled="noCurrentImage"
+        :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
       >
         <crop-controls />
       </menu-tool-button>
     </groupable-item>
+    <div class="my-1 tool-separator" />
+    <reset-views />
   </item-group>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import { onKeyDown } from '@vueuse/core';
 import { Tools } from '@/src/store/tools/types';
 import ToolButton from './ToolButton.vue';
 import ItemGroup from './ItemGroup.vue';
 import GroupableItem from './GroupableItem.vue';
 import { useDatasetStore } from '../store/datasets';
 import { useToolStore } from '../store/tools';
+import { useViewStore } from '../store/views';
 import PaintControls from './PaintControls.vue';
 import MenuToolButton from './MenuToolButton.vue';
 import CropControls from './tools/crop/CropControls.vue';
+import ResetViews from './tools/ResetViews.vue';
 import RulerControls from './RulerControls.vue';
 import RectangleControls from './RectangleControls.vue';
 import PolygonControls from './PolygonControls.vue';
@@ -150,6 +155,7 @@ export default defineComponent({
     GroupableItem,
     PaintControls,
     CropControls,
+    ResetViews,
     RulerControls,
     RectangleControls,
     PolygonControls,
@@ -158,9 +164,14 @@ export default defineComponent({
   setup() {
     const dataStore = useDatasetStore();
     const toolStore = useToolStore();
+    const viewStore = useViewStore();
 
     const noCurrentImage = computed(() => !dataStore.primaryDataset);
     const currentTool = computed(() => toolStore.currentTool);
+    const { layout: currentLayout } = storeToRefs(viewStore);
+    const isObliqueLayout = computed(
+      () => currentLayout.value?.name === 'Oblique View'
+    );
 
     const paintMenu = ref(false);
     const cropMenu = ref(false);
@@ -176,6 +187,7 @@ export default defineComponent({
       currentTool,
       setCurrentTool: toolStore.setCurrentTool,
       noCurrentImage,
+      isObliqueLayout,
       Tools,
       paintMenu,
       cropMenu,