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(
-    (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)

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 (
     <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>