feat(createViewer): Add toggle UI collapsed observer

Author: thewtex

src/createViewer.js

@@ -162,14 +162,34 @@ const createViewer = (
     transferFunctionWidget.setDataArray(image.getPointData().getScalars());
   }
 
+  const toggleUserInterfaceButton = document.getElementById(`${viewerDOMId}-toggleUserInterfaceButton`);
+
   publicAPI.setUserInterfaceCollapsed = (collapse) => {
-    const toggleUserInterfaceButton = document.getElementById(`${viewerDOMId}-toggleUserInterfaceButton`);
     const collapsed = toggleUserInterfaceButton.getAttribute('collapsed') === '';
     if (collapse && !collapsed || !collapse && collapsed) {
       toggleUserInterfaceButton.click();
     }
   }
 
+  const toggleUserInterfaceCollapsedHandlers = [];
+  const toggleUserInterfaceButtonListener = (event) => {
+    const collapsed = toggleUserInterfaceButton.getAttribute('collapsed') === '';
+    toggleUserInterfaceCollapsedHandlers.forEach((handler) => {
+      handler.call(null, collapsed);
+    })
+  }
+  toggleUserInterfaceButton.addEventListener('click', toggleUserInterfaceButtonListener)
+
+  publicAPI.subscribeToggleUserInterfaceCollapsed = (handler) => {
+    const index = toggleUserInterfaceCollapsedHandlers.length;
+    toggleUserInterfaceCollapsedHandlers.push(handler);
+    function unsubscribe() {
+      toggleUserInterfaceCollapsedHandlers[index] = null;
+    }
+    return Object.freeze({ unsubscribe });
+  }
+
+
   let annotationsEnabled = true;
   publicAPI.setAnnotationsEnabled = (annotations) => {
     const toggleAnnotationButton = document.getElementById(`${viewerDOMId}-toggleAnnotationButton`);

src/userInterface/createMainUI.js

@@ -2,7 +2,6 @@ import getContrastSensitiveStyle from './getContrastSensitiveStyle';
 
 import style from './ItkVtkImageViewer.mcss';
 
-import preventDefaults from './preventDefaults';
 import toggleIcon from './icons/toggle.svg';
 import screenshotIcon from './icons/screenshot.svg';
 import volumeRenderingIcon from './icons/volume-rendering.svg';