volview 4.0.0 → 4.0.1

package/src/components/tools/ZoomTool.vue

@@ -1,35 +0,0 @@
-<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

@@ -1,367 +0,0 @@
-<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

@@ -1,103 +0,0 @@
-<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

@@ -1,192 +0,0 @@
-<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>