fix(paint): use labelmap's coordinate transform

Paint strokes now convert world coordinates to index space using the
labelmap's worldToIndex matrix instead of the parent image's. This fixes
painting at wrong locations when segment groups have different direction
matrices than their parent image.

Author: PaulHax

src/components/tools/paint/PaintWidget2D.vue

@@ -57,11 +57,8 @@ export default defineComponent({
       () => imageMetadata.value.lpsOrientation[viewAxis.value]
     );
 
-    const worldPointToIndex = (worldPoint: vec3) => {
-      const { worldToIndex } = imageMetadata.value;
-      const indexPoint = vec3.create();
-      vec3.transformMat4(indexPoint, worldPoint, worldToIndex);
-      return indexPoint;
+    const cloneWorldPoint = (worldPoint: vec3) => {
+      return vec3.clone(worldPoint);
     };
 
     const widget = view.widgetManager.addWidget(
@@ -95,17 +92,17 @@ export default defineComponent({
       if (!imageId.value) return;
       paintStore.setSliceAxis(viewAxisIndex.value, imageId.value);
       const origin = widgetState.getBrush().getOrigin()!;
-      const indexPoint = worldPointToIndex(origin);
-      paintStore.startStroke(indexPoint, viewAxisIndex.value, imageId.value);
+      const worldPoint = cloneWorldPoint(origin);
+      paintStore.startStroke(worldPoint, viewAxisIndex.value, imageId.value);
       paintStore.updatePaintPosition(origin, viewId.value);
     });
 
     onVTKEvent(widget, 'onInteractionEvent', () => {
       if (!imageId.value) return;
       const origin = widgetState.getBrush().getOrigin()!;
-      const indexPoint = worldPointToIndex(origin);
+      const worldPoint = cloneWorldPoint(origin);
       paintStore.placeStrokePoint(
-        indexPoint,
+        worldPoint,
         viewAxisIndex.value,
         imageId.value
       );
@@ -114,8 +111,8 @@ export default defineComponent({
 
     onVTKEvent(widget, 'onEndInteractionEvent', () => {
       if (!imageId.value) return;
-      const indexPoint = worldPointToIndex(widgetState.getBrush().getOrigin()!);
-      paintStore.endStroke(indexPoint, viewAxisIndex.value, imageId.value);
+      const worldPoint = cloneWorldPoint(widgetState.getBrush().getOrigin()!);
+      paintStore.endStroke(worldPoint, viewAxisIndex.value, imageId.value);
     });
 
     // --- manipulator --- //

src/store/tools/paint.ts

@@ -196,14 +196,27 @@ export const usePaintToolStore = defineStore('paint', () => {
 
     const lastIndex = strokePoints.value.length - 1;
     if (lastIndex >= 0) {
-      const lastPoint = strokePoints.value[lastIndex];
-      const prevPoint =
+      const labelmapWorldToIndex = labelmap.getWorldToIndex();
+      const worldToLabelmapIndex = (worldPoint: vec3) => {
+        const indexPoint = vec3.create();
+        vec3.transformMat4(indexPoint, worldPoint, labelmapWorldToIndex);
+        return indexPoint;
+      };
+
+      const lastWorldPoint = strokePoints.value[lastIndex];
+      const prevWorldPoint =
         lastIndex >= 1 ? strokePoints.value[lastIndex - 1] : undefined;
+
+      const lastIndexPoint = worldToLabelmapIndex(lastWorldPoint);
+      const prevIndexPoint = prevWorldPoint
+        ? worldToLabelmapIndex(prevWorldPoint)
+        : undefined;
+
       this.$paint.paintLabelmap(
         labelmap,
         axisIndex,
-        lastPoint,
-        prevPoint,
+        lastIndexPoint,
+        prevIndexPoint,
         shouldPaint
       );
     }
@@ -250,32 +263,32 @@ export const usePaintToolStore = defineStore('paint', () => {
 
   function startStroke(
     this: _This,
-    indexPoint: vec3,
+    worldPoint: vec3,
     axisIndex: 0 | 1 | 2,
     imageID: string
   ) {
     switchToSegmentGroupForImage.call(this, imageID);
-    strokePoints.value = [vec3.clone(indexPoint)];
+    strokePoints.value = [vec3.clone(worldPoint)];
     doPaintStroke.call(this, axisIndex, imageID);
   }
 
   function placeStrokePoint(
     this: _This,
-    indexPoint: vec3,
+    worldPoint: vec3,
     axisIndex: 0 | 1 | 2,
     imageID: string
   ) {
-    strokePoints.value.push(indexPoint);
+    strokePoints.value.push(worldPoint);
     doPaintStroke.call(this, axisIndex, imageID);
   }
 
   function endStroke(
     this: _This,
-    indexPoint: vec3,
+    worldPoint: vec3,
     axisIndex: 0 | 1 | 2,
     imageID: string
   ) {
-    strokePoints.value.push(indexPoint);
+    strokePoints.value.push(worldPoint);
     doPaintStroke.call(this, axisIndex, imageID);
   }