fix(ResliceCursor): thinner footprint

Make the visual footprint of the resliceCursor thinner/smaller
so it does not occlude too much of the data image behind it.

Update vtk-js to include fix for changing/disabling mouse cursor styles.

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.321.1",
-    "@kitware/vtk.js": "^28.4.0",
+    "@kitware/vtk.js": "^28.6.0",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
     "@vueuse/core": "^8.5.0",

src/components/LayoutGrid.vue

@@ -77,7 +77,10 @@ export default defineComponent({
 
     // Construct the common instance of vtkResliceCursorWidget and provide it
     // to all the child ObliqueView components.
-    const resliceCursor = ref<vtkResliceCursorWidget>(vtkResliceCursorWidget.newInstance());
+    const resliceCursor = ref<vtkResliceCursorWidget>(vtkResliceCursorWidget.newInstance({
+      scaleInPixels: true,
+      rotationHandlePosition: 0.75,
+    }));
     provide(VTKResliceCursor, resliceCursor);
     // Orient the planes of the vtkResliceCursorWidget to the orientation
     // of the currently set image.

src/components/tools/ResliceCursorTool.vue

@@ -54,8 +54,6 @@ export default defineComponent({
     }
 
     const state = resliceCursor.getWidgetState() as ResliceCursorWidgetState;
-    state.getStatesWithLabel('sphere').forEach((handle) => (handle as ResliceCursorWidgetState).setScale1(20));
-
     const widget = ref<vtkResliceCursorViewWidget>();
 
     const VTKViewType = computed(() => {
@@ -79,8 +77,15 @@ export default defineComponent({
           VTKViewType.value
         ) as vtkResliceCursorViewWidget;
 
-        widget.value.setScaleInPixels(true);
         widget.value.setKeepOrthogonality(true);
+        // reset mouse cursor styles
+        widget.value.setCursorStyles({
+          translateCenter: 'default',
+          rotateLine: 'default',
+          translateAxis: 'default',
+        });
+        state.getStatesWithLabel('sphere').forEach((handle) => (handle as ResliceCursorWidgetState).setScale1(10));
+        state.getStatesWithLabel('line').forEach((handle) => (handle as ResliceCursorWidgetState).setScale3(2, 2, 2));
 
         // update representation to not be as 3D
         widget.value.getRepresentations().forEach((rep) => {

src/shims-vtk.d.ts

@@ -246,11 +246,17 @@ declare module '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget' {
     setImage(image: vtkImageData): void;
     setKeepOrthogonality(keepOrthogonality: boolean): void;
     setScaleInPixels(scaleInPixels: boolean): void;
+    setCursorStyles(styles: {
+      translateCenter: string,
+      rotateLine: string,
+      translateAxis: string,
+    }): boolean;
   }
 
   export interface ResliceCursorWidgetState extends vtkWidgetState {
     placeWidget(bounds: Bounds): void;
-    setScale1(scale: number): void;
+    setScale1(scale: number): boolean;
+    setScale3(scaleX: number, scaleY: number, scaleZ: number): boolean;
     getPlanes(): Record<number, { normal: Vector3, viewUp: Vector3, color3: Vector3 }>;
     setPlanes(planes: Record<number, { normal: Vector3, viewUp: Vector3, color3: Vector3 }>): void;
     getCenter(): Vector3;