feat: 🎸 Enable outline rendering of segmentations (#80)

Author: JamesAPetts

examples/VTKCornerstonePaintingSyncExample.js

@@ -14,6 +14,8 @@ import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 const { EVENTS } = cornerstoneTools;
 window.cornerstoneTools = cornerstoneTools;
 
+const segmentationModule = cornerstoneTools.getModule('segmentation');
+
 const voi = {
   windowCenter: 35,
   windowWidth: 80,
@@ -39,8 +41,6 @@ function setupSyncedBrush(imageDataObject) {
     throw new Error('Depth should match the number of imageIds');
   }
 
-  const segmentationModule = cornerstoneTools.getModule('segmentation');
-
   segmentationModule.setters.labelmap3DByFirstImageId(
     imageIds[0],
     buffer,
@@ -51,10 +51,7 @@ function setupSyncedBrush(imageDataObject) {
     0
   );
 
-  segmentationModule.setters.colorLUT(0, [[255, 0, 0, 255]]);
-
   // Create VTK Image Data with buffer as input
-
   const labelMap = vtkImageData.newInstance();
 
   // right now only support 256 labels
@@ -162,6 +159,9 @@ class VTKCornerstonePaintingSyncExample extends Component {
           volumes: [actor],
           cornerstoneViewportData,
           labelMapInputData,
+          colorLUT: segmentationModule.getters.colorLUT(0),
+          globalOpacity: segmentationModule.configuration.fillAlpha,
+          outlineThickness: segmentationModule.configuration.outlineThickness,
         });
       });
     });
@@ -257,6 +257,8 @@ class VTKCornerstonePaintingSyncExample extends Component {
   };
 
   render() {
+    const { globalOpacity, colorLUT, outlineThickness } = this.state;
+
     return (
       <div className="row">
         <div className="col-xs-12">
@@ -312,6 +314,13 @@ class VTKCornerstonePaintingSyncExample extends Component {
                 onPaintEnd={this.onPaintEnd}
                 orientation={{ sliceNormal: [0, 0, 1], viewUp: [0, -1, 0] }}
                 onCreated={this.saveApiReference}
+                labelmapRenderingOptions={{
+                  colorLUT,
+                  globalOpacity,
+                  outlineThickness,
+                  visible: true,
+                  renderOutline: true,
+                }}
               />
             )}
           </div>

examples/VTKFusionExample.js

@@ -41,7 +41,7 @@ function createCT2dPipeline(imageData) {
   const { actor } = createActorMapper(imageData);
   const cfun = vtkColorTransferFunction.newInstance();
   /*
-    0: { description: 'Soft tissue', window: 400, level: 40 },
+  0: { description: 'Soft tissue', window: 400, level: 40 },
   1: { description: 'Lung', window: 1500, level: -600 },
   2: { description: 'Liver', window: 150, level: 90 },
   3: { description: 'Bone', window: 2500, level: 480 },

examples/VTKMPRPaintingExample.js

@@ -64,7 +64,7 @@ function createLabelMapImageData(backgroundImageData) {
   labelMapData.setDimensions(backgroundImageData.getDimensions());
   labelMapData.computeTransforms();
 
-  const values = new Uint8Array(backgroundImageData.getNumberOfPoints());
+  const values = new Uint16Array(backgroundImageData.getNumberOfPoints());
   const dataArray = vtkDataArray.newInstance({
     numberOfComponents: 1, // labelmap with single component
     values,
@@ -167,8 +167,8 @@ class VTKMPRPaintingExample extends Component {
       numberOfComponents: 1, // labelmap with single component
       values,
     });
-    labelMapImageData.getPointData().setScalars(dataArray);
 
+    labelMapImageData.getPointData().setScalars(dataArray);
     labelMapImageData.modified();
 
     this.rerenderAllViewports();
@@ -278,19 +278,21 @@ class VTKMPRPaintingExample extends Component {
             painting={this.state.focusedWidgetId === 'PaintWidget'}
           />
         </div>
-        <div className="col-xs-12 col-sm-6">
-          <View3D
-            volumes={this.state.volumeRenderingVolumes}
-            paintFilterBackgroundImageData={
-              this.state.paintFilterBackgroundImageData
-            }
-            paintFilterLabelMapImageData={
-              this.state.paintFilterLabelMapImageData
-            }
-            onCreated={this.saveApiReference(1)}
-            painting={this.state.focusedWidgetId === 'PaintWidget'}
-          />
-        </div>
+        {
+          <div className="col-xs-12 col-sm-6">
+            <View3D
+              volumes={this.state.volumeRenderingVolumes}
+              paintFilterBackgroundImageData={
+                this.state.paintFilterBackgroundImageData
+              }
+              paintFilterLabelMapImageData={
+                this.state.paintFilterLabelMapImageData
+              }
+              onCreated={this.saveApiReference(1)}
+              painting={this.state.focusedWidgetId === 'PaintWidget'}
+            />
+          </div>
+        }
       </div>
     );
   }

package.json

@@ -24,7 +24,7 @@
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "vtk.js": "^11.7.2"
+    "vtk.js": "^11.14.0"
   },
   "dependencies": {
     "date-fns": "^2.2.1",
@@ -82,7 +82,7 @@
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0",
-    "vtk.js": "^11.11.1",
+    "vtk.js": "^11.14.0",
     "webpack": "4.34.0",
     "webpack-cli": "^3.3.4",
     "webpack-dev-server": "^3.8.0",

src/VTKViewport/View2D.js

@@ -37,6 +37,7 @@ export default class View2D extends Component {
     painting: false,
     labelmapRenderingOptions: {
       visible: true,
+      renderOutline: true,
     },
   };
 
@@ -389,9 +390,10 @@ export default class View2D extends Component {
     ) {
       // re-render if data has updated
       this.subs.data.sub(
-        this.props.paintFilterBackgroundImageData.onModified(() =>
-          this.renderWindow.render()
-        )
+        this.props.paintFilterBackgroundImageData.onModified(() => {
+          this.genericRenderWindow.resize();
+          this.renderWindow.render();
+        })
       );
       this.paintFilter.setBackgroundImage(
         this.props.paintFilterBackgroundImageData
@@ -431,6 +433,8 @@ export default class View2D extends Component {
           this.renderWindow.render();
         })
       );
+
+      this.genericRenderWindow.resize();
     }
 
     if (
@@ -486,6 +490,8 @@ export default class View2D extends Component {
 
         this.widgetManager.grabFocus(this.paintWidget);
         this.widgetManager.enablePicking();
+
+        this.genericRenderWindow.resize();
       } else if (this.viewWidget) {
         this.widgetManager.releaseFocus();
         this.widgetManager.removeWidget(this.paintWidget);
@@ -495,6 +501,8 @@ export default class View2D extends Component {
         this.subs.paint.unsubscribe();
         this.subs.paintEnd.unsubscribe();
         this.viewWidget = null;
+
+        this.genericRenderWindow.resize();
       }
     }
   }
@@ -530,7 +538,6 @@ export default class View2D extends Component {
     }
 
     const style = { width: '100%', height: '100%', position: 'relative' };
-
     const voi = this.state.voi;
 
     return (

src/VTKViewport/View3D.js

@@ -32,6 +32,7 @@ export default class View3D extends Component {
     sliceNormal: [0, 0, 1],
     labelmapRenderingOptions: {
       visible: true,
+      renderOutline: false,
     },
   };
 
@@ -194,7 +195,7 @@ export default class View3D extends Component {
         this.props.paintFilterBackgroundImageData,
         labelmapImageData,
         this.props.labelmapRenderingOptions,
-        true
+        false
       );
 
       this.labelmap = labelmap;

src/VTKViewport/createLabelPipeline.js

@@ -12,8 +12,13 @@ export default function createLabelPipeline(
   useSampleDistance = false
 ) {
   let labelMapData;
-
-  let { colorLUT, globalOpacity, visible } = options;
+  let {
+    colorLUT,
+    globalOpacity,
+    visible,
+    renderOutline,
+    outlineThickness,
+  } = options;
 
   if (visible === undefined) {
     visible = false;
@@ -23,6 +28,10 @@ export default function createLabelPipeline(
     globalOpacity = 1.0;
   }
 
+  if (outlineThickness === undefined) {
+    outlineThickness = 3;
+  }
+
   if (paintFilterLabelMapImageData) {
     labelMapData = paintFilterLabelMapImageData;
   } else {
@@ -66,8 +75,9 @@ export default function createLabelPipeline(
   labelMap.actor.setMapper(labelMap.mapper);
   labelMap.actor.setVisibility(visible);
   labelMap.ofun.addPoint(0, 0);
+  labelMap.ofun.addPoint(1, 1.0);
 
-  // set up labelMap color and opacity mapping
+  // Set up labelMap color and opacity mapping
   if (colorLUT) {
     // TODO -> It seems to crash if you set it higher than 256??
     const numColors = Math.min(256, colorLUT.length);
@@ -82,8 +92,9 @@ export default function createLabelPipeline(
         color[2] / 255
       );
 
+      // Set the opacity per label.
       const segmentOpacity = (color[3] / 255) * globalOpacity;
-      labelMap.ofun.addPointLong(i, segmentOpacity, 0.5, 1.0);
+      labelMap.ofun.addPoint(1, segmentOpacity, 0.5, 1.0);
     }
   } else {
     // Some default.
@@ -95,8 +106,14 @@ export default function createLabelPipeline(
 
   labelMap.actor.getProperty().setRGBTransferFunction(0, labelMap.cfun);
   labelMap.actor.getProperty().setScalarOpacity(0, labelMap.ofun);
-
   labelMap.actor.getProperty().setInterpolationTypeToNearest();
+
+  if (renderOutline) {
+    labelMap.actor.getProperty().setUseLabelOutline(true);
+    labelMap.actor.getProperty().setLabelOutlineThickness(outlineThickness);
+  }
+
+  labelMap.ofun.setClamping(false);
   labelMap.actor.getProperty().setScalarOpacityUnitDistance(0, 0.1);
   labelMap.actor.getProperty().setUseGradientOpacity(0, false);
 

src/lib/getImageData.js

@@ -18,7 +18,7 @@ export default function getImageData(imageIds, displaySetInstanceUid) {
   const { rowCosines, columnCosines } = metaData0;
   const rowCosineVec = vec3.fromValues(...rowCosines);
   const colCosineVec = vec3.fromValues(...columnCosines);
-  const scanAxisNormal = vec3.cross([], colCosineVec, rowCosineVec);
+  const scanAxisNormal = vec3.cross([], rowCosineVec, colCosineVec);
 
   const { spacing, origin, sortedDatasets } = sortDatasetsByImagePosition(
     scanAxisNormal,
@@ -65,7 +65,6 @@ export default function getImageData(imageIds, displaySetInstanceUid) {
   });
 
   const imageData = vtkImageData.newInstance();
-
   const direction = [...rowCosineVec, ...colCosineVec, ...scanAxisNormal];
 
   imageData.setDimensions(xVoxels, yVoxels, zVoxels);