Image mapper class and example rendering. (#110)

* WIP

* WIP

* Make new fork of View2D and gut it so that the transition to imageMapper is as simple as possible.

* Functional hanging of one image for now.

* Basic display.

* Move segmentations to another layer so that we can interact with the source data and just use it as an overlay.

* Radiologics/imagemapper

* Working seg rendering.

* clean up 4up

Co-authored-by: Kate Alpert <[email protected]>

Author: JamesAPetts

.vscode/settings.json

@@ -26,5 +26,8 @@
   ],
   "prettier.disableLanguages": [],
   "prettier.endOfLine": "lf",
-  "workbench.colorCustomizations": {}
+  "workbench.colorCustomizations": {},
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

examples/App.js

@@ -7,6 +7,7 @@ import VTKMPRPaintingExample from './VTKMPRPaintingExample.js';
 import VTKCornerstonePaintingSyncExample from './VTKCornerstonePaintingSyncExample.js';
 import VTKLoadImageDataExample from './VTKLoadImageDataExample.js';
 import VTKCrosshairsExample from './VTKCrosshairsExample.js';
+import VTK4UpExample from './VTK4UpExample.js';
 import VTKMPRRotateExample from './VTKMPRRotateExample.js';
 import VTKVolumeRenderingExample from './VTKVolumeRenderingExample.js';
 
@@ -51,8 +52,7 @@ function Index() {
     {
       title: 'Volume Rendering',
       url: '/volume-rendering',
-      text:
-        'Demonstrates how to perform volume rendering for a CT volume.',
+      text: 'Demonstrates how to perform volume rendering for a CT volume.',
     },
     {
       title: 'Image Segmentation via Paint Widget',
@@ -72,6 +72,11 @@ function Index() {
       text:
         'Demonstrates how to set up the Crosshairs interactor style and SVG Widget',
     },
+    {
+      title: 'MPR 4UP Example',
+      url: '/4up',
+      text: 'Demonstrates a 4UP view',
+    },
     {
       title: 'MPR Rotate Example',
       url: '/rotate',
@@ -85,7 +90,7 @@ function Index() {
     },
   ];
 
-  const exampleComponents = examples.map(e => {
+  const exampleComponents = examples.map((e) => {
     return <ExampleEntry key={e.title} {...e} />;
   });
 
@@ -143,8 +148,10 @@ function AppRouter() {
   const synced = () =>
     Example({ children: <VTKCornerstonePaintingSyncExample /> });
   const crosshairs = () => Example({ children: <VTKCrosshairsExample /> });
+  const fourUp = () => Example({ children: <VTK4UpExample /> });
   const rotateMPR = () => Example({ children: <VTKMPRRotateExample /> });
-  const volumeRendering = () => Example({ children: <VTKVolumeRenderingExample /> });
+  const volumeRendering = () =>
+    Example({ children: <VTKVolumeRenderingExample /> });
 
   return (
     <Router>
@@ -155,6 +162,7 @@ function AppRouter() {
         <Route exact path="/painting" render={painting} />
         <Route exact path="/cornerstone-sync-painting" render={synced} />
         <Route exact path="/crosshairs" render={crosshairs} />
+        <Route exact path="/4up" render={fourUp} />
         <Route exact path="/rotate" render={rotateMPR} />
         <Route exact path="/volume-rendering" render={volumeRendering} />
         <Route exact path="/cornerstone-load-image-data" render={loadImage} />