feat(UI): Add standard menu toogle icon

Move logo to the upper right.

Icon is ion-navicon-round from
https://github.com/leungwensen/svg-icon/blob/master/dist/trimmed-svg/ionic/navicon-round.svg

src/ItkVtkImageViewer.mcss

@@ -35,6 +35,16 @@
   z-index: 100;
 }
 
+.logo {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 2em;
+  width: 2em;
+  cursor: pointer;
+  z-index: 100;
+}
+
 .toggleButton {
   position: absolute;
   top: 5px;
@@ -45,6 +55,23 @@
   z-index: 100;
 }
 
+.toggleButtonBrightBG {
+  composes: toggleButton;
+}
+
+.toggleButtonDarkBG {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  height: 1em;
+  width: 1em;
+  cursor: pointer;
+  z-index: 100;
+  composes: toggleButton;
+  filter: invert(100%);
+  -webkit-filter: invert(100%);
+}
+
 .selector {
   position: absolute;
   top: 5px;

src/createViewer.js

@@ -25,27 +25,29 @@ function applyStyle(el, style) {
 const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
 window.addEventListener('resize', proxyManager.resizeAllViews);
 
-const createViewer = (rootContainer, { image, use2D, viewerState, config }) => {
+const createViewer = (
+  rootContainer,
+  { viewerConfig, image, use2D, viewerState }
+) => {
   userInterface.emptyContainer(rootContainer);
 
   const container = document.createElement('div');
   const defaultConfig = {
-    background: [0, 0, 0],
+    backgroundColor: [0, 0, 0],
+    isBackgroundDark: true,
     containerStyle: STYLE_CONTAINER,
   };
-  const renderWindowConfiguration = config || defaultConfig;
+  const config = viewerConfig || defaultConfig;
   userInterface.emptyContainer(container);
-  applyStyle(
-    container,
-    renderWindowConfiguration.containerStyle || STYLE_CONTAINER
-  );
+  applyStyle(container, config.containerStyle || STYLE_CONTAINER);
   rootContainer.appendChild(container);
 
   const view = proxyManager.createProxy('Views', 'ItkVtkView');
   view.setContainer(container);
+  view.setBackground(config.backgroundColor);
   view.resize();
 
-  userInterface.createToggleUI(rootContainer);
+  userInterface.createToggleUI(rootContainer, config.isBackgroundDark);
 
   let imageSource = null;
   let lookupTable = null;
@@ -69,7 +71,8 @@ const createViewer = (rootContainer, { image, use2D, viewerState, config }) => {
       piecewiseFunction,
       representation,
       dataArray,
-      view.getRenderWindow()
+      view.getRenderWindow(),
+      config.isBackgroundDark
     );
   }
 

src/userInterface.js

@@ -3,16 +3,24 @@ import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract';
 import vtkPiecewiseGaussianWidget from 'vtk.js/Sources/Interaction/Widgets/PiecewiseGaussianWidget';
 
 import style from './ItkVtkImageViewer.mcss';
-import toggleIcon from './toggleIcon.png';
+import logoIcon from './icons/logo.png';
+import toggleIcon from './icons/toggle.svg';
 
 const domElements = {};
 
-// ----------------------------------------------------------------------------
-
 function getPreset(name) {
   return vtkColorMaps.find((p) => p.Name === name);
 }
 
+function getLocalStyle(cssClasses, isBackgroundDark) {
+  const stylePostFix = isBackgroundDark ? 'DarkBG' : 'BrightBG';
+  const localStyle = {};
+  cssClasses.forEach((name) => {
+    localStyle[name] = style[`${name}${stylePostFix}`];
+  });
+  return localStyle;
+}
+
 // ----------------------------------------------------------------------------
 
 function getRootContainer(container) {
@@ -151,7 +159,12 @@ function createUseShadowToggle(
   rootContainer.appendChild(domElements.shadowContainer);
 }
 
-function createToggleUI(rootContainer) {
+function createToggleUI(rootContainer, isBackgroundDark) {
+  const logo = new Image();
+  logo.src = logoIcon;
+  logo.setAttribute('class', style.logo);
+  rootContainer.appendChild(logo);
+
   function toggleWidgetVisibility() {
     if (domElements.widgetContainer.style.display === 'none') {
       domElements.widgetContainer.style.display = 'block';
@@ -164,11 +177,12 @@ function createToggleUI(rootContainer) {
     }
   }
 
-  const toggleButton = new Image();
-  toggleButton.src = toggleIcon;
-  toggleButton.setAttribute('class', style.toggleButton);
+  const toggleButton = document.createElement('div');
+  const localStyle = getLocalStyle(['toggleButton'], isBackgroundDark);
+  toggleButton.innerHTML = `<div class="${
+    localStyle.toggleButton
+  }">${toggleIcon}</div>`;
   toggleButton.addEventListener('click', toggleWidgetVisibility);
-
   rootContainer.appendChild(toggleButton);
 }
 
@@ -178,7 +192,8 @@ function createVolumeUI(
   piecewiseFunctionProxy,
   volumeRepresentation,
   dataArray,
-  renderWindow
+  renderWindow,
+  isBackgroundDark
 ) {
   const rootContainer = getRootContainer(container);