feat(UI): Add interface to view planes in the volume rendering mode

Author: thewtex

src/ItkVtkViewProxy.js

@@ -29,9 +29,12 @@ function ItkVtkViewProxy(publicAPI, model) {
         model.camera.setParallelScale(
           model.volumeRenderingCameraState.parallelScale
         );
+        model.camera.setPhysicalTranslation(
+          ...model.volumeRenderingCameraState.physicalTranslation
+        );
       }
       model.camera.setParallelProjection(false);
-      volumeRepresentation.setSliceVisibility(false);
+      volumeRepresentation.setSliceVisibility(model.viewPlanes);
       volumeRepresentation.setVolumeVisibility(true);
     } else {
       model.camera.setParallelProjection(true);
@@ -72,10 +75,8 @@ function ItkVtkViewProxy(publicAPI, model) {
       const isVolumeRepresentation = !!rep.getVolumes().length;
       return isVolumeRepresentation;
     });
-    console.log(model.viewMode);
     if (model.viewMode === 'VolumeRendering') {
       model.volumeRenderingCameraState = model.camera.getState();
-      console.log(model.volumeRenderingCameraState);
     }
     switch (mode) {
       case 'XPlane':
@@ -100,6 +101,18 @@ function ItkVtkViewProxy(publicAPI, model) {
     publicAPI.resetCamera();
   };
 
+  publicAPI.setViewPlanes = (viewPlanes) => {
+    model.viewPlanes = viewPlanes;
+    if (model.viewMode === 'VolumeRendering') {
+      const volumeRepresentations = model.representations.filter((rep) => {
+        const isVolumeRepresentation = !!rep.getVolumes().length;
+        return isVolumeRepresentation;
+      });
+      volumeRepresentations[0].setSliceVisibility(viewPlanes);
+      model.renderWindow.render();
+    }
+  };
+
   publicAPI.resetOrientation();
 }
 
@@ -109,9 +122,7 @@ function ItkVtkViewProxy(publicAPI, model) {
 
 const DEFAULT_VALUES = {
   viewMode: 'VolumeRendering',
-  volumeRenderingAxis: 1,
-  volumeRenderingOrientation: 1,
-  volumeRenderingViewUp: [0, 0, 1],
+  viewPlanes: false,
 };
 
 // ----------------------------------------------------------------------------
@@ -120,7 +131,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, DEFAULT_VALUES, initialValues);
 
   vtkViewProxy.extend(publicAPI, model, initialValues);
-  macro.get(publicAPI, model, ['viewMode']);
+  macro.get(publicAPI, model, ['viewMode', 'viewPlanes']);
 
   // Object specific methods
   ItkVtkViewProxy(publicAPI, model);

src/userInterface/ItkVtkImageViewer.mcss

@@ -184,7 +184,7 @@
 .toggleSwitch {
   position: relative;
   display: inline-block;
-  width: 2.8em;
+  width: 2.4em;
   height: 1.4em;
   margin: 4px;
 }
@@ -205,8 +205,8 @@
   right: 0;
   bottom: 0;
   background-color: #aaa;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: .2s;
+  transition: .2s;
   border-radius: 1.5em;
 }
 
@@ -218,8 +218,8 @@
   left: 0.2em;
   bottom: 0.2em;
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: .2s;
+  transition: .2s;
   border-radius: 50%;
 }
 
@@ -232,9 +232,9 @@ input:focus + .toggleWidget {
 }
 
 input:checked + .toggleWidget:before {
-  -webkit-transform: translateX(1.4em);
-  -ms-transform: translateX(1.4em);
-  transform: translateX(1.4em);
+  -webkit-transform: translateX(1.0em);
+  -ms-transform: translateX(1.0em);
+  transform: translateX(1.0em);
 }
 
 .selector {

src/userInterface/createMainUI.js

@@ -11,6 +11,7 @@ import volumeRenderingIcon from './icons/volume-rendering.svg';
 import xPlaneIcon from './icons/x-plane.svg';
 import yPlaneIcon from './icons/y-plane.svg';
 import zPlaneIcon from './icons/z-plane.svg';
+import viewPlansIcon from './icons/view-planes.svg';
 
 function createMainUI(
   rootContainer,
@@ -99,6 +100,11 @@ function createMainUI(
   function setViewModeVolumeRendering() {
     view.setViewMode('VolumeRendering');
   }
+  let viewPlanes = false;
+  function setViewPlanes() {
+    viewPlanes = !viewPlanes;
+    view.setViewPlanes(viewPlanes);
+  }
   if (!use2D) {
     const xPlaneButton = document.createElement('div');
     xPlaneButton.innerHTML = `<div class="${
@@ -127,6 +133,22 @@ function createMainUI(
     }">${volumeRenderingIcon}</div>`;
     volumeRenderingButton.addEventListener('click', setViewModeVolumeRendering);
     mainUIRow.appendChild(volumeRenderingButton);
+
+    const viewPlanesButton = document.createElement('div');
+    viewPlanesButton.innerHTML = `<div class="${
+      style.viewModeButton
+    }">${viewPlansIcon}</div>`;
+    viewPlanesButton.addEventListener('click', setViewPlanes);
+    const viewPlanesWidget = document.createElement('label');
+    viewPlanesWidget.setAttribute('class', style.toggleSwitch);
+    viewPlanesWidget.innerHTML = `<input type="checkbox" class="${
+      style.toggleSwitchInput
+    }"><span class="${style.toggleWidget}"></span>`;
+    viewPlanesWidget.addEventListener('change', (event) => {
+      setViewPlanes();
+    });
+    mainUIRow.appendChild(viewPlanesButton);
+    mainUIRow.appendChild(viewPlanesWidget);
   }
 
   uiContainer.appendChild(mainUIGroup);