Chore: Moved r3f's showGrid to Theatre

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

@@ -17,24 +17,25 @@ const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()
 
   const [
+    editorObject,
     selectedHdr,
     useHdrAsBackground,
-    showGrid,
-    showAxes,
     helpersRoot,
     setOrbitControlsRef,
   ] = useEditorStore(
     (state) => [
+      state.editorObject,
       state.selectedHdr,
       state.useHdrAsBackground,
-      state.showGrid,
-      state.showAxes,
       state.helpersRoot,
       state.setOrbitControlsRef,
     ],
     shallow,
   )
 
+  const showGrid = useVal(editorObject?.props.showGrid) ?? true
+  const showAxes = useVal(editorObject?.props.showAxes) ?? true
+
   useEffect(() => {
     setOrbitControlsRef(orbitControlsRef)
   }, [setOrbitControlsRef])

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

@@ -11,29 +11,22 @@ const ViewportShadingSettings: VFC = () => {
   const [
     editorObject,
     showOverlayIcons,
-    showGrid,
-    _showAxes,
     referenceWindowSize,
     setShowOverlayIcons,
-    setShowGrid,
-    // setShowAxes,
     setReferenceWindowSize,
   ] = useEditorStore(
     (state) => [
       state.editorObject,
       state.showOverlayIcons,
-      state.showGrid,
-      state.showAxes,
       state.referenceWindowSize,
       state.setShowOverlayIcons,
-      state.setShowGrid,
-      // state.setShowAxes,
       state.setReferenceWindowSize,
     ],
     shallow,
   )
 
   const showAxes = useVal(editorObject?.props.showAxes) ?? true
+  const showGrid = useVal(editorObject?.props.showGrid) ?? true
 
   return (
     <div className="flex flex-col gap-3">
@@ -50,7 +43,11 @@ const ViewportShadingSettings: VFC = () => {
         <Checkbox
           // @ts-ignore
           checked={showGrid}
-          onChange={() => setShowGrid(!showGrid)}
+          onChange={() =>
+            studio.transaction(({set}) => {
+              set(editorObject!.props.showGrid, !showGrid)
+            })
+          }
         >
           Show grid
         </Checkbox>

packages/plugin-r3f/src/store.ts

@@ -156,7 +156,6 @@ export type EditorStore = {
   selectedHdr: string | null
   showOverlayIcons: boolean
   useHdrAsBackground: boolean
-  showGrid: boolean
   referenceWindowSize: number
   initialEditorCamera: ContainerProps['camera']
 
@@ -180,7 +179,6 @@ export type EditorStore = {
   setViewportShading: (mode: ViewportShading) => void
   setShowOverlayIcons: (show: boolean) => void
   setUseHdrAsBackground: (use: boolean) => void
-  setShowGrid: (show: boolean) => void
   setReferenceWindowSize: (size: number) => void
   createSnapshot: () => void
   setSheetObject: (uniqueName: string, sheetObject: BaseSheetObjectType) => void
@@ -226,7 +224,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     selectedHdr: null,
     showOverlayIcons: false,
     useHdrAsBackground: false,
-    showGrid: true,
     referenceWindowSize: 120,
     initialEditorCamera: {},
 
@@ -322,9 +319,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     setUseHdrAsBackground: (use) => {
       set({useHdrAsBackground: use})
     },
-    setShowGrid: (show) => {
-      set({showGrid: show})
-    },
 
     setReferenceWindowSize: (size) => set({referenceWindowSize: size}),
     createSnapshot: () => {
@@ -359,6 +353,7 @@ const editorSheetObjectConfig = {
   props: types.compound({
     isOpen: types.boolean(false),
     showAxes: types.boolean(true),
+    showGrid: types.boolean(true),
   }),
 }