Various improvements to SnapshotEditor

packages/plugin-r3f/src/components/ProxyManager.tsx

@@ -46,9 +46,11 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     useVal(editorObject?.props.viewport.shading) ?? 'rendered'
 
   const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot])
-  const [editableProxies, setEditableProxies] = useState<{
-    [name: string]: IEditableProxy
-  }>({})
+  const [editableProxies, setEditableProxies] = useState<
+    {
+      [name in string]?: IEditableProxy
+    }
+  >({})
 
   // set up scene proxies
   useLayoutEffect(() => {
@@ -86,15 +88,13 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   }, [orbitControlsRef, sceneProxy])
 
   const selected = useSelected()
+  const editableProxyOfSelected = selected && editableProxies[selected]
 
   // subscribe to external changes
   useEffect(() => {
-    if (!selected) {
-      return
-    }
-
-    const object = editableProxies[selected].object
-    const sheetObject = editableProxies[selected].sheetObject
+    if (!editableProxyOfSelected) return
+    const object = editableProxyOfSelected.object
+    const sheetObject = editableProxyOfSelected.sheetObject
 
     const setFromTheatre = (newValues: any) => {
       object.position.set(
@@ -117,7 +117,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     return () => {
       untap()
     }
-  }, [editableProxies, selected])
+  }, [editableProxyOfSelected, selected])
 
   // set up viewport shading modes
   const [renderMaterials, setRenderMaterials] = useState<{
@@ -219,15 +219,15 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   return (
     <>
       <primitive object={sceneProxy} />
-      {selected && (
+      {selected && editableProxyOfSelected && (
         <TransformControls
           mode={transformControlsMode}
           space={transformControlsSpace}
           orbitControlsRef={orbitControlsRef}
-          object={editableProxies[selected].object}
+          object={editableProxyOfSelected.object}
           onObjectChange={() => {
-            const sheetObject = editableProxies[selected].sheetObject
-            const obj = editableProxies[selected].object
+            const sheetObject = editableProxyOfSelected.sheetObject
+            const obj = editableProxyOfSelected.object
 
             studio.transaction(({set}) => {
               set(sheetObject.props, {
@@ -252,7 +252,9 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
           onDraggingChange={(event) => (isBeingEdited.current = event.value)}
         />
       )}
-      {Object.values(editableProxies).map(({portal}) => portal)}
+      {Object.values(editableProxies).map(
+        (editableProxy) => editableProxy!.portal,
+      )}
     </>
   )
 }

packages/plugin-r3f/src/components/SnapshotEditor.tsx

@@ -1,4 +1,4 @@
-import type {VFC} from 'react'
+import {useState} from 'react'
 import {useLayoutEffect} from 'react'
 import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
@@ -10,6 +10,9 @@ import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
 import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
+import IconButton from './Toolbar/utils/IconButton'
+import {BiRefresh} from 'react-icons/bi'
+import {PortalContext} from 'reakit'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -81,9 +84,21 @@ const CanvasWrapper = styled.div`
   height: 100%;
 `
 
-const SnapshotEditor: VFC = () => {
-  console.log('Snapshot editor!!')
+const Overlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+`
 
+const Tools = styled.div`
+  position: absolute;
+  left: 8px;
+  top: 6px;
+  pointer-events: auto;
+`
+
+const SnapshotEditor: React.FC<{}> = () => {
   const [editorObject, sceneSnapshot, initialEditorCamera, createSnapshot] =
     useEditorStore(
       (state) => [
@@ -110,6 +125,8 @@ const SnapshotEditor: VFC = () => {
     }
   }, [editorOpen])
 
+  const [overlay, setOverlay] = useState<HTMLDivElement | null>(null)
+
   if (!editorObject) return <></>
 
   return (
@@ -117,30 +134,42 @@ const SnapshotEditor: VFC = () => {
       <StyleSheetManager disableVendorPrefixes>
         <>
           <GlobalStyle />
-          <Wrapper>
-            {sceneSnapshot ? (
-              <>
-                <CanvasWrapper>
-                  <Canvas
-                    // @ts-ignore
-                    colorManagement
-                    camera={initialEditorCamera}
-                    onCreated={({gl}) => {
-                      gl.setClearColor('white')
-                    }}
-                    shadowMap
-                    dpr={[1, 2]}
-                    fog={'red'}
-                    onPointerMissed={() =>
-                      studio.__experimental_setSelection([])
-                    }
-                  >
-                    <EditorScene />
-                  </Canvas>
-                </CanvasWrapper>
-              </>
-            ) : null}
-          </Wrapper>
+          <PortalContext.Provider value={overlay}>
+            <Wrapper>
+              <Overlay ref={setOverlay}>
+                <Tools>
+                  <IconButton
+                    icon={<BiRefresh />}
+                    label="Refresh Snapshot"
+                    onClick={createSnapshot}
+                  ></IconButton>
+                </Tools>
+              </Overlay>
+
+              {sceneSnapshot ? (
+                <>
+                  <CanvasWrapper>
+                    <Canvas
+                      // @ts-ignore
+                      colorManagement
+                      camera={initialEditorCamera}
+                      onCreated={({gl}) => {
+                        gl.setClearColor('white')
+                      }}
+                      shadowMap
+                      dpr={[1, 2]}
+                      fog={'red'}
+                      onPointerMissed={() =>
+                        studio.__experimental_setSelection([])
+                      }
+                    >
+                      <EditorScene />
+                    </Canvas>
+                  </CanvasWrapper>
+                </>
+              ) : null}
+            </Wrapper>
+          </PortalContext.Provider>
         </>
       </StyleSheetManager>
     </root.div>