volview 4.0.0 → 4.0.1

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

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

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

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

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

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

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