From 82ce49f6c4327fd5cd2753c7570269c2001d5e1f Mon Sep 17 00:00:00 2001
From: Shreeraj Jadhav <shreerajjadhav@gmail.com>
Date: Thu, 13 Jul 2023 18:46:01 -0400
Subject: [PATCH] feat(ObliqueView): add ResliceCursorWidget to control oblique
 views

---
 package-lock.json                          |  12 +-
 package.json                               |   2 +-
 src/components/LayoutGrid.vue              |  54 ++++-
 src/components/VtkObliqueView.vue          | 242 +++++----------------
 src/components/tools/ResliceCursorTool.vue | 133 +++++++++++
 src/constants.ts                           |  12 +
 src/shims-vtk.d.ts                         |  76 +++----
 src/vtk/proxy.js                           |   1 -
 8 files changed, 281 insertions(+), 251 deletions(-)
 create mode 100644 src/components/tools/ResliceCursorTool.vue

diff --git a/package-lock.json b/package-lock.json
index 8d25fc3c0..fec25d6b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "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",
@@ -3477,9 +3477,9 @@
       }
     },
     "node_modules/@kitware/vtk.js": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-27.4.6.tgz",
-      "integrity": "sha512-upeOyCykz/5KOl4+0y7o20BHS5Jcn5ml6dNkNi/O4hHKgifj7gXGtfv6+ncFj0R7MT2Ca3gREFSFYGUAR6SUXQ==",
+      "version": "0.0.0-semantically-release",
+      "resolved": "file:../vtk-js/dist/esm",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "7.17.9",
         "commander": "9.2.0",
@@ -16692,9 +16692,7 @@
       }
     },
     "@kitware/vtk.js": {
-      "version": "27.4.6",
-      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-27.4.6.tgz",
-      "integrity": "sha512-upeOyCykz/5KOl4+0y7o20BHS5Jcn5ml6dNkNi/O4hHKgifj7gXGtfv6+ncFj0R7MT2Ca3gREFSFYGUAR6SUXQ==",
+      "version": "0.0.0-semantically-release",
       "requires": {
         "@babel/runtime": "7.17.9",
         "commander": "9.2.0",
diff --git a/package.json b/package.json
index 86f3ae1ce..2e3b371ac 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/LayoutGrid.vue b/src/components/LayoutGrid.vue
index e3a44c303..b69aefa1f 100644
--- a/src/components/LayoutGrid.vue
+++ b/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,
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 80b5cab46..7be59dc65 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -35,20 +35,11 @@
       <div class="overlay-no-events tool-layer" ref="toolContainer">
         <pan-tool :view-id="viewID" />
         <zoom-tool :view-id="viewID" />
+        <reslice-cursor-tool :view-id="viewID" :view-direction="viewDirection" />
         <slice-scroll-tool :view-id="viewID" />
         <window-level-tool :view-id="viewID" />
       </div>
       <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:top-middle>
-          <div class="annotation-cell">
-            <span>{{ topLabel }}</span>
-          </div>
-        </template>
-        <template v-slot:middle-left>
-          <div class="annotation-cell">
-            <span>{{ leftLabel }}</span>
-          </div>
-        </template>
         <template v-slot:bottom-left>
           <div class="annotation-cell">
             <div>Slice: {{ currentSlice }}/{{ sliceMax }}</div>
@@ -138,6 +129,7 @@
 import {
   computed,
   defineComponent,
+  inject,
   onBeforeMount,
   onBeforeUnmount,
   onMounted,
@@ -157,16 +149,15 @@ import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
 import vtkMath from '@kitware/vtk.js/Common/Core/Math';
 import { useResizeToFit } from '@src/composables/useResizeToFit';
 import vtkLPSView2DProxy from '@src/vtk/LPSView2DProxy';
-import vtkIJKSliceRepresentationProxy from '@src/vtk/IJKSliceRepresentationProxy';
 import vtkResliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/ResliceRepresentationProxy';
 import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants';
-import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
-import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
+import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+import { ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import { useVTKCallback } from '@/src/composables/useVTKCallback';
 import { manageVTKSubscription } from '@src/composables/manageVTKSubscription';
 import SliceSlider from '@src/components/SliceSlider.vue';
 import ViewOverlayGrid from '@src/components/ViewOverlayGrid.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
-import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
@@ -174,11 +165,9 @@ import WindowLevelTool from './tools/WindowLevelTool.vue';
 import SliceScrollTool from './tools/SliceScrollTool.vue';
 import PanTool from './tools/PanTool.vue';
 import ZoomTool from './tools/ZoomTool.vue';
+import ResliceCursorTool from './tools/ResliceCursorTool.vue';
 import { useSceneBuilder } from '../composables/useSceneBuilder';
 import { useDICOMStore } from '../store/datasets-dicom';
-import { useLabelmapStore } from '../store/datasets-labelmaps';
-import vtkLabelMapSliceRepProxy from '../vtk/LabelMapSliceRepProxy';
-import { usePaintToolStore } from '../store/tools/paint';
 import useWindowingStore from '../store/view-configs/windowing';
 import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
 import { LPSAxisDir } from '../types/lps';
@@ -188,12 +177,8 @@ import { useWidgetManager } from '../composables/useWidgetManager';
 import useViewSliceStore, {
   defaultSliceConfig,
 } from '../store/view-configs/slicing';
-import { ToolContainer, VTKTwoViewWidgetManager } from '../constants';
-import { useProxyManager } from '../composables/proxyManager';
-import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
-import { useLayersStore } from '../store/datasets-layers';
+import { ToolContainer, VTKTwoViewWidgetManager, VTKResliceCursor } from '../constants';
 import { useViewCameraStore } from '../store/view-configs/camera';
-import useLayerColoringStore from '../store/view-configs/layers';
 
 const SLICE_OFFSET_KEYS: Record<string, number> = {
   ArrowLeft: -1,
@@ -211,12 +196,10 @@ export default defineComponent({
     },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
-      // type: vec3,
       required: true,
     },
     viewUp: {
       type: String as PropType<LPSAxisDir>,
-      // type: vec3,
       required: true,
     },
   },
@@ -227,13 +210,12 @@ export default defineComponent({
     SliceScrollTool,
     PanTool,
     ZoomTool,
+    ResliceCursorTool
   },
   setup(props) {
     const windowingStore = useWindowingStore();
     const viewSliceStore = useViewSliceStore();
     const viewCameraStore = useViewCameraStore();
-    const layerColoringStore = useLayerColoringStore();
-    const paintStore = usePaintToolStore();
 
     const { id: viewID, viewDirection, viewUp } = toRefs(props);
 
@@ -248,7 +230,6 @@ export default defineComponent({
       currentImageID: curImageID,
       currentImageMetadata: curImageMetadata,
       isImageLoading,
-      currentLayers,
     } = useCurrentImage();
 
     const dicomStore = useDICOMStore();
@@ -324,6 +305,27 @@ export default defineComponent({
     const { viewProxy, setContainer: setViewProxyContainer } =
       useViewProxy<vtkLPSView2DProxy>(viewID, ViewProxyType.Oblique);
 
+    const resliceCursorRef = inject(VTKResliceCursor);
+    if (!resliceCursorRef) {
+      throw Error('Cannot access global ResliceCursor instance.');
+    }
+
+    const VTKViewType = computed(() => {
+      const viewAxisValue = viewAxis?.value;
+      switch(viewAxisValue) {
+        case 'Coronal': return ViewTypes.XZ_PLANE;
+        case 'Sagittal': return ViewTypes.YZ_PLANE;
+        default:
+          return ViewTypes.XY_PLANE;
+      }
+    });
+
+    const { baseImageRep } = useSceneBuilder<
+      vtkResliceRepresentationProxy
+    >(viewID, {
+      baseImage: curImageID
+    });
+
     onBeforeMount(() => {
       // do this before mount, as the ManipulatorTools run onMounted
       // before this component does.
@@ -333,6 +335,26 @@ export default defineComponent({
     onMounted(() => {
       setViewProxyContainer(vtkContainerRef.value);
       viewProxy.value.setOrientationAxesVisibility(false);
+
+      // Initialize camera points during construction
+      resliceCursorRef.value.updateCameraPoints(viewProxy.value.getRenderer(), VTKViewType.value, true, false, true);
+
+      const onPlanesUpdated = useVTKCallback(
+        resliceCursorRef.value.getWidgetState().onModified
+      );
+
+      onPlanesUpdated(() => {
+        const rep = baseImageRep?.value;
+        const resliceCursor = resliceCursorRef?.value;
+        const state = resliceCursor?.getWidgetState() as ResliceCursorWidgetState;
+        if (resliceCursor && rep) {
+          const planeOrigin = state.getCenter();
+          const planeNormal = resliceCursorRef.value.getPlaneNormalFromViewType(VTKViewType.value);
+          rep.getSlicePlane().setNormal(planeNormal);
+          rep.getSlicePlane().setOrigin(planeOrigin);
+          resliceCursorRef.value.updateCameraPoints( viewProxy.value.getRenderer(), VTKViewType.value, false, false, true);
+        }
+      });
     });
 
     onBeforeUnmount(() => {
@@ -347,7 +369,6 @@ export default defineComponent({
 
     // Function to compute float range of slicing for oblique slicing.
     // Range is calculated as distance along the plane normal (as originating from {0,0,0} ).
-    // function slicePlaneRange(bounds: Bounds, sliceNormal: number[]): [number, number] {
     function slicePlaneRange(cornerPoints: number[][], sliceNormal: number[]): [number, number] {
       if (!cornerPoints || !sliceNormal)
         return [0, 1];
@@ -358,8 +379,6 @@ export default defineComponent({
         .identity()
         .rotateFromDirections(sliceNormal, [1, 0, 0]);
 
-      // Array.from(cornerPoints).forEach((pt) => transform.apply(pt));
-      // const corners = Array.from(cornerPoints);
       const corners = cornerPoints.map(x => x.slice());
       corners.forEach((pt) => transform.apply(pt));
 
@@ -381,13 +400,6 @@ export default defineComponent({
 
     // --- Slicing setup --- //
 
-    /*
-    watchEffect(() => {
-      const ijkIndex = curImageMetadata.value.lpsOrientation[viewAxis.value];
-      viewProxy.value.setSlicingMode('IJK'[ijkIndex]);
-    });
-    */
-
     // --- arrows change slice --- //
 
     const hover = ref(false);
@@ -442,26 +454,6 @@ export default defineComponent({
 
     // --- scene setup --- //
 
-    const labelmapStore = useLabelmapStore();
-
-    const labelmapIDs = computed(() => {
-      return labelmapStore.idList.filter(
-        (id) => labelmapStore.parentImage[id] === curImageID.value
-      );
-    });
-
-    const layerIDs = computed(() => currentLayers.value.map(({ id }) => id));
-
-    const { baseImageRep, labelmapReps, layerReps } = useSceneBuilder<
-      vtkResliceRepresentationProxy,
-      vtkLabelMapSliceRepProxy,
-      vtkIJKSliceRepresentationProxy
-    >(viewID, {
-      baseImage: curImageID,
-      labelmaps: labelmapIDs,
-      layers: layerIDs,
-    });
-
     const { cameraDirVec, cameraUpVec } = useCameraOrientation(
       viewDirection,
       viewUp,
@@ -511,12 +503,10 @@ export default defineComponent({
     );
 
     // --- camera setup --- //
-
     
     // Set default cutting plane parameters.
 
-    // watch([baseImageRep, cameraDirVec], () => {
-    watchEffect(() => {
+    watch([baseImageRep, cameraDirVec], () => {
       const rep = baseImageRep?.value;
       if (rep) {
         if (cameraDirVec) {
@@ -626,8 +616,6 @@ export default defineComponent({
 
     // --- viewport orientation/camera labels --- //
 
-    const { top: topLabel, left: leftLabel } = useOrientationLabels(viewProxy);
-
     watchEffect(() => {
       if (sliceConfig.value == null || wlConfig.value == null) {
         return;
@@ -653,138 +641,10 @@ export default defineComponent({
         const origin = vtkMath.add(imc, dispVector, [0, 0, 0] as Vector3);
         rep.getSlicePlane().setOrigin(origin);
       }
-      [...layerReps.value, ...labelmapReps.value].forEach((lRep) => {
-        lRep.setSlice(slice);
-      });
 
       viewProxy.value.renderLater();
     });
 
-    // --- apply labelmap opacity --- //
-
-    watchEffect(() => {
-      const { labelmapOpacity } = paintStore;
-      labelmapReps.value.forEach((lmRep) => {
-        lmRep.setOpacity(labelmapOpacity);
-      });
-    });
-
-    // --- layers setup --- //
-
-    const layersConfigs = computed(() =>
-      layerIDs.value.map((id) => layerColoringStore.getConfig(viewID.value, id))
-    );
-
-    const layersStore = useLayersStore();
-    watch(
-      [viewID, currentLayers],
-      () => {
-        currentLayers.value.forEach(({ id }, layerIndex) => {
-          const image = layersStore.layerImages[id];
-          const layerConfig = layersConfigs.value[layerIndex];
-          if (image && !layerConfig) {
-            layerColoringStore.resetToDefault(viewID.value, id, image);
-          }
-        });
-      },
-      { immediate: true }
-    );
-
-    // --- layer coloring --- //
-
-    const proxyManager = useProxyManager()!;
-
-    const colorBys = computed(() =>
-      layersConfigs.value.map((config) => config?.colorBy)
-    );
-    const transferFunctions = computed(() =>
-      layersConfigs.value.map((config) => config?.transferFunction)
-    );
-    const opacityFunctions = computed(() =>
-      layersConfigs.value.map((config) => config?.opacityFunction)
-    );
-    const blendConfigs = computed(() =>
-      layersConfigs.value.map((config) => config?.blendConfig)
-    );
-
-    watch(
-      [layerReps, colorBys, transferFunctions, opacityFunctions, blendConfigs],
-      () => {
-        layerReps.value
-          .map(
-            (layerRep, idx) =>
-              [
-                layerRep,
-                colorBys.value[idx],
-                transferFunctions.value[idx],
-                opacityFunctions.value[idx],
-                blendConfigs.value[idx],
-              ] as const
-          )
-          .forEach(
-            ([
-              rep,
-              colorBy,
-              transferFunction,
-              opacityFunction,
-              blendConfig,
-            ]) => {
-              if (
-                !colorBy ||
-                !transferFunction ||
-                !opacityFunction ||
-                !blendConfig
-              ) {
-                return;
-              }
-
-              const { arrayName, location } = colorBy;
-              const ctFunc = transferFunction;
-              const opFunc = opacityFunction;
-
-              const lut = proxyManager.getLookupTable(arrayName);
-              lut.setMode(LookupTableProxyMode.Preset);
-              lut.setPresetName(ctFunc.preset);
-              lut.setDataRange(...ctFunc.mappingRange);
-
-              const pwf = proxyManager.getPiecewiseFunction(arrayName);
-              pwf.setMode(opFunc.mode);
-              pwf.setDataRange(...opFunc.mappingRange);
-
-              switch (opFunc.mode) {
-                case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-                  pwf.setGaussians(opFunc.gaussians);
-                  break;
-                case vtkPiecewiseFunctionProxy.Mode.Points: {
-                  const opacityPoints = getShiftedOpacityFromPreset(
-                    opFunc.preset,
-                    opFunc.mappingRange,
-                    opFunc.shift
-                  );
-                  if (opacityPoints) {
-                    pwf.setPoints(opacityPoints);
-                  }
-                  break;
-                }
-                case vtkPiecewiseFunctionProxy.Mode.Nodes:
-                  pwf.setNodes(opFunc.nodes);
-                  break;
-                default:
-              }
-
-              // control color range manually
-              rep.setRescaleOnColorBy(false);
-              rep.setColorBy(arrayName, location);
-              rep.setOpacity(blendConfig.opacity);
-
-              // Need to trigger a render for when we are restoring from a state file
-              viewProxy.value.renderLater();
-            }
-          );
-      },
-      { immediate: true, deep: true }
-    );
-
     return {
       vtkContainerRef,
       toolContainer,
@@ -797,8 +657,6 @@ export default defineComponent({
       sliceMax,
       windowWidth,
       windowLevel,
-      topLabel,
-      leftLabel,
       isImageLoading,
       setSlice,
       widgetManager,
diff --git a/src/components/tools/ResliceCursorTool.vue b/src/components/tools/ResliceCursorTool.vue
new file mode 100644
index 000000000..198516a53
--- /dev/null
+++ b/src/components/tools/ResliceCursorTool.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+import { useViewStore } from '@/src/store/views';
+import { computed, defineComponent, inject, onBeforeUnmount, ref, toRefs, watch } from 'vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import { vtkResliceCursorViewWidget, ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import { VTKTwoViewWidgetManager, VTKResliceCursor } from '@src/constants';
+import { useViewProxyMounted } from '@/src/composables/useViewProxy';
+import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { LPSAxisDir } from '@/src/types/lps';
+
+export default defineComponent({
+  props: {
+    viewId: {
+      type: String,
+      required: true,
+    },
+    viewDirection: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const active = true;
+    const { viewId: viewID, viewDirection } = toRefs(props);
+    const widgetManager = inject(VTKTwoViewWidgetManager);
+    if (!widgetManager) {
+      throw new Error('ResliceCursorTool component cannot access the 2D widget manager.');
+    }
+
+    const {
+      currentImageMetadata: curImageMetadata,
+      currentImageData,
+    } = useCurrentImage();
+
+    const viewStore = useViewStore();
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const viewType = computed(
+      () => {
+        return viewStore.viewSpecs[viewID.value].viewType;
+      }
+    );
+
+    const resliceCursorRef = inject(VTKResliceCursor);
+    if(!resliceCursorRef) {
+      throw new Error('ResliceCursorTool component cannot access the 2D widget manager.');
+    }
+    const resliceCursor = resliceCursorRef.value;
+    if (!resliceCursor) {
+      throw new Error('Cannot fetch global instance of ResliceCursor');
+    }
+
+    const state = resliceCursor.getWidgetState() as ResliceCursorWidgetState;
+    state.getStatesWithLabel('sphere').forEach((handle) => (handle as ResliceCursorWidgetState).setScale1(20));
+
+    const widget = ref<vtkResliceCursorViewWidget>();
+
+    const VTKViewType = computed(() => {
+      const viewAxis = getLPSAxisFromDir(viewDirection.value as LPSAxisDir);
+      switch(viewAxis) {
+        case 'Coronal': return ViewTypes.XZ_PLANE;
+        case 'Sagittal': return ViewTypes.YZ_PLANE;
+        default:
+          return ViewTypes.XY_PLANE;
+      }
+    });
+
+    watch(widgetManager, (wm, oldWm) => {
+      if (oldWm) {
+        oldWm.removeWidget(resliceCursor);
+      }
+      if (wm) {
+        widget.value = wm.addWidget(resliceCursor, VTKViewType.value) as vtkResliceCursorViewWidget;
+      }
+    });
+
+    useViewProxyMounted(viewProxy, () => {
+      if (widgetManager?.value) {
+        widget.value = widgetManager.value.addWidget(
+          resliceCursor,
+          VTKViewType.value
+        ) as vtkResliceCursorViewWidget;
+
+        widget.value.setScaleInPixels(true);
+        widget.value.setKeepOrthogonality(true);
+
+        // update representation to not be as 3D
+        widget.value.getRepresentations().forEach((rep) => {
+          rep.getActors().forEach((actor) => {
+            actor.getProperty().setAmbient(1);
+          });
+        });
+
+        // show widget
+        viewProxy.value.renderLater();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (widgetManager?.value) {
+        widgetManager.value.removeWidget(resliceCursor);
+      }
+    });
+
+    watch(
+      curImageMetadata,
+      (metadata) => {
+        state.placeWidget(metadata.worldBounds);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      currentImageData,
+      (currImage) => {
+        if (widget.value) {
+          widget.value.setImage(currImage);
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      active,
+      viewType,
+    };
+  },
+});
+</script>
diff --git a/src/constants.ts b/src/constants.ts
index 71164650a..34afdddb3 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,5 @@
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import vtkResliceCursorWidget, { vtkResliceCursorViewWidget } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
 import { ComputedRef, InjectionKey, Ref } from 'vue';
 
 export const EPSILON = 10e-6;
@@ -10,6 +11,17 @@ export const DarkTheme = 'kw-dark';
 export const LightTheme = 'kw-light';
 export const DefaultTheme = DarkTheme;
 
+/**
+ * Retrieves the global ResliceCursorWidget instance.
+ */
+export const VTKResliceCursor: InjectionKey<
+  ComputedRef<vtkResliceCursorWidget>
+> = Symbol('VTKResliceCursor');
+
+export const VTKResliceCursorViewWidget: InjectionKey<
+  ComputedRef<vtkResliceCursorViewWidget>
+> = Symbol('VTKResliceCursorViewWidget');
+
 /**
  * Retrieves the parent VtkTwoView's widget manager.
  */
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index 1376761cd..43e28663c 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -36,55 +36,6 @@ declare module '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin' {
   export declare function extend(publicAPI: any, model: any): void;
 }
 
-declare module '@kitware/vtk.js/Widgets/Core/AbstractWidgetFactory' {
-  import { vtkObject } from '@kitware/vtk.js/interfaces';
-  import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
-  import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
-  import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-  import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
-  import { Bounds } from '@kitware/vtk.js/types';
-
-  export interface vtkAbstractWidgetFactory extends vtkObject {
-    getWidgetForView(locator: {
-      viewId: string;
-      renderer: vtkRenderer;
-      viewType: ViewTypes;
-      initialValues?: object;
-    }): vtkAbstractWidget | null;
-    getViewIds(): string[];
-    setVisibility(visible: boolean): void;
-    setPickable(pickable: boolean): void;
-    setDragable(dragable: boolean): void;
-    setContextVisibility(visible: boolean): void;
-    setHandleVisibility(visible: boolean): void;
-    placeWidget(bounds: Bounds);
-    getPlaceFactor(): number;
-    setPlaceFactor(factor: number): void;
-    getWidgetState(): vtkWidgetState;
-    invokeWidgetChangeEvent(...args: any[]): void;
-    onWidgetChangeEvent(cb: EventHandler, priority?: number): void;
-  }
-
-  export interface IAbstractWidgetFactoryInitialValues {
-    widgetState?: vtkWidgetState;
-  }
-
-  export function extend(
-    publicAPI: object,
-    model: object,
-    initialValues?: IAbstractWidgetFactoryInitialValues
-  );
-
-  export function newInstance(
-    initialValues?: IAbstractWidgetFactoryInitialValues
-  ): vtkAbstractWidgetFactory;
-
-  export declare const vtkAbstractWidgetFactory: {
-    extend: typeof extend;
-  };
-  export default vtkAbstractWidgetFactory;
-}
-
 declare module '@kitware/vtk.js/Widgets/Core/WidgetManager' {
   import { vtkObject } from '@kitware/vtk.js/interfaces';
   import vtkSelectionNode from '@kitware/vtk.js/Common/DataModel/SelectionNode';
@@ -281,3 +232,30 @@ declare module '@kitware/vtk.js/Widgets/Widgets3D/ImageCroppingWidget' {
   };
   export default vtkImageCroppingWidget;
 }
+
+// declare module '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorViewWidget' {
+declare module '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget' {
+  import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
+  import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
+  import type { Vector3 } from '@kitware/vtk.js/types';
+  import vtkResliceCursorWidget from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+
+  export interface vtkResliceCursorViewWidget extends vtkAbstractWidget {
+    setManipulator(manipulator: vtkPlaneManipulator): boolean;
+    getManipulator(): vtkPlaneManipulator;
+    setImage(image: vtkImageData): void;
+    setKeepOrthogonality(keepOrthogonality: boolean): void;
+    setScaleInPixels(scaleInPixels: boolean): void;
+  }
+
+  export interface ResliceCursorWidgetState extends vtkWidgetState {
+    placeWidget(bounds: Bounds): void;
+    setScale1(scale: number): void;
+    getPlanes(): Record<number, { normal: Vector3, viewUp: Vector3, color3: Vector3 }>;
+    setPlanes(planes: Record<number, { normal: Vector3, viewUp: Vector3, color3: Vector3 }>): void;
+    getCenter(): Vector3;
+  }
+
+  // Just forwarding vtk-js's definition as default export:
+  export default vtkResliceCursorWidget;
+}
diff --git a/src/vtk/proxy.js b/src/vtk/proxy.js
index c73950ea0..062f4bbc7 100644
--- a/src/vtk/proxy.js
+++ b/src/vtk/proxy.js
@@ -67,7 +67,6 @@ export default {
     },
     Oblique: {
       vtkImageData: { name: 'ImageReslice' },
-      // vtkLabelMap: { name: 'LabelMapSlice' },
     },
   },
 };