volview 4.0.0

package/src/store/messages.ts

@@ -0,0 +1,144 @@
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+
+export enum MessageType {
+  Error,
+  Warning,
+  Info,
+  Success,
+}
+
+export type MessageOptions = {
+  details?: string;
+  persist?: boolean;
+};
+
+export interface Message {
+  id: string;
+  type: MessageType;
+  title: string;
+  options: MessageOptions;
+}
+
+export type UpdateProgressFunction = (progress: number) => void;
+export type TaskFunction = (updateProgress?: UpdateProgressFunction) => any;
+interface State {
+  _nextID: number;
+  byID: Record<string, Message>;
+  msgList: string[];
+}
+
+export const useMessageStore = defineStore('message', {
+  state: (): State => ({
+    _nextID: 1,
+    byID: {},
+    msgList: [],
+  }),
+  getters: {
+    messages(): Array<Message> {
+      return this.msgList.map((id: string) => this.byID[id]);
+    },
+    // only info, error, warn
+    importantMessages(): Array<Message> {
+      return this.messages.filter((msg) => msg.type !== MessageType.Success);
+    },
+  },
+  actions: {
+    /**
+     * Adds an error message.
+     * @param title message title
+     * @param opts an Error, a string containing details, or a MessageOptions
+     */
+    addError(title: string, opts?: Error | string | MessageOptions) {
+      if (opts instanceof Error) {
+        return this._addMessage(
+          {
+            type: MessageType.Error,
+            title,
+          },
+          {
+            details: String(opts),
+            persist: false,
+          }
+        );
+      }
+      return this._addMessage(
+        {
+          type: MessageType.Error,
+          title,
+        },
+        opts
+      );
+    },
+    /**
+     * Adds a warning message.
+     * @param title message title
+     * @param opts a string containing details or a MessageOptions
+     */
+    addWarning(title: string, details?: string | MessageOptions) {
+      return this._addMessage(
+        {
+          type: MessageType.Warning,
+          title,
+        },
+        details
+      );
+    },
+    /**
+     * Adds a success message.
+     * @param title message title
+     * @param opts a string containing details or a MessageOptions
+     */
+    addInfo(title: string, details?: string | MessageOptions) {
+      return this._addMessage(
+        {
+          type: MessageType.Info,
+          title,
+        },
+        details
+      );
+    },
+    /**
+     * Adds a success message.
+     * @param title message title
+     * @param opts a string containing details or a MessageOptions
+     */
+    addSuccess(title: string, details?: string | MessageOptions) {
+      return this._addMessage(
+        {
+          type: MessageType.Success,
+          title,
+        },
+        details
+      );
+    },
+    clearOne(id: string) {
+      if (id in this.byID) {
+        Vue.delete(this.byID, id);
+        const idx = this.msgList.indexOf(id);
+        this.msgList.splice(idx, 1);
+      }
+    },
+    clearAll() {
+      this.byID = {};
+      this.msgList = [];
+    },
+    _addMessage(
+      msg: Omit<Message, 'id' | 'options'>,
+      details?: string | MessageOptions
+    ) {
+      const id = String(this._nextID++);
+      const options: MessageOptions = {
+        persist: false,
+        ...(typeof details === 'string' ? { details } : details),
+      };
+      Vue.set(this.byID, id, {
+        ...msg,
+        options,
+        id,
+      });
+      this.msgList.push(id);
+      return id;
+    },
+  },
+});

package/src/store/tools/crop.ts

@@ -0,0 +1,136 @@
+import { getImageSpatialExtent } from '@/src/composables/useCurrentImage';
+import { LPSAxis } from '@/src/types/lps';
+import { getAxisBounds } from '@/src/utils/lps';
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import { computed, reactive, readonly, set, unref } from '@vue/composition-api';
+import { MaybeRef } from '@vueuse/core';
+import { vec3 } from 'gl-matrix';
+import { defineStore } from 'pinia';
+import { ImageMetadata, useImageStore } from '../datasets-images';
+import { LPSCroppingPlanes } from './types';
+import { StateFile, Manifest } from '../../io/state-file/schema';
+
+function clampRangeToBounds(range: Vector2, bounds: Vector2) {
+  return [
+    Math.max(bounds[0], Math.min(bounds[1], range[0])),
+    Math.max(bounds[0], Math.min(bounds[1], range[1])),
+  ] as Vector2;
+}
+
+function convertCropBoundsToVTKPlane(
+  cropBounds: LPSCroppingPlanes,
+  metadata: ImageMetadata,
+  axis: LPSAxis,
+  lowerUpper: 0 | 1
+) {
+  const { indexToWorld, orientation, lpsOrientation: lpsDirs } = metadata;
+
+  const origin = [0, 0, 0] as Vector3;
+  const axisIndex = lpsDirs[axis];
+  origin[axisIndex] = cropBounds[axis][lowerUpper];
+  vec3.transformMat4(origin, origin, indexToWorld);
+
+  // The lower bound normal is the associated column in the
+  // image orientation matrix. The upper bound normal is the
+  // lower bound normal, but negated.
+  const neg = -(lowerUpper * 2 - 1);
+  const normal = [
+    ...orientation.slice(axisIndex * 3, axisIndex * 3 + 3).map((c) => c * neg),
+  ] as Vector3;
+
+  return vtkPlane.newInstance({ origin, normal });
+}
+
+export const useCropStore = defineStore('crop', () => {
+  const imageStore = useImageStore();
+
+  const state = reactive({
+    croppingByImageID: {} as Record<string, LPSCroppingPlanes>,
+  });
+
+  const getComputedVTKPlanes = (imageID: MaybeRef<string | null>) =>
+    computed(() => {
+      const id = unref(imageID);
+      if (id && id in state.croppingByImageID && id in imageStore.metadata) {
+        const cropBounds = state.croppingByImageID[id];
+        const metadata = imageStore.metadata[id];
+        return [
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Sagittal', 0),
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Sagittal', 1),
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Coronal', 0),
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Coronal', 1),
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Axial', 0),
+          convertCropBoundsToVTKPlane(cropBounds, metadata, 'Axial', 1),
+        ];
+      }
+      return null;
+    });
+
+  const clampCroppingPlanes = (
+    imageID: string,
+    planes: LPSCroppingPlanes
+  ): LPSCroppingPlanes => {
+    const lpsBounds = getImageSpatialExtent(imageID);
+    // if perf becomes an issue, change this to modify the planes arg
+    return {
+      Sagittal: clampRangeToBounds(planes.Sagittal, lpsBounds.Sagittal),
+      Coronal: clampRangeToBounds(planes.Coronal, lpsBounds.Coronal),
+      Axial: clampRangeToBounds(planes.Axial, lpsBounds.Axial),
+    };
+  };
+
+  const setCropping = (imageID: string, planes: LPSCroppingPlanes) => {
+    set(state.croppingByImageID, imageID, clampCroppingPlanes(imageID, planes));
+  };
+
+  const setCroppingForAxis = (
+    imageID: string,
+    axis: LPSAxis,
+    planes: Vector2
+  ) => {
+    if (imageID in state.croppingByImageID) {
+      setCropping(imageID, {
+        ...state.croppingByImageID[imageID],
+        [axis]: planes,
+      });
+    }
+  };
+
+  const resetCropping = (imageID: string) => {
+    const image = imageStore.dataIndex[imageID];
+    if (!image) return;
+
+    const { lpsOrientation } = imageStore.metadata[imageID];
+    const extent = image.getSpatialExtent();
+    setCropping(imageID, {
+      Sagittal: getAxisBounds(extent, 'Sagittal', lpsOrientation),
+      Coronal: getAxisBounds(extent, 'Coronal', lpsOrientation),
+      Axial: getAxisBounds(extent, 'Axial', lpsOrientation),
+    });
+  };
+
+  function serialize(stateFile: StateFile) {
+    const { tools } = stateFile.manifest;
+    tools.crop = state.croppingByImageID;
+  }
+
+  function deserialize(manifest: Manifest, dataIDMap: Record<string, string>) {
+    const cropping = manifest.tools.crop;
+
+    Object.entries(cropping).forEach(([imageID, planes]) => {
+      const newImageID = dataIDMap[imageID];
+      setCropping(newImageID, planes);
+    });
+  }
+
+  return {
+    croppingByImageID: readonly(state.croppingByImageID),
+    getComputedVTKPlanes,
+    setCropping,
+    setCroppingForAxis,
+    resetCropping,
+    serialize,
+    deserialize,
+  };
+});

package/src/store/tools/crosshairs.ts

@@ -0,0 +1,131 @@
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import vtkCrosshairsWidget from '@/src/vtk/CrosshairsWidget';
+import { Bounds, Vector3 } from '@kitware/vtk.js/types';
+import { inflate } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { computed, ref, unref, watch } from '@vue/composition-api';
+import { vec3 } from 'gl-matrix';
+import { defineStore } from 'pinia';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { useViewConfigStore } from '../view-configs';
+import { useViewStore } from '../views';
+
+export const useCrosshairsToolStore = defineStore('crosshairs', () => {
+  type _This = ReturnType<typeof useCrosshairsToolStore>;
+
+  const factory = vtkCrosshairsWidget.newInstance();
+  const widgetState = factory.getWidgetState();
+  const handle = widgetState.getHandle();
+
+  const active = ref(false);
+  const { currentImageID, currentImageMetadata } = useCurrentImage();
+
+  // world-space
+  const position = ref<Vector3>([0, 0, 0]);
+  // image space
+  const imagePosition = computed(() => {
+    const out = vec3.create();
+    vec3.transformMat4(
+      out,
+      position.value,
+      currentImageMetadata.value.worldToIndex
+    );
+    return out as Vector3;
+  });
+
+  const viewConfigStore = useViewConfigStore();
+  const viewStore = useViewStore();
+
+  // only gets views that have a slicing config
+  const currentViewIDs = computed(() => {
+    const imageID = unref(currentImageID);
+    if (imageID) {
+      return viewStore.viewIDs.filter(
+        (viewID) => !!viewConfigStore.getSliceConfig(viewID, imageID)
+      );
+    }
+    return [];
+  });
+
+  function getWidgetFactory(this: _This) {
+    return factory;
+  }
+
+  function setPosition(pos: Vector3) {
+    position.value = pos;
+  }
+
+  // update the slicing
+  watch(imagePosition, (indexPos) => {
+    if (active.value) {
+      const imageID = unref(currentImageID);
+      const { lpsOrientation } = unref(currentImageMetadata);
+
+      if (!imageID) {
+        return;
+      }
+
+      currentViewIDs.value.forEach((viewID) => {
+        const sliceConfig = viewConfigStore.getSliceConfig(viewID, imageID);
+        const axis = getLPSAxisFromDir(sliceConfig!.axisDirection);
+        const index = lpsOrientation[axis];
+        const slice = Math.round(indexPos[index]);
+        viewConfigStore.updateSliceConfig(viewID, imageID, { slice });
+      });
+    }
+  });
+
+  // update widget state based on current image
+  watch(
+    currentImageMetadata,
+    (metadata) => {
+      widgetState.setIndexToWorld(metadata.indexToWorld);
+      widgetState.setWorldToIndex(metadata.worldToIndex);
+      const [xDim, yDim, zDim] = metadata.dimensions;
+      const imageBounds: Bounds = [0, xDim - 1, 0, yDim - 1, 0, zDim - 1];
+      // inflate by 0.5, since the image slice rendering is inflated
+      // by 0.5.
+      handle.setBounds(inflate(imageBounds, 0.5));
+    },
+    { immediate: true }
+  );
+
+  // update the position
+  handle.onModified(() => {
+    const origin = handle.getOrigin();
+    if (origin) {
+      position.value = origin;
+    }
+  });
+
+  function activateTool() {
+    widgetState.setPlaced(false);
+    active.value = true;
+    return true;
+  }
+
+  function deactivateTool() {
+    active.value = false;
+  }
+
+  function serialize(state: StateFile) {
+    const { crosshairs } = state.manifest.tools;
+    crosshairs.position = position.value;
+  }
+
+  function deserialize(manifest: Manifest) {
+    const { crosshairs } = manifest.tools;
+    position.value = crosshairs.position;
+  }
+
+  return {
+    getWidgetFactory,
+    setPosition,
+    position,
+    imagePosition,
+    activateTool,
+    deactivateTool,
+    serialize,
+    deserialize,
+  };
+});

package/src/store/tools/index.ts

@@ -0,0 +1,95 @@
+import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { defineStore } from 'pinia';
+import { useCropStore } from './crop';
+import { useCrosshairsToolStore } from './crosshairs';
+import { usePaintToolStore } from './paint';
+import { useRulerStore } from './rulers';
+import { Tools } from './types';
+
+interface State {
+  currentTool: Tools;
+}
+
+export interface IToolStore {
+  activateTool: () => boolean;
+  deactivateTool: () => void;
+}
+
+function getStore(tool: Tools): IToolStore | null {
+  if (tool === Tools.Ruler) {
+    return useRulerStore();
+  }
+  if (tool === Tools.Paint) {
+    return usePaintToolStore();
+  }
+  if (tool === Tools.Crosshairs) {
+    return useCrosshairsToolStore();
+  }
+  return null;
+}
+
+/**
+ * Returns true if the tool is ready to be
+ * activated. By default, a tool without a
+ * store setup() will be activated.
+ */
+function setupTool(tool: Tools) {
+  const store = getStore(tool);
+  if (store) {
+    return store.activateTool();
+  }
+  return true;
+}
+
+function teardownTool(tool: Tools) {
+  const store = getStore(tool);
+  if (store) {
+    store.deactivateTool();
+  }
+}
+
+export const useToolStore = defineStore('tool', {
+  state: (): State => ({
+    currentTool: Tools.WindowLevel,
+  }),
+  actions: {
+    setCurrentTool(tool: Tools) {
+      if (!setupTool(tool)) {
+        return;
+      }
+      teardownTool(this.currentTool);
+      this.currentTool = tool;
+    },
+    serialize(state: StateFile) {
+      const { tools } = state.manifest;
+      const rulerStore = useRulerStore();
+      const crosshairsStore = useCrosshairsToolStore();
+      const paintStore = usePaintToolStore();
+      const cropStore = useCropStore();
+
+      rulerStore.serialize(state);
+      crosshairsStore.serialize(state);
+      paintStore.serialize(state);
+      cropStore.serialize(state);
+
+      tools.current = this.currentTool;
+    },
+    deserialize(
+      manifest: Manifest,
+      labelmapIDMap: Record<string, string>,
+      dataIDMap: Record<string, string>
+    ) {
+      const { tools } = manifest;
+      const rulerStore = useRulerStore();
+      const crosshairsStore = useCrosshairsToolStore();
+      const paintStore = usePaintToolStore();
+      const cropStore = useCropStore();
+
+      rulerStore.deserialize(manifest);
+      crosshairsStore.deserialize(manifest);
+      paintStore.deserialize(manifest, labelmapIDMap);
+      cropStore.deserialize(manifest, dataIDMap);
+      this.currentTool = tools.current;
+    },
+  },
+});

package/src/store/tools/paint.ts

@@ -0,0 +1,191 @@
+import { Vector2 } from '@kitware/vtk.js/types';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { computed, ref, watch } from '@vue/composition-api';
+import { vec3 } from 'gl-matrix';
+import { defineStore } from 'pinia';
+import { Tools } from './types';
+import { useLabelmapStore } from '../datasets-labelmaps';
+
+const DEFAULT_BRUSH_SIZE = 4;
+const DEFAULT_BRUSH_VALUE = 1;
+
+export const usePaintToolStore = defineStore('paint', () => {
+  type _This = ReturnType<typeof usePaintToolStore>;
+
+  const activeLabelmapID = ref<string | null>(null);
+  const brushSize = ref(DEFAULT_BRUSH_SIZE);
+  const brushValue = ref(DEFAULT_BRUSH_VALUE);
+  const strokePoints = ref<vec3[]>([]);
+  const labelmapOpacity = ref(1);
+  const isActive = ref(false);
+
+  const { currentImageID } = useCurrentImage();
+
+  function getWidgetFactory(this: _This) {
+    return this.$paint.factory;
+  }
+
+  const activeLabelmap = computed(() => {
+    if (!activeLabelmapID.value) return null;
+    const labelmapStore = useLabelmapStore();
+    return labelmapStore.labelmaps[activeLabelmapID.value] ?? null;
+  });
+
+  // --- actions --- //
+
+  function selectOrCreateLabelmap(imageID: string | null) {
+    if (!imageID) {
+      activeLabelmapID.value = null;
+      return;
+    }
+
+    const labelmapStore = useLabelmapStore();
+    const found = Object.entries(labelmapStore.parentImage).find(
+      ([, parentID]) => imageID === parentID
+    );
+    if (found) {
+      [activeLabelmapID.value] = found;
+    } else {
+      activeLabelmapID.value = labelmapStore.newLabelmapFromImage(imageID);
+    }
+  }
+
+  function setBrushSize(this: _This, size: number) {
+    brushSize.value = Math.round(size);
+    this.$paint.setBrushSize(size);
+  }
+
+  function setBrushValue(this: _This, value: number) {
+    brushValue.value = value;
+    this.$paint.setBrushValue(value);
+  }
+
+  function setLabelmapOpacity(opacity: number) {
+    labelmapOpacity.value = Math.min(1, Math.max(0, opacity));
+  }
+
+  function doPaintStroke(this: _This, axisIndex: 0 | 1 | 2) {
+    if (!activeLabelmap.value) {
+      return;
+    }
+
+    const lastIndex = strokePoints.value.length - 1;
+    if (lastIndex >= 0) {
+      const lastPoint = strokePoints.value[lastIndex];
+      const prevPoint =
+        lastIndex >= 1 ? strokePoints.value[lastIndex - 1] : undefined;
+      this.$paint.paintLabelmap(
+        activeLabelmap.value,
+        axisIndex,
+        lastPoint,
+        prevPoint
+      );
+    }
+  }
+
+  function setSliceAxis(this: _This, axisIndex: 0 | 1 | 2) {
+    if (!activeLabelmap.value) return;
+    const spacing = activeLabelmap.value.getSpacing();
+    spacing.splice(axisIndex, 1);
+    const scale: Vector2 = [1 / spacing[0], 1 / spacing[1]];
+    this.$paint.setBrushScale(scale);
+  }
+
+  function startStroke(this: _This, indexPoint: vec3, axisIndex: 0 | 1 | 2) {
+    strokePoints.value = [vec3.clone(indexPoint)];
+    doPaintStroke.call(this, axisIndex);
+  }
+
+  function placeStrokePoint(
+    this: _This,
+    indexPoint: vec3,
+    axisIndex: 0 | 1 | 2
+  ) {
+    strokePoints.value.push(indexPoint);
+    doPaintStroke.call(this, axisIndex);
+  }
+
+  function endStroke(this: _This, indexPoint: vec3, axisIndex: 0 | 1 | 2) {
+    strokePoints.value.push(indexPoint);
+    doPaintStroke.call(this, axisIndex);
+  }
+
+  // --- setup and teardown --- //
+
+  function activateTool(this: _This) {
+    const imageID = currentImageID.value;
+    if (!imageID) {
+      return false;
+    }
+    selectOrCreateLabelmap(imageID);
+    this.$paint.setBrushSize(this.brushSize);
+
+    isActive.value = true;
+    return true;
+  }
+
+  function deactivateTool() {
+    activeLabelmapID.value = null;
+    isActive.value = false;
+  }
+
+  function serialize(state: StateFile) {
+    const { paint } = state.manifest.tools;
+
+    paint.activeLabelmapID = activeLabelmapID.value;
+    paint.brushSize = brushSize.value;
+    paint.brushValue = brushValue.value;
+    paint.labelmapOpacity = labelmapOpacity.value;
+  }
+
+  function deserialize(
+    this: _This,
+    manifest: Manifest,
+    labelmapIDMap: Record<string, string>
+  ) {
+    const { paint } = manifest.tools;
+    this.setBrushSize(paint.brushSize);
+    this.setBrushValue(paint.brushValue);
+    this.setLabelmapOpacity(paint.labelmapOpacity);
+    isActive.value = manifest.tools.current === Tools.Paint;
+
+    if (paint.activeLabelmapID !== null) {
+      activeLabelmapID.value = labelmapIDMap[paint.activeLabelmapID];
+    }
+  }
+
+  // --- change labelmap if paint is active --- //
+
+  watch(currentImageID, (imageID) => {
+    if (isActive.value) {
+      selectOrCreateLabelmap(imageID);
+    }
+  });
+
+  return {
+    // state
+    activeLabelmapID,
+    brushSize,
+    brushValue,
+    strokePoints,
+    labelmapOpacity,
+    isActive,
+
+    getWidgetFactory,
+
+    activateTool,
+    deactivateTool,
+
+    selectOrCreateLabelmap,
+    setBrushSize,
+    setBrushValue,
+    setLabelmapOpacity,
+    setSliceAxis,
+    startStroke,
+    placeStrokePoint,
+    endStroke,
+    serialize,
+    deserialize,
+  };
+});