volview 4.0.0

package/src/components/tools/MouseManipulatorTool.vue

@@ -0,0 +1,108 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  onBeforeUnmount,
+  toRefs,
+  watch,
+} from '@vue/composition-api';
+import { useViewStore } from '@/src/store/views';
+
+export default defineComponent({
+  name: 'MouseManipulatorTool',
+  props: {
+    // only useful for determining the kind of manipulator
+    name: String,
+    viewId: {
+      type: String,
+      required: true,
+    },
+    manipulatorClass: {
+      type: Object,
+      required: true,
+    },
+    options: {
+      type: Array as PropType<Array<any>>,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const { viewId: viewID, options } = toRefs(props);
+
+    const viewStore = useViewStore();
+    const viewProxy = computed(() => viewStore.getViewProxy(viewID.value)!);
+
+    const intStyle = computed(() => {
+      return viewProxy.value.isA('vtkView2DProxy')
+        ? viewProxy.value.getInteractorStyle2D()
+        : viewProxy.value.getInteractorStyle3D();
+    });
+
+    const manipulators: any[] = [];
+
+    function updateStyle(
+      style: any,
+      newManipulators: any[],
+      oldManipulators: any[]
+    ) {
+      if (style !== null) {
+        oldManipulators.forEach((m) => style.removeMouseManipulator(m));
+        newManipulators.forEach((m) => style.addMouseManipulator(m));
+      }
+    }
+
+    watch(
+      options,
+      (newOptions) => {
+        // Maintain the size of manipulators array equal to options array.
+        while (manipulators.length > newOptions.length) {
+          const m = manipulators.pop();
+          intStyle.value.removeMouseManipulator(m);
+          m.delete();
+        }
+
+        const oldManipulators = Array.from(manipulators);
+
+        for (let i = manipulators.length; i < newOptions.length; ++i) {
+          manipulators.push(props.manipulatorClass.newInstance(newOptions[i]));
+        }
+
+        newOptions.forEach((opt, idx) => {
+          if ('button' in opt) {
+            manipulators[idx].setButton(opt.button);
+          }
+          manipulators[idx].setShift(!!opt.shift);
+          manipulators[idx].setControl(!!opt.control);
+        });
+
+        updateStyle(intStyle.value, manipulators, oldManipulators);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      intStyle,
+      (curIntStyle, oldIntStyle) => {
+        manipulators.forEach((m) => {
+          if (oldIntStyle) {
+            oldIntStyle.removeMouseManipulator(m);
+          }
+          if (curIntStyle) {
+            curIntStyle.addMouseManipulator(m);
+          }
+        });
+      },
+      { immediate: true }
+    );
+
+    onBeforeUnmount(() => {
+      if (!viewProxy.value.isDeleted()) {
+        manipulators.forEach((m) => intStyle.value.removeMouseManipulator(m));
+      }
+    });
+
+    return () => null;
+  },
+});
+</script>

package/src/components/tools/PaintTool.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="overlay-no-events">
+    <PaintWidget2D
+      v-if="active"
+      :slice="slice"
+      :view-id="viewId"
+      :view-direction="viewDirection"
+      :widget-manager="widgetManager"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@vue/composition-api';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { LPSAxisDir } from '@/src/types/lps';
+import PaintWidget2D from './paint/PaintWidget2D.vue';
+
+export default defineComponent({
+  name: 'PaintTool',
+  props: {
+    viewId: {
+      type: String,
+      required: true,
+    },
+    slice: {
+      type: Number,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+  },
+  components: {
+    PaintWidget2D,
+  },
+  setup() {
+    const paintStore = usePaintToolStore();
+    const active = computed(() => paintStore.isActive);
+
+    return {
+      active,
+    };
+  },
+});
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>

package/src/components/tools/PanTool.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { CreateElement, RenderContext } from 'vue';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+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: 2 });
+    toolOptions.push({ button: 1, shift: true });
+    if (toolStore.currentTool === Tools.Pan) {
+      // Additionally enable left-button-only action if Pan tool is active
+      toolOptions.push({ button: 1 });
+    }
+
+    return h(MouseManipulatorTool, {
+      props: {
+        ...ctx.props,
+        name: 'PanTool',
+        manipulatorClass: vtkMouseCameraTrackballPanManipulator,
+        options: toolOptions,
+      },
+    });
+  },
+};
+</script>

package/src/components/tools/RulerTool.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="overlay-no-events">
+    <svg class="overlay-no-events">
+      <RulerSVG2D
+        v-for="ruler in rulers"
+        :key="ruler.id"
+        v-show="slice === ruler.slice"
+        :view-id="viewId"
+        :point1="ruler.firstPoint"
+        :point2="ruler.secondPoint"
+        :color="ruler.color"
+        :length="ruler.length"
+      />
+    </svg>
+    <div>
+      <RulerWidget2D
+        v-for="ruler in rulers"
+        :key="ruler.id"
+        :ruler-id="ruler.id"
+        :slice="slice"
+        :view-id="viewId"
+        :view-direction="viewDirection"
+        :focused="ruler.focused"
+        :widget-manager="widgetManager"
+        @contextmenu="openContextMenu(ruler.id, $event)"
+      />
+    </div>
+    <v-menu
+      v-model="contextMenu.show"
+      :position-x="contextMenu.x"
+      :position-y="contextMenu.y"
+      absolute
+      offset-y
+      close-on-click
+      close-on-content-click
+    >
+      <v-list dense>
+        <v-list-item @click="deleteRulerFromContextMenu">
+          <v-list-item-title>Delete</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  reactive,
+  toRefs,
+  watch,
+} from '@vue/composition-api';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
+import { useRulerStore } from '@/src/store/tools/rulers';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
+import RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { EVENT_ABORT, VOID } from '@kitware/vtk.js/macros';
+import { shouldIgnoreEvent } from '@/src/vtk/RulerWidget';
+import { useViewStore } from '@/src/store/views';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import { Vector2 } from '@kitware/vtk.js/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import { useVTKCallback } from '@/src/composables/useVTKCallback';
+
+export default defineComponent({
+  name: 'RulerTool',
+  props: {
+    viewId: {
+      type: String,
+      required: true,
+    },
+    slice: {
+      type: Number,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+  },
+  components: {
+    RulerWidget2D,
+    RulerSVG2D,
+  },
+  setup(props) {
+    const { viewId: viewID, viewDirection } = toRefs(props);
+    const viewStore = useViewStore();
+    const toolStore = useToolStore();
+    const rulerStore = useRulerStore();
+
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const { currentImageID } = useCurrentImage();
+    const active = computed(() => toolStore.currentTool === Tools.Ruler);
+    const activeRulerID = computed(() => rulerStore.activeRulerID);
+    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+
+    // --- context menu --- //
+
+    const contextMenu = reactive({
+      show: false,
+      x: 0,
+      y: 0,
+      forRulerID: '',
+    });
+
+    const openContextMenu = (rulerID: string, displayXY: Vector2) => {
+      [contextMenu.x, contextMenu.y] = displayXY;
+      contextMenu.show = true;
+      contextMenu.forRulerID = rulerID;
+    };
+
+    const deleteRulerFromContextMenu = () => {
+      rulerStore.removeRuler(contextMenu.forRulerID);
+    };
+
+    // --- ruler lifecycle --- //
+
+    const deleteActiveRuler = () => {
+      rulerStore.removeActiveRuler();
+    };
+
+    const startNewRuler = (eventData: any) => {
+      if (!active.value || contextMenu.show || shouldIgnoreEvent(eventData)) {
+        return VOID;
+      }
+      rulerStore.addNewRulerFromViewEvent(eventData, viewID.value);
+      return EVENT_ABORT;
+    };
+
+    // We don't create a ruler until we receive a click, so
+    // the button press listener must be here rather than in
+    // the widget itself.
+    // We may support configuring which mouse button triggers this tool
+    // in the future.
+    const onLeftButtonPress = useVTKCallback(
+      computed(() => viewProxy.value.getInteractor().onLeftButtonPress)
+    );
+    onLeftButtonPress(startNewRuler);
+
+    // delete active ruler if slice changes
+    watch(
+      () => props.slice,
+      () => {
+        deleteActiveRuler();
+      }
+    );
+
+    // --- ruler data --- //
+
+    const currentRulers = computed(() => {
+      const { rulers: rulerByID, lengthByID } = rulerStore;
+      const curImageID = currentImageID.value;
+      const isToolActive = active.value;
+      const curViewAxis = viewAxis.value;
+      const curActiveRulerID = activeRulerID.value;
+
+      return rulerStore.rulerIDs
+        .map((id) => ({ id, ruler: rulerByID[id] }))
+        .filter(({ ruler }) => {
+          // only show rulers for the current image and the current view
+          return (
+            ruler.imageID === curImageID &&
+            (!ruler.viewAxis || ruler.viewAxis === curViewAxis)
+          );
+        })
+        .map(({ id, ruler }) => {
+          return {
+            id,
+            firstPoint: ruler.firstPoint,
+            secondPoint: ruler.secondPoint,
+            color: ruler.color,
+            slice: ruler.slice,
+            length: lengthByID[id],
+            focused: isToolActive && curActiveRulerID === id,
+          };
+        });
+    });
+
+    return {
+      rulers: currentRulers,
+      contextMenu,
+      openContextMenu,
+      deleteRulerFromContextMenu,
+    };
+  },
+});
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>

package/src/components/tools/SliceScrollTool.vue

@@ -0,0 +1,123 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  ref,
+  toRefs,
+  watch,
+} from '@vue/composition-api';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useViewConfigStore } from '@/src/store/view-configs';
+import { useViewStore } from '@/src/store/views';
+import { defaultSliceConfig } from '@/src/store/view-configs/slicing';
+
+export default defineComponent({
+  name: 'SliceScrollTool',
+  props: {
+    viewId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { viewId: viewID } = toRefs(props);
+    const viewConfigStore = useViewConfigStore();
+    const viewStore = useViewStore();
+    const { currentImageID } = useCurrentImage();
+
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const sliceConfigDefault = defaultSliceConfig();
+    const sliceConfig = computed(() =>
+      currentImageID.value !== null
+        ? viewConfigStore.getSliceConfig(viewID.value, currentImageID.value)!
+        : null
+    );
+    const sliceRange = computed(() => ({
+      min:
+        sliceConfig.value !== null
+          ? sliceConfig.value.min
+          : sliceConfigDefault.min,
+      max:
+        sliceConfig.value !== null
+          ? sliceConfig.value.max
+          : sliceConfigDefault.max,
+      step: 1,
+      default:
+        sliceConfig.value !== null
+          ? sliceConfig.value.slice
+          : sliceConfigDefault.slice,
+    }));
+
+    const scrollVal = ref(0);
+
+    const rangeManipulator = vtkMouseRangeManipulator.newInstance({
+      button: -1, // don't bind to any buttons
+      scrollEnabled: true,
+    });
+
+    watch(
+      viewProxy,
+      (curViewProxy, oldViewProxy) => {
+        if (oldViewProxy) {
+          const istyle = oldViewProxy.getInteractorStyle2D();
+          istyle.removeMouseManipulator(rangeManipulator);
+        }
+
+        if (curViewProxy) {
+          // assumed to be vtkInteractorStyleManipulator
+          const istyle = viewProxy.value.getInteractorStyle2D();
+          istyle.addMouseManipulator(rangeManipulator);
+        }
+      },
+      { immediate: true }
+    );
+
+    onBeforeUnmount(() => {
+      // for some reason, VtkTwoView.onBeforeUnmount is being
+      // invoked before this onBeforeUnmount during HMR.
+      if (!viewProxy.value.isDeleted()) {
+        const istyle = viewProxy.value.getInteractorStyle2D();
+        istyle.removeMouseManipulator(rangeManipulator);
+      }
+    });
+
+    function updateManipulator() {
+      rangeManipulator.removeAllListeners();
+      const range = sliceRange.value;
+
+      rangeManipulator.setScrollListener(
+        range.min,
+        range.max,
+        range.step,
+        () => scrollVal.value,
+        (slice) => {
+          if (currentImageID.value !== null) {
+            viewConfigStore.updateSliceConfig(
+              viewID.value,
+              currentImageID.value,
+              { slice }
+            );
+          }
+        }
+      );
+    }
+
+    watch(
+      sliceRange,
+      (range) => {
+        scrollVal.value = range.default;
+        updateManipulator();
+      },
+      { immediate: true }
+    );
+
+    return () => null;
+  },
+});
+</script>

package/src/components/tools/WindowLevelTool.vue

@@ -0,0 +1,191 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  ref,
+  toRefs,
+  watch,
+} from '@vue/composition-api';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
+import { useViewConfigStore } from '@/src/store/view-configs';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import { CreateElement, RenderContext } from 'vue';
+import { useViewStore } from '@/src/store/views';
+import { defaultWindowLevelConfig } from '@/src/store/view-configs/windowing';
+
+function computeStep(min: number, max: number) {
+  return Math.min(max - min, 1) / 256;
+}
+
+const PROPS = {
+  viewId: {
+    type: String,
+    required: true,
+  },
+} as const;
+
+const WindowLevelTool = defineComponent({
+  name: 'WindowLevelTool',
+  props: PROPS,
+  setup(props) {
+    const { viewId: viewID } = toRefs(props);
+    const viewConfigStore = useViewConfigStore();
+    const viewStore = useViewStore();
+    const { currentImageID } = useCurrentImage();
+
+    const viewProxy = computed(
+      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
+    );
+
+    const windowConfigDefaults = defaultWindowLevelConfig();
+    const wlConfig = computed(() =>
+      currentImageID.value !== null
+        ? viewConfigStore.getWindowingConfig(
+            viewID.value,
+            currentImageID.value
+          )!
+        : null
+    );
+
+    const wwRange = computed(() => ({
+      min: 1e-12, // ensure we don't hit zero and jump to white
+      max:
+        wlConfig.value !== null
+          ? wlConfig.value.max - wlConfig.value.min
+          : windowConfigDefaults.max,
+      step:
+        wlConfig.value !== null
+          ? computeStep(wlConfig.value.min, wlConfig.value.max)
+          : computeStep(windowConfigDefaults.min, windowConfigDefaults.max),
+      default:
+        wlConfig.value !== null
+          ? wlConfig.value.width
+          : windowConfigDefaults.width,
+    }));
+    const wlRange = computed(() => ({
+      min:
+        wlConfig.value !== null ? wlConfig.value.min : windowConfigDefaults.min,
+      max:
+        wlConfig.value !== null ? wlConfig.value.max : windowConfigDefaults.max,
+      step:
+        wlConfig.value !== null
+          ? computeStep(wlConfig.value.min, wlConfig.value.max)
+          : computeStep(windowConfigDefaults.min, windowConfigDefaults.max),
+      default:
+        wlConfig.value !== null
+          ? wlConfig.value.level
+          : windowConfigDefaults.level,
+    }));
+
+    const vertVal = ref(0);
+    const horizVal = ref(0);
+
+    watch(vertVal, (ww) => {
+      if (currentImageID.value !== null) {
+        viewConfigStore.updateWindowingConfig(
+          viewID.value,
+          currentImageID.value,
+          {
+            width: ww,
+          }
+        );
+      }
+    });
+    watch(horizVal, (wl) => {
+      if (currentImageID.value !== null) {
+        viewConfigStore.updateWindowingConfig(
+          viewID.value,
+          currentImageID.value,
+          {
+            level: wl,
+          }
+        );
+      }
+    });
+
+    const rangeManipulator = vtkMouseRangeManipulator.newInstance({
+      button: 1,
+      scrollEnabled: false,
+    });
+
+    watch(
+      viewProxy,
+      (curViewProxy, oldViewProxy) => {
+        if (oldViewProxy) {
+          const istyle = oldViewProxy.getInteractorStyle2D();
+          istyle.removeMouseManipulator(rangeManipulator);
+        }
+
+        if (curViewProxy) {
+          // assumed to be vtkInteractorStyleManipulator
+          const istyle = viewProxy.value.getInteractorStyle2D();
+          istyle.addMouseManipulator(rangeManipulator);
+        }
+      },
+      { immediate: true }
+    );
+
+    onBeforeUnmount(() => {
+      // for some reason, VtkTwoView.onBeforeUnmount is being
+      // invoked before this onBeforeUnmount during HMR.
+      if (!viewProxy.value.isDeleted()) {
+        const istyle = viewProxy.value.getInteractorStyle2D();
+        istyle.removeMouseManipulator(rangeManipulator);
+      }
+    });
+
+    function updateManipulator() {
+      rangeManipulator.removeAllListeners();
+      const vertRange = wwRange.value;
+      const horizRange = wlRange.value;
+
+      rangeManipulator.setVerticalListener(
+        vertRange.min,
+        vertRange.max,
+        vertRange.step,
+        () => vertVal.value,
+        (v) => {
+          vertVal.value = v;
+        }
+      );
+
+      rangeManipulator.setHorizontalListener(
+        horizRange.min,
+        horizRange.max,
+        horizRange.step,
+        () => horizVal.value,
+        (v) => {
+          horizVal.value = v;
+        }
+      );
+    }
+
+    watch(
+      () => [wwRange.value, wlRange.value],
+      ([ww, wl]) => {
+        vertVal.value = ww.default;
+        horizVal.value = wl.default;
+        updateManipulator();
+      },
+      { immediate: true }
+    );
+
+    return () => null;
+  },
+});
+
+export default {
+  functional: true,
+  render(h: CreateElement, ctx: RenderContext<typeof PROPS>) {
+    const toolStore = useToolStore();
+    const active = computed(() => toolStore.currentTool === Tools.WindowLevel);
+    // TODO vue 3 does away with VNodeData, so
+    // remove the props key
+    return active.value ? h(WindowLevelTool, { props: ctx.props }) : [];
+  },
+};
+</script>