feat: add scalar probe tool

Author: PaulHax

src/components/SliceViewer.vue

@@ -80,6 +80,7 @@
             :image-id="currentImageID"
           ></slice-viewer-overlay>
           <vtk-base-slice-representation
+            ref="baseSliceRep"
             :view-id="id"
             :image-id="currentImageID"
             :axis="viewAxis"
@@ -131,6 +132,7 @@
           <svg class="overlay-no-events">
             <bounding-rectangle :points="selectionPoints" />
           </svg>
+          <scalar-probe :slice-representation="baseSliceRep" />
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -168,6 +170,7 @@ import PolygonTool from '@/src/components/tools/polygon/PolygonTool.vue';
 import RulerTool from '@/src/components/tools/ruler/RulerTool.vue';
 import RectangleTool from '@/src/components/tools/rectangle/RectangleTool.vue';
 import SelectTool from '@/src/components/tools/SelectTool.vue';
+import ScalarProbe from '@/src/components/tools/ScalarProbe.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import SliceSlider from '@/src/components/SliceSlider.vue';
 import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
@@ -256,6 +259,8 @@ const selectionPoints = computed(() => {
     )
     .flatMap(({ store, tool }) => store.getPoints(tool.id));
 });
+
+const baseSliceRep = ref();
 </script>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>

src/components/tools/ScalarProbe.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { inject, ref, watch, computed, toRefs } from 'vue';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { WIDGET_PRIORITY } from '@kitware/vtk.js/Widgets/Core/AbstractWidget/Constants';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import vtkPointPicker from '@kitware/vtk.js/Rendering/Core/PointPicker';
+import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+
+type SliceRepresentationType = ReturnType<typeof useSliceRepresentation>;
+
+const props = defineProps<{
+  sliceRepresentation: SliceRepresentationType;
+}>();
+
+const { sliceRepresentation } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const { currentImageID, currentImageData, currentImageMetadata } =
+  useCurrentImage();
+
+const sampleSet = computed(() => {
+  const image = currentImageData.value;
+  if (!image || !currentImageID.value) {
+    return [];
+  }
+  return [
+    {
+      id: currentImageID.value,
+      name: currentImageMetadata.value.name,
+      rep: sliceRepresentation.value,
+      image,
+    },
+  ];
+});
+
+// Setup point picker
+const pointPicker = vtkPointPicker.newInstance();
+pointPicker.setPickFromList(1); // don't pick from polygon actors
+
+watch(
+  sampleSet,
+  (toPick) => {
+    pointPicker.initializePickList();
+
+    toPick.forEach((item) => {
+      pointPicker.addPickList(item.rep.actor);
+    });
+  },
+  {
+    immediate: true,
+  }
+);
+
+const getImageSamples = (x: number, y: number) => {
+  pointPicker.pick([x, y, 1.0], view.renderer);
+
+  if (pointPicker.getActors().length === 0) {
+    return null;
+  }
+
+  const pos = pointPicker.getPickPosition();
+  const ijk = pointPicker.getPointIJK();
+
+  // Map over all samples to get values at the same position
+  const samples = sampleSet.value.map((item) => {
+    const image = item.image;
+    const size = image.getDimensions();
+    const scalarData = image.getPointData().getScalars();
+    const scalars = scalarData.getTuple(
+      size[0] * size[1] * ijk[2] + size[0] * ijk[1] + ijk[0]
+    ) as number[];
+
+    return {
+      id: item.id,
+      name: item.name,
+      scalars,
+      pos,
+    };
+  });
+
+  return samples;
+};
+
+// Update the sample ref type
+type SampleItem = {
+  id: string;
+  name: string;
+  scalars: number[];
+  pos: Vector3;
+};
+const sample = ref<SampleItem[] | null>(null);
+
+onVTKEvent(
+  view.interactor,
+  'onMouseMove',
+  (event: any) => {
+    const position = event.position;
+
+    const value = getImageSamples(position.x, position.y);
+    sample.value = value;
+  },
+  {
+    // Ensure handler is called before widgets
+    priority: WIDGET_PRIORITY + 2,
+  }
+);
+</script>
+
+<template>
+  <div v-if="sample !== null" class="probe-value-display">
+    <div v-for="item in sample" :key="item.id">
+      <div>{{ item.name }}: {{ item.scalars.join(', ') }}</div>
+      <div>
+        Position:
+        {{ item ? `(${item.pos.map(Math.round).join(', ')})` : '' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.probe-value-display {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+}
+</style>