diff --git a/packages/plugin-r3f/src/components/SnapshotEditor.tsx b/packages/plugin-r3f/src/components/SnapshotEditor.tsx index 7a0d893..d9d39a4 100644 --- a/packages/plugin-r3f/src/components/SnapshotEditor.tsx +++ b/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 <> diff --git a/packages/plugin-r3f/src/components/editable.tsx b/packages/plugin-r3f/src/components/editable.tsx index 39f5f04..6c2a01c 100644 --- a/packages/plugin-r3f/src/components/editable.tsx +++ b/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 diff --git a/packages/plugin-r3f/src/components/editorStuff.ts b/packages/plugin-r3f/src/components/editorStuff.ts index 24ead05..267c2fa 100644 --- a/packages/plugin-r3f/src/components/editorStuff.ts +++ b/packages/plugin-r3f/src/components/editorStuff.ts @@ -7,16 +7,11 @@ let sheetObject: ISheetObject | 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', { diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts index 1182931..353d65b 100644 --- a/packages/plugin-r3f/src/store.ts +++ b/packages/plugin-r3f/src/store.ts @@ -42,6 +42,8 @@ export const baseSheetObjectType = types.compound({ export type BaseSheetObjectType = ISheetObject +export const allRegisteredObjects = new WeakSet() + export interface AbstractEditable { type: T role: 'active' | 'removed' diff --git a/theatre/studio/src/TheatreStudio.ts b/theatre/studio/src/TheatreStudio.ts index 69dff6a..9abe132 100644 --- a/theatre/studio/src/TheatreStudio.ts +++ b/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,