Enable hiding the reference window (#241)

packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx

@@ -8,11 +8,8 @@ import styled, {keyframes} from 'styled-components'
 import {TiWarningOutline} from 'react-icons/ti'
 import noiseImageUrl from './noise-transparent.png'
 import useExtensionStore from '../../useExtensionStore'
-import {useVal} from '@theatre/react'
-import {getEditorSheetObject} from '../../editorStuff'
-import studio from '@theatre/studio'
 
-const Container = styled.div<{minified: boolean}>`
+const Container = styled.div<{minimized: boolean}>`
   position: relative;
   display: flex;
   justify-content: center;
@@ -20,7 +17,7 @@ const Container = styled.div<{minified: boolean}>`
   pointer-events: auto;
   cursor: pointer;
   overflow: hidden;
-  border-radius: ${({minified}) => (minified ? '2px' : '4px')};
+  border-radius: ${({minimized}) => (minimized ? '2px' : '4px')};
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
 `
 
@@ -76,14 +73,18 @@ const Warning = styled.div`
 interface ReferenceWindowProps {
   maxHeight: number
   maxWidth: number
+  minimized: boolean
+  onToggleMinified: () => void
 }
 
-const ReferenceWindow: VFC<ReferenceWindowProps> = ({maxHeight, maxWidth}) => {
+const ReferenceWindow: VFC<ReferenceWindowProps> = ({
+  maxHeight,
+  maxWidth,
+  minimized,
+  onToggleMinified,
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
-  const minified =
-    useVal(getEditorSheetObject()?.props.viewport.showReferenceWindow) ?? true
-
   const [gl] = useExtensionStore((state) => [state.gl], shallow)
   const [ref, {width: origWidth, height: origHeight}] = useMeasure()
 
@@ -136,19 +137,13 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({maxHeight, maxWidth}) => {
     }
   }, [gl, width, height, preserveDrawingBuffer])
 
-  const toggleVisibility = () => {
-    studio.transaction(({set}) => {
-      set(getEditorSheetObject()!.props.viewport.showReferenceWindow, !minified)
-    })
-  }
-
   return (
     <Container
-      minified={!minified}
+      minimized={minimized}
-      onClick={toggleVisibility}
+      onClick={onToggleMinified}
       style={{
-        width: !minified ? 32 : preserveDrawingBuffer ? `${width}px` : 'auto',
+        width: minimized ? 32 : preserveDrawingBuffer ? `${width}px` : 'auto',
-        height: !minified ? 32 : preserveDrawingBuffer ? `${height}px` : 'auto',
+        height: minimized ? 32 : preserveDrawingBuffer ? `${height}px` : 'auto',
       }}
     >
       {preserveDrawingBuffer ? (

packages/r3f/src/extension/components/SnapshotEditor.tsx

@@ -184,6 +184,10 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
 
   if (!editorObject) return <></>
 
+  const referenceWindowVisibility =
+    useVal(getEditorSheetObject()?.props.viewport.referenceWindow) ??
+    'minimized'
+
   return (
     <root.div style={{overflow: 'hidden'}}>
       <StyleSheetManager disableVendorPrefixes>
@@ -192,12 +196,26 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
           <Wrapper>
             <Overlay>
               <Tools ref={setToolsContainer} />
-              <ReferenceWindowContainer>
+              {referenceWindowVisibility !== 'hidden' && (
-                <ReferenceWindow
+                <ReferenceWindowContainer>
-                  maxHeight={Math.min(bounds.height * 0.3, 150)}
+                  <ReferenceWindow
-                  maxWidth={Math.min(bounds.width * 0.3, 250)}
+                    maxHeight={Math.min(bounds.height * 0.3, 150)}
-                />
+                    maxWidth={Math.min(bounds.width * 0.3, 250)}
-              </ReferenceWindowContainer>
+                    minimized={referenceWindowVisibility === 'minimized'}
+                    onToggleMinified={() => {
+                      studio.transaction(({set}) => {
+                        set(
+                          getEditorSheetObject()!.props.viewport
+                            .referenceWindow,
+                          referenceWindowVisibility === 'minimized'
+                            ? 'maximized'
+                            : 'minimized',
+                        )
+                      })
+                    }}
+                  />
+                </ReferenceWindowContainer>
+              )}
               {!sceneSnapshot && (
                 <WaitForSceneInitMessage>
                   The scene hasn't been initialized yet. It will appear in the

packages/r3f/src/extension/editorStuff.ts

@@ -22,9 +22,15 @@ const editorSheetObjectConfig = {
         },
         {as: 'menu', label: 'Shading'},
       ),
-      showReferenceWindow: types.boolean(true, {
+      referenceWindow: types.stringLiteral(
-        label: 'Reference',
+        'minimized',
-      }),
+        {
+          maximized: 'Maximized',
+          minimized: 'Minimized',
+          hidden: 'Hidden',
+        },
+        {as: 'menu', label: 'Reference Window'},
+      ),
       lighting: types.stringLiteral(
         'physical',
         {