Chore: Moved r3f's referenceWindowSize to Theatre

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

@@ -13,6 +13,7 @@ import ViewportSettings from './ViewportSettings'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio from '@theatre/studio'
 import {getSelected} from './useSelected'
+import {useVal} from '@theatre/dataverse-react'
 
 const UI: VFC = () => {
   const [
@@ -20,7 +21,6 @@ const UI: VFC = () => {
     transformControlsMode,
     transformControlsSpace,
     viewportShading,
-    referenceWindowSize,
     setTransformControlsMode,
     setTransformControlsSpace,
     setViewportShading,
@@ -30,7 +30,6 @@ const UI: VFC = () => {
       state.transformControlsMode,
       state.transformControlsSpace,
       state.viewportShading,
-      state.referenceWindowSize,
       state.setTransformControlsMode,
       state.setTransformControlsSpace,
       state.setViewportShading,
@@ -38,6 +37,9 @@ const UI: VFC = () => {
     shallow,
   )
 
+  const referenceWindowSize =
+    useVal(editorObject?.props.referenceWindowSize) ?? 120
+
   if (!editorObject) return <></>
 
   return (

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

@@ -8,19 +8,16 @@ import {useVal} from '@theatre/dataverse-react'
 import studio from '@theatre/studio'
 
 const ViewportShadingSettings: VFC = () => {
-  const [editorObject, referenceWindowSize, setReferenceWindowSize] =
-    useEditorStore(
-      (state) => [
-        state.editorObject,
-        state.referenceWindowSize,
-        state.setReferenceWindowSize,
-      ],
+  const [editorObject] = useEditorStore(
+    (state) => [state.editorObject],
     shallow,
   )
 
   const showAxes = useVal(editorObject?.props.showAxes) ?? true
   const showGrid = useVal(editorObject?.props.showGrid) ?? true
   const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
+  const referenceWindowSize =
+    useVal(editorObject?.props.referenceWindowSize) ?? 120
 
   return (
     <div className="flex flex-col gap-3">
@@ -76,7 +73,12 @@ const ViewportShadingSettings: VFC = () => {
               min={120}
               max={400}
               onChange={(event) =>
-                setReferenceWindowSize(Number(event.target.value))
+                studio.transaction(({set}) => {
+                  set(
+                    editorObject!.props.referenceWindowSize,
+                    Number(event.target.value),
+                  )
+                })
               }
             />
           </div>

packages/plugin-r3f/src/store.ts

@@ -155,7 +155,6 @@ export type EditorStore = {
   hdrPaths: string[]
   selectedHdr: string | null
   useHdrAsBackground: boolean
-  referenceWindowSize: number
   initialEditorCamera: ContainerProps['camera']
 
   init: (
@@ -177,7 +176,6 @@ export type EditorStore = {
   setTransformControlsSpace: (mode: TransformControlsSpace) => void
   setViewportShading: (mode: ViewportShading) => void
   setUseHdrAsBackground: (use: boolean) => void
-  setReferenceWindowSize: (size: number) => void
   createSnapshot: () => void
   setSheetObject: (uniqueName: string, sheetObject: BaseSheetObjectType) => void
   setSnapshotProxyObject: (
@@ -221,7 +219,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     hdrPaths: [],
     selectedHdr: null,
     useHdrAsBackground: false,
-    referenceWindowSize: 120,
     initialEditorCamera: {},
 
     init: (
@@ -315,7 +312,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
       set({useHdrAsBackground: use})
     },
 
-    setReferenceWindowSize: (size) => set({referenceWindowSize: size}),
     createSnapshot: () => {
       set((state) => ({
         sceneSnapshot: state.scene?.clone() ?? null,
@@ -350,6 +346,7 @@ const editorSheetObjectConfig = {
     showAxes: types.boolean(true),
     showGrid: types.boolean(true),
     showOverlayIcons: types.boolean(false),
+    referenceWindowSize: types.number(120, {min: 0, max: 800}),
   }),
 }