diff --git a/packages/plugin-r3f/src/components/ViewportSettings.tsx b/packages/plugin-r3f/src/components/ViewportSettings.tsx
index 6094e08..c3c5992 100644
--- a/packages/plugin-r3f/src/components/ViewportSettings.tsx
+++ b/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 (
@@ -53,7 +59,11 @@ const ViewportShadingSettings: VFC = () => {
setShowAxes(!showAxes)}
+ onChange={() =>
+ studio.transaction(({set}) => {
+ set(editorObject!.props.showAxes, !showAxes)
+ })
+ }
>
Show axes
diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts
index 3d3f262..a42e405 100644
--- a/packages/plugin-r3f/src/store.ts
+++ b/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 = (set, get) => {
showOverlayIcons: false,
useHdrAsBackground: false,
showGrid: true,
- showAxes: true,
referenceWindowSize: 120,
initialEditorCamera: {},
@@ -328,9 +325,7 @@ const config: StateCreator = (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),
}),
}