volview 4.0.0

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import ToolButton from '@/src/components/ToolButton.vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useCropStore } from '@/src/store/tools/crop';
+
+export default defineComponent({
+  components: {
+    ToolButton,
+  },
+  setup() {
+    const { currentImageID } = useCurrentImage();
+    const cropStore = useCropStore();
+
+    const resetCrop = () => {
+      const imageID = currentImageID.value;
+      if (imageID) {
+        cropStore.resetCropping(imageID);
+      }
+    };
+
+    return {
+      resetCrop,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card dark>
+    <tool-button
+      size="40"
+      icon="mdi-restore"
+      name="Reset Crop"
+      @click="resetCrop"
+    />
+  </v-card>
+</template>

package/src/components/tools/crop/types.ts

@@ -0,0 +1,12 @@
+export interface CropLine<T> {
+  startEdge: T;
+  startCrop: T;
+  endCrop: T;
+  endEdge: T;
+}
+
+export interface CropLines<T> {
+  lowerLine: CropLine<T>;
+  upperLine: CropLine<T>;
+  outOfBounds: boolean;
+}

package/src/components/tools/crosshairs/CrosshairSVG2D.vue

@@ -0,0 +1,125 @@
+<template>
+  <g ref="containerEl">
+    <line
+      v-if="x != null && y != null"
+      :x1="x"
+      y1="0%"
+      :x2="x"
+      :y2="y - 8"
+      stroke="yellow"
+      stroke-width="1"
+    />
+    <line
+      v-if="x != null && y != null"
+      :x1="x"
+      :y1="y + 8"
+      :x2="x"
+      y2="100%"
+      stroke="yellow"
+      stroke-width="1"
+    />
+    <line
+      v-if="x != null && y != null"
+      x1="0%"
+      :y1="y"
+      :x2="x - 8"
+      :y2="y"
+      stroke="yellow"
+      stroke-width="1"
+    />
+    <line
+      v-if="x != null && y != null"
+      :x1="x + 8"
+      :y1="y"
+      x2="100%"
+      :y2="y"
+      stroke="yellow"
+      stroke-width="1"
+    />
+  </g>
+</template>
+
+<script lang="ts">
+import { useResizeObserver } from '@/src/composables/useResizeObserver';
+import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { useViewStore } from '@/src/store/views';
+import { worldToSVG } from '@/src/utils/vtk-helpers';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import { Vector3 } from '@kitware/vtk.js/types';
+import {
+  PropType,
+  defineComponent,
+  toRefs,
+  unref,
+  ref,
+  watchEffect,
+  computed,
+} from '@vue/composition-api';
+
+type SVGPoint = {
+  x: number;
+  y: number;
+};
+
+export default defineComponent({
+  props: {
+    position: Array as PropType<Array<number>>,
+    viewId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { viewId: viewID, position } = toRefs(props);
+    const position2D = ref<SVGPoint>();
+
+    const viewStore = useViewStore();
+
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const updatePoints = () => {
+      const viewRenderer = viewProxy.value.getRenderer();
+      const pt = unref(position) as Vector3 | undefined;
+      if (pt) {
+        const point2D = worldToSVG(pt, viewRenderer);
+        if (point2D) {
+          position2D.value = {
+            x: point2D[0],
+            y: point2D[1],
+          };
+        }
+      }
+    };
+
+    const cameraOnModified = useVTKCallback(
+      computed(() => viewProxy.value.getCamera().onModified)
+    );
+    cameraOnModified(updatePoints);
+
+    watchEffect(updatePoints);
+
+    // --- resize --- //
+
+    const containerEl = ref<Element | null>(null);
+
+    useResizeObserver(containerEl, () => {
+      updatePoints();
+    });
+
+    return {
+      devicePixelRatio,
+      x: computed(() => position2D.value?.x),
+      y: computed(() => position2D.value?.y),
+      containerEl,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.handle {
+  cursor: pointer;
+}
+</style>

package/src/components/tools/crosshairs/CrosshairsWidget2D.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import {
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+  watchEffect,
+} from '@vue/composition-api';
+import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
+import { LPSAxisDir } from '@/src/types/lps';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
+import { vtkCrosshairsViewWidget } from '@/src/vtk/CrosshairsWidget';
+import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
+
+export default defineComponent({
+  name: 'CrosshairsWidget2D',
+  props: {
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+    viewId: {
+      type: String,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    slice: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      widgetManager: widgetManagerRef,
+      viewDirection,
+      slice,
+    } = toRefs(props);
+
+    const crosshairsStore = useCrosshairsToolStore();
+    const factory = crosshairsStore.getWidgetFactory();
+
+    const widgetRef = ref<vtkCrosshairsViewWidget>();
+
+    const { currentImageMetadata } = useCurrentImage();
+    onMounted(() => {
+      const widgetManager = widgetManagerRef.value;
+      widgetRef.value = widgetManager.addWidget(
+        factory
+      ) as vtkCrosshairsViewWidget;
+
+      if (!widgetRef.value) {
+        throw new Error('[PaintWidget2D] failed to create view widget');
+      }
+    });
+
+    // --- manipulator --- //
+
+    const manipulator = vtkPlaneManipulator.newInstance();
+
+    onMounted(() => {
+      widgetRef.value!.setManipulator(manipulator);
+    });
+
+    watchEffect(() => {
+      updatePlaneManipulatorFor2DView(
+        manipulator,
+        viewDirection.value,
+        slice.value,
+        currentImageMetadata.value
+      );
+    });
+
+    // --- visibility --- //
+
+    onMounted(() => {
+      widgetRef.value!.setVisibility(true);
+    });
+
+    // --- focus and rendering --- //
+
+    onMounted(() => {
+      const widgetManager = widgetManagerRef.value;
+      widgetManager.renderWidgets();
+    });
+
+    onBeforeUnmount(() => {
+      widgetManagerRef.value.removeWidget(widgetRef.value!);
+    });
+
+    return () => null;
+  },
+});
+</script>

package/src/components/tools/paint/PaintWidget2D.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRefs,
+  watchEffect,
+} from '@vue/composition-api';
+import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { vtkPaintViewWidget } from '@/src/vtk/PaintWidget';
+import { useViewStore } from '@/src/store/views';
+import { PaintWidgetState } from '@/src/vtk/PaintWidget/state';
+import { vec3 } from 'gl-matrix';
+import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
+import { LPSAxisDir } from '@/src/types/lps';
+
+export default defineComponent({
+  name: 'PaintWidget2D',
+  props: {
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+    viewId: {
+      type: String,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    slice: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      widgetManager: widgetManagerRef,
+      viewDirection,
+      slice,
+      viewId: viewID,
+    } = toRefs(props);
+
+    const paintStore = usePaintToolStore();
+    const factory = paintStore.getWidgetFactory();
+
+    const viewStore = useViewStore();
+    const viewProxyRef = computed(() => viewStore.getViewProxy(viewID.value));
+
+    const widgetRef = ref<vtkPaintViewWidget>();
+
+    const { currentImageMetadata } = useCurrentImage();
+    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+    const viewAxisIndex = computed(
+      () => currentImageMetadata.value.lpsOrientation[viewAxis.value]
+    );
+
+    const worldPointToIndex = (worldPoint: vec3) => {
+      const { worldToIndex } = currentImageMetadata.value;
+      const indexPoint = vec3.create();
+      vec3.transformMat4(indexPoint, worldPoint, worldToIndex);
+      return indexPoint;
+    };
+
+    onMounted(() => {
+      const widgetManager = widgetManagerRef.value;
+      widgetRef.value = widgetManager.addWidget(factory) as vtkPaintViewWidget;
+
+      if (!widgetRef.value) {
+        throw new Error('[PaintWidget2D] failed to create view widget');
+      }
+    });
+
+    // --- widget representation config --- //
+
+    watchEffect(() => {
+      const widget = widgetRef.value!;
+      const metadata = currentImageMetadata.value;
+      const slicingIndex = metadata.lpsOrientation[viewAxis.value];
+      if (widget) {
+        widget.setSlicingIndex(slicingIndex);
+        widget.setIndexToWorld(metadata.indexToWorld);
+        widget.setWorldToIndex(metadata.worldToIndex);
+      }
+    });
+
+    // --- interaction --- //
+
+    const subs: vtkSubscription[] = [];
+
+    onMounted(() => {
+      const widget = widgetRef.value!;
+
+      subs.push(
+        widget.onStartInteractionEvent(() => {
+          // start stroke
+          const state = widget.getWidgetState() as PaintWidgetState;
+          // StartInteraction cannot occur if origin is null.
+          const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+          paintStore.startStroke(indexPoint, viewAxisIndex.value);
+        }),
+        widget.onInteractionEvent(() => {
+          // register stroke
+          const state = widget.getWidgetState() as PaintWidgetState;
+          const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+          paintStore.placeStrokePoint(indexPoint, viewAxisIndex.value);
+        }),
+        widget.onEndInteractionEvent(() => {
+          // end stroke
+          const state = widget.getWidgetState() as PaintWidgetState;
+          const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+          paintStore.endStroke(indexPoint, viewAxisIndex.value);
+        })
+      );
+    });
+
+    onUnmounted(() => {
+      while (subs.length) {
+        subs.pop()!.unsubscribe();
+      }
+    });
+
+    // --- manipulator --- //
+
+    const manipulator = vtkPlaneManipulator.newInstance();
+
+    onMounted(() => {
+      widgetRef.value!.setManipulator(manipulator);
+    });
+
+    watchEffect(() => {
+      updatePlaneManipulatorFor2DView(
+        manipulator,
+        viewDirection.value,
+        slice.value,
+        currentImageMetadata.value
+      );
+    });
+
+    // --- visibility --- //
+
+    onMounted(() => {
+      widgetRef.value!.setVisibility(false);
+    });
+
+    manageVTKSubscription(
+      viewProxyRef.value!.getInteractor().onMouseEnter(() => {
+        const widget = widgetRef.value;
+        if (widget) {
+          paintStore.setSliceAxis(viewAxisIndex.value);
+          widget.setVisibility(true);
+        }
+      })
+    );
+
+    manageVTKSubscription(
+      viewProxyRef.value!.getInteractor().onMouseLeave(() => {
+        const widget = widgetRef.value;
+        if (widget) {
+          widget.setVisibility(false);
+        }
+      })
+    );
+
+    // --- focus and rendering --- //
+
+    onMounted(() => {
+      const widgetManager = widgetManagerRef.value;
+      widgetManager.renderWidgets();
+      widgetManager.grabFocus(widgetRef.value!);
+    });
+
+    onBeforeUnmount(() => {
+      widgetManagerRef.value.removeWidget(widgetRef.value!);
+      widgetManagerRef.value.releaseFocus();
+    });
+
+    return () => null;
+  },
+});
+</script>

package/src/components/tools/ruler/RulerSVG2D.vue

@@ -0,0 +1,181 @@
+<template>
+  <g ref="containerEl">
+    <line
+      v-if="first && second"
+      :x1="first.x"
+      :y1="first.y"
+      :x2="second.x"
+      :y2="second.y"
+      :stroke="color"
+      stroke-width="1"
+    />
+    <!-- radius is related to the vtkRulerWidget scale, specified in state -->
+    <circle
+      v-if="first"
+      :cx="first.x"
+      :cy="first.y"
+      :stroke="color"
+      stroke-width="1"
+      fill="transparent"
+      :r="10 / devicePixelRatio"
+    />
+    <circle
+      v-if="second"
+      :cx="second.x"
+      :cy="second.y"
+      :stroke="color"
+      stroke-width="1"
+      fill="transparent"
+      :r="10 / devicePixelRatio"
+      class="handle"
+    />
+    <text
+      v-if="second"
+      :x="second.x"
+      :y="second.y"
+      :dx="textdx"
+      :dy="textdy"
+      :text-anchor="anchor"
+      stroke-width="0.75"
+      stroke="black"
+      :fill="color"
+      :font-size="`${textSize}px`"
+      font-weight="bold"
+    >
+      {{ rulerLength }}
+    </text>
+  </g>
+</template>
+
+<script lang="ts">
+import { useResizeObserver } from '@/src/composables/useResizeObserver';
+import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { useViewStore } from '@/src/store/views';
+import { worldToSVG } from '@/src/utils/vtk-helpers';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import { Vector3 } from '@kitware/vtk.js/types';
+import {
+  PropType,
+  computed,
+  defineComponent,
+  toRefs,
+  unref,
+  ref,
+  watch,
+} from '@vue/composition-api';
+
+type SVGPoint = {
+  x: number;
+  y: number;
+};
+
+export default defineComponent({
+  props: {
+    point1: Array as PropType<Array<number>>,
+    point2: Array as PropType<Array<number>>,
+    color: String,
+    length: Number,
+    viewId: {
+      type: String,
+      required: true,
+    },
+    textOffset: {
+      type: Number,
+      default: 8,
+    },
+    textSize: {
+      type: Number,
+      default: 14,
+    },
+  },
+  setup(props) {
+    const {
+      viewId: viewID,
+      point1,
+      point2,
+      textOffset,
+      length,
+    } = toRefs(props);
+    const firstPoint = ref<SVGPoint | null>();
+    const secondPoint = ref<SVGPoint | null>();
+
+    const viewStore = useViewStore();
+
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const updatePoints = () => {
+      const viewRenderer = viewProxy.value.getRenderer();
+      const pt1 = unref(point1) as Vector3 | undefined;
+      const pt2 = unref(point2) as Vector3 | undefined;
+      if (pt1) {
+        const point2D = worldToSVG(pt1, viewRenderer);
+        if (point2D) {
+          firstPoint.value = {
+            x: point2D[0],
+            y: point2D[1],
+          };
+        }
+      }
+      if (pt2) {
+        const point2D = worldToSVG(pt2, viewRenderer);
+        if (point2D) {
+          secondPoint.value = {
+            x: point2D[0],
+            y: point2D[1],
+          };
+        }
+      }
+    };
+
+    const cameraOnModified = useVTKCallback(
+      computed(() => viewProxy.value.getCamera().onModified)
+    );
+    cameraOnModified(updatePoints);
+
+    watch([viewProxy, point1, point2], updatePoints, {
+      deep: true,
+      immediate: true,
+    });
+
+    const textProperties = computed(() => {
+      const first = unref(firstPoint);
+      const second = unref(secondPoint);
+      const offset = textOffset.value;
+      if (!first || !second) {
+        return null;
+      }
+      if (second.x > first.x) {
+        return { dx: offset, dy: -offset, anchor: 'start' };
+      }
+      return { dx: -offset, dy: -offset, anchor: 'end' };
+    });
+
+    // --- resize --- //
+
+    const containerEl = ref<Element | null>(null);
+
+    useResizeObserver(containerEl, () => {
+      updatePoints();
+    });
+
+    return {
+      devicePixelRatio,
+      textdx: computed(() => textProperties.value?.dx ?? 0),
+      textdy: computed(() => textProperties.value?.dy ?? 0),
+      anchor: computed(() => textProperties.value?.anchor ?? 'start'),
+      first: firstPoint,
+      second: secondPoint,
+      rulerLength: computed(() => length?.value?.toFixed(2) ?? ''),
+      containerEl,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.handle {
+  cursor: pointer;
+}
+</style>