volview 4.0.0

package/src/store/tools/rulers.ts

@@ -0,0 +1,305 @@
+import { computed, del, ref, set } from '@vue/composition-api';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
+import { removeFromArray } from '@/src/utils';
+import { RulerStateUpdate } from '@/src/core/tools/ruler';
+import { TOOL_COLORS } from '@/src/config';
+import { defineStore } from 'pinia';
+import { InteractionState } from '@/src/vtk/RulerWidget/state';
+import { useViewConfigStore } from '@/src/store/view-configs';
+import { createPlaneManipulatorFor2DView } from '@/src/utils/manipulators';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { LPSAxisDir } from '@/src/types/lps';
+import { Ruler } from './types';
+import { useViewStore } from '../views';
+
+const emptyRuler = (): Ruler => ({
+  name: '',
+  firstPoint: null,
+  secondPoint: null,
+  viewAxis: null,
+  slice: null,
+  imageID: '',
+  interactionState: InteractionState.PlacingFirst,
+  color: TOOL_COLORS[0],
+});
+
+export type RulerPatch = Partial<Ruler> & RulerStateUpdate;
+
+export const useRulerStore = defineStore('ruler', () => {
+  type _This = ReturnType<typeof useRulerStore>;
+
+  // --- state --- //
+
+  const rulerIDs = ref<string[]>([]);
+  const rulers = ref<Record<string, Ruler>>(Object.create(null));
+  const activeRulerID = ref<string | null>(null);
+
+  let colorIndex = 0;
+
+  // --- getters --- //
+
+  const lengthByID = computed(() => {
+    const rulersIndex = rulers.value;
+    return rulerIDs.value.reduce((lengths, id) => {
+      const { firstPoint, secondPoint } = rulersIndex[id];
+      return Object.assign(lengths, {
+        [id]:
+          firstPoint && secondPoint
+            ? Math.sqrt(distance2BetweenPoints(firstPoint, secondPoint))
+            : 0,
+      });
+    }, {} as Record<string, number>);
+  });
+
+  function getVTKFactory(this: _This, id: string) {
+    return this.$rulers.getFactory(id);
+  }
+
+  // --- actions --- //
+
+  function deactivateRuler(rulerID: string) {
+    if (rulerID in rulers.value) {
+      activeRulerID.value = null;
+    }
+  }
+
+  function activateRuler(rulerID: string) {
+    if (activeRulerID.value) {
+      deactivateRuler(activeRulerID.value);
+    }
+    if (rulerID in rulers.value) {
+      activeRulerID.value = rulerID;
+    }
+  }
+
+  function updateRulerInternal(this: _This, id: string, patch: Partial<Ruler>) {
+    if (id in rulers.value) {
+      const ruler = rulers.value[id];
+      Object.assign(ruler, patch);
+
+      if (
+        id === activeRulerID.value &&
+        ruler.interactionState === InteractionState.Settled
+      ) {
+        deactivateRuler(id);
+      }
+    }
+  }
+
+  function updateRuler(this: _This, id: string, patch: Partial<Ruler>) {
+    updateRulerInternal.call(this, id, patch);
+    if (id in rulers.value) {
+      const ruler = rulers.value[id];
+      const update: RulerStateUpdate = {
+        firstPoint: ruler.firstPoint,
+        secondPoint: ruler.secondPoint,
+        interactionState: ruler.interactionState,
+      };
+      this.$rulers.updateRuler(id, update);
+    }
+  }
+
+  function addNewRuler(this: _This, rulerState: Partial<Ruler>) {
+    const id = this.$id.nextID();
+
+    set(rulers.value, id, emptyRuler());
+    rulerIDs.value.push(id);
+
+    this.$rulers.createRuler(id);
+
+    const patch = { ...rulerState };
+    // set color if necessary
+    if (!('color' in patch)) {
+      patch.color = TOOL_COLORS[colorIndex];
+      colorIndex = (colorIndex + 1) % TOOL_COLORS.length;
+    }
+
+    updateRuler.call(this, id, patch);
+
+    return id;
+  }
+
+  function removeRuler(this: _This, id: string) {
+    deactivateRuler(id);
+    removeFromArray(rulerIDs.value, id);
+    del(rulers.value, id);
+    this.$rulers.removeRuler(id);
+  }
+
+  function removeActiveRuler(this: _This) {
+    if (activeRulerID.value) {
+      removeRuler.call(this, activeRulerID.value);
+    }
+  }
+
+  function addNewRulerFromViewEvent(
+    this: _This,
+    eventData: any,
+    viewID: string
+  ) {
+    if (activeRulerID.value) {
+      return;
+    }
+
+    const viewConfigStore = useViewConfigStore();
+    const currentImage = useCurrentImage();
+
+    const imageID = currentImage.currentImageID.value;
+    const imageMetadata = currentImage.currentImageMetadata.value;
+
+    if (!imageID) {
+      return;
+    }
+
+    const sliceConfig = viewConfigStore.getSliceConfig(viewID, imageID);
+    if (!sliceConfig) {
+      return;
+    }
+
+    const { slice, axisDirection: viewDirection } = sliceConfig;
+    const viewAxis = getLPSAxisFromDir(viewDirection);
+
+    const viewProxy = this.$proxies.getView(viewID);
+    if (!viewProxy) {
+      return;
+    }
+
+    const id = addNewRuler.call(this, {
+      name: 'Ruler',
+      imageID,
+    });
+    const manipulator = createPlaneManipulatorFor2DView(
+      viewDirection,
+      slice,
+      imageMetadata
+    );
+    const coords = manipulator.handleEvent(
+      eventData,
+      viewProxy.getOpenglRenderWindow()
+    );
+    if (coords.length) {
+      updateRuler.call(this, id, {
+        firstPoint: coords as Vector3,
+        slice,
+        imageID,
+        viewAxis,
+        interactionState: InteractionState.PlacingSecond,
+      });
+    }
+
+    activateRuler(id);
+  }
+
+  function jumpToRuler(rulerID: string) {
+    const ruler = rulers.value[rulerID];
+    if (!ruler?.viewAxis || ruler?.slice == null) return;
+
+    const { currentImageID } = useCurrentImage();
+    const imageID = currentImageID.value;
+    if (!imageID || ruler.imageID !== imageID) return;
+
+    const viewStore = useViewStore();
+    const relevantViewIDs = viewStore.viewIDs.filter((viewID) => {
+      const viewSpec = viewStore.viewSpecs[viewID];
+      const viewDir = viewSpec.props.viewDirection as LPSAxisDir | undefined;
+      return viewDir && getLPSAxisFromDir(viewDir) === ruler.viewAxis;
+    });
+
+    const viewConfigStore = useViewConfigStore();
+    relevantViewIDs.forEach((viewID) => {
+      viewConfigStore.updateSliceConfig(viewID, imageID, {
+        slice: ruler.slice!,
+      });
+    });
+  }
+
+  // --- watch RulerTool for changes to apply --- //
+
+  function updateFromWidgetState(
+    this: _This,
+    event: {
+      id: string;
+      update: RulerStateUpdate;
+    }
+  ) {
+    const { id, update } = event;
+    const patch: Partial<Ruler> = {};
+
+    if ('firstPoint' in update) {
+      patch.firstPoint = update.firstPoint;
+    }
+    if ('secondPoint' in update) {
+      patch.secondPoint = update.secondPoint;
+    }
+    if ('interactionState' in update) {
+      patch.interactionState = update.interactionState;
+    }
+
+    updateRulerInternal.call(this, id, patch);
+  }
+
+  let cleanup: Function;
+
+  function initialize(this: _This) {
+    const update = updateFromWidgetState.bind(this);
+    this.$rulers.events.on('widgetUpdate', update);
+    cleanup = () => this.$rulers.events.off('widgetUpdate', update);
+  }
+
+  function uninitialize(this: _This) {
+    cleanup();
+  }
+
+  // --- tool activation --- //
+
+  function activateTool() {
+    return true;
+  }
+
+  function deactivateTool(this: _This) {
+    removeActiveRuler.call(this);
+  }
+
+  function serialize(state: StateFile) {
+    const rulersInState = state.manifest.tools.rulers;
+
+    rulerIDs.value.forEach((rulerID) => {
+      const ruler = rulers.value[rulerID];
+      rulersInState.push(ruler);
+    });
+  }
+
+  function deserialize(this: _This, manifest: Manifest) {
+    const rulersInState = manifest.tools.rulers;
+
+    rulersInState.forEach((ruler) => {
+      addNewRuler.call(this, ruler);
+    });
+  }
+
+  return {
+    rulerIDs,
+    rulers,
+    activeRulerID,
+    lengthByID,
+    getVTKFactory,
+
+    initialize,
+    uninitialize,
+
+    activateTool,
+    deactivateTool,
+
+    addNewRuler,
+    addNewRulerFromViewEvent,
+    removeActiveRuler,
+    removeRuler,
+    updateRuler,
+    serialize,
+    deserialize,
+    jumpToRuler,
+  };
+});

package/src/store/tools/types.ts

@@ -0,0 +1,54 @@
+import { Vector3 } from '@kitware/vtk.js/types';
+import { LPSAxis } from '@/src/types/lps';
+import { InteractionState } from '@/src/vtk/RulerWidget/state';
+
+export interface Ruler {
+  name: string;
+  /**
+   * Point is in image index space.
+   */
+  firstPoint: Vector3 | null;
+  /**
+   * Point is in image index space.
+   */
+  secondPoint: Vector3 | null;
+  /**
+   * The associated view slicing axis.
+   */
+  viewAxis: LPSAxis | null;
+  /**
+   * The associated slice along the axis.
+   */
+  slice: number | null;
+  /**
+   * The associated image dataset.
+   *
+   * The ruler currently does not store orientation info,
+   * and so depends on the associated image space.
+   */
+  imageID: string;
+  /**
+   * The current interaction state.
+   */
+  interactionState: InteractionState;
+  /**
+   * Ruler metadata
+   */
+  color: string;
+}
+
+export enum Tools {
+  WindowLevel = 'WindowLevel',
+  Pan = 'Pan',
+  Zoom = 'Zoom',
+  Ruler = 'Ruler',
+  Paint = 'Paint',
+  Crosshairs = 'Crosshairs',
+  Crop = 'Crop',
+}
+
+export type LPSCroppingPlanes = {
+  Sagittal: [number, number];
+  Coronal: [number, number];
+  Axial: [number, number];
+};

package/src/store/view-configs/camera.ts

@@ -0,0 +1,51 @@
+import { useDoubleRecord } from '@/src/composables/useDoubleRecord';
+import {
+  removeDataFromConfig,
+  removeViewFromConfig,
+  serializeViewConfig,
+} from './common';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import { CameraConfig } from './types';
+
+export const setupCameraConfig = () => {
+  // (viewID, dataID) -> CameraConfig
+  const cameraConfigs = useDoubleRecord<CameraConfig>();
+
+  const getCameraConfig = (viewID: string, dataID: string) =>
+    cameraConfigs.get(viewID, dataID);
+
+  const updateCameraConfig = (
+    viewID: string,
+    dataID: string,
+    update: Partial<CameraConfig>
+  ) => {
+    const config = {
+      ...cameraConfigs.get(viewID, dataID),
+      ...update,
+    };
+    cameraConfigs.set(viewID, dataID, config);
+  };
+
+  const serialize = (stateFile: StateFile) => {
+    serializeViewConfig(stateFile, getCameraConfig, 'camera');
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.camera) {
+        cameraConfigs.set(viewID, dataID, viewConfig.camera);
+      }
+    });
+  };
+
+  return {
+    removeView: removeViewFromConfig(cameraConfigs),
+    removeData: removeDataFromConfig(cameraConfigs),
+    serialize,
+    deserialize,
+    actions: {
+      getCameraConfig,
+      updateCameraConfig,
+    },
+  };
+};

package/src/store/view-configs/common.ts

@@ -0,0 +1,61 @@
+import { useDoubleRecord } from '@/src/composables/useDoubleRecord';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import {
+  CameraConfig,
+  SliceConfig,
+  VolumeColorConfig,
+  WindowLevelConfig,
+} from './types';
+import { ensureDefault } from '../../utils';
+
+class ReturnTypeOfDoubleRecord<T> {
+  Return = useDoubleRecord<T>();
+}
+type ConfigMap = ReturnTypeOfDoubleRecord<any>['Return'];
+
+export const removeViewFromConfig = (config: ConfigMap) => (viewID: string) =>
+  config.deleteFirstKey(viewID);
+
+export const removeDataFromConfig =
+  (config: ConfigMap) => (dataID: string, viewID?: string) => {
+    if (viewID) {
+      config.delete(viewID, dataID);
+    } else {
+      config.deleteSecondKey(dataID);
+    }
+  };
+
+type SubViewConfig =
+  | CameraConfig
+  | SliceConfig
+  | VolumeColorConfig
+  | WindowLevelConfig;
+
+type ViewConfigGetter = (
+  viewID: string,
+  dataID: string
+) => SubViewConfig | undefined;
+
+type ViewConfigStateKey = keyof ViewConfig;
+
+export const serializeViewConfig = <K extends ViewConfigStateKey>(
+  stateFile: StateFile,
+  configGetter: ViewConfigGetter,
+  viewConfigStateKey: K
+) => {
+  const dataIDs = stateFile.manifest.dataSets.map((dataSet) => dataSet.id);
+  const { views } = stateFile.manifest;
+
+  views.forEach((view) => {
+    dataIDs.forEach((dataID) => {
+      const { config } = view;
+
+      const viewConfig = configGetter(view.id, dataID);
+      if (viewConfig !== undefined) {
+        const configForData = ensureDefault(dataID, config, {} as ViewConfig);
+
+        configForData[viewConfigStateKey] = viewConfig as ViewConfig[K];
+      }
+    });
+  });
+};

package/src/store/view-configs/slicing.ts

@@ -0,0 +1,86 @@
+import { MaybeRef } from '@vueuse/core';
+import { useDoubleRecord } from '@/src/composables/useDoubleRecord';
+import { clampValue } from '@/src/utils';
+import {
+  removeDataFromConfig,
+  removeViewFromConfig,
+  serializeViewConfig,
+} from './common';
+import { StateFile, ViewConfig } from '../../io/state-file/schema';
+import { SliceConfig } from './types';
+
+export const defaultSliceConfig = (): SliceConfig => ({
+  slice: 0,
+  min: 0,
+  max: 1,
+  axisDirection: 'Inferior',
+});
+
+export const setupSlicingConfig = () => {
+  // (viewID, dataID) -> SliceConfig
+  const sliceConfigs = useDoubleRecord<SliceConfig>();
+
+  const getSliceConfig = (viewID: string, dataID: string) =>
+    sliceConfigs.get(viewID, dataID);
+
+  const getComputedSliceConfig = (
+    viewID: MaybeRef<string | null>,
+    dataID: MaybeRef<string | null>
+  ) => sliceConfigs.getComputed(viewID, dataID);
+
+  const updateSliceConfig = (
+    viewID: string,
+    dataID: string,
+    update: Partial<SliceConfig>
+  ) => {
+    const config = {
+      ...defaultSliceConfig(),
+      ...sliceConfigs.get(viewID, dataID),
+      ...update,
+    };
+
+    if ('min' in update || 'max' in update) {
+      config.slice = Math.floor((config.min + config.max) / 2);
+    }
+    config.slice = clampValue(config.slice, config.min, config.max);
+
+    sliceConfigs.set(viewID, dataID, config);
+  };
+
+  const resetSlice = (viewID: string, dataID: string) => {
+    if (sliceConfigs.has(viewID, dataID)) {
+      const config = sliceConfigs.get(viewID, dataID)!;
+      // Make this consistent with ImageMapper + SliceRepresentationProxy
+      // behavior. Setting this to floor() will affect images where the
+      // middle slice is fractional.
+      updateSliceConfig(viewID, dataID, {
+        slice: Math.ceil((config.min + config.max) / 2),
+      });
+    }
+  };
+
+  const serialize = (stateFile: StateFile) => {
+    serializeViewConfig(stateFile, getSliceConfig, 'slice');
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.slice) {
+        sliceConfigs.set(viewID, dataID, viewConfig.slice);
+      }
+    });
+  };
+
+  return {
+    removeView: removeViewFromConfig(sliceConfigs),
+    removeData: removeDataFromConfig(sliceConfigs),
+    serialize,
+    deserialize,
+    actions: {
+      getSliceConfig,
+      getComputedSliceConfig,
+      updateSliceConfig,
+      resetSlice,
+    },
+  };
+};

package/src/store/view-configs/types.ts

@@ -0,0 +1,39 @@
+import { Vector3 } from '@kitware/vtk.js/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import {
+  ColorTransferFunction,
+  CVRConfig,
+  OpacityFunction,
+} from '@/src/types/views';
+
+export interface CameraConfig {
+  parallelScale?: number;
+  position?: Vector3;
+  focalPoint?: Vector3;
+  directionOfProjection?: Vector3;
+  viewUp?: Vector3;
+}
+
+export interface SliceConfig {
+  slice: number;
+  min: number;
+  max: number;
+  axisDirection: LPSAxisDir;
+}
+
+export interface VolumeColorConfig {
+  colorBy: {
+    arrayName: string;
+    location: string;
+  };
+  transferFunction: ColorTransferFunction;
+  opacityFunction: OpacityFunction;
+  cvr: CVRConfig;
+}
+
+export interface WindowLevelConfig {
+  width: number;
+  level: number;
+  min: number; // data range min
+  max: number; // data range max
+}