feat(UI): Add view mode icons

src/createViewer.js

@@ -27,7 +27,7 @@ window.addEventListener('resize', proxyManager.resizeAllViews);
 
 const createViewer = (
   rootContainer,
-  { viewerConfig, image, use2D, viewerState }
+  { viewerConfig, image, use2D = false, viewerState }
 ) => {
   userInterface.emptyContainer(rootContainer);
 
@@ -71,6 +71,7 @@ const createViewer = (
   const uiContainer = userInterface.createMainUI(
     rootContainer,
     config.isBackgroundDark,
+    use2D,
     imageSource,
     view
   );

src/userInterface/ItkVtkImageViewer.mcss

@@ -138,6 +138,23 @@
   -webkit-filter: invert(100%);
 }
 
+.viewModeButton {
+  flex: 1;
+  height: 1.5em;
+  width: 1.5em;
+  padding-top: 6px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.viewModeButton svg {
+  width: 1.3em;
+  height: 1.3em;
+}
+
 .shadowButton {
   height: 1.3em;
   width: 1.3em;

src/userInterface/createMainUI.js

@@ -7,8 +7,18 @@ import style from './ItkVtkImageViewer.mcss';
 import toggleIcon from './icons/toggle.svg';
 import uploadIcon from './icons/upload.svg';
 import screenshotIcon from './icons/screenshot.svg';
+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';
 
-function createMainUI(rootContainer, isBackgroundDark, imageSource, view) {
+function createMainUI(
+  rootContainer,
+  isBackgroundDark,
+  use2D,
+  imageSource,
+  view
+) {
   const uiContainer = document.createElement('div');
   rootContainer.appendChild(uiContainer);
   uiContainer.setAttribute('class', style.uiContainer);
@@ -77,6 +87,48 @@ function createMainUI(rootContainer, isBackgroundDark, imageSource, view) {
   screenshotButton.addEventListener('click', takeScreenshot);
   mainUIRow.appendChild(screenshotButton);
 
+  function setViewModeXPlane() {
+    view.setViewMode('XPlane');
+  }
+  function setViewModeYPlane() {
+    view.setViewMode('YPlane');
+  }
+  function setViewModeZPlane() {
+    view.setViewMode('ZPlane');
+  }
+  function setViewModeVolumeRendering() {
+    view.setViewMode('VolumeRendering');
+  }
+  if (!use2D) {
+    const xPlaneButton = document.createElement('div');
+    xPlaneButton.innerHTML = `<div class="${
+      style.viewModeButton
+    }">${xPlaneIcon}</div>`;
+    xPlaneButton.addEventListener('click', setViewModeXPlane);
+    mainUIRow.appendChild(xPlaneButton);
+
+    const yPlaneButton = document.createElement('div');
+    yPlaneButton.innerHTML = `<div class="${
+      style.viewModeButton
+    }">${yPlaneIcon}</div>`;
+    yPlaneButton.addEventListener('click', setViewModeYPlane);
+    mainUIRow.appendChild(yPlaneButton);
+
+    const zPlaneButton = document.createElement('div');
+    zPlaneButton.innerHTML = `<div class="${
+      style.viewModeButton
+    }">${zPlaneIcon}</div>`;
+    zPlaneButton.addEventListener('click', setViewModeZPlane);
+    mainUIRow.appendChild(zPlaneButton);
+
+    const volumeRenderingButton = document.createElement('div');
+    volumeRenderingButton.innerHTML = `<div class="${
+      style.viewModeButton
+    }">${volumeRenderingIcon}</div>`;
+    volumeRenderingButton.addEventListener('click', setViewModeVolumeRendering);
+    mainUIRow.appendChild(volumeRenderingButton);
+  }
+
   uiContainer.appendChild(mainUIGroup);
 
   return uiContainer;