volview 4.0.0

package/src/constants.ts

@@ -0,0 +1,38 @@
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { ComputedRef, InjectionKey } from '@vue/composition-api';
+
+export const NO_PROXY = -1;
+export const NO_SELECTION = -1;
+export const NO_WIDGET = -1;
+
+export const EPSILON = 10e-6;
+export const NOOP = () => {};
+
+/**
+ * Retrieves the parent VtkTwoView's widget manager.
+ */
+export const VTKTwoViewWidgetManager: InjectionKey<
+  ComputedRef<vtkWidgetManager>
+> = Symbol('VTKTwoViewWidgetManager');
+
+/**
+ * Retrieves the parent VtkThreeView's widget manager.
+ */
+export const VTKThreeViewWidgetManager: InjectionKey<
+  ComputedRef<vtkWidgetManager>
+> = Symbol('VTKThreeViewWidgetManager');
+
+export const DataTypes = {
+  Image: 'Image',
+  Labelmap: 'Labelmap',
+  Dicom: 'DICOM',
+  Model: 'Model',
+};
+
+export const Messages = {
+  WebGLLost: {
+    title: 'Viewer Error',
+    details:
+      'Lost the WebGL context! Please reload the webpage. If the problem persists, you may need to restart your web browser.',
+  },
+} as const;

package/src/core/id.ts

@@ -0,0 +1,18 @@
+const START_ID = 0;
+
+export default class IDGenerator {
+  private id: number;
+
+  constructor() {
+    this.id = START_ID;
+  }
+
+  nextID() {
+    this.id += 1;
+    return String(this.id);
+  }
+
+  reset() {
+    this.id = START_ID;
+  }
+}

package/src/core/provider.ts

@@ -0,0 +1,31 @@
+import { DICOMIO } from '../io/dicom';
+import IDGenerator from './id';
+import ProxyWrapper from './proxies';
+import PaintTool from './tools/paint';
+import RulerTool from './tools/ruler';
+
+/**
+ * Pinia plugin for injecting tool services.
+ */
+export function CorePiniaProviderPlugin({
+  rulers,
+  paint,
+  proxies,
+  id,
+  dicomIO,
+}: {
+  rulers?: RulerTool;
+  paint?: PaintTool;
+  proxies?: ProxyWrapper;
+  id?: IDGenerator;
+  dicomIO?: DICOMIO;
+} = {}) {
+  const dependencies = {
+    $rulers: rulers ?? new RulerTool(),
+    $paint: paint ?? new PaintTool(),
+    $proxies: proxies,
+    $id: id ?? new IDGenerator(),
+    $dicomIO: dicomIO ?? new DICOMIO(),
+  };
+  return () => dependencies;
+}

package/src/core/proxies.ts

@@ -0,0 +1,90 @@
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
+import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
+import vtkSourceProxy from '@kitware/vtk.js/Proxy/Core/SourceProxy';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import vtkProxyObject from '../types/vtk-types';
+
+// mapped in proxy.js
+export enum ViewProxyType {
+  Volume = 'View3D',
+  Slice = 'View2D',
+}
+
+/**
+ * Wrapper around the vtkProxyManager, since we don't need some of
+ * its complexities.
+ */
+export default class ProxyWrapper {
+  private viewProxies: Map<string, vtkViewProxy>;
+  private dataProxies: Map<string, vtkSourceProxy<vtkObject>>;
+  private proxyManager: vtkProxyManager;
+
+  constructor(proxyManager: vtkProxyManager) {
+    this.viewProxies = new Map();
+    this.dataProxies = new Map();
+    this.proxyManager = proxyManager;
+  }
+
+  delete() {
+    const deleteProxy = (proxy: vtkProxyObject) =>
+      this.proxyManager.deleteProxy(proxy);
+
+    this.viewProxies.forEach(deleteProxy);
+    this.dataProxies.forEach(deleteProxy);
+  }
+
+  createView(id: string, type: ViewProxyType) {
+    if (this.viewProxies.has(id)) {
+      throw new Error('Cannot create a view with the same ID');
+    }
+
+    const proxy = this.proxyManager.createProxy<vtkViewProxy>('Views', type, {
+      name: type,
+    });
+
+    this.viewProxies.set(id, proxy);
+    return proxy;
+  }
+
+  getView<T extends vtkViewProxy>(id: string) {
+    return <T | null>this.viewProxies.get(id);
+  }
+
+  removeView(id: string) {
+    const proxy = this.viewProxies.get(id);
+    if (proxy) {
+      this.proxyManager.deleteProxy(proxy);
+      this.viewProxies.delete(id);
+    }
+  }
+
+  addData<T extends vtkObject>(id: string, data: T) {
+    if (this.dataProxies.has(id)) {
+      return;
+    }
+    const proxy = this.proxyManager.createProxy<vtkSourceProxy<T>>(
+      'Sources',
+      'TrivialProducer'
+    );
+    proxy.setInputData(data);
+    this.dataProxies.set(id, proxy);
+  }
+
+  getData<T extends vtkObject>(id: string) {
+    return <vtkSourceProxy<T> | null>(this.dataProxies.get(id) ?? null);
+  }
+
+  getDataRepresentationForView<T extends vtkAbstractRepresentationProxy>(
+    dataID: string,
+    viewID: string
+  ): T | null {
+    const dataProxy = this.dataProxies.get(dataID);
+    const viewProxy = this.viewProxies.get(viewID);
+    if (!dataProxy || !viewProxy) {
+      return null;
+    }
+
+    return this.proxyManager.getRepresentation(dataProxy, viewProxy);
+  }
+}

package/src/core/thumbnailers/__tests__/vtk-image.spec.ts

@@ -0,0 +1,58 @@
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { expect } from 'chai';
+import { ThumbnailSlice } from '..';
+import { createVTKImageThumbnailer } from '../vtk-image';
+
+// workaround to get ImageData in the global scope
+global.ImageData = document
+  .createElement('canvas')
+  .getContext('2d')
+  ?.createImageData(1, 1).constructor as any;
+
+// creates a 3x3x3 image
+function createImageData() {
+  const id = vtkImageData.newInstance();
+  id.setDimensions([3, 3, 3]);
+  const values = new Uint8Array(3 * 3 * 3);
+  const da = vtkDataArray.newInstance({
+    numberOfComponents: 1,
+    values,
+  });
+  id.getPointData().setScalars(da);
+  return { imageData: id, scalars: values };
+}
+
+// index to offset for a 3x3
+function i2o(x: number, y: number, z: number) {
+  return z * 9 + y * 3 + x;
+}
+
+describe('VTK Image Thumbnailer', () => {
+  const SLICE_POSITION_WORDS = ['first', 'middle', 'last'];
+  const SLICE_POSITIONS = [
+    ThumbnailSlice.First,
+    ThumbnailSlice.Middle,
+    ThumbnailSlice.Last,
+  ];
+
+  for (let axis: 0 | 1 | 2 = 0; axis < 3; axis++) {
+    for (let slice = 0; slice < 3; slice++) {
+      const sliceWord = SLICE_POSITION_WORDS[slice];
+      const thumbSlice = SLICE_POSITIONS[slice];
+
+      it(`should thumbnail the ${sliceWord} slice on axis ${axis}`, () => {
+        const { imageData, scalars } = createImageData();
+        const thumbnailer = createVTKImageThumbnailer();
+
+        const point: [number, number, number] = [1, 1, 1];
+        point[axis] = slice;
+        scalars[i2o(...point)] = 255;
+
+        const im = thumbnailer.generate(imageData, axis, thumbSlice);
+        // each pixel is rgba
+        expect(im.data[4 * 4]).to.equal(255);
+      });
+    }
+  }
+});

package/src/core/thumbnailers/index.ts

@@ -0,0 +1,5 @@
+export enum ThumbnailSlice {
+  First,
+  Middle,
+  Last,
+}

package/src/core/thumbnailers/volume-thumbnailer.ts

@@ -0,0 +1,130 @@
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
+import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import vtkLookupTableProxy from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
+import { vec3 } from 'gl-matrix';
+import { Vector3 } from '@kitware/vtk.js/types';
+import vtkVolumeProperty from '@kitware/vtk.js/Rendering/Core/VolumeProperty';
+import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+
+export function createRenderingPipeline() {
+  const actor = vtkVolume.newInstance();
+  const mapper = vtkVolumeMapper.newInstance();
+  const property = actor.getProperty();
+  const cfun = vtkColorTransferFunction.newInstance();
+  const ofun = vtkPiecewiseFunction.newInstance();
+  property.setRGBTransferFunction(0, cfun);
+  property.setScalarOpacity(0, ofun);
+  actor.setMapper(mapper);
+  return {
+    actor,
+    mapper,
+    property,
+    cfun,
+    ofun,
+  };
+}
+
+function updateRenderingProperty(
+  prop: vtkVolumeProperty,
+  mapper: vtkVolumeMapper,
+  image: vtkImageData
+) {
+  const scalars = image.getPointData().getScalars();
+  const dataRange = scalars.getRange();
+
+  const sampleDistance =
+    0.7 *
+    Math.sqrt(
+      image
+        .getSpacing()
+        .map((v) => v * v)
+        .reduce((a, b) => a + b, 0)
+    );
+  mapper.setSampleDistance(sampleDistance * 2 ** (0.4 * 3.0 - 1.5));
+
+  prop.setScalarOpacityUnitDistance(
+    0,
+    getDiagonalLength(image.getBounds()) / Math.max(...image.getDimensions())
+  );
+  prop.setGradientOpacityMinimumValue(0, 0);
+  prop.setGradientOpacityMaximumValue(0, (dataRange[1] - dataRange[0]) * 0.05);
+  // - Use shading based on gradient
+  prop.setShade(true);
+  prop.setUseGradientOpacity(0, true);
+  // - generic good default
+  prop.setGradientOpacityMinimumOpacity(0, 0.0);
+  prop.setGradientOpacityMaximumOpacity(0, 1.0);
+  prop.setAmbient(0.2);
+  prop.setDiffuse(0.7);
+  prop.setSpecular(0.3);
+  prop.setSpecularPower(8.0);
+}
+
+export function createVolumeThumbnailer(size: number) {
+  const container = document.createElement('div');
+  container.style.width = `${size}px`;
+  container.style.height = `${size}px`;
+
+  const scene = vtkGenericRenderWindow.newInstance({
+    listenWindowResize: false,
+    background: [0.2, 0.3, 0.4],
+  });
+  scene.setContainer(container);
+
+  const pipeline = createRenderingPipeline();
+  const { actor, mapper } = pipeline;
+  const renderer = scene.getRenderer();
+
+  // wrap with proxies for easier usage
+  const opacityFuncProxy = vtkPiecewiseFunctionProxy.newInstance({
+    piecewiseFunction: pipeline.ofun,
+  });
+  const colorTransferFuncProxy = vtkLookupTableProxy.newInstance({
+    lookupTable: pipeline.cfun,
+  });
+
+  return {
+    scene,
+    pipeline,
+    opacityFuncProxy,
+    colorTransferFuncProxy,
+    setInputImage(image: vtkImageData | null) {
+      if (image) {
+        mapper.setInputData(image);
+        updateRenderingProperty(actor.getProperty(), mapper, image);
+        if (!renderer.hasViewProp(actor)) {
+          renderer.addVolume(actor);
+        }
+      } else {
+        renderer.removeVolume(actor);
+      }
+    },
+    resetCameraWithOrientation(direction: Vector3, up: Vector3) {
+      const image = mapper.getInputData() as vtkImageData | null;
+      if (image) {
+        const camera = renderer.getActiveCamera();
+        const bounds = image.getBounds();
+        const center = [
+          (bounds[0] + bounds[1]) / 2,
+          (bounds[2] + bounds[3]) / 2,
+          (bounds[4] + bounds[5]) / 2,
+        ] as Vector3;
+
+        const position = vec3.clone(center) as Vector3;
+        vec3.sub(position, position, direction);
+        camera.setFocalPoint(...center);
+        camera.setPosition(...position);
+        camera.setDirectionOfProjection(...direction);
+        camera.setViewUp(...up);
+        renderer.resetCamera();
+        // ensure correct lighting post camera manip
+        renderer.updateLightsGeometryToFollowCamera();
+      }
+    },
+  };
+}

package/src/core/thumbnailers/vtk-image.ts

@@ -0,0 +1,142 @@
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { TypedArray } from '@kitware/vtk.js/types';
+import { ThumbnailSlice } from '.';
+
+function scalarImageToImageData(
+  values: TypedArray,
+  width: number,
+  height: number,
+  scaleMin: number,
+  scaleMax: number
+) {
+  const im = new ImageData(width, height);
+  const arr32 = new Uint32Array(im.data.buffer);
+  // scale to 1 unsigned byte
+  const factor = 255 / (scaleMax - scaleMin);
+  for (let i = 0; i < values.length; i += 1) {
+    const byte = Math.floor((values[i] - scaleMin) * factor);
+    // ABGR order
+    // eslint-disable-next-line no-bitwise
+    arr32[i] = (255 << 24) | (byte << 16) | (byte << 8) | byte;
+  }
+
+  return im;
+}
+
+/**
+ * Generates a thumbnail given an image data.
+ *
+ * Assumption: image is comprised of single-component scalars
+ */
+function generateThumbnail(
+  imageData: vtkImageData,
+  axis: 0 | 1 | 2 = 2,
+  whichSlice = ThumbnailSlice.Middle
+) {
+  const scalars = imageData.getPointData().getScalars();
+  const data = scalars.getData() as TypedArray;
+  const dataRange = scalars.getRange();
+  const dims = imageData.getDimensions();
+
+  // ThumbnailSlice.First
+  let slice = 0;
+  if (whichSlice === ThumbnailSlice.Middle) {
+    slice = Math.floor(dims[axis] / 2);
+  } else if (whichSlice === ThumbnailSlice.Last) {
+    slice = dims[axis] - 1;
+  }
+
+  let sliceData: TypedArray;
+  let width: number;
+  let height: number;
+
+  if (axis === 0) {
+    // work-around for typing data.constructor.
+    // data is not necessarily of type Uint8Array.
+    sliceData = new (<Uint8ArrayConstructor>data.constructor)(
+      dims[1] * dims[2]
+    );
+    [, width, height] = dims;
+    for (let k = 0; k < dims[2]; k++) {
+      for (let j = 0; j < dims[1]; j++) {
+        const index = slice + j * dims[0] + k * dims[0] * dims[1];
+        const offset = k * dims[1] + j;
+        sliceData[offset] = data[index];
+      }
+    }
+  } else if (axis === 1) {
+    sliceData = new (<Uint8ArrayConstructor>data.constructor)(
+      dims[0] * dims[2]
+    );
+    [width, , height] = dims;
+    for (let k = 0; k < dims[2]; k++) {
+      for (let i = 0; i < dims[0]; i++) {
+        const index = i + slice * dims[0] + k * dims[0] * dims[1];
+        const offset = k * dims[0] + i;
+        sliceData[offset] = data[index];
+      }
+    }
+  } else if (axis === 2) {
+    [width, height] = dims;
+    const skip = dims[0] * dims[1];
+    const sliceOffset = slice * skip;
+    sliceData = Array.isArray(data)
+      ? data.slice(sliceOffset, sliceOffset + skip)
+      : data.subarray(sliceOffset, sliceOffset + skip);
+  }
+
+  return scalarImageToImageData(
+    sliceData!,
+    width!,
+    height!,
+    dataRange[0],
+    dataRange[1]
+  );
+}
+
+export function createVTKImageThumbnailer() {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  const resizeCanvas = document.createElement('canvas');
+  const resizeContext = resizeCanvas.getContext('2d');
+
+  if (!ctx || !resizeContext) {
+    throw new Error('[thumbnailer] Failed to create a 2D context');
+  }
+  return {
+    generate(
+      imageData: vtkImageData,
+      axis: 0 | 1 | 2 = 2,
+      whichSlice = ThumbnailSlice.Middle
+    ) {
+      return generateThumbnail(imageData, axis, whichSlice);
+    },
+    imageDataToDataURI(
+      im: ImageData,
+      resizeWidth: number,
+      resizeHeight: number
+    ) {
+      canvas.width = im.width;
+      canvas.height = im.height;
+      ctx.putImageData(im, 0, 0);
+
+      let { width, height } = im;
+      if (im.width > im.height) {
+        width = resizeWidth;
+        height *= resizeWidth / im.width;
+      } else {
+        height = resizeHeight;
+        width *= resizeHeight / im.height;
+      }
+
+      resizeCanvas.width = width;
+      resizeCanvas.height = height;
+      resizeContext.clearRect(0, 0, width, height);
+      resizeContext.scale(width / im.width, height / im.height);
+      resizeContext.drawImage(canvas, 0, 0);
+      // jpegs are smaller than pngs
+      return resizeCanvas.toDataURL('image/jpeg');
+    },
+  };
+}

package/src/core/tools/__tests__/paint.spec.ts

@@ -0,0 +1,101 @@
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { expect } from 'chai';
+import PaintTool from '../paint';
+import EllipsePaintBrush from '../paint/ellipse-brush';
+
+describe('Paint Tool', () => {
+  describe('EllipsePaintBrush', () => {
+    it('should rasterize a ellipse', () => {
+      const brush = new EllipsePaintBrush();
+
+      brush.setSize(1);
+      brush.setScale([1, 1]);
+      expect(brush.getStencil()).to.deep.equal({
+        pixels: new Uint8Array([1]),
+        size: [1, 1],
+      });
+
+      brush.setSize(1);
+      brush.setScale([3, 5]);
+      expect(brush.getStencil()).to.deep.equal({
+        // prettier-ignore
+        pixels: new Uint8Array([
+          0, 1, 0,
+          1, 1, 1,
+          1, 1, 1,
+          1, 1, 1,
+          0, 1, 0,
+        ]),
+        size: [3, 5],
+      });
+
+      brush.setSize(4);
+      brush.setScale([1.2, 0.8]);
+      expect(brush.getStencil()).to.deep.equal({
+        // prettier-ignore
+        pixels: new Uint8Array([
+          0, 1, 1, 1, 0,
+          1, 1, 1, 1, 1,
+          1, 1, 1, 1, 1,
+          0, 1, 1, 1, 0,
+        ]),
+        size: [5, 4],
+      });
+    });
+  });
+
+  describe('PaintTool', () => {
+    describe('setBrushSize', () => {
+      it('should update the widget stencil', () => {
+        const tool = new PaintTool();
+        tool.setBrushSize(5);
+        tool.setBrushScale([1, 1]);
+        const state = tool.factory.getWidgetState();
+        expect(state.getStencil().size).to.deep.equal([5, 5]);
+      });
+    });
+    describe('paintLabelmap', () => {
+      it('should add paint of a given value to a labelmap', () => {
+        const labelmap = vtkLabelMap.newInstance();
+        const points = new Uint8Array(4 * 4 * 4);
+        labelmap.setDimensions([4, 4, 4]);
+        labelmap.getPointData().setScalars(
+          vtkDataArray.newInstance({
+            numberOfComponents: 1,
+            values: points,
+          })
+        );
+        const brushValue = 8;
+        const tool = new PaintTool();
+        tool.setBrushValue(brushValue);
+        tool.setBrushSize(4);
+        tool.paintLabelmap(labelmap, 0, [5, 5, 5]);
+        expect(points.every((value) => !value)).to.be.true;
+        tool.paintLabelmap(labelmap, 0, [1, 1, 1]);
+        // only checks some of the brush, not the entire brush.
+        expect(points[1 + 4 * 1 + 16 * 1]).to.equal(brushValue);
+      });
+      it('should linearly interpolate points', () => {
+        const labelmap = vtkLabelMap.newInstance();
+        const points = new Uint8Array(4 * 4 * 4);
+        labelmap.setDimensions([4, 4, 4]);
+        labelmap.getPointData().setScalars(
+          vtkDataArray.newInstance({
+            numberOfComponents: 1,
+            values: points,
+          })
+        );
+        const brushValue = 8;
+        const tool = new PaintTool();
+        tool.setBrushValue(brushValue);
+        tool.setBrushSize(1);
+        tool.paintLabelmap(labelmap, 2, [0, 0, 0], [3, 3, 0]);
+        for (let i = 0; i <= 3; i++) {
+          const offset = i + 4 * i;
+          expect(points[offset]).to.equal(brushValue);
+        }
+      });
+    });
+  });
+});

package/src/core/tools/__tests__/ruler.spec.ts

@@ -0,0 +1,73 @@
+import { InteractionState } from '@/src/vtk/RulerWidget/state';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { expect } from 'chai';
+import RulerTool, { RulerStateUpdate } from '../ruler';
+
+type EventData = {
+  id: string;
+  update: RulerStateUpdate;
+};
+
+describe('Ruler Tool Manager', () => {
+  describe('createRuler', () => {
+    it('should create a ruler', () => {
+      const manager = new RulerTool();
+      const factory = manager.createRuler('1');
+      expect(factory!.getClassName()).to.equal('vtkRulerWidget');
+
+      manager.teardown();
+    });
+    it('should register an event emitter for when state is updated', async () => {
+      const manager = new RulerTool();
+      const factory = manager.createRuler('1');
+      const state = factory.getWidgetState();
+
+      const promise = new Promise<EventData>((resolve) => {
+        manager.events.on('widgetUpdate', (eventData) => {
+          resolve(eventData);
+        });
+      });
+
+      state.getFirstPoint().setOrigin([10, 20, 10]);
+      const eventData = await promise;
+
+      expect(eventData.id).to.equal('1');
+      expect(eventData.update.firstPoint).to.deep.equal([10, 20, 10]);
+
+      manager.teardown();
+    });
+  });
+
+  describe('updateRuler', () => {
+    it('should update the internal widget state', () => {
+      const manager = new RulerTool();
+      const factory = manager.createRuler('1');
+      const state = factory.getWidgetState();
+
+      const firstPoint = [12, 13, 14] as Vector3;
+      const secondPoint = [15, 16, 17] as Vector3;
+
+      manager.updateRuler('1', {
+        firstPoint,
+        secondPoint,
+        interactionState: InteractionState.Settled,
+      });
+
+      expect(state.getFirstPoint().getOrigin()).to.deep.equal(firstPoint);
+      expect(state.getFirstPoint().getVisible()).to.be.true;
+      expect(state.getSecondPoint().getOrigin()).to.deep.equal(secondPoint);
+      expect(state.getSecondPoint().getVisible()).to.be.true;
+      expect(state.getInteractionState()).to.equal(InteractionState.Settled);
+    });
+  });
+
+  describe('removeRuler', () => {
+    it('should delete a ruler', () => {
+      const manager = new RulerTool();
+      manager.createRuler('1');
+      manager.removeRuler('1');
+
+      expect(manager.getFactory('1')).to.be.null;
+    });
+  });
+});