Reslice mapper representation

package.json

@@ -42,15 +42,15 @@
     "dev": "rollup ./src/index.js -c --watch"
   },
   "peerDependencies": {
-    "@kitware/vtk.js": "^26.8.0",
+    "@kitware/vtk.js": "^28.0.0",
     "react": "^16.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@kitware/vtk.js": "^26.5.3",
+    "@kitware/vtk.js": "^28.0.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "17.0.0",
     "@rollup/plugin-eslint": "^8.0.1",

src/core/ResliceRepresentation.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import vtkSliceRepresentation from './SliceRepresentation';
+import { ViewContext, RepresentationContext, DownstreamContext } from './View';
+
+import vtkImageResliceMapper from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper.js';
+import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants.js';
+
+/**
+ * ResliceRepresentation is an image slice representation that allows:
+ *   - Orthogonal slicing
+ *   - Oblique slicing
+ *   - Slab mode (thick slices)
+ *   - Slice a volume using arbitary geometry
+ */
+export default class ResliceRepresentation extends vtkSliceRepresentation {
+  constructor(props) {
+    super(props);
+    // Create the vtk.js objects
+    this.mapper = props.mapperInstance ?? vtkImageResliceMapper.newInstance();
+    this.actor.setMapper(this.mapper);
+    this.actor.getProperty().setRGBTransferFunction(0, this.lookupTable);
+    // this.actor.getProperty().setScalarOpacity(0, this.piecewiseFunction);
+    this.actor.getProperty().setInterpolationTypeToLinear();
+  }
+
+  render() {
+    return (
+      <ViewContext.Consumer>
+        {(view) => {
+          if (!this.view) {
+            view.renderer.addActor(this.actor);
+            this.view = view;
+          }
+          return (
+            <RepresentationContext.Provider value={this}>
+              <DownstreamContext.Provider value={this.mapper}>
+                <div key={this.props.id} id={this.props.id}>
+                  {this.props.children}
+                </div>
+              </DownstreamContext.Provider>
+            </RepresentationContext.Provider>
+          );
+        }}
+      </ViewContext.Consumer>
+    );
+  }
+
+  componentDidMount() {
+    this.update(this.props);
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.update(this.props, prevProps);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    if (this.view && this.view.renderer) {
+      this.view.renderer.removeActor(this.actor);
+    }
+  }
+
+  update(props, previous) {
+    const {
+      slicePlane,
+      slicePolyData,
+      slabType,
+      slabThickness,
+      slabTrapezoidIntegration,
+    } = props;
+    let changed = false;
+    if (!previous || slicePlane !== previous.slicePlane) {
+      changed = this.mapper.setSlicePlane(slicePlane);
+    }
+    if (!previous || slicePolyData !== previous.slicePolyData) {
+      changed = this.mapper.setSlicePolyData(slicePolyData);
+    }
+    if (this.validData) {
+      if (
+        slabType != null &&
+        (!previous || slabType !== previous.slabType) &&
+        slabType >= SlabTypes.MIN &&
+        slabType <= SlabTypes.SUM
+      ) {
+        changed = this.mapper.setSlabType(slabType);
+      }
+      if (
+        slabThickness != null &&
+        (!previous || slabThickness !== previous.slabThickness)
+      ) {
+        changed = this.mapper.setSlabThickness(slabThickness);
+      }
+      if (
+        slabTrapezoidIntegration != null &&
+        (!previous ||
+          slabTrapezoidIntegration !== previous.slabTrapezoidIntegration)
+      ) {
+        changed = this.mapper.setSlabTrapezoidIntegration(
+          slabTrapezoidIntegration
+        );
+      }
+    }
+    super.update(props, previous);
+
+    // trigger render
+    if (changed) {
+      super.dataChanged();
+    }
+  }
+}
+
+ResliceRepresentation.defaultProps = {
+  sliceThickness: 0.0,
+  slabType: SlabTypes.MEAN,
+  slabTrapezoidIntegration: false,
+};
+
+ResliceRepresentation.propTypes = {
+  /**
+   * Slice plane
+   */
+  slicePlane: PropTypes.object,
+
+  /**
+   * Optional slice polydata
+   */
+  slicePolyData: PropTypes.object,
+
+  /**
+   * Slab type
+   */
+  slabType: PropTypes.number,
+
+  /**
+   * Slab thickness
+   */
+  slabThickness: PropTypes.number,
+
+  /**
+   * Slab trapezoid integration
+   */
+  slabTrapezoidIntegration: PropTypes.bool,
+
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};

src/core/index.js

@@ -1,5 +1,6 @@
 import vtkVolumeRepresentation from './VolumeRepresentation';
 import vtkSliceRepresentation from './SliceRepresentation';
+import vtkResliceRepresentation from './ResliceRepresentation';
 import vtkVolumeController from './VolumeController';
 import vtkPointData from './PointData';
 import vtkPolyData from './PolyData';
@@ -20,6 +21,7 @@ import vtkMultiViewRoot from './MultiViewRoot';
 
 export const VolumeRepresentation = vtkVolumeRepresentation;
 export const SliceRepresentation = vtkSliceRepresentation;
+export const ResliceRepresentation = vtkResliceRepresentation;
 export const VolumeController = vtkVolumeController;
 export const PointData = vtkPointData;
 export const PolyData = vtkPolyData;
@@ -41,6 +43,7 @@ export const MultiViewRoot = vtkMultiViewRoot;
 export default {
   VolumeRepresentation: vtkVolumeRepresentation,
   SliceRepresentation: vtkSliceRepresentation,
+  ResliceRepresentation: vtkResliceRepresentation,
   VolumeController: vtkVolumeController,
   PointData: vtkPointData,
   PolyData: vtkPolyData,

src/light.js

@@ -13,6 +13,7 @@ import {
 // Core
 export const VolumeRepresentation = Core.VolumeRepresentation;
 export const SliceRepresentation = Core.SliceRepresentation;
+export const ResliceRepresentation = Core.ResliceRepresentation;
 export const VolumeController = Core.VolumeController;
 export const PointData = Core.PointData;
 export const PolyData = Core.PolyData;

usage/src/App.jsx

@@ -12,7 +12,10 @@ const SourceViewer = lazy(() => import('./Geometry/SourceViewer'));
 const Glyph = lazy(() => import('./Geometry/Glyph'));
 const CutterExample = lazy(() => import('./Geometry/CutterExample'));
 const SliceRendering = lazy(() => import('./Volume/SliceRendering'));
-const ImageSeriesRendering = lazy(() => import('./Volume/ImageSeriesRendering'));
+const ResliceRendering = lazy(() => import('./Volume/ResliceRendering'));
+const ImageSeriesRendering = lazy(() =>
+  import('./Volume/ImageSeriesRendering')
+);
 const SyntheticVolumeRendering = lazy(() =>
   import('./Volume/SyntheticVolumeRendering')
 );
@@ -31,6 +34,7 @@ const demos = [
   'Geometry/Glyph',
   'Geometry/CutterExample',
   'Volume/SliceRendering',
+  'Volume/ResliceRendering',
   'Volume/ImageSeriesRendering',
   'Volume/SyntheticVolumeRendering',
   'Volume/VolumeRendering',
@@ -91,8 +95,11 @@ function App() {
           {example === 'Geometry/SourceViewer' && <SourceViewer />}
           {example === 'Geometry/Glyph' && <Glyph />}
           {example === 'Geometry/CutterExample' && <CutterExample />}
+          {example === 'Volume/ResliceRendering' && <ResliceRendering />}
           {example === 'Volume/SliceRendering' && <SliceRendering />}
-          {example === 'Volume/ImageSeriesRendering' && <ImageSeriesRendering />}
+          {example === 'Volume/ImageSeriesRendering' && (
+            <ImageSeriesRendering />
+          )}
           {example === 'Volume/SyntheticVolumeRendering' && (
             <SyntheticVolumeRendering />
           )}