UX improvements

* When clicking on empty space in the snapshot editor, the selection reverts to the sheet containing the scene

packages/plugin-r3f/src/Wrapper.tsx

@@ -0,0 +1,24 @@
+import React, {useLayoutEffect} from 'react'
+import {useThree} from '@react-three/fiber'
+import type {ISheet} from '@theatre/core'
+import {bindToCanvas} from './store'
+
+const Wrapper: React.FC<{
+  getSheet: () => ISheet
+}> = (props) => {
+  const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
+
+  useLayoutEffect(() => {
+    const sheet = props.getSheet()
+    if (!sheet || sheet.type !== 'Theatre_Sheet_PublicAPI') {
+      throw new Error(
+        `getSheet() in <Wrapper getSheet={getSheet}> has returned an invalid value`,
+      )
+    }
+    bindToCanvas({sheet})({gl, scene})
+  }, [scene, gl])
+
+  return <>{props.children}</>
+}
+
+export default Wrapper

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

@@ -1,4 +1,4 @@
-import {useLayoutEffect} from 'react'
+import {useCallback, useLayoutEffect} from 'react'
 import React from 'react'
 import {Canvas} from '@react-three/fiber'
 import {useEditorStore} from '../store'
@@ -100,11 +100,12 @@ const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
     const snapshotEditorSheet = props.object.sheet
     const paneId = props.paneId
 
-    const [editorObject, sceneSnapshot, createSnapshot] = useEditorStore(
+    const [editorObject, sceneSnapshot, createSnapshot, sheet] = useEditorStore(
       (state) => [
         state.editorObject,
         state.sceneSnapshot,
         state.createSnapshot,
+        state.sheet,
       ],
       shallow,
     )
@@ -124,6 +125,10 @@ const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
       }
     }, [editorOpen])
 
+    const onPointerMissed = useCallback(() => {
+      if (sheet !== null) studio.__experimental_setSelection([sheet])
+    }, [sheet])
+
     if (!editorObject) return <></>
 
     return (
@@ -154,9 +159,7 @@ const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
                       shadowMap
                       dpr={[1, 2]}
                       fog={'red'}
-                      onPointerMissed={() =>
-                        studio.__experimental_setSelection([])
-                      }
+                      onPointerMissed={onPointerMissed}
                     >
                       <EditorScene
                         snapshotEditorSheet={snapshotEditorSheet}

packages/plugin-r3f/src/index.tsx

@@ -1,35 +1,13 @@
 import SnapshotEditor from './components/SnapshotEditor'
-
-export {default as EditorHelper} from './components/EditorHelper'
-export type {EditorHelperProps} from './components/EditorHelper'
-
-export {default as editable} from './components/editable'
-export type {EditableState, BindFunction} from './store'
 import studio from '@theatre/studio'
 import Toolbar from './components/Toolbar/Toolbar'
 import {types} from '@theatre/core'
-import React, {useLayoutEffect} from 'react'
-import {useThree} from '@react-three/fiber'
-import type {ISheet} from '@theatre/core'
-import {bindToCanvas} from './store'
 
-export const Wrapper: React.FC<{
-  getSheet: () => ISheet
-}> = (props) => {
-  const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
-
-  useLayoutEffect(() => {
-    const sheet = props.getSheet()
-    if (!sheet || sheet.type !== 'Theatre_Sheet_PublicAPI') {
-      throw new Error(
-        `getSheet() in <Wrapper getSheet={getSheet}> has returned an invalid value`,
-      )
-    }
-    bindToCanvas({sheet})({gl, scene})
-  }, [scene, gl])
-
-  return <>{props.children}</>
-}
+export {default as EditorHelper} from './components/EditorHelper'
+export type {EditorHelperProps} from './components/EditorHelper'
+export {default as editable} from './components/editable'
+export type {EditableState, BindFunction} from './store'
+export {default as Wrapper} from './Wrapper'
 
 if (process.env.NODE_ENV === 'development') {
   studio.extend({