volview 4.0.0 → 4.0.1

package/src/components/VtkTwoView.vue

@@ -1,665 +0,0 @@
-<template>
-  <div
-    class="vtk-container-wrapper"
-    tabindex="0"
-    @pointerenter="hover = true"
-    @pointerleave="hover = false"
-    @focusin="hover = true"
-    @focusout="hover = false"
-  >
-    <div class="vtk-gutter">
-      <v-tooltip right transition="slide-x-transition">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn
-            dark
-            x-small
-            icon
-            @click="enableResizeToFit"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon small class="py-1">mdi-camera-flip-outline</v-icon>
-          </v-btn>
-        </template>
-        <span>Reset camera</span>
-      </v-tooltip>
-      <slice-slider
-        class="slice-slider"
-        :slice="slice"
-        :min="sliceMin"
-        :max="sliceMax"
-        :step="1"
-        :handle-height="20"
-        @input="setSlice"
-      />
-    </div>
-    <div class="vtk-container" :class="active ? 'active' : ''">
-      <div class="vtk-sub-container">
-        <div class="vtk-view" ref="vtkContainerRef" />
-      </div>
-      <div class="overlay-no-events tool-layer">
-        <pan-tool :view-id="viewID" />
-        <zoom-tool :view-id="viewID" />
-        <slice-scroll-tool :view-id="viewID" />
-        <window-level-tool :view-id="viewID" />
-        <ruler-tool
-          view-type="2D"
-          :view-id="viewID"
-          :widget-manager="widgetManager"
-          :view-direction="viewDirection"
-          :slice="slice"
-        />
-        <paint-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :widget-manager="widgetManager"
-          :slice="slice"
-        />
-        <crosshairs-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :widget-manager="widgetManager"
-          :slice="slice"
-        />
-        <crop-tool :view-id="viewID" />
-      </div>
-      <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:top-middle>
-          <div class="annotation-cell">
-            <span>{{ topLabel }}</span>
-          </div>
-        </template>
-        <template v-slot:middle-left>
-          <div class="annotation-cell">
-            <span>{{ leftLabel }}</span>
-          </div>
-        </template>
-        <template v-slot:bottom-left>
-          <div class="annotation-cell">
-            <div>Slice: {{ slice + 1 }}/{{ sliceMax + 1 }}</div>
-            <div
-              v-if="
-                typeof windowWidth === 'number' &&
-                typeof windowLevel === 'number'
-              "
-            >
-              W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
-            </div>
-          </div>
-        </template>
-        <template v-slot:top-right>
-          <div class="annotation-cell">
-            <v-menu
-              open-on-hover
-              offset-y
-              left
-              nudge-left="10"
-              dark
-              v-if="dicomInfo !== null"
-              max-width="300px"
-            >
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  dark
-                  small
-                  icon
-                  v-bind="attrs"
-                  v-on="on"
-                  class="pointer-events-all"
-                >
-                  <v-icon dark> mdi-information </v-icon>
-                </v-btn>
-              </template>
-              <v-list class="grey darken-3">
-                <v-list-item>
-                  <v-list-item-content>
-                    <v-list-item-title class="font-weight-bold">
-                      PATIENT / CASE
-                    </v-list-item-title>
-                    <v-divider />
-                    <v-list-item-title>
-                      ID: {{ dicomInfo.patientID }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>
-                    <v-list-item-title class="font-weight-bold">
-                      STUDY
-                    </v-list-item-title>
-                    <v-divider />
-                    <v-list-item-title>
-                      ID: {{ dicomInfo.studyID }}
-                    </v-list-item-title>
-                    <v-list-item-title>
-                      {{ dicomInfo.studyDescription }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>
-                    <v-list-item-title class="font-weight-bold">
-                      SERIES
-                    </v-list-item-title>
-                    <v-divider />
-                    <v-list-item-title>
-                      Series #: {{ dicomInfo.seriesNumber }}
-                    </v-list-item-title>
-                    <v-list-item-title>
-                      {{ dicomInfo.seriesDescription }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </div>
-        </template>
-      </view-overlay-grid>
-      <transition name="loading">
-        <div v-if="isImageLoading" class="overlay-no-events loading">
-          <div>Loading the image</div>
-          <div>
-            <v-progress-circular indeterminate color="blue" />
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  provide,
-  ref,
-  toRefs,
-  watch,
-  watchEffect,
-} from '@vue/composition-api';
-import { vec3 } from 'gl-matrix';
-import { onKeyStroke } from '@vueuse/core';
-
-import { useResizeToFit } from '@src/composables/useResizeToFit';
-import vtkLPSView2DProxy from '@src/vtk/LPSView2DProxy';
-import vtkIJKSliceRepresentationProxy from '@src/vtk/IJKSliceRepresentationProxy';
-import { manageVTKSubscription } from '@src/composables/manageVTKSubscription';
-import SliceSlider from '@src/components/SliceSlider.vue';
-import ViewOverlayGrid from '@src/components/ViewOverlayGrid.vue';
-import { useResizeObserver } from '../composables/useResizeObserver';
-import { useOrientationLabels } from '../composables/useOrientationLabels';
-import { getLPSAxisFromDir } from '../utils/lps';
-import { useCurrentImage } from '../composables/useCurrentImage';
-import { useCameraOrientation } from '../composables/useCameraOrientation';
-import WindowLevelTool from './tools/WindowLevelTool.vue';
-import SliceScrollTool from './tools/SliceScrollTool.vue';
-import PanTool from './tools/PanTool.vue';
-import ZoomTool from './tools/ZoomTool.vue';
-import RulerTool from './tools/RulerTool.vue';
-import PaintTool from './tools/PaintTool.vue';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
-import { useDICOMStore } from '../store/datasets-dicom';
-import { useLabelmapStore } from '../store/datasets-labelmaps';
-import vtkLabelMapSliceRepProxy from '../vtk/LabelMapSliceRepProxy';
-import { usePaintToolStore } from '../store/tools/paint';
-import { useViewConfigStore } from '../store/view-configs';
-import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
-import CrosshairsTool from './tools/CrosshairsTool.vue';
-import { LPSAxisDir } from '../types/lps';
-import { ViewProxyType } from '../core/proxies';
-import { useViewProxy } from '../composables/useViewProxy';
-import { useWidgetManager } from '../composables/useWidgetManager';
-import { CameraConfig } from '../store/view-configs/types';
-import { defaultSliceConfig } from '../store/view-configs/slicing';
-import { useWindowingSync } from '../composables/sync/useWindowingSync';
-import CropTool from './tools/CropTool.vue';
-import { VTKTwoViewWidgetManager } from '../constants';
-
-const SLICE_OFFSET_KEYS: Record<string, number> = {
-  ArrowLeft: -1,
-  ArrowRight: 1,
-  ArrowUp: -1,
-  ArrowDown: 1,
-} as const;
-
-export default defineComponent({
-  name: 'VtkTwoView',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    viewUp: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-  },
-  components: {
-    SliceSlider,
-    ViewOverlayGrid,
-    WindowLevelTool,
-    SliceScrollTool,
-    PanTool,
-    ZoomTool,
-    RulerTool,
-    PaintTool,
-    CrosshairsTool,
-    CropTool,
-  },
-  setup(props) {
-    const viewConfigStore = useViewConfigStore();
-    const paintStore = usePaintToolStore();
-
-    const { id: viewID, viewDirection, viewUp } = toRefs(props);
-
-    const vtkContainerRef = ref<HTMLElement>();
-
-    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
-
-    // --- computed vars --- //
-
-    const {
-      currentImageData: curImageData,
-      currentImageID: curImageID,
-      currentImageMetadata: curImageMetadata,
-      isImageLoading,
-    } = useCurrentImage();
-
-    const dicomStore = useDICOMStore();
-
-    const sliceConfigDefaults = defaultSliceConfig();
-    const sliceConfig = computed(() =>
-      curImageID.value !== null
-        ? viewConfigStore.getSliceConfig(viewID.value, curImageID.value)!
-        : null
-    );
-    const currentSlice = computed(() =>
-      sliceConfig.value !== null
-        ? sliceConfig.value.slice
-        : sliceConfigDefaults.slice
-    );
-    const sliceMin = computed(() =>
-      sliceConfig.value !== null
-        ? sliceConfig.value.min
-        : sliceConfigDefaults.min
-    );
-    const sliceMax = computed(() =>
-      sliceConfig.value !== null
-        ? sliceConfig.value.max
-        : sliceConfigDefaults.max
-    );
-
-    const wlConfig = computed({
-      get: () => {
-        const _viewID = viewID.value;
-        const imageID = curImageID.value;
-        if (imageID !== null) {
-          return viewConfigStore.getWindowingConfig(_viewID, imageID) ?? null;
-        }
-        return null;
-      },
-      set: (newValue) => {
-        const imageID = curImageID.value;
-        if (imageID !== null && newValue != null) {
-          viewConfigStore.updateWindowingConfig(
-            viewID.value,
-            imageID,
-            newValue
-          );
-        }
-      },
-    });
-
-    const windowWidth = computed(() => wlConfig.value?.width);
-    const windowLevel = computed(() => wlConfig.value?.level);
-    const dicomInfo = computed(() => {
-      if (
-        curImageID.value !== null &&
-        curImageID.value in dicomStore.imageIDToVolumeKey
-      ) {
-        const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
-        const volumeInfo = dicomStore.volumeInfo[volumeKey];
-        const studyKey = dicomStore.volumeStudy[volumeKey];
-        const studyInfo = dicomStore.studyInfo[studyKey];
-        const patientKey = dicomStore.studyPatient[studyKey];
-        const patientInfo = dicomStore.patientInfo[patientKey];
-
-        const patientID = patientInfo.PatientID;
-        const studyID = studyInfo.StudyID;
-        const studyDescription = studyInfo.StudyDescription;
-        const seriesNumber = volumeInfo.SeriesNumber;
-        const seriesDescription = volumeInfo.SeriesDescription;
-
-        return {
-          patientID,
-          studyID,
-          studyDescription,
-          seriesNumber,
-          seriesDescription,
-        };
-      }
-
-      return null;
-    });
-
-    const sliceDomain = computed(() => {
-      const { lpsOrientation, dimensions } = curImageMetadata.value;
-      const ijkIndex = lpsOrientation[viewAxis.value];
-      const dimMax = dimensions[ijkIndex];
-
-      return {
-        min: 0,
-        max: dimMax - 1,
-      };
-    });
-
-    // --- setters --- //
-
-    const setSlice = (slice: number) => {
-      if (curImageID.value !== null) {
-        viewConfigStore.updateSliceConfig(viewID.value, curImageID.value, {
-          slice,
-        });
-      }
-    };
-
-    // --- view proxy setup --- //
-
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView2DProxy>(viewID, ViewProxyType.Slice);
-
-    onBeforeMount(() => {
-      // do this before mount, as the ManipulatorTools run onMounted
-      // before this component does.
-      viewProxy.value.getInteractorStyle2D().removeAllManipulators();
-    });
-
-    onMounted(() => {
-      setViewProxyContainer(vtkContainerRef.value);
-      viewProxy.value.setOrientationAxesVisibility(false);
-    });
-
-    onBeforeUnmount(() => {
-      setViewProxyContainer(null);
-    });
-
-    // --- Slicing setup --- //
-
-    watchEffect(() => {
-      const ijkIndex = curImageMetadata.value.lpsOrientation[viewAxis.value];
-      viewProxy.value.setSlicingMode('IJK'[ijkIndex]);
-    });
-
-    watch(
-      [viewID, curImageID, viewDirection],
-      () => {
-        if (
-          curImageID.value &&
-          !viewConfigStore.getSliceConfig(viewID.value, curImageID.value)
-        ) {
-          viewConfigStore.updateSliceConfig(viewID.value, curImageID.value, {
-            ...sliceDomain.value,
-            axisDirection: viewDirection.value,
-          });
-          viewConfigStore.resetSlice(viewID.value, curImageID.value);
-        }
-      },
-      { immediate: true, deep: true }
-    );
-
-    // --- arrows change slice --- //
-
-    const { currentImageID } = useCurrentImage();
-
-    const hover = ref(false);
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!currentImageID.value || !hover.value) return;
-
-      const sliceOffset = SLICE_OFFSET_KEYS[event.key] ?? 0;
-      if (sliceOffset) {
-        viewConfigStore.updateSliceConfig(viewID.value, currentImageID.value, {
-          slice: currentSlice.value + sliceOffset,
-        });
-
-        event.stopPropagation();
-      }
-    };
-    onKeyStroke(Object.keys(SLICE_OFFSET_KEYS), onKeyDown);
-
-    // --- resizing --- //
-
-    useResizeObserver(vtkContainerRef, () => viewProxy.value.resize());
-
-    // --- widget manager --- //
-
-    const { widgetManager } = useWidgetManager(viewProxy);
-    provide(VTKTwoViewWidgetManager, widgetManager);
-
-    // --- window/level setup --- //
-
-    watch(
-      curImageData,
-      (imageData, oldImageData) => {
-        if (imageData && imageData !== oldImageData) {
-          // TODO listen to changes in point data
-          const range = imageData.getPointData().getScalars().getRange();
-          if (
-            curImageID.value !== null &&
-            !viewConfigStore.getWindowingConfig(viewID.value, curImageID.value)
-          ) {
-            viewConfigStore.updateWindowingConfig(
-              viewID.value,
-              curImageID.value,
-              {
-                min: range[0],
-                max: range[1],
-              }
-            );
-            viewConfigStore.resetWindowLevel(viewID.value, curImageID.value);
-          }
-        }
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    // --- sync windowing parameters --- //
-
-    useWindowingSync(curImageID, wlConfig);
-
-    // --- scene setup --- //
-
-    const labelmapStore = useLabelmapStore();
-
-    const labelmapIDs = computed(() => {
-      return labelmapStore.idList.filter(
-        (id) => labelmapStore.parentImage[id] === curImageID.value
-      );
-    });
-
-    const { baseImageRep, labelmapReps } = useSceneBuilder<
-      vtkIJKSliceRepresentationProxy,
-      vtkLabelMapSliceRepProxy
-    >(viewID, {
-      baseImage: curImageID,
-      labelmaps: labelmapIDs,
-    });
-
-    // --- camera setup --- //
-
-    const { cameraDirVec, cameraUpVec } = useCameraOrientation(
-      viewDirection,
-      viewUp,
-      curImageMetadata
-    );
-    const { resizeToFit, ignoreResizeToFitTracking, resetResizeToFitTracking } =
-      useResizeToFit(viewProxy.value.getCamera(), false);
-
-    const resizeToFitScene = () =>
-      ignoreResizeToFitTracking(() => {
-        // resize to fit
-        const lookAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewDirection.value)
-          ];
-        const upAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewUp.value)
-          ];
-        const dimsWithSpacing = curImageMetadata.value.dimensions.map(
-          (d, i) => d * curImageMetadata.value.spacing[i]
-        );
-        viewProxy.value.resizeToFit(lookAxis, upAxis, dimsWithSpacing);
-        resetResizeToFitTracking();
-      });
-
-    const resetCamera = () => {
-      const bounds = curImageMetadata.value.worldBounds;
-      const center = [
-        (bounds[0] + bounds[1]) / 2,
-        (bounds[2] + bounds[3]) / 2,
-        (bounds[4] + bounds[5]) / 2,
-      ] as vec3;
-
-      // do not track resizeToFit state
-      ignoreResizeToFitTracking(() => {
-        viewProxy.value.updateCamera(
-          cameraDirVec.value,
-          cameraUpVec.value,
-          center
-        );
-        viewProxy.value.resetCamera(bounds);
-      });
-
-      resizeToFitScene();
-
-      viewProxy.value.render();
-    };
-
-    manageVTKSubscription(
-      viewProxy.value.onResize(() => {
-        if (resizeToFit.value) {
-          resizeToFitScene();
-        }
-      })
-    );
-
-    // if we re-enable resizeToFit, reset the camera
-    watch(resizeToFit, () => {
-      if (resizeToFit.value) {
-        resetCamera();
-      }
-    });
-
-    const { restoreCameraConfig } = usePersistCameraConfig(
-      viewID,
-      curImageID,
-      viewProxy,
-      'parallelScale',
-      'position',
-      'focalPoint',
-      'viewUp'
-    );
-
-    watch(
-      [curImageID, cameraDirVec, cameraUpVec],
-      () => {
-        let cameraConfig: CameraConfig | undefined;
-        if (curImageID.value !== null) {
-          cameraConfig = viewConfigStore.getCameraConfig(
-            viewID.value,
-            curImageID.value
-          );
-        }
-
-        // If we have a save camera configuration restore it
-        if (cameraConfig) {
-          restoreCameraConfig(cameraConfig);
-
-          viewProxy.value.getRenderer().resetCameraClippingRange();
-          viewProxy.value.render();
-
-          // Prevent resize
-          resizeToFit.value = false;
-        } else if (resizeToFit.value) {
-          resetCamera();
-        } else {
-          // this will trigger a resetCamera() call
-          resizeToFit.value = true;
-        }
-      },
-      { immediate: true, deep: true }
-    );
-
-    // --- viewport orientation/camera labels --- //
-
-    const { top: topLabel, left: leftLabel } = useOrientationLabels(viewProxy);
-
-    // --- apply windowing and slice configs --- //
-
-    watchEffect(() => {
-      if (sliceConfig.value === null || wlConfig.value === null) {
-        return;
-      }
-
-      const { slice } = sliceConfig.value;
-      const { width, level } = wlConfig.value;
-      const rep = baseImageRep.value;
-      if (rep) {
-        rep.setSlice(slice);
-        rep.setWindowWidth(width);
-        rep.setWindowLevel(level);
-      }
-      labelmapReps.value.forEach((lmRep) => {
-        lmRep.setSlice(slice);
-      });
-
-      viewProxy.value.render();
-    });
-
-    // --- apply labelmap opacity --- //
-
-    watchEffect(() => {
-      const { labelmapOpacity } = paintStore;
-      labelmapReps.value.forEach((lmRep) => {
-        lmRep.setOpacity(labelmapOpacity);
-      });
-    });
-
-    return {
-      vtkContainerRef,
-      viewID,
-      viewProxy,
-      viewAxis,
-      active: true,
-      slice: currentSlice,
-      sliceMin,
-      sliceMax,
-      windowWidth,
-      windowLevel,
-      topLabel,
-      leftLabel,
-      isImageLoading,
-      setSlice,
-      widgetManager,
-      dicomInfo,
-      enableResizeToFit() {
-        resizeToFit.value = true;
-      },
-      hover,
-    };
-  },
-});
-</script>
-
-<style scoped src="@/src/components/styles/vtk-view.css"></style>
-<style scoped src="@/src/components/styles/utils.css"></style>

package/src/components/__tests__/ResizableNavDrawer.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
-import { expect } from 'chai';
-import { createLocalVue, mount } from '@vue/test-utils';
-
-import ResizableNavDrawer, {
-  RESIZE_CURSOR,
-} from '@/src/components/ResizableNavDrawer.vue';
-
-Vue.use(Vuetify);
-
-const localVue = createLocalVue();
-
-describe('ResizableNavDrawer.vue', () => {
-  let vuetify;
-
-  beforeEach(() => {
-    vuetify = new Vuetify();
-  });
-
-  it('Body styles are applied correctly on resize', () => {
-    const wrapper = mount(ResizableNavDrawer, { localVue, vuetify });
-
-    wrapper.vm.startResize();
-    expect(document.body.style.cursor).to.equal(RESIZE_CURSOR);
-    expect(document.body.style.userSelect).to.equal('none');
-
-    wrapper.vm.stopResize();
-    expect(document.body.style.cursor).to.be.empty;
-    expect(document.body.style.userSelect).to.be.empty;
-  });
-});