feat(invertVolume): add ability to invert an RGB Transfer Function

Author: Zaid-Safadi

examples/VTKBasicExample.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Component } from 'react';
-import { View2D, vtkInteractorStyleMPRWindowLevel } from '@vtk-viewport';
+import {
+  View2D,
+  vtkInteractorStyleMPRWindowLevel,
+  invertVolume,
+} from '@vtk-viewport';
 import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
 import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
@@ -54,6 +58,12 @@ class VTKBasicExample extends Component {
     this.updateAllViewports();
   };
 
+  invert = () => {
+    const volume = this.state.volumes[0];
+
+    invertVolume(volume, this.updateAllViewports);
+  };
+
   updateAllViewports = () => {
     Object.keys(this.components).forEach(viewportIndex => {
       const component = this.components[viewportIndex];
@@ -143,8 +153,8 @@ class VTKBasicExample extends Component {
             to obtain access to the VTK render window for one or more component.
             It also shows how to provide an array of vtkVolumes to the component
             for rendering. When we change the RGB Transfer Function for the
-            volume using the Window/Level buttons, we can see that this is
-            applied inside both components.
+            volume using the Window/Level and Invert buttons, we can see that
+            this is applied inside both components.
           </p>
         </div>
         <div className="col-xs-12">
@@ -162,6 +172,9 @@ class VTKBasicExample extends Component {
             >
               Head
             </button>
+            <button className="btn btn-primary" onClick={() => this.invert()}>
+              Invert
+            </button>
           </div>
         </div>
         <div className="col-xs-12 col-sm-6">

src/index.js

@@ -8,6 +8,7 @@ import vtkSVGCrosshairsWidget from './VTKViewport/vtkSVGCrosshairsWidget.js';
 import ViewportOverlay from './ViewportOverlay/ViewportOverlay.js';
 import getImageData from './lib/getImageData.js';
 import loadImageData from './lib/loadImageData.js';
+import invertVolume from './lib/invertVolume.js';
 
 export {
   View2D,
@@ -20,6 +21,7 @@ export {
   vtkInteractorStyleMPRSlice,
   vtkSVGWidgetManager,
   vtkSVGCrosshairsWidget,
+  invertVolume,
 };
 
 export default View2D;

src/lib/invertVolume.js

@@ -0,0 +1,32 @@
+/**
+ * @param {vtkVolume} volume A vtkVolume object to invert
+ * @param {()=>void|{render:()=>void}} [rendering] - A function to render the volume after
+ * being inverted or a RenderWindow object. Can be null.
+ * @returns void
+ */
+export default (volume, rendering = null) => {
+  if (!volume) {
+    return;
+  }
+
+  const rgbTransferFunction = volume.getProperty().getRGBTransferFunction(0);
+  const size = rgbTransferFunction.getSize();
+
+  for (let index = 0; index < size; index++) {
+    const nodeValue1 = [];
+
+    rgbTransferFunction.getNodeValue(index, nodeValue1);
+
+    nodeValue1[1] = 1 - nodeValue1[1];
+    nodeValue1[2] = 1 - nodeValue1[2];
+    nodeValue1[3] = 1 - nodeValue1[3];
+
+    rgbTransferFunction.setNodeValue(index, nodeValue1);
+  }
+
+  if (rendering instanceof Function) {
+    rendering();
+  } else if (rendering && rendering.render) {
+    rendering.render();
+  }
+};