feat: first attempt at bringing oblique views back

Author: floryst

src/components/ControlsStripTools.vue

@@ -142,6 +142,7 @@ import PolygonControls from '@/src/components/PolygonControls.vue';
 import WindowLevelControls from '@/src/components/tools/windowing/WindowLevelControls.vue';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useViewStore } from '@/src/store/views';
 
 export default defineComponent({
   components: {
@@ -158,11 +159,16 @@ export default defineComponent({
   },
   setup() {
     const toolStore = useToolStore();
+    const viewStore = useViewStore();
 
     const { currentImageID } = useCurrentImage();
     const noCurrentImage = computed(() => !currentImageID.value);
     const currentTool = computed(() => toolStore.currentTool);
-    const isObliqueLayout = computed(() => false);
+    const isObliqueLayout = computed(() => {
+      if (!viewStore.activeView) return false;
+      const view = viewStore.viewByID[viewStore.activeView];
+      return view.type === 'Oblique';
+    });
 
     const paintMenu = ref(false);
     const cropMenu = ref(false);

src/components/MultiObliqueSliceViewer.vue

@@ -7,7 +7,7 @@
           class="vtk-view"
           ref="vtkView"
           data-testid="vtk-view"
-          :view-id="id"
+          :view-id="viewId"
           :image-id="currentImageID"
           :view-direction="viewDirection"
           :view-up="viewUp"
@@ -41,7 +41,6 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { LPSAxis, LPSAxisDir } from '@/src/types/lps';
 import VtkVolumeView from '@/src/components/vtk/VtkVolumeView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
-import { LayoutViewProps } from '@/src/types';
 import VtkBaseObliqueSliceRepresentation from '@/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue';
 import VtkImageOutlineRepresentation from '@/src/components/vtk/VtkImageOutlineRepresentation.vue';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
@@ -59,7 +58,8 @@ interface SliceSpec {
   axis: LPSAxis;
 }
 
-interface Props extends LayoutViewProps {
+interface Props {
+  viewId: string;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
   slices: SliceSpec[];
@@ -69,15 +69,9 @@ const vtkView = ref<VtkViewApi>();
 
 const props = defineProps<Props>();
 
-const {
-  id: viewId,
-  type: viewType,
-  viewDirection,
-  viewUp,
-  slices,
-} = toRefs(props);
+const { viewId, viewDirection, viewUp, slices } = toRefs(props);
 
-useViewAnimationListener(vtkView, viewId, viewType);
+useViewAnimationListener(vtkView, viewId, 'Oblique');
 
 // base image
 const { currentImageID } = useCurrentImage();
@@ -96,7 +90,7 @@ const obliqueSliceProps = computed(() => {
     );
     const outlineColor = vec3.scale(
       [0, 0, 0],
-      OBLIQUE_OUTLINE_COLORS[sliceSpec.viewID],
+      OBLIQUE_OUTLINE_COLORS[`Oblique${sliceSpec.axis}`],
       1 / 255
     ) as RGBColor;
     return {

src/components/ObliqueSliceViewer.vue

@@ -7,7 +7,7 @@
           class="vtk-view"
           ref="vtkView"
           data-testid="vtk-view"
-          :view-id="id"
+          :view-id="viewId"
           :image-id="currentImageID"
           :view-direction="viewDirection"
           :view-up="viewUp"
@@ -36,30 +36,30 @@
             :manipulator-props="{ button: 3 }"
           ></vtk-mouse-interaction-manipulator>
           <vtk-slice-view-window-manipulator
-            :view-id="id"
+            :view-id="viewId"
             :image-id="currentImageID"
             :manipulator-config="windowingManipulatorProps"
           ></vtk-slice-view-window-manipulator>
           <slice-viewer-overlay
-            :view-id="id"
+            :view-id="viewId"
             :image-id="currentImageID"
           ></slice-viewer-overlay>
           <vtk-base-oblique-slice-representation
-            :view-id="id"
+            :view-id="viewId"
             :image-id="currentImageID"
             :plane-normal="planeNormal"
             :plane-origin="planeOrigin"
           ></vtk-base-oblique-slice-representation>
           <vtk-image-outline-representation
-            :view-id="id"
+            :view-id="viewId"
             :image-id="currentImageID"
             :plane-normal="planeNormal"
             :plane-origin="planeOrigin"
             :thickness="4"
             :color="outlineColor"
           ></vtk-image-outline-representation>
           <reslice-cursor-tool
-            :view-id="id"
+            :view-id="viewId"
             :view-direction="viewDirection"
           ></reslice-cursor-tool>
           <slot></slot>
@@ -84,7 +84,6 @@ import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import useResliceCursorStore, {
   mapAxisToViewType,
 } from '@/src/store/reslice-cursor';
-import { LayoutViewProps } from '@/src/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { batchForNextTask } from '@/src/utils/batchForNextTask';
@@ -104,7 +103,9 @@ import { storeToRefs } from 'pinia';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 
-interface Props extends LayoutViewProps {
+interface Props {
+  viewId: string;
+  outlineType: string;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
 }
@@ -113,11 +114,11 @@ const vtkView = ref<VtkViewApi>();
 
 const props = defineProps<Props>();
 
-const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
+const { viewId, outlineType, viewDirection, viewUp } = toRefs(props);
 const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
 useWebGLWatchdog(vtkView);
-useViewAnimationListener(vtkView, viewId, viewType);
+useViewAnimationListener(vtkView, viewId, 'Oblique');
 
 // active tool
 const { currentTool } = storeToRefs(useToolStore());
@@ -261,7 +262,7 @@ const outlineColor = computed(
   () =>
     vec3.scale(
       [0, 0, 0],
-      OBLIQUE_OUTLINE_COLORS[viewId.value],
+      OBLIQUE_OUTLINE_COLORS[outlineType.value],
       1 / 255
     ) as RGBColor
 );

src/components/ObliqueViewer.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="d-flex flex-row flex-grow-1">
+    <div class="d-flex flex-column flex-grow-1">
+      <div class="d-flex flex-grow-1" style="border-bottom: 1px solid gray">
+        <ObliqueSliceViewer
+          :view-id="`${viewId}-coronal`"
+          outline-type="ObliqueCoronal"
+          view-direction="Posterior"
+          view-up="Superior"
+        />
+      </div>
+      <div class="d-flex flex-grow-1" style="border-right: 1px solid gray">
+        <ObliqueSliceViewer
+          :view-id="`${viewId}-sagittal`"
+          outline-type="ObliqueSagittal"
+          view-direction="Right"
+          view-up="Superior"
+        />
+      </div>
+    </div>
+    <div class="d-flex flex-column flex-grow-1">
+      <div class="d-flex flex-grow-1" style="border-left: 1px solid gray">
+        <MultiObliqueSliceViewer
+          :view-id="`${viewId}-multi-oblique`"
+          view-direction="Posterior"
+          view-up="Superior"
+          :slices="[
+            {
+              viewID: `${viewId}-coronal`,
+              axis: 'Coronal',
+            },
+            {
+              viewID: `${viewId}-sagittal`,
+              axis: 'Sagittal',
+            },
+            {
+              viewID: `${viewId}-axial`,
+              axis: 'Axial',
+            },
+          ]"
+        />
+      </div>
+      <div class="d-flex flex-grow-1" style="border-top: 1px solid gray">
+        <ObliqueSliceViewer
+          :view-id="`${viewId}-axial`"
+          outline-type="ObliqueAxial"
+          view-direction="Superior"
+          view-up="Anterior"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MultiObliqueSliceViewer from '@/src/components/MultiObliqueSliceViewer.vue';
+import ObliqueSliceViewer from '@/src/components/ObliqueSliceViewer.vue';
+import useResliceCursorStore from '@/src/store/reslice-cursor';
+
+interface Props {
+  viewId: string;
+}
+
+defineProps<Props>();
+
+// initialize the reslice cursor store
+useResliceCursorStore();
+</script>

src/config.ts

@@ -28,6 +28,21 @@ export const InitViewIDs: Record<string, string> = {
 
 export const getAvailableViews = () => {
   const list: ViewInfoInit[] = [
+    {
+      name: 'Oblique',
+      type: 'Oblique',
+      dataID: null,
+      options: {},
+    },
+    {
+      name: 'Volume',
+      type: '3D',
+      dataID: null,
+      options: {
+        viewDirection: 'Posterior',
+        viewUp: 'Superior',
+      },
+    },
     {
       name: 'Coronal',
       type: '2D',
@@ -52,15 +67,6 @@ export const getAvailableViews = () => {
         orientation: 'Axial',
       },
     },
-    {
-      name: 'Volume',
-      type: '3D',
-      dataID: null,
-      options: {
-        viewDirection: 'Posterior',
-        viewUp: 'Superior',
-      },
-    },
   ];
 
   const byName = list.reduce(
@@ -75,7 +81,7 @@ const availableViews = getAvailableViews();
 
 export const DefaultLayoutSlots: ViewInfoInit[] = [
   availableViews.byName.Coronal,
-  availableViews.byName.Volume,
+  availableViews.byName.Oblique,
   availableViews.byName.Sagittal,
   availableViews.byName.Axial,
 ];

src/core/viewTypes.ts

@@ -5,15 +5,16 @@ import SliceViewer from '@/src/components/SliceViewer.vue';
 import VolumeViewer from '@/src/components/VolumeViewer.vue';
 import { ViewInfo } from '@/src/types/views';
 import { Maybe } from '@/src/types';
+import ObliqueViewer from '@/src/components/ObliqueViewer.vue';
 
 export function getComponentFromViewInfo(info: ViewInfo): Maybe<Component> {
   switch (info.type) {
     case '2D':
       return SliceViewer;
     case '3D':
       return VolumeViewer;
-    // case 'Oblique':
-    //
+    case 'Oblique':
+      return ObliqueViewer;
     default:
       return null;
   }

src/types/views.ts

@@ -6,7 +6,7 @@ import {
 import { Maybe } from '@/src/types';
 import { LPSAxis, LPSAxisDir } from '@/src/types/lps';
 
-export type ViewType = '2D' | '3D' | 'Oblique2D' | 'Oblique3D';
+export type ViewType = '2D' | '3D' | 'Oblique';
 
 interface GenericViewInfo {
   id: string;
@@ -31,8 +31,16 @@ export interface ViewInfo3D extends GenericViewInfo {
   };
 }
 
-export type ViewInfo = ViewInfo2D | ViewInfo3D;
-export type ViewInfoInit = Omit<ViewInfo2D, 'id'> | Omit<ViewInfo3D, 'id'>;
+export interface ViewInfoOblique extends GenericViewInfo {
+  type: 'Oblique';
+  options: {};
+}
+
+export type ViewInfo = ViewInfo2D | ViewInfo3D | ViewInfoOblique;
+export type ViewInfoInit = Omit<
+  ViewInfo2D | ViewInfo3D | ViewInfoOblique,
+  'id'
+>;
 
 export interface ViewSpec {
   viewType: string;