feat(UI): put collapse menu button on right

Use Material drawer to contain main UI

src/UI/reference-ui/src/ItkVtkViewer.module.css

@@ -42,15 +42,23 @@
   top: 0;
   left: 0;
   z-index: 1000;
-  overflow-x: hidden;
+
+  height: fit-content;
   max-height: 100%;
 
   display: flex;
-  align-items: stretch;
-  flex-direction: column;
+
   padding: 6px 0 0 6px;
   border: 0px;
   box-sizing: border-box;
+
+  --md-navigation-drawer-container-shape-start-end: 0;
+  --md-navigation-drawer-container-shape-end-end: 0;
+  --md-navigation-drawer-container-color: rgba(128, 128, 128, 0.5);
+}
+
+.drawer {
+  overflow: hidden auto;
 }
 
 .uiGroup {
@@ -794,3 +802,9 @@ select:focus {
   margin: 0;
   padding: 0;
 }
+
+.collapseButton {
+  position: absolute;
+  top: 0;
+  right: -48px;
+}

src/UI/reference-ui/src/createInterface.js

@@ -1,9 +1,10 @@
 import style from './ItkVtkViewer.module.css'
+import '@material/web/navigationdrawer/navigation-drawer.js'
 
 import './collapse-ui'
 import { setContext } from './context'
 
-const makeElement = htmlString => {
+const makeHtml = htmlString => {
   const template = document.createElement('template')
   template.innerHTML = htmlString
   return template.content.firstElementChild
@@ -25,25 +26,32 @@ function createInterface(context) {
   viewport.appendChild(container3d)
   container3d.style.height = '100%'
 
+  // if somehow already set (by non reference-ui from config obj?)
   if (!context.uiContainer) {
-    const uiContainer = document.createElement('div')
-    uiContainer.setAttribute('class', style.uiContainer)
-    context.uiContainer = uiContainer
-    viewport.appendChild(uiContainer)
-  } else {
-    // if somehow already set (by non reference-ui from config obj?)
-    viewport.appendChild(context.uiContainer)
+    context.uiContainer = document.createElement('div')
   }
 
+  const sidebar = makeHtml(`
+    <div class='${style.uiContainer}'>
+      <md-navigation-drawer type="dismissible" id='drawer' class='${style.drawer}'></md-navigation-drawer>
+      <collapse-ui class='${style.collapseButton}'/>
+    </div>
+  `)
+  const drawer = sidebar.querySelector('#drawer')
+  drawer.appendChild(context.uiContainer)
+  viewport.appendChild(sidebar)
+
+  context.drawer = drawer
+
+  // FIXME: hack to keep scroll bar from squishing uiContainer, because uiContainer width does not get reduces with scroll bar.
+  setTimeout(() => {
+    drawer.shadowRoot.children[0].style.overflow = 'visible'
+  }, 0)
+
   if (!context.uiGroups) {
     // String to UI group element
     context.uiGroups = new Map()
   }
-
-  const collapseUIButton = makeElement(`
-    <collapse-ui />
-  `)
-  context.uiContainer.appendChild(collapseUIButton)
 }
 
 export default createInterface

src/UI/reference-ui/src/toggleUICollapsed.js

@@ -1,5 +1,3 @@
-import applyGroupVisibility from './applyGroupVisibility'
-
 function toggleUICollapsed(context, event, actionMeta) {
   if (!context.uiContainer) {
     return
@@ -9,31 +7,13 @@ function toggleUICollapsed(context, event, actionMeta) {
       actionMeta.state.value.active.uiCollapsed === 'enabled'
   }
 
-  if (context.uiCollapsed) {
-    applyGroupVisibility(
-      context,
-      [
-        'main',
-        'layers',
-        'widgets',
-        'images',
-        'labelImages',
-        'labelImageWeights',
-      ],
-      !context.uiCollapsed
-    )
-  } else {
-    applyGroupVisibility(
-      context,
-      ['main', 'layers', 'widgets'],
-      !context.uiCollapsed
-    )
-    if (context.images.selectedName) {
-      context.service.send({
-        type: 'SELECT_LAYER',
-        data: context.images.selectedName,
-      })
-    }
+  context.drawer.opened = !context.uiCollapsed
+
+  if (!context.uiCollapsed && context.images.selectedName) {
+    context.service.send({
+      type: 'SELECT_LAYER',
+      data: context.images.selectedName,
+    })
   }
 
   if (!context.use2D && !!context.main.planeUIGroup) {

test/customElementsDefineOverride.js

@@ -1,5 +1,5 @@
-// Avoids error importing config UIs multiple times in tests
-// customElements.define will be called multiple times buy Material-Web components
+// Avoids error importing config UIs multiple times in tests when
+// customElements.define will be called multiple times by Material-Web components
 
 function safeDecorator(fn) {
   return function(...args) {