diff --git a/packages/plugin-r3f/src/components/EditableProxy.tsx b/packages/plugin-r3f/src/components/EditableProxy.tsx index 929964d..b2136a8 100644 --- a/packages/plugin-r3f/src/components/EditableProxy.tsx +++ b/packages/plugin-r3f/src/components/EditableProxy.tsx @@ -23,6 +23,7 @@ import { import type {IconType} from 'react-icons' import studio from '@theatre/studio' import {useSelected} from './useSelected' +import {useVal} from '@theatre/dataverse-react' export interface EditableProxyProps { editableName: string @@ -36,12 +37,13 @@ const EditableProxy: VFC = ({ editableType, object, }) => { - const [showOverlayIcons, setSnapshotProxyObject] = useEditorStore( - (state) => [state.showOverlayIcons, state.setSnapshotProxyObject], + const [editorObject, setSnapshotProxyObject] = useEditorStore( + (state) => [state.editorObject, state.setSnapshotProxyObject], shallow, ) const selected = useSelected() + const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false useEffect(() => { setSnapshotProxyObject(object, uniqueName) diff --git a/packages/plugin-r3f/src/components/ViewportSettings.tsx b/packages/plugin-r3f/src/components/ViewportSettings.tsx index 1d38371..e969273 100644 --- a/packages/plugin-r3f/src/components/ViewportSettings.tsx +++ b/packages/plugin-r3f/src/components/ViewportSettings.tsx @@ -8,25 +8,19 @@ import {useVal} from '@theatre/dataverse-react' import studio from '@theatre/studio' const ViewportShadingSettings: VFC = () => { - const [ - editorObject, - showOverlayIcons, - referenceWindowSize, - setShowOverlayIcons, - setReferenceWindowSize, - ] = useEditorStore( - (state) => [ - state.editorObject, - state.showOverlayIcons, - state.referenceWindowSize, - state.setShowOverlayIcons, - state.setReferenceWindowSize, - ], - shallow, - ) + const [editorObject, referenceWindowSize, setReferenceWindowSize] = + useEditorStore( + (state) => [ + state.editorObject, + state.referenceWindowSize, + state.setReferenceWindowSize, + ], + shallow, + ) const showAxes = useVal(editorObject?.props.showAxes) ?? true const showGrid = useVal(editorObject?.props.showGrid) ?? true + const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false return (
@@ -34,7 +28,11 @@ const ViewportShadingSettings: VFC = () => { setShowOverlayIcons(!showOverlayIcons)} + onChange={() => + studio.transaction(({set}) => { + set(editorObject!.props.showOverlayIcons, !showOverlayIcons) + }) + } > Show overlay icons diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts index 70a8457..b506183 100644 --- a/packages/plugin-r3f/src/store.ts +++ b/packages/plugin-r3f/src/store.ts @@ -154,7 +154,6 @@ export type EditorStore = { editablesSnapshot: Record | null hdrPaths: string[] selectedHdr: string | null - showOverlayIcons: boolean useHdrAsBackground: boolean referenceWindowSize: number initialEditorCamera: ContainerProps['camera'] @@ -177,7 +176,6 @@ export type EditorStore = { setTransformControlsMode: (mode: TransformControlsMode) => void setTransformControlsSpace: (mode: TransformControlsSpace) => void setViewportShading: (mode: ViewportShading) => void - setShowOverlayIcons: (show: boolean) => void setUseHdrAsBackground: (use: boolean) => void setReferenceWindowSize: (size: number) => void createSnapshot: () => void @@ -222,7 +220,6 @@ const config: StateCreator = (set, get) => { editablesSnapshot: null, hdrPaths: [], selectedHdr: null, - showOverlayIcons: false, useHdrAsBackground: false, referenceWindowSize: 120, initialEditorCamera: {}, @@ -313,9 +310,7 @@ const config: StateCreator = (set, get) => { setViewportShading: (mode) => { set({viewportShading: mode}) }, - setShowOverlayIcons: (show) => { - set({showOverlayIcons: show}) - }, + setUseHdrAsBackground: (use) => { set({useHdrAsBackground: use}) }, @@ -354,6 +349,7 @@ const editorSheetObjectConfig = { isOpen: types.boolean(false), showAxes: types.boolean(true), showGrid: types.boolean(true), + showOverlayIcons: types.boolean(false), }), }