fix(segmentation): use segment group's coordinate system for slice rendering

When a segment group has a different direction matrix than its parent
image, the slice overlay was showing incorrect slices. Now computes
the labelmap's LPS orientation independently and transforms the parent
slice position through world space to find the correct labelmap slice.

Author: PaulHax

src/components/vtk/VtkSegmentationSliceRepresentation.vue

@@ -5,6 +5,7 @@ import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { LPSAxis } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
+import type { Matrix3x3 } from '@kitware/vtk.js/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import {
   useSegmentGroupStore,
@@ -14,7 +15,9 @@ import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/ImageProperty/
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
-import { syncRef } from '@vueuse/core';
+import { watchImmediate } from '@vueuse/core';
+import { vec3, mat3 } from 'gl-matrix';
+import { getLPSDirections } from '@/src/utils/lps';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import useLayerColoringStore from '@/src/store/view-configs/layers';
 import { useSegmentGroupConfigStore } from '@/src/store/view-configs/segmentGroups';
@@ -86,17 +89,56 @@ watchEffect(() => {
 const parentImageId = computed(() => metadata.value?.parentImage);
 const { metadata: parentMetadata } = useImage(parentImageId);
 
+// Compute labelmap's LPS orientation from its direction matrix
+const labelmapLpsOrientation = computed(() => {
+  const labelmap = imageData.value;
+  if (!labelmap) return null;
+  const direction = labelmap.getDirection() as Matrix3x3;
+  const mat = mat3.fromValues(...direction);
+  return getLPSDirections(mat);
+});
+
+// Set slicing mode based on labelmap's own orientation
 watchEffect(() => {
-  const { lpsOrientation } = parentMetadata.value;
+  const lpsOrientation = labelmapLpsOrientation.value;
+  if (!lpsOrientation) return;
   const ijkIndex = lpsOrientation[axis.value];
   const mode = [SlicingMode.I, SlicingMode.J, SlicingMode.K][ijkIndex];
   sliceRep.mapper.setSlicingMode(mode);
 });
 
-// sync slicing
+// sync slicing - convert parent slice to labelmap slice via world coordinates
 const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const { slice: storedSlice } = useSliceConfig(viewId, parentImageId);
-syncRef(storedSlice, slice, { immediate: true });
+
+watchImmediate(
+  [storedSlice, labelmapLpsOrientation, () => parentMetadata.value],
+  () => {
+    const parentImage = parentMetadata.value;
+    const labelmap = imageData.value;
+    const labelmapLps = labelmapLpsOrientation.value;
+    if (!parentImage || !labelmap || !labelmapLps || storedSlice.value == null)
+      return;
+
+    const { lpsOrientation: parentLps, indexToWorld } = parentImage;
+    const parentIjkIndex = parentLps[axis.value];
+    const labelmapIjkIndex = labelmapLps[axis.value];
+
+    // Get world position of the parent's slice
+    const parentIndexPoint = vec3.fromValues(0, 0, 0);
+    parentIndexPoint[parentIjkIndex] = storedSlice.value;
+    const worldPoint = vec3.create();
+    vec3.transformMat4(worldPoint, parentIndexPoint, indexToWorld);
+
+    // Convert world position to labelmap index space
+    const labelmapWorldToIndex = labelmap.getWorldToIndex();
+    const labelmapIndexPoint = vec3.create();
+    vec3.transformMat4(labelmapIndexPoint, worldPoint, labelmapWorldToIndex);
+
+    // Use the labelmap's IJK index for this LPS axis
+    slice.value = Math.round(labelmapIndexPoint[labelmapIjkIndex]);
+  }
+);
 
 // set coloring properties
 const applySegmentColoring = () => {