Added the ability to hide the UI

* Added alt/option+` to toggle the UI

theatre/studio/src/UIRoot/UIRoot.tsx

@@ -1,7 +1,7 @@
 import getStudio from '@theatre/studio/getStudio'
-import {usePrism} from '@theatre/dataverse-react'
+import {usePrism, useVal} from '@theatre/dataverse-react'
 import {val} from '@theatre/dataverse'
-import React from 'react'
+import React, {useEffect} from 'react'
 import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 import PanelsRoot from './PanelsRoot'
 import ProvideTheme from './ProvideTheme'
@@ -39,6 +39,11 @@ const Container = styled(PointerEventsHandler)`
   right: 0px;
   bottom: 0px;
   left: 0px;
+
+  &.invisible {
+    pointer-events: none !important;
+    opacity: 0;
+  }
 `
 
 const PortalLayer = styled.div`
@@ -61,12 +66,20 @@ export default function UIRoot() {
   )
 
   useKeyboardShortcuts()
+  const visiblityState = useVal(studio.atomP.ahistoric.visibilityState)
+  useEffect(() => {
+    if (visiblityState === 'everythingIsHidden') {
+      console.warn(
+        `Theatre Studio is hidden. You can restore it by either hitting alt/option+\` or calling studio.ui.restore()`,
+      )
+    }
+    return () => {}
+  }, [visiblityState])
+
   const inside = usePrism(() => {
     const visiblityState = val(studio.atomP.ahistoric.visibilityState)
-    const initialised = val(studio.atomP.ephemeral.initialised)
 
-    const shouldShowPanels = visiblityState === 'everythingIsVisible'
+    const initialised = val(studio.atomP.ephemeral.initialised)
-    const shouldShowGlobalToolbar = visiblityState !== 'everythingIsHidden'
 
     return !initialised ? null : (
       <StyleSheetManager
@@ -78,10 +91,14 @@ export default function UIRoot() {
           <ProvideTheme>
             <PortalContext.Provider value={portalLayer}>
               <TooltipContext>
-                <Container>
+                <Container
+                  className={
+                    visiblityState === 'everythingIsHidden' ? 'invisible' : ''
+                  }
+                >
                   <PortalLayer ref={portalLayerRef} />
-                  {shouldShowGlobalToolbar && <GlobalToolbar />}
+                  {<GlobalToolbar />}
-                  {shouldShowPanels && <PanelsRoot />}
+                  {<PanelsRoot />}
                 </Container>
               </TooltipContext>
             </PortalContext.Provider>

theatre/studio/src/UIRoot/useKeyboardShortcuts.ts

@@ -43,6 +43,14 @@ export default function useKeyboardShortcuts() {
         } else {
           return
         }
+      } else if (e.code === 'Backquote' && e.altKey) {
+        studio.transaction(({stateEditors, drafts}) => {
+          stateEditors.studio.ahistoric.setVisibilityState(
+            drafts.ahistoric.visibilityState === 'everythingIsHidden'
+              ? 'everythingIsVisible'
+              : 'everythingIsHidden',
+          )
+        })
       } else {
         return
       }

theatre/studio/src/store/stateEditors.ts

@@ -30,6 +30,7 @@ import type {
   OutlineSelectable,
   OutlineSelectionState,
   PanelPosition,
+  StudioAhistoricState,
 } from './types'
 import {uniq} from 'lodash-es'
 import {
@@ -306,6 +307,11 @@ namespace stateEditors {
       }
     }
     export namespace ahistoric {
+      export function setVisibilityState(
+        visibilityState: StudioAhistoricState['visibilityState'],
+      ) {
+        drafts().ahistoric.visibilityState = visibilityState
+      }
       export namespace projects {
         export namespace stateByProjectId {
           export function _ensure(p: ProjectAddress) {

theatre/studio/src/uiComponents/PointerEventsHandler.tsx

@@ -56,7 +56,10 @@ const PointerEventsHandler: React.FC<{
 
   return (
     <context.Provider value={contextValue}>
-      <Container id={elementId} className={locks[0]?.className ?? 'normal'}>
+      <Container
+        id={elementId}
+        className={(locks[0]?.className ?? 'normal') + ' ' + props.className}
+      >
         <CursorOverride style={{cursor: locks[0]?.cursor ?? ''}}>
           {props.children}
         </CursorOverride>