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), }), }