volview 4.0.0

package/src/components/tools/ZoomTool.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { CreateElement, RenderContext } from 'vue';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
+import MouseManipulatorTool from './MouseManipulatorTool.vue';
+
+interface Props {
+  viewProxy: vtkViewProxy;
+}
+
+export default {
+  functional: true,
+  render(h: CreateElement, ctx: RenderContext<Props>) {
+    const toolStore = useToolStore();
+    const toolOptions = [];
+    toolOptions.push({ button: 3, flipDirection: true });
+    toolOptions.push({ button: 1, control: true, flipDirection: true });
+    if (toolStore.currentTool === Tools.Zoom) {
+      // Additionally enable left-button-only action if Zoom tool is active
+      toolOptions.push({ button: 1, flipDirection: true });
+    }
+
+    return h(MouseManipulatorTool, {
+      props: {
+        ...ctx.props,
+        name: 'ZoomTool',
+        manipulatorClass: vtkMouseCameraTrackballZoomToMouseManipulator,
+        options: toolOptions,
+      },
+    });
+  },
+};
+</script>

package/src/components/tools/crop/Crop2D.vue

@@ -0,0 +1,367 @@
+<script lang="ts">
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useCurrentSlice } from '@/src/composables/useCurrentSlice';
+import { useVTKMultiWorldToSVG } from '@/src/composables/useVTKWorldToDisplay';
+import { ImageMetadata } from '@/src/store/datasets-images';
+import { useCropStore } from '@/src/store/tools/crop';
+import { useViewStore } from '@/src/store/views';
+import { LPSAxis, LPSBounds, LPSPoint } from '@/src/types/lps';
+import { createLPSBounds, createLPSPoint, LPSAxes } from '@/src/utils/lps';
+import { intersectMouseEventWithPlane } from '@/src/utils/vtk-helpers';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import {
+  computed,
+  ComputedRef,
+  DeepReadonly,
+  defineComponent,
+  ref,
+  Ref,
+  toRefs,
+} from '@vue/composition-api';
+import { vec3 } from 'gl-matrix';
+import Crop2DLineHandle from './Crop2DLineHandle.vue';
+import { CropLines } from './types';
+
+function computeCropLines(
+  viewID: Ref<string | null>,
+  cropAxis: Ref<LPSAxis | null>,
+  cropPlanes: DeepReadonly<Ref<Record<LPSAxis, number[]>>>,
+  boundary: Ref<Record<LPSAxis, number[]>>
+): ComputedRef<CropLines<LPSPoint> | null> {
+  const currentSlice = useCurrentSlice(viewID);
+
+  return computed(() => {
+    // pre-check reactivity
+    const viewIDVal = viewID.value;
+    const cropAxisVal = cropAxis.value;
+    const cropPlanesVal = cropPlanes.value;
+    const boundaryVal = boundary.value;
+    const sliceInfo = currentSlice.value;
+
+    if (!viewIDVal || !cropAxisVal || !sliceInfo) {
+      return null;
+    }
+
+    const sliceAxis = sliceInfo.axisName;
+    const [perpAxis] = LPSAxes.filter(
+      (ax) => ax !== cropAxisVal && ax !== sliceAxis
+    );
+    const cropRange = cropPlanesVal[cropAxisVal];
+    const perpRange = cropPlanesVal[perpAxis];
+    const perpBoundary = boundaryVal[perpAxis];
+
+    const sliceCropRange = cropPlanesVal[sliceAxis];
+    const slice = sliceInfo.number;
+    const outOfBounds = slice < sliceCropRange[0] || sliceCropRange[1] < slice;
+
+    const getLineSegments = (index: number) => {
+      const startEdge = createLPSPoint();
+      const startCrop = createLPSPoint();
+      const endCrop = createLPSPoint();
+      const endEdge = createLPSPoint();
+
+      startEdge[cropAxisVal] = cropRange[index];
+      startCrop[cropAxisVal] = cropRange[index];
+      endCrop[cropAxisVal] = cropRange[index];
+      endEdge[cropAxisVal] = cropRange[index];
+
+      [startEdge[perpAxis], endEdge[perpAxis]] = perpBoundary;
+      [startCrop[perpAxis], endCrop[perpAxis]] = perpRange;
+
+      return { startEdge, startCrop, endCrop, endEdge };
+    };
+
+    return {
+      lowerLine: getLineSegments(0),
+      upperLine: getLineSegments(1),
+      outOfBounds,
+    };
+  });
+}
+
+function cropLinesToSVGDisplay(
+  cropLines: Ref<CropLines<LPSPoint> | null>,
+  imageMetadata: Ref<ImageMetadata>,
+  renderer: Ref<vtkRenderer>
+): ComputedRef<CropLines<number[]> | null> {
+  // gather points
+  const worldPoints = computed(() => {
+    const lines = cropLines.value;
+    const { lpsOrientation, indexToWorld } = imageMetadata.value;
+    if (!lines) {
+      return null;
+    }
+    return [
+      lines.lowerLine.startEdge,
+      lines.lowerLine.startCrop,
+      lines.lowerLine.endCrop,
+      lines.lowerLine.endEdge,
+      lines.upperLine.startEdge,
+      lines.upperLine.startCrop,
+      lines.upperLine.endCrop,
+      lines.upperLine.endEdge,
+    ].map((indexLPSPoint) => {
+      const indexPt = [0, 0, 0] as vec3;
+      indexPt[lpsOrientation.Sagittal] = indexLPSPoint.Sagittal;
+      indexPt[lpsOrientation.Coronal] = indexLPSPoint.Coronal;
+      indexPt[lpsOrientation.Axial] = indexLPSPoint.Axial;
+
+      const out = [0, 0, 0] as vec3;
+      vec3.transformMat4(out, indexPt, indexToWorld);
+      return out as Vector3;
+    });
+  });
+
+  // transform points to svg
+  const svgPoints = useVTKMultiWorldToSVG(worldPoints, renderer);
+
+  // create a new CropLines with SVG points
+  return computed(() => {
+    const lines = cropLines.value;
+    const points = svgPoints.value;
+    if (!lines || !points?.length) {
+      return null;
+    }
+
+    return {
+      lowerLine: {
+        startEdge: points[0],
+        startCrop: points[1],
+        endCrop: points[2],
+        endEdge: points[3],
+      },
+      upperLine: {
+        startEdge: points[4],
+        startCrop: points[5],
+        endCrop: points[6],
+        endEdge: points[7],
+      },
+      outOfBounds: lines.outOfBounds,
+    };
+  });
+}
+
+function useDragging({
+  mouseEventToLPSPoint,
+  getCropEdgePos,
+  setCropEdgePos,
+}: {
+  mouseEventToLPSPoint: (ev: PointerEvent) => LPSPoint | null;
+  getCropEdgePos: (axis: LPSAxis, lowerUpper: 0 | 1) => number;
+  setCropEdgePos: (axis: LPSAxis, lowerUpper: 0 | 1, pos: number) => void;
+}) {
+  const activeAxis = ref<LPSAxis | null>();
+  const activeEdge = ref<0 | 1 | null>();
+  const initialPointerIndex = ref<LPSPoint>(createLPSPoint());
+  const initialCrop = ref<number>(0);
+
+  const onPointerDown = (
+    ax: LPSAxis,
+    selectedCropEdge: 0 | 1,
+    ev: PointerEvent
+  ) => {
+    // ev -> world -> index -> LPSPoint -> save as starting index
+    // save the starting axis edge value
+    const initialPoint = mouseEventToLPSPoint(ev);
+    if (!initialPoint) return;
+
+    initialPointerIndex.value = initialPoint;
+    initialCrop.value = getCropEdgePos(ax, selectedCropEdge);
+    activeAxis.value = ax;
+    activeEdge.value = selectedCropEdge;
+  };
+
+  const onPointerMove = (ev: PointerEvent) => {
+    if (activeAxis.value == null || activeEdge.value == null) {
+      return;
+    }
+    const axis = activeAxis.value;
+
+    const point = mouseEventToLPSPoint(ev);
+    if (!point) return;
+
+    // calc delta along ax from starting pos via startingIndex
+    // apply delta to starting axis edge value
+    const delta = point[axis] - initialPointerIndex.value[axis];
+    setCropEdgePos(axis, activeEdge.value, initialCrop.value + delta);
+  };
+
+  const onPointerUp = () => {
+    activeAxis.value = null;
+    activeEdge.value = null;
+  };
+
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+  };
+}
+
+export default defineComponent({
+  props: {
+    viewId: {
+      required: true,
+      type: String,
+    },
+  },
+  components: {
+    Crop2DLineHandle,
+  },
+  setup(props) {
+    const { viewId: viewID } = toRefs(props);
+
+    const viewStore = useViewStore();
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+    const renderer = computed(() => viewProxy.value?.getRenderer());
+
+    const {
+      currentImageExtent: imageExtent,
+      currentImageID,
+      currentImageMetadata,
+    } = useCurrentImage();
+    const currentSlice = useCurrentSlice(viewID);
+    const currentSlicingAxis = computed(
+      () => currentSlice.value?.axisName ?? null
+    );
+
+    const cropStore = useCropStore();
+    const cropPlanes = computed((): DeepReadonly<LPSBounds> => {
+      const imageID = currentImageID.value;
+      if (imageID && imageID in cropStore.croppingByImageID) {
+        return cropStore.croppingByImageID[imageID];
+      }
+      return createLPSBounds();
+    });
+
+    const inPlaneAxes = computed(() =>
+      LPSAxes.filter(
+        (ax) => currentSlicingAxis.value && ax !== currentSlicingAxis.value
+      )
+    );
+    const ax1 = computed(() => inPlaneAxes.value[0] ?? null);
+    const ax2 = computed(() => inPlaneAxes.value[1] ?? null);
+
+    // crop lines in image space
+    const ax1Lines = computeCropLines(viewID, ax1, cropPlanes, imageExtent);
+    const ax2Lines = computeCropLines(viewID, ax2, cropPlanes, imageExtent);
+
+    // crop lines in display space
+    const ax1SVGLines = cropLinesToSVGDisplay(
+      ax1Lines,
+      currentImageMetadata,
+      renderer
+    );
+    const ax2SVGLines = cropLinesToSVGDisplay(
+      ax2Lines,
+      currentImageMetadata,
+      renderer
+    );
+
+    const { onPointerDown, onPointerMove, onPointerUp } = useDragging({
+      mouseEventToLPSPoint(ev: PointerEvent) {
+        const ren = renderer.value;
+        if (!ren) return null;
+
+        const sliceInfo = currentSlice.value;
+        if (!sliceInfo) return null;
+
+        const { lpsOrientation, worldToIndex } = currentImageMetadata.value;
+        const coord = intersectMouseEventWithPlane(
+          ev,
+          ren,
+          sliceInfo.planeOrigin,
+          sliceInfo.planeNormal
+        );
+        if (!coord) return null;
+
+        // convert from world to index
+        vec3.transformMat4(coord, coord, worldToIndex);
+
+        const point = createLPSPoint();
+        point.Sagittal = coord[lpsOrientation.Sagittal];
+        point.Coronal = coord[lpsOrientation.Coronal];
+        point.Axial = coord[lpsOrientation.Axial];
+
+        return point;
+      },
+      getCropEdgePos(axis: LPSAxis, lowerUpper: 0 | 1) {
+        return cropPlanes.value[axis][lowerUpper];
+      },
+      setCropEdgePos(axis: LPSAxis, lowerUpper: 0 | 1, pos: number) {
+        if (!currentImageID.value) return;
+
+        // enforce cropping edge bounds
+        const planes = cropPlanes.value;
+        const [lower, upper] = planes[axis];
+        const [min, max] = imageExtent.value[axis];
+        const newPlanes: Vector2 = [lower, upper];
+        if (lowerUpper === 0) {
+          newPlanes[0] = Math.max(min, Math.min(pos, upper));
+        } else if (lowerUpper === 1) {
+          newPlanes[1] = Math.max(lower, Math.min(pos, max));
+        }
+
+        cropStore.setCroppingForAxis(currentImageID.value, axis, newPlanes);
+      },
+    });
+
+    return {
+      ax1: computed(() => ({
+        name: ax1.value,
+        lines: ax1SVGLines.value,
+      })),
+      ax2: computed(() => ({
+        name: ax2.value,
+        lines: ax2SVGLines.value,
+      })),
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+    };
+  },
+});
+</script>
+
+<template>
+  <g>
+    <template v-if="ax1.lines != null">
+      <crop-2D-line-handle
+        :line="ax1.lines.lowerLine"
+        :out-of-bounds="ax1.lines.outOfBounds"
+        @pointerdown="onPointerDown(ax1.name, 0, $event)"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+      />
+      <crop-2D-line-handle
+        :line="ax1.lines.upperLine"
+        :out-of-bounds="ax1.lines.outOfBounds"
+        @pointerdown="onPointerDown(ax1.name, 1, $event)"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+      />
+    </template>
+    <template v-if="ax2.lines != null">
+      <crop-2D-line-handle
+        :line="ax2.lines.lowerLine"
+        :out-of-bounds="ax2.lines.outOfBounds"
+        @pointerdown="onPointerDown(ax2.name, 0, $event)"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+      />
+      <crop-2D-line-handle
+        :line="ax2.lines.upperLine"
+        :out-of-bounds="ax2.lines.outOfBounds"
+        @pointerdown="onPointerDown(ax2.name, 1, $event)"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+      />
+    </template>
+  </g>
+</template>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>

package/src/components/tools/crop/Crop2DLineHandle.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+import { defineComponent, PropType, ref } from '@vue/composition-api';
+import { CropLine } from './types';
+
+export default defineComponent({
+  props: {
+    line: {
+      required: true,
+      type: Object as PropType<CropLine<number[]>>,
+    },
+    clickWidth: {
+      default: 20,
+      type: Number,
+    },
+    outOfBounds: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  setup() {
+    const cursor = ref('grab');
+    const grabLineEl = ref<Element | null>(null);
+    const focusWidth = ref(0);
+
+    const onPointer = (down: boolean, ev: PointerEvent) => {
+      if (down) {
+        grabLineEl.value?.setPointerCapture(ev.pointerId);
+      } else {
+        grabLineEl.value?.releasePointerCapture(ev.pointerId);
+      }
+      cursor.value = down ? 'grabbing' : 'grab';
+    };
+
+    const onHover = (hover: boolean) => {
+      focusWidth.value = hover ? 2 : 0;
+    };
+
+    return {
+      onPointer,
+      onHover,
+      cursor,
+      grabLineEl,
+      focusWidth,
+    };
+  },
+});
+</script>
+
+<template>
+  <g>
+    <line
+      :x1="line.startEdge[0]"
+      :y1="line.startEdge[1]"
+      :x2="line.startCrop[0]"
+      :y2="line.startCrop[1]"
+      :stroke-width="2 + focusWidth"
+      stroke-dasharray="6"
+      stroke-linecap="square"
+      stroke="rgba(200, 255, 0, 0.5)"
+    />
+    <line
+      :x1="line.startCrop[0]"
+      :y1="line.startCrop[1]"
+      :x2="line.endCrop[0]"
+      :y2="line.endCrop[1]"
+      :stroke-width="2 + focusWidth"
+      :stroke-dasharray="outOfBounds ? 6 : 'none'"
+      stroke-linecap="butt"
+      stroke="rgb(200, 255, 0)"
+    />
+    <line
+      :x1="line.endCrop[0]"
+      :y1="line.endCrop[1]"
+      :x2="line.endEdge[0]"
+      :y2="line.endEdge[1]"
+      :stroke-width="2 + focusWidth"
+      stroke-dasharray="6"
+      stroke-linecap="square"
+      stroke="rgba(200, 255, 0, 0.5)"
+    />
+    <!-- the listener hitbox -->
+    <line
+      ref="grabLineEl"
+      class="pointer-events-all"
+      :style="{ cursor }"
+      @pointerenter="onHover(true)"
+      @pointerleave="onHover(false)"
+      @pointerdown="onPointer(true, $event)"
+      @pointerup="onPointer(false, $event)"
+      v-on="$listeners"
+      :x1="line.startEdge[0]"
+      :y1="line.startEdge[1]"
+      :x2="line.endEdge[0]"
+      :y2="line.endEdge[1]"
+      fill="none"
+      stroke-opacity="0"
+      stroke-dasharray="none"
+      :stroke-width="Number($attrs['stroke-width'] || 0) + clickWidth || 0"
+    />
+  </g>
+</template>
+
+<style scoped src="@/src/components/styles/utils.css"></style>

package/src/components/tools/crop/Crop3D.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { VTKThreeViewWidgetManager } from '@/src/constants';
+import { useCropStore } from '@/src/store/tools/crop';
+import { LPSCroppingPlanes } from '@/src/store/tools/types';
+import { useViewStore } from '@/src/store/views';
+import { arrayEquals } from '@/src/utils';
+import { getAxisBounds, LPSAxes } from '@/src/utils/lps';
+import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
+import { Bounds } from '@kitware/vtk.js/types';
+import vtkImageCroppingWidget, {
+  ImageCroppingWidgetState,
+  vtkImageCroppingViewWidget,
+} from '@kitware/vtk.js/Widgets/Widgets3D/ImageCroppingWidget';
+import {
+  computed,
+  DeepReadonly,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from '@vue/composition-api';
+
+function isValidCroppingPlanes(planes: LPSCroppingPlanes) {
+  return (
+    planes.Sagittal[0] <= planes.Sagittal[1] &&
+    planes.Coronal[0] <= planes.Coronal[1] &&
+    planes.Axial[0] <= planes.Axial[1]
+  );
+}
+
+function lpsPlanesEqual(a: LPSCroppingPlanes, b: LPSCroppingPlanes) {
+  return (
+    a.Axial[0] === b.Axial[0] &&
+    a.Axial[1] === b.Axial[1] &&
+    a.Sagittal[0] === b.Sagittal[0] &&
+    a.Sagittal[1] === b.Sagittal[1] &&
+    a.Coronal[0] === b.Coronal[0] &&
+    a.Coronal[1] === b.Coronal[1]
+  );
+}
+
+export default defineComponent({
+  props: {
+    viewId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const { viewId: viewID } = toRefs(props);
+
+    const widgetManager = inject(VTKThreeViewWidgetManager);
+    if (!widgetManager) {
+      throw new Error('Crop3D component cannot access the 2D widget manager.');
+    }
+
+    const viewStore = useViewStore();
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView3DProxy>(viewID.value)!
+    );
+
+    const cropStore = useCropStore();
+    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const croppingPlanes = computed(() => {
+      const imageID = currentImageID.value;
+      if (imageID && imageID in cropStore.croppingByImageID) {
+        return cropStore.croppingByImageID[imageID];
+      }
+      return null;
+    });
+
+    const factory = vtkImageCroppingWidget.newInstance();
+    const state = factory.getWidgetState() as ImageCroppingWidgetState;
+
+    factory.setEdgeHandlesEnabled(false);
+    factory.setFaceHandlesEnabled(true);
+    factory.setCornerHandlesEnabled(true);
+
+    const widget = ref<vtkImageCroppingViewWidget>();
+
+    watch(widgetManager, (wm, oldWm) => {
+      if (oldWm) {
+        oldWm.removeWidget(factory);
+      }
+      if (wm) {
+        widget.value = wm.addWidget(factory) as vtkImageCroppingViewWidget;
+      }
+    });
+
+    onMounted(() => {
+      if (widgetManager.value) {
+        widget.value = widgetManager.value.addWidget(
+          factory
+        ) as vtkImageCroppingViewWidget;
+
+        // update representation to not be as 3D
+        widget.value.getRepresentations().forEach((rep) => {
+          rep.getActors().forEach((actor) => {
+            actor.getProperty().setAmbient(1);
+          });
+        });
+
+        // show widget
+        viewProxy.value.render();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (widgetManager.value) {
+        widgetManager.value.removeWidget(factory);
+      }
+    });
+
+    watch(
+      currentImageMetadata,
+      (metadata) => {
+        state.setWorldToIndexT(metadata.worldToIndex);
+        state.setIndexToWorldT(metadata.indexToWorld);
+        state.placeWidget(metadata.worldBounds);
+      },
+      { immediate: true }
+    );
+
+    const applyPlanes = (lpsPlanes: DeepReadonly<LPSCroppingPlanes>) => {
+      const { lpsOrientation: dirs } = currentImageMetadata.value;
+      // LPSCroppingPlanes -> Bounds
+      const planes = [0, 0, 0, 0, 0, 0] as Bounds;
+      LPSAxes.forEach((axis) => {
+        [planes[dirs[axis] * 2], planes[dirs[axis] * 2 + 1]] = lpsPlanes[axis];
+      });
+
+      // prevent infinite loops
+      if (!arrayEquals(planes, state.getCroppingPlanes().getPlanes())) {
+        state.getCroppingPlanes().setPlanes(planes);
+      }
+      // render any changes
+      viewProxy.value.render();
+    };
+
+    watch(
+      croppingPlanes,
+      (lpsPlanes) => {
+        if (lpsPlanes) {
+          applyPlanes(lpsPlanes);
+        }
+      },
+      { immediate: true }
+    );
+
+    const onPlanesUpdated = useVTKCallback(
+      state.getCroppingPlanes().onModified
+    );
+
+    onPlanesUpdated(() => {
+      const imageID = currentImageID.value;
+      if (!imageID) return;
+
+      // Bounds -> LPSCroppingPlanes
+      const planes = state.getCroppingPlanes().getPlanes();
+      const { lpsOrientation } = currentImageMetadata.value;
+      const lpsPlanes: LPSCroppingPlanes = {
+        Sagittal: getAxisBounds(planes, 'Sagittal', lpsOrientation),
+        Coronal: getAxisBounds(planes, 'Coronal', lpsOrientation),
+        Axial: getAxisBounds(planes, 'Axial', lpsOrientation),
+      };
+
+      // avoid updates if equal
+      const planesFromStore = croppingPlanes.value;
+      if (
+        planesFromStore &&
+        lpsPlanesEqual(lpsPlanes, planesFromStore as LPSCroppingPlanes)
+      ) {
+        return;
+      }
+
+      if (isValidCroppingPlanes(lpsPlanes)) {
+        cropStore.setCropping(imageID, lpsPlanes);
+      } else if (planesFromStore) {
+        applyPlanes(planesFromStore);
+      }
+    });
+
+    return () => null;
+  },
+});
+</script>