feat(Viewer): Use ViewProxy and ProxyManager to create 3D view

Author: thewtex

src/createViewer.js

@@ -0,0 +1,59 @@
+import vtkProxyManager from 'vtk.js/Sources/Proxy/Core/ProxyManager';
+
+import proxyConfiguration from './proxyManagerConfiguration';
+import userInterface from './userInterface';
+
+const STYLE_CONTAINER = {
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  minHeight: '200px',
+  minWidth: '200px',
+  margin: '0',
+  padding: '0',
+  top: '0',
+  left: '0',
+  overflow: 'hidden',
+};
+
+function applyStyle(el, style) {
+  Object.keys(style).forEach((key) => {
+    el.style[key] = style[key];
+  });
+}
+
+const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
+window.addEventListener('resize', proxyManager.resizeAllViews);
+
+const createViewer = (rootContainer, { image, use2D, viewerState, config }) => {
+  userInterface.emptyContainer(rootContainer);
+
+  const container = document.createElement('div');
+  const defaultConfig = {
+    background: [0, 0, 0],
+    containerStyle: STYLE_CONTAINER,
+  };
+  const renderWindowConfiguration = config || defaultConfig;
+  userInterface.emptyContainer(container);
+  applyStyle(
+    container,
+    renderWindowConfiguration.containerStyle || STYLE_CONTAINER
+  );
+  rootContainer.appendChild(container);
+
+  const view = proxyManager.createProxy('Views', 'ItkVtkView');
+  view.setContainer(container);
+  view.resize();
+
+  const imageSource = proxyManager.createProxy('Sources', 'TrivialProducer');
+  imageSource.setInputData(image);
+  imageSource.setName('Image');
+
+  proxyManager.createRepresentationInAllViews(imageSource);
+
+  proxyManager.renderAllViews();
+
+  return { view, imageSource };
+};
+
+export default createViewer;

src/index.js

@@ -46,23 +46,25 @@ export function initializeEmbeddedViewers() {
       el.style.height = Number.isFinite(Number(height))
         ? `${height}px`
         : height;
-      createViewerFromUrl(el, el.dataset.url, !!el.dataset.slice).then((viewer) => {
-        // Background color handling
-        if (el.dataset.backgroundColor && viewer.renderWindow) {
-          const color = el.dataset.backgroundColor;
-          const bgColor = [
-            color.slice(0, 2),
-            color.slice(2, 4),
-            color.slice(4, 6),
-          ].map((v) => parseInt(v, 16) / 255);
-          viewer.renderer.setBackground(bgColor);
-        }
+      createViewerFromUrl(el, el.dataset.url, !!el.dataset.slice).then(
+        (viewer) => {
+          // Background color handling
+          if (el.dataset.backgroundColor && viewer.renderWindow) {
+            const color = el.dataset.backgroundColor;
+            const bgColor = [
+              color.slice(0, 2),
+              color.slice(2, 4),
+              color.slice(4, 6),
+            ].map((v) => parseInt(v, 16) / 255);
+            viewer.renderer.setBackground(bgColor);
+          }
 
-        // Render
-        if (viewer.renderWindow && viewer.renderWindow.render) {
-          viewer.renderWindow.render();
+          // Render
+          if (viewer.renderWindow && viewer.renderWindow.render) {
+            viewer.renderWindow.render();
+          }
         }
-      });
+      );
     }
   }
 }
@@ -84,7 +86,11 @@ export function processParameters(
   }
 
   if (userParams[keyName]) {
-    return createViewerFromUrl(myContainer, userParams[keyName], !!userParams.use2D);
+    return createViewerFromUrl(
+      myContainer,
+      userParams[keyName],
+      !!userParams.use2D
+    );
   }
   return null;
 }

src/processFiles.js

@@ -1,9 +1,9 @@
 import itkreadImageFile from 'itk/readImageFile';
 import itkreadImageDICOMFileSeries from 'itk/readImageDICOMFileSeries';
 
-import viewers from './viewers';
 import userInterface from './userInterface';
 import convertItkImageToVtkImage from './convertItkImageToVtkImage';
+import createViewer from './createViewer';
 
 const processFiles = (container, { files, use2D }) => {
   userInterface.emptyContainer(container);
@@ -24,9 +24,9 @@ const processFiles = (container, { files, use2D }) => {
       const is3D = itkImage.imageType.dimension === 3 && !use2D;
 
       resolve(
-        viewers.createViewer(container, {
-          type: is3D ? 'volumeRendering' : 'imageRendering',
+        createViewer(container, {
           image: imageData,
+          use2D: !is3D,
         })
       );
     });

src/proxyManagerConfiguration.js

@@ -0,0 +1,65 @@
+import vtkView from 'vtk.js/Sources/Proxy/Core/ViewProxy';
+import vtkProxySource from 'vtk.js/Sources/Proxy/Core/SourceProxy';
+import vtkGeometryRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/GeometryRepresentationProxy';
+import vtkMoleculeRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/MoleculeRepresentationProxy';
+import vtkVolumeRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/VolumeRepresentationProxy';
+import vtkSliceRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/SliceRepresentationProxy';
+import vtkPiecewiseFunctionProxy from 'vtk.js/Sources/Proxy/Core/PiecewiseFunctionProxy';
+import vtkLookupTableProxy from 'vtk.js/Sources/Proxy/Core/LookupTableProxy';
+
+const proxyManagerConfiguration = {
+  definitions: {
+    Proxy: {
+      LookupTable: {
+        class: vtkLookupTableProxy,
+      },
+      PiecewiseFunction: {
+        class: vtkPiecewiseFunctionProxy,
+      },
+    },
+    Sources: {
+      TrivialProducer: {
+        class: vtkProxySource,
+        options: {},
+      },
+    },
+    Representations: {
+      Geometry: {
+        class: vtkGeometryRepresentationProxy,
+        options: {},
+      },
+      Slice: {
+        class: vtkSliceRepresentationProxy,
+        options: {},
+      },
+      Volume: {
+        class: vtkVolumeRepresentationProxy,
+        options: {},
+      },
+      Molecule: {
+        class: vtkMoleculeRepresentationProxy,
+        options: {},
+      },
+    },
+    Views: {
+      ItkVtkView: {
+        class: vtkView,
+        options: {
+          axis: 1, // Y
+          orientation: -1, // Y- (A)
+          viewUp: [0, 0, 1], // Z+ (S)
+          useParallelRendering: false,
+        },
+      },
+    },
+  },
+  representations: {
+    ItkVtkView: {
+      vtkPolyData: { name: 'Geometry' },
+      vtkImageData: { name: 'Volume' },
+      vtkMolecule: { name: 'Molecule' },
+    },
+  },
+};
+
+export default proxyManagerConfiguration;