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={() =>
+                      onPointerMissed={onPointerMissed}
-                        studio.__experimental_setSelection([])
-                      }
                     >
                       <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<{
+export {default as EditorHelper} from './components/EditorHelper'
-  getSheet: () => ISheet
+export type {EditorHelperProps} from './components/EditorHelper'
-}> = (props) => {
+export {default as editable} from './components/editable'
-  const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
+export type {EditableState, BindFunction} from './store'
-
+export {default as Wrapper} from './Wrapper'
-  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}</>
-}
 
 if (process.env.NODE_ENV === 'development') {
   studio.extend({

theatre/core/src/privateAPIs.ts

@@ -10,11 +10,19 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
 
 const publicAPIToPrivateAPIMap = new WeakMap()
 
-export function privateAPI(pub: IProject): Project
+export function privateAPI<
-export function privateAPI(pub: ISheet): Sheet
+  P extends IProject | ISheet | ISheetObject<$IntentionalAny> | ISequence,
-export function privateAPI(pub: ISheetObject<$IntentionalAny>): SheetObject
+>(
-export function privateAPI(pub: ISequence): Sequence
+  pub: P,
-export function privateAPI(pub: {}): unknown {
+): P extends IProject
+  ? Project
+  : P extends ISheet
+  ? Sheet
+  : P extends ISheetObject<$IntentionalAny>
+  ? SheetObject
+  : P extends ISequence
+  ? Sequence
+  : never {
   return publicAPIToPrivateAPIMap.get(pub)
 }
 

theatre/core/src/sequences/TheatreSequence.ts

@@ -5,6 +5,8 @@ import type Sequence from './Sequence'
 import type {IPlaybackDirection, IPlaybackRange} from './Sequence'
 
 export interface ISequence {
+  readonly type: 'Theatre_Sequence_PublicAPI'
+
   /**
    * Starts playback of a sequence.
    * Returns a promise that either resolves to true when the playback completes,
@@ -24,7 +26,11 @@ export interface ISequence {
   time: number
 }
 
-export default class TheatreSequence {
+export default class TheatreSequence implements ISequence {
+  get type(): 'Theatre_Sequence_PublicAPI' {
+    return 'Theatre_Sequence_PublicAPI'
+  }
+
   /**
    * @internal
    */

theatre/studio/src/TheatreStudio.ts

@@ -1,4 +1,4 @@
-import type {ISheetObject} from '@theatre/core'
+import type {ISheet, ISheetObject} from '@theatre/core'
 import studioTicker from '@theatre/studio/studioTicker'
 import type {IDerivation, Pointer} from '@theatre/dataverse'
 import {prism} from '@theatre/dataverse'
@@ -7,7 +7,10 @@ import type {$FixMe, $IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import type {IScrub} from '@theatre/studio/Scrub'
 
 import type {Studio} from '@theatre/studio/Studio'
-import {isSheetObjectPublicAPI} from '@theatre/shared/instanceTypes'
+import {
+  isSheetObjectPublicAPI,
+  isSheetPublicAPI,
+} from '@theatre/shared/instanceTypes'
 import {getOutlineSelection} from './selectors'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import getStudio from './getStudio'
@@ -68,7 +71,7 @@ export interface IStudio {
   scrub(): IScrub
   debouncedScrub(threshhold: number): Pick<IScrub, 'capture'>
 
-  __experimental_setSelection(selection: Array<ISheetObject>): void
+  __experimental_setSelection(selection: Array<ISheetObject | ISheet>): void
   __experimental_onSelectionChange(
     fn: (s: Array<ISheetObject>) => void,
   ): VoidFunction
@@ -136,9 +139,9 @@ export default class TheatreStudio implements IStudio {
     return this._getSelectionDerivation().getValue()
   }
 
-  __experimental_setSelection(selection: Array<ISheetObject>): void {
+  __experimental_setSelection(selection: Array<ISheetObject | ISheet>): void {
     const sanitizedSelection = [...selection]
-      .filter((s) => isSheetObjectPublicAPI(s))
+      .filter((s) => isSheetObjectPublicAPI(s) || isSheetPublicAPI(s))
       .map((s) => getStudio().corePrivateAPI!(s))
 
     getStudio().transaction(({stateEditors}) => {