perf: ⚡️ Use Float32Array and avoid duplicated slice insertion

examples/App.js

@@ -5,6 +5,7 @@ import VTKBasicExample from './VTKBasicExample.js';
 import VTKFusionExample from './VTKFusionExample.js';
 import VTKMPRPaintingExample from './VTKMPRPaintingExample.js';
 import VTKCornerstonePaintingSyncExample from './VTKCornerstonePaintingSyncExample.js';
+import VTKLoadImageDataExample from './VTKLoadImageDataExample.js';
 import VTKCrosshairsExample from './VTKCrosshairsExample.js';
 import VTKMPRRotateExample from './VTKMPRRotateExample.js';
 
@@ -69,6 +70,12 @@ function Index() {
       url: '/rotate',
       text: 'Demonstrates how to set up the MPR Rotate interactor style',
     },
+    {
+      title: 'LoadImageData Example',
+      url: '/cornerstone-load-image-data',
+      text:
+        'Generating vtkjs imagedata from cornerstone images and displaying them in a VTK viewport.',
+    },
   ];
 
   const exampleComponents = examples.map(e => {
@@ -125,6 +132,7 @@ function AppRouter() {
   const basic = () => Example({ children: <VTKBasicExample /> });
   const fusion = () => Example({ children: <VTKFusionExample /> });
   const painting = () => Example({ children: <VTKMPRPaintingExample /> });
+  const loadImage = () => Example({ children: <VTKLoadImageDataExample /> });
   const synced = () =>
     Example({ children: <VTKCornerstonePaintingSyncExample /> });
   const crosshairs = () => Example({ children: <VTKCrosshairsExample /> });
@@ -140,6 +148,7 @@ function AppRouter() {
         <Route exact path="/cornerstone-sync-painting" render={synced} />
         <Route exact path="/crosshairs" render={crosshairs} />
         <Route exact path="/rotate" render={rotateMPR} />
+        <Route exact path="/cornerstone-load-image-data" render={loadImage} />
         <Route exact component={Index} />
       </Switch>
     </Router>

examples/VTKCornerstonePaintingSyncExample.js

@@ -14,7 +14,7 @@ import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 const { EVENTS } = cornerstoneTools;
 window.cornerstoneTools = cornerstoneTools;
 
-function setupSyncedBrush(imageDataObject, element) {
+function setupSyncedBrush(imageDataObject) {
   // Create buffer the size of the 3D volume
   const dimensions = imageDataObject.dimensions;
   const width = dimensions[0];
@@ -93,16 +93,6 @@ const imageIds = [
   `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.5.dcm`,
 ];
 
-// Pre-retrieve the images for demo purposes
-// Note: In a real application you wouldn't need to do this
-// since you would probably have the image metadata ahead of time.
-// In this case, we preload the images so the WADO Image Loader can
-// read and store all of their metadata and subsequently the 'getImageData'
-// can run properly (it requires metadata).
-const promises = imageIds.map(imageId => {
-  return cornerstone.loadAndCacheImage(imageId);
-});
-
 class VTKCornerstonePaintingSyncExample extends Component {
   state = {
     volumes: null,
@@ -116,6 +106,16 @@ class VTKCornerstonePaintingSyncExample extends Component {
     this.components = {};
     this.cornerstoneElements = {};
 
+    // Pre-retrieve the images for demo purposes
+    // Note: In a real application you wouldn't need to do this
+    // since you would probably have the image metadata ahead of time.
+    // In this case, we preload the images so the WADO Image Loader can
+    // read and store all of their metadata and subsequently the 'getImageData'
+    // can run properly (it requires metadata).
+    const promises = imageIds.map(imageId => {
+      return cornerstone.loadAndCacheImage(imageId);
+    });
+
     Promise.all(promises).then(
       () => {
         const displaySetInstanceUid = '12345';
@@ -128,10 +128,7 @@ class VTKCornerstonePaintingSyncExample extends Component {
         };
 
         const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
-        const labelMapInputData = setupSyncedBrush(
-          imageDataObject,
-          this.cornerstoneElements[0]
-        );
+        const labelMapInputData = setupSyncedBrush(imageDataObject);
 
         this.onMeasurementsChanged = event => {
           if (event.type !== EVENTS.LABELMAP_MODIFIED) {
@@ -160,7 +157,7 @@ class VTKCornerstonePaintingSyncExample extends Component {
     );
   }
 
-  onPaintEnd = () => {
+  onPaintEnd = strokeBuffer => {
     const element = this.cornerstoneElements[0];
     const enabledElement = cornerstone.getEnabledElement(element);
     const { getters, setters } = cornerstoneTools.getModule('segmentation');
@@ -174,16 +171,35 @@ class VTKCornerstonePaintingSyncExample extends Component {
 
     const stackData = stackState.data[0];
     const numberOfFrames = stackData.imageIds.length;
+    const segmentIndex = labelmap3D.activeSegmentIndex;
 
-    // TODO -> Can do more efficiently if we can grab the strokeBuffer from vtk-js.
     for (let i = 0; i < numberOfFrames; i++) {
-      const labelmap2D = getters.labelmap2DByImageIdIndex(
-        labelmap3D,
-        i,
-        rows,
-        columns
-      );
-      setters.updateSegmentsOnLabelmap2D(labelmap2D);
+      let labelmap2D = labelmap3D.labelmaps2D[i];
+
+      if (labelmap2D && labelmap2D.segmentsOnLabelmap.includes(segmentIndex)) {
+        continue;
+      }
+
+      const frameLength = rows * columns;
+      const byteOffset = frameLength * i;
+      const strokeArray = new Uint8Array(strokeBuffer, byteOffset, frameLength);
+
+      const strokeOnFrame = strokeArray.some(element => element === 1);
+
+      if (!strokeOnFrame) {
+        continue;
+      }
+
+      if (labelmap2D) {
+        labelmap2D.segmentsOnLabelmap.push(segmentIndex);
+      } else {
+        labelmap2D = getters.labelmap2DByImageIdIndex(
+          labelmap3D,
+          i,
+          rows,
+          columns
+        );
+      }
     }
 
     cornerstone.updateImage(element);
@@ -241,10 +257,11 @@ class VTKCornerstonePaintingSyncExample extends Component {
             accessed in 2D.
           </p>
           <p>
-            Both components are displaying the same labelmap UInt8Array. For
+            Both components are displaying the same labelmap UInt16Array. For
             VTK, it has been encapsulated in a vtkDataArray and then a
-            vtkImageData Object. For Cornerstone Tools, it is accessed by
-            reference and index for each of the 2D slices.
+            vtkImageData Object. For Cornerstone Tools, the Uint16Array is
+            accessed through helpers based on the actively displayed image stack
+            and the index of the currently displayed image
           </p>
           <p>
             <strong>Note:</strong> The PaintWidget (circle on hover) is not

examples/VTKLoadImageDataExample.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Component } from 'react';
+
+import { View2D, getImageData, loadImageData } from '@vtk-viewport';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+import './initCornerstone.js';
+import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
+import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
+
+window.cornerstoneTools = cornerstoneTools;
+
+function createActorMapper(imageData) {
+  const mapper = vtkVolumeMapper.newInstance();
+  mapper.setInputData(imageData);
+
+  const actor = vtkVolume.newInstance();
+  actor.setMapper(mapper);
+
+  return {
+    actor,
+    mapper,
+  };
+}
+
+const ROOT_URL =
+  window.location.hostname === 'localhost'
+    ? window.location.host
+    : window.location.hostname;
+
+const imageIds = [
+  `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.1.dcm`,
+  `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.2.dcm`,
+  `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.3.dcm`,
+  `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.4.dcm`,
+  `dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.5.dcm`,
+];
+
+class VTKLoadImageDataExample extends Component {
+  state = {
+    volumes: null,
+    vtkImageData: null,
+    cornerstoneViewportData: null,
+    focusedWidgetId: null,
+    isSetup: false,
+  };
+
+  componentDidMount() {
+    this.components = {};
+    this.cornerstoneElements = {};
+
+    // Pre-retrieve the images for demo purposes
+    // Note: In a real application you wouldn't need to do this
+    // since you would probably have the image metadata ahead of time.
+    // In this case, we preload the images so the WADO Image Loader can
+    // read and store all of their metadata and subsequently the 'getImageData'
+    // can run properly (it requires metadata).
+    const promises = imageIds.map(imageId => {
+      return cornerstone.loadAndCacheImage(imageId);
+    });
+
+    Promise.all(promises).then(
+      () => {
+        const displaySetInstanceUid = '12345';
+        const cornerstoneViewportData = {
+          stack: {
+            imageIds,
+            currentImageIdIndex: 0,
+          },
+          displaySetInstanceUid,
+        };
+
+        const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
+
+        loadImageData(imageDataObject).then(() => {
+          const { actor } = createActorMapper(imageDataObject.vtkImageData);
+
+          this.setState({
+            vtkImageData: imageDataObject.vtkImageData,
+            volumes: [actor],
+            cornerstoneViewportData,
+          });
+        });
+      },
+      error => {
+        throw new Error(error);
+      }
+    );
+  }
+
+  saveCornerstoneElements = viewportIndex => {
+    return event => {
+      this.cornerstoneElements[viewportIndex] = event.detail.element;
+    };
+  };
+
+  setWidget = event => {
+    const widgetId = event.target.value;
+
+    if (widgetId === 'rotate') {
+      this.setState({
+        focusedWidgetId: null,
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <div className="col-xs-12">
+          <h1>Loading a cornerstone displayset into vtkjs</h1>
+          <p>
+            The example demonstrates loading cornerstone images already
+            available in the application into a vtkjs viewport.
+          </p>
+          <hr />
+        </div>
+        <div className="col-xs-12">
+          <div className="col-xs-12">
+            <label>
+              <input
+                type="radio"
+                value="rotate"
+                name="widget"
+                onChange={this.setWidget}
+                checked={this.state.focusedWidgetId === null}
+              />{' '}
+              Rotate
+            </label>
+          </div>
+          <div className="col-xs-12 col-sm-6">
+            {this.state.volumes && <View2D volumes={this.state.volumes} />}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default VTKLoadImageDataExample;

examples/VTKMPRRotateExample.js

@@ -434,34 +434,6 @@ class VTKMPRRotateExample extends Component {
     for (let index = 0; index < volumeData.length; index++) {
       columns.push(
         <div key={index.toString()} className="col-xs-12 col-sm-6">
-          {/* <div>
-            <input
-              className="rotate"
-              type="range"
-              min={min}
-              max={max}
-              step="1"
-              value={this.state.rotation[index].x}
-              onChange={event => {
-                this.handleChangeX(index, event);
-              }}
-            />
-            <span>{this.state.rotation[index].x}</span>
-          </div>
-          <div>
-            <input
-              className="rotate"
-              type="range"
-              min={min}
-              max={max}
-              step="1"
-              value={this.state.rotation[index].y}
-              onChange={event => {
-                this.handleChangeY(index, event);
-              }}
-            />
-            <span>{this.state.rotation[index].y}</span>
-          </div> */}
           <View2D
             volumes={this.state.volumes}
             onCreated={this.storeApi(index)}

package.json

@@ -23,7 +23,7 @@
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "vtk.js": "^11.1.3"
+    "vtk.js": "^11.2.0"
   },
   "dependencies": {
     "date-fns": "^2.2.1",
@@ -46,7 +46,7 @@
     "copy-webpack-plugin": "^5.0.4",
     "cornerstone-core": "^2.3.0",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.5.2",
     "cornerstone-wado-image-loader": "^3.0.5",
     "cross-env": "^5.2.0",
     "css-loader": "^3.0.0",
@@ -81,7 +81,7 @@
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0",
-    "vtk.js": "^11.1.3",
+    "vtk.js": "^11.2.0",
     "webpack": "4.34.0",
     "webpack-cli": "^3.3.4",
     "webpack-dev-server": "^3.8.0",

src/Custom/VTKMPRViewport.js

@@ -216,9 +216,12 @@ export default class VtkMpr extends Component {
         );
         this.subs.paintEnd.sub(
           this.viewWidget.onEndInteractionEvent(() => {
-            this.paintFilter.endStroke();
+            const strokeBufferPromise = this.paintFilter.endStroke();
+
             if (this.props.onPaintEnd) {
-              this.props.onPaintEnd();
+              strokeBufferPromise.then(strokeBuffer => {
+                this.props.onPaintEnd(strokeBuffer);
+              });
             }
           })
         );

src/VTKViewport/View2D.js

@@ -302,9 +302,12 @@ export default class View2D extends Component {
         );
         this.subs.paintEnd.sub(
           this.viewWidget.onEndInteractionEvent(() => {
-            this.paintFilter.endStroke();
+            const strokeBufferPromise = this.paintFilter.endStroke();
+
             if (this.props.onPaintEnd) {
-              this.props.onPaintEnd();
+              strokeBufferPromise.then(strokeBuffer => {
+                this.props.onPaintEnd(strokeBuffer);
+              });
             }
           })
         );