R3F now uses a single sheet in studio

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

@@ -24,6 +24,7 @@ import type {IconType} from 'react-icons'
 import studio from '@theatre/studio'
 import {useSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
+import {getEditorSheetObject} from './editorStuff'
 
 export interface EditableProxyProps {
   editableName: string
@@ -37,8 +38,9 @@ const EditableProxy: VFC<EditableProxyProps> = ({
   editableType,
   object,
 }) => {
-  const [editorObject, setSnapshotProxyObject] = useEditorStore(
-    (state) => [state.editorObject, state.setSnapshotProxyObject],
+  const editorObject = getEditorSheetObject()
+  const setSnapshotProxyObject = useEditorStore(
+    (state) => state.setSnapshotProxyObject,
     shallow,
   )
 

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

@@ -20,6 +20,7 @@ import type {$FixMe} from '../types'
 import {useSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
 import useInvalidate from './useInvalidate'
+import {getEditorSheetObject} from './editorStuff'
 
 export interface ProxyManagerProps {
   orbitControlsRef: React.MutableRefObject<OrbitControls | null>
@@ -33,8 +34,9 @@ type IEditableProxy = {
 
 const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   const isBeingEdited = useRef(false)
-  const [editorObject, sceneSnapshot, sheetObjects] = useEditorStore(
-    (state) => [state.editorObject, state.sceneSnapshot, state.sheetObjects],
+  const editorObject = getEditorSheetObject()
+  const [sceneSnapshot, sheetObjects] = useEditorStore(
+    (state) => [state.sceneSnapshot, state.sheetObjects],
     shallow,
   )
   const transformControlsMode =

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

@@ -11,6 +11,7 @@ import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 import {IoCameraReverseOutline} from 'react-icons/all'
 import type {ISheet} from '@theatre/core'
 import useSnapshotEditorCamera from './useSnapshotEditorCamera'
+import {getEditorSheet, getEditorSheetObject} from './editorStuff'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -40,10 +41,9 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({
     paneId,
   )
 
-  const [editorObject, helpersRoot] = useEditorStore(
-    (state) => [state.editorObject, state.helpersRoot],
-    shallow,
-  )
+  const editorObject = getEditorSheetObject()
+
+  const helpersRoot = useEditorStore((state) => state.helpersRoot, shallow)
 
   const showGrid = useVal(editorObject?.props.viewport.showGrid) ?? true
   const showAxes = useVal(editorObject?.props.viewport.showAxes) ?? true
@@ -95,16 +95,12 @@ const Tools = styled.div`
 `
 
 const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
-  const snapshotEditorSheet = studio.getStudioProject().sheet('Plugin-R3F')
+  const snapshotEditorSheet = getEditorSheet()
   const paneId = props.paneId
+  const editorObject = getEditorSheetObject()
 
-  const [editorObject, sceneSnapshot, createSnapshot, sheet] = useEditorStore(
-    (state) => [
-      state.editorObject,
-      state.sceneSnapshot,
-      state.createSnapshot,
-      state.sheet,
-    ],
+  const [sceneSnapshot, createSnapshot, sheet] = useEditorStore(
+    (state) => [state.sceneSnapshot, state.createSnapshot, state.sheet],
     shallow,
   )
 

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

@@ -1,19 +1,15 @@
 import type {VFC} from 'react'
 import React from 'react'
-import {useEditorStore} from '../../store'
-import shallow from 'zustand/shallow'
 import {IoCameraOutline} from 'react-icons/all'
 import studio, {ToolbarIconButton} from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
+import {getEditorSheetObject} from '../editorStuff'
 
 const Toolbar: VFC = () => {
-  const [editorObject] = useEditorStore(
-    (state) => [state.editorObject],
-    shallow,
-  )
+  const editorObject = getEditorSheetObject()
 
   const transformControlsMode =
     useVal(editorObject?.props.transformControls.mode) ?? 'translate'

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

@@ -0,0 +1,72 @@
+import type {ISheet, ISheetObject} from '@theatre/core'
+import {types} from '@theatre/core'
+import studio from '@theatre/studio'
+
+let sheet: ISheet | undefined = undefined
+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(1440, {
+        label: 'Resolution',
+        range: [0, 1000],
+      }),
+      shading: types.stringLiteral(
+        'rendered',
+        {
+          flat: 'Flat',
+          rendered: 'Rendered',
+          solid: 'Solid',
+          wireframe: 'Wireframe',
+        },
+        {as: 'menu', label: 'Shading'},
+      ),
+    },
+    {label: 'Viewport Config'},
+  ),
+  transformControls: types.compound(
+    {
+      mode: types.stringLiteral(
+        'translate',
+        {
+          translate: 'Translate',
+          rotate: 'Rotate',
+          scale: 'Scale',
+        },
+        {as: 'switch', label: 'Mode'},
+      ),
+      space: types.stringLiteral(
+        'world',
+        {
+          local: 'Local',
+          world: 'World',
+        },
+        {as: 'switch', label: 'Space'},
+      ),
+    },
+    {label: 'Transform Controls'},
+  ),
+})
+
+export function getEditorSheet(): ISheet {
+  if (!sheet) {
+    sheet = studio.getStudioProject().sheet('R3F UI')
+  }
+  return sheet
+}
+
+export function getEditorSheetObject(): ISheetObject<
+  typeof editorSheetObjectConfig
+> | null {
+  if (!sheetObject) {
+    sheetObject =
+      getEditorSheet().object('Editor', null, editorSheetObjectConfig) || null
+  }
+  return sheetObject
+}