Preparing to support multiple sheets in r3f

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

@@ -1,7 +1,8 @@
 import {useCallback, useLayoutEffect} from 'react'
 import React from 'react'
 import {Canvas} from '@react-three/fiber'
-import {useEditorStore} from '../store'
+import type {BaseSheetObjectType} from '../store'
+import {allRegisteredObjects, useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'
 import ProxyManager from './ProxyManager'
@@ -12,6 +13,7 @@ import {IoCameraReverseOutline} from 'react-icons/all'
 import type {ISheet} from '@theatre/core'
 import useSnapshotEditorCamera from './useSnapshotEditorCamera'
 import {getEditorSheet, getEditorSheetObject} from './editorStuff'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -99,8 +101,8 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
   const paneId = props.paneId
   const editorObject = getEditorSheetObject()
 
-  const [sceneSnapshot, createSnapshot, sheet] = useEditorStore(
-    (state) => [state.sceneSnapshot, state.createSnapshot, state.sheet],
+  const [sceneSnapshot, createSnapshot] = useEditorStore(
+    (state) => [state.sceneSnapshot, state.createSnapshot],
     shallow,
   )
 
@@ -120,8 +122,18 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
   }, [editorOpen])
 
   const onPointerMissed = useCallback(() => {
-    if (sheet !== null) studio.setSelection([sheet])
-  }, [sheet])
+    // This callback runs when the user clicks in an empty space inside a SnapshotEditor.
+    // We'll try to set the current selection to the nearest sheet _if_ at least one object
+    // belonging to R3F was selected previously.
+    const obj: undefined | BaseSheetObjectType = studio.selection.find(
+      (sheetOrObject) =>
+        allRegisteredObjects.has(sheetOrObject as $IntentionalAny),
+    ) as $IntentionalAny
+
+    if (obj) {
+      studio.setSelection([obj.sheet])
+    }
+  }, [])
 
   if (!editorObject) return <></>
 

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

@@ -11,6 +11,7 @@ import type {
 } from 'three'
 import {Vector3} from 'three'
 import type {EditableType} from '../store'
+import {allRegisteredObjects} from '../store'
 import {baseSheetObjectType} from '../store'
 import {useEditorStore} from '../store'
 import mergeRefs from 'react-merge-refs'
@@ -60,6 +61,7 @@ const editable = <
       useLayoutEffect(() => {
         if (!sheet) return
         const sheetObject = sheet.object(uniqueName, baseSheetObjectType)
+        allRegisteredObjects.add(sheetObject)
         setSheetObject(sheetObject)
 
         useEditorStore

packages/plugin-r3f/src/components/editorStuff.ts

@@ -7,16 +7,11 @@ let sheetObject: ISheetObject<typeof editorSheetObjectConfig> | undefined =
   undefined
 
 const editorSheetObjectConfig = types.compound({
-  isOpen: types.boolean(false, {label: 'Editor Open'}),
   viewport: types.compound(
     {
       showAxes: types.boolean(true, {label: 'Axes'}),
       showGrid: types.boolean(true, {label: 'Grid'}),
       showOverlayIcons: types.boolean(false, {label: 'Overlay Icons'}),
-      resolution: types.number(500, {
-        label: 'Resolution',
-        range: [0, 1000],
-      }),
       shading: types.stringLiteral(
         'rendered',
         {

packages/plugin-r3f/src/store.ts

@@ -42,6 +42,8 @@ export const baseSheetObjectType = types.compound({
 
 export type BaseSheetObjectType = ISheetObject<typeof baseSheetObjectType>
 
+export const allRegisteredObjects = new WeakSet<BaseSheetObjectType>()
+
 export interface AbstractEditable<T extends EditableType> {
   type: T
   role: 'active' | 'removed'

theatre/studio/src/TheatreStudio.ts

@@ -5,7 +5,6 @@ import {prism} from '@theatre/dataverse'
 import SimpleCache from '@theatre/shared/utils/SimpleCache'
 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,