Chore: Moved r3f's showOverlayGrid to Theatrte

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<EditableProxyProps> = ({
   editableType,
   object,
 }) => {
-  const [showOverlayIcons, setSnapshotProxyObject] = useEditorStore(
+  const [editorObject, setSnapshotProxyObject] = useEditorStore(
-    (state) => [state.showOverlayIcons, state.setSnapshotProxyObject],
+    (state) => [state.editorObject, state.setSnapshotProxyObject],
     shallow,
   )
 
   const selected = useSelected()
+  const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
 
   useEffect(() => {
     setSnapshotProxyObject(object, uniqueName)

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

@@ -8,18 +8,11 @@ import {useVal} from '@theatre/dataverse-react'
 import studio from '@theatre/studio'
 
 const ViewportShadingSettings: VFC = () => {
-  const [
+  const [editorObject, referenceWindowSize, setReferenceWindowSize] =
-    editorObject,
+    useEditorStore(
-    showOverlayIcons,
-    referenceWindowSize,
-    setShowOverlayIcons,
-    setReferenceWindowSize,
-  ] = useEditorStore(
       (state) => [
         state.editorObject,
-      state.showOverlayIcons,
         state.referenceWindowSize,
-      state.setShowOverlayIcons,
         state.setReferenceWindowSize,
       ],
       shallow,
@@ -27,6 +20,7 @@ const ViewportShadingSettings: VFC = () => {
 
   const showAxes = useVal(editorObject?.props.showAxes) ?? true
   const showGrid = useVal(editorObject?.props.showGrid) ?? true
+  const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
 
   return (
     <div className="flex flex-col gap-3">
@@ -34,7 +28,11 @@ const ViewportShadingSettings: VFC = () => {
         <Checkbox
           // @ts-ignore
           checked={showOverlayIcons}
-          onChange={() => setShowOverlayIcons(!showOverlayIcons)}
+          onChange={() =>
+            studio.transaction(({set}) => {
+              set(editorObject!.props.showOverlayIcons, !showOverlayIcons)
+            })
+          }
         >
           Show overlay icons
         </Checkbox>

packages/plugin-r3f/src/store.ts

@@ -154,7 +154,6 @@ export type EditorStore = {
   editablesSnapshot: Record<string, EditableSnapshot> | 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<EditorStore> = (set, get) => {
     editablesSnapshot: null,
     hdrPaths: [],
     selectedHdr: null,
-    showOverlayIcons: false,
     useHdrAsBackground: false,
     referenceWindowSize: 120,
     initialEditorCamera: {},
@@ -313,9 +310,7 @@ const config: StateCreator<EditorStore> = (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),
   }),
 }