diff --git a/packages/r3f/src/main/SheetProvider.tsx b/packages/r3f/src/main/SheetProvider.tsx index b449036f54..b294fa6b5f 100644 --- a/packages/r3f/src/main/SheetProvider.tsx +++ b/packages/r3f/src/main/SheetProvider.tsx @@ -9,11 +9,20 @@ import {useThree} from '@react-three/fiber' import type {ISheet} from '@theatre/core' import {bindToCanvas} from './store' -const ctx = createContext<{sheet: ISheet}>(undefined!) +export type R3FSheetConfig = { + namespacePrefix?: string; +} + +export type R3FSheetContext = { + sheet: ISheet, + config?: R3FSheetConfig +} + +const ctx = createContext(undefined!) -const useWrapperContext = (): {sheet: ISheet} => { +const useWrapperContext = (): R3FSheetContext => { const val = useContext(ctx) - if (!val) { + if (!val || !val.sheet) { throw new Error( `No sheet found. You need to add a higher up in the tree. https://docs.theatrejs.com/r3f.html#sheetprovider`, ) @@ -25,10 +34,17 @@ export const useCurrentSheet = (): ISheet | undefined => { return useWrapperContext().sheet } +export const useCurrentR3FSheetConfig = (): R3FSheetConfig | undefined => { + return useWrapperContext().config +} + + + const SheetProvider: React.FC<{ sheet: ISheet children: ReactNode -}> = ({sheet, children}) => { + config?: R3FSheetConfig +}> = ({sheet, children, config}) => { const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl})) useEffect(() => { @@ -41,7 +57,7 @@ const SheetProvider: React.FC<{ bindToCanvas({gl, scene}) }, [scene, gl]) - return {children} + return {children} } export default SheetProvider diff --git a/packages/r3f/src/main/editable.tsx b/packages/r3f/src/main/editable.tsx index dc1e3c27a2..ae305f12aa 100644 --- a/packages/r3f/src/main/editable.tsx +++ b/packages/r3f/src/main/editable.tsx @@ -4,7 +4,7 @@ import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react' import {allRegisteredObjects, editorStore} from './store' import {mergeRefs} from 'react-merge-refs' import useInvalidate from './useInvalidate' -import {useCurrentSheet} from './SheetProvider' +import {useCurrentR3FSheetConfig, useCurrentSheet} from './SheetProvider' import defaultEditableFactoryConfig from './defaultEditableFactoryConfig' import type {EditableFactoryConfig} from './editableFactoryConfigUtils' import {makeStoreKey} from './utils' @@ -75,17 +75,20 @@ const createEditable = ( const objectRef = useRef() const sheet = useCurrentSheet()! + const sheetConfig = useCurrentR3FSheetConfig() const rafDriver = useCurrentRafDriver() const [sheetObject, setSheetObject] = useState< undefined | ISheetObject<$FixMe> >(undefined) + + const keyPrefix = sheetConfig?.namespacePrefix ? `${sheetConfig.namespacePrefix} / ` : '' const storeKey = useMemo( () => makeStoreKey({ ...sheet.address, - objectKey: theatreKey as $IntentionalAny, + objectKey: `${keyPrefix}${theatreKey}` as $IntentionalAny, }), [sheet, theatreKey], )