feat(ObliqueView): add ResliceCursorWidget to control oblique views

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.321.1",
-    "@kitware/vtk.js": "^27.4.6",
+    "@kitware/vtk.js": "../vtk-js/dist/esm",
     "@sentry/vue": "^7.54.0",
     "@vueuse/core": "^8.5.0",
     "@vueuse/shared": "^9.2.0",

src/components/LayoutGrid.vue

@@ -15,14 +15,19 @@
 </template>
 
 <script lang="ts">
-import { Component, computed, defineComponent, PropType, toRefs } from 'vue';
+import { Component, computed, defineComponent, PropType, provide, ref, toRefs, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import vtkResliceCursorWidget, { ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import type { Matrix3x3 } from '@kitware/vtk.js/types';
 import VtkTwoView from './VtkTwoView.vue';
 import VtkObliqueView from './VtkObliqueView.vue';
 import VtkThreeView from './VtkThreeView.vue';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewStore } from '../store/views';
 import { ViewType } from '../types/views';
+import { VTKResliceCursor } from '../constants';
 
 const TYPE_TO_COMPONENT: Record<ViewType, Component> = {
   '2D': VtkTwoView,
@@ -42,6 +47,7 @@ export default defineComponent({
     const { layout } = toRefs(props);
     const viewStore = useViewStore();
     const { viewSpecs } = storeToRefs(viewStore);
+    const { currentImageData } = useCurrentImage();
 
     const flexFlow = computed(() => {
       return layout.value.direction === LayoutDirection.H
@@ -68,6 +74,52 @@ export default defineComponent({
       });
     });
 
+    // Construct the common instance of vtkResliceCursorWidget and provide it
+    // to all the child ObliqueView components.
+    const resliceCursor = ref<vtkResliceCursorWidget>();
+    resliceCursor.value = vtkResliceCursorWidget.newInstance();
+    // Orient the planes of the vtkResliceCursorWidget to the orientation
+    // of the currently set image.
+    const resliceCursorState = resliceCursor.value.getWidgetState() as ResliceCursorWidgetState;
+    provide(VTKResliceCursor, resliceCursor);
+
+    watch(currentImageData, (image) => {
+    // Reset to default plane values before transforming based on current image-data.
+    resliceCursorState.setPlanes({
+      4: {
+        normal: [1, 0, 0],
+        viewUp: [0, 0, 1],
+        color3: [255, 0, 0],
+      },
+      5: {
+        normal: [0, -1, 0],
+        viewUp: [0, 0, 1],
+        color3: [0, 255, 0],
+      },
+      6: {
+        normal: [0, 0, -1],
+        viewUp: [0, -1, 0],
+        color3: [0, 0, 255],
+      }
+    });
+    const planes = resliceCursorState.getPlanes();
+
+    if (image && resliceCursor.value) {
+
+      resliceCursor.value.setImage(image);
+      const d9 = image.getDirection();
+      const mat = Array.from(d9) as Matrix3x3;
+      vtkMath.invert3x3(mat, mat);
+
+      Object.values(planes).forEach((plane) => {
+        const {normal, viewUp} = plane;
+        vtkMath.multiply3x3_vect3(mat as Matrix3x3, normal, normal);
+        vtkMath.multiply3x3_vect3(mat as Matrix3x3, viewUp, viewUp);
+      });
+    }
+
+    });
+
     return {
       items,
       flexFlow,