diff --git a/packages/r3f/src/extension/components/useSelected.tsx b/packages/r3f/src/extension/components/useSelected.tsx index f55b6a8..4212725 100644 --- a/packages/r3f/src/extension/components/useSelected.tsx +++ b/packages/r3f/src/extension/components/useSelected.tsx @@ -22,7 +22,7 @@ export function useSelected(): undefined | string { if (!item) { set(undefined) } else { - set(makeStoreKey(item.sheet, item.address.objectKey)) + set(makeStoreKey(item.address)) } } setFromStudio(studio.selection) @@ -41,6 +41,6 @@ export function getSelected(): undefined | string { if (!item) { return undefined } else { - return makeStoreKey(item.sheet, item.address.objectKey) + return makeStoreKey(item.address) } } diff --git a/packages/r3f/src/main/editable.tsx b/packages/r3f/src/main/editable.tsx index ae1dae3..94f56c4 100644 --- a/packages/r3f/src/main/editable.tsx +++ b/packages/r3f/src/main/editable.tsx @@ -1,14 +1,7 @@ import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react' -import React, { - forwardRef, - useEffect, - useLayoutEffect, - useRef, - useState, -} from 'react' +import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react' import {allRegisteredObjects, editorStore} from './store' import mergeRefs from 'react-merge-refs' -import type {ISheetObject} from '@theatre/core' import useInvalidate from './useInvalidate' import {useCurrentSheet} from './SheetProvider' import defaultEditableFactoryConfig from './defaultEditableFactoryConfig' @@ -56,11 +49,21 @@ const createEditable = ( const sheet = useCurrentSheet()! - const storeKey = makeStoreKey(sheet, theatreKey) + const sheetObject = sheet.object( + theatreKey, + Object.assign( + { + ...additionalProps, + }, + // @ts-ignore + ...Object.values(config[actualType].props).map( + // @ts-ignore + (value) => value.type, + ), + ), + ) - const [sheetObject, setSheetObject] = useState< - undefined | ISheetObject<$FixMe> - >(undefined) + const storeKey = makeStoreKey(sheetObject.address) const invalidate = useInvalidate() @@ -99,21 +102,8 @@ Then you can use it in your JSX like any other editable component. Note the make // create sheet object and add editable to store useLayoutEffect(() => { if (!sheet) return - const sheetObject = sheet.object( - theatreKey, - Object.assign( - { - ...additionalProps, - }, - // @ts-ignore - ...Object.values(config[actualType].props).map( - // @ts-ignore - (value) => value.type, - ), - ), - ) + allRegisteredObjects.add(sheetObject) - setSheetObject(sheetObject) if (objRef) typeof objRef === 'function' diff --git a/packages/r3f/src/main/utils.ts b/packages/r3f/src/main/utils.ts index 3c5a941..2f38a94 100644 --- a/packages/r3f/src/main/utils.ts +++ b/packages/r3f/src/main/utils.ts @@ -1,7 +1,7 @@ import {editorStore} from './store' -import type {ISheet} from '@theatre/core' +import type {ISheetObject} from '@theatre/core' export const refreshSnapshot = editorStore.getState().createSnapshot -export const makeStoreKey = (sheet: ISheet, name: string) => - `${sheet.address.sheetId}:${sheet.address.sheetInstanceId}:${name}` +export const makeStoreKey = (sheetObjectAddress: ISheetObject['address']) => + `${sheetObjectAddress.sheetId}:${sheetObjectAddress.sheetInstanceId}:${sheetObjectAddress.objectKey}` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts index 8991b77..d7911bc 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts @@ -1,4 +1,3 @@ -import type {} from '@theatre/core/projects/store/types/SheetState_Historic' import type { PropTypeConfig, PropTypeConfig_AllSimples, @@ -359,6 +358,5 @@ export const calculateSequenceEditorTree = ( topSoFar += row.nodeHeight } - console.log('tree :)', tree) return tree }