Normalize theatre keys in r3f (#317)

Also remove a stray console log and make makeStoreKey make more sense.

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)
   }
 }

packages/r3f/src/main/editable.tsx

@@ -1,14 +1,7 @@
 import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react'
-import React, {
+import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react'
-  forwardRef,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} 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 = <Keys extends keyof JSX.IntrinsicElements>(
 
         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<
+        const storeKey = makeStoreKey(sheetObject.address)
-          undefined | ISheetObject<$FixMe>
-        >(undefined)
 
         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'

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) =>
+export const makeStoreKey = (sheetObjectAddress: ISheetObject['address']) =>
-  `${sheet.address.sheetId}:${sheet.address.sheetInstanceId}:${name}`
+  `${sheetObjectAddress.sheetId}:${sheetObjectAddress.sheetInstanceId}:${sheetObjectAddress.objectKey}`

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
 }