Chore: Moved r3f's showAxes to Theatre

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

@@ -4,31 +4,37 @@ import {useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
 import {Checkbox, FormControl, Slider} from './elements'
 import UnstyledFormLabel from './elements/UnstyledFormLabel'
+import {useVal} from '@theatre/dataverse-react'
+import studio from '@theatre/studio'
 
 const ViewportShadingSettings: VFC = () => {
   const [
+    editorObject,
     showOverlayIcons,
     showGrid,
-    showAxes,
+    _showAxes,
     referenceWindowSize,
     setShowOverlayIcons,
     setShowGrid,
-    setShowAxes,
+    // setShowAxes,
     setReferenceWindowSize,
   ] = useEditorStore(
     (state) => [
+      state.editorObject,
       state.showOverlayIcons,
       state.showGrid,
       state.showAxes,
       state.referenceWindowSize,
       state.setShowOverlayIcons,
       state.setShowGrid,
-      state.setShowAxes,
+      // state.setShowAxes,
       state.setReferenceWindowSize,
     ],
     shallow,
   )
 
+  const showAxes = useVal(editorObject?.props.showAxes) ?? true
+
   return (
     <div className="flex flex-col gap-3">
       <FormControl>
@@ -53,7 +59,11 @@ const ViewportShadingSettings: VFC = () => {
         <Checkbox
           // @ts-ignore
           checked={showAxes}
-          onChange={() => setShowAxes(!showAxes)}
+          onChange={() =>
+            studio.transaction(({set}) => {
+              set(editorObject!.props.showAxes, !showAxes)
+            })
+          }
         >
           Show axes
         </Checkbox>

packages/plugin-r3f/src/store.ts

@@ -157,7 +157,6 @@ export type EditorStore = {
   showOverlayIcons: boolean
   useHdrAsBackground: boolean
   showGrid: boolean
-  showAxes: boolean
   referenceWindowSize: number
   initialEditorCamera: ContainerProps['camera']
 
@@ -182,7 +181,6 @@ export type EditorStore = {
   setShowOverlayIcons: (show: boolean) => void
   setUseHdrAsBackground: (use: boolean) => void
   setShowGrid: (show: boolean) => void
-  setShowAxes: (show: boolean) => void
   setReferenceWindowSize: (size: number) => void
   createSnapshot: () => void
   setSheetObject: (uniqueName: string, sheetObject: BaseSheetObjectType) => void
@@ -229,7 +227,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     showOverlayIcons: false,
     useHdrAsBackground: false,
     showGrid: true,
-    showAxes: true,
     referenceWindowSize: 120,
     initialEditorCamera: {},
 
@@ -328,9 +325,7 @@ const config: StateCreator<EditorStore> = (set, get) => {
     setShowGrid: (show) => {
       set({showGrid: show})
     },
-    setShowAxes: (show) => {
-      set({showAxes: show})
-    },
+
     setReferenceWindowSize: (size) => set({referenceWindowSize: size}),
     createSnapshot: () => {
       set((state) => ({
@@ -363,6 +358,7 @@ export type BindFunction = (options: {
 const editorSheetObjectConfig = {
   props: types.compound({
     isOpen: types.boolean(false),
+    showAxes: types.boolean(true),
   }),
 }