Chore: Moved r3f's viewportShading to Theatre

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

@@ -32,14 +32,8 @@ type IEditableProxy = {
 
 const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   const isBeingEdited = useRef(false)
-  const [editorObject, sceneSnapshot, viewportShading, sheetObjects] =
+  const [editorObject, sceneSnapshot, sheetObjects] = useEditorStore(
-    useEditorStore(
+    (state) => [state.editorObject, state.sceneSnapshot, state.sheetObjects],
-      (state) => [
-        state.editorObject,
-        state.sceneSnapshot,
-        state.viewportShading,
-        state.sheetObjects,
-      ],
     shallow,
   )
   const transformControlsMode =
@@ -48,6 +42,9 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   const transformControlsSpace =
     useVal(editorObject?.props.transformControlsSpace) ?? 'world'
 
+  const viewportShading =
+    useVal(editorObject?.props.viewportShading) ?? 'rendered'
+
   const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot])
   const [editableProxies, setEditableProxies] = useState<{
     [name: string]: IEditableProxy

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

@@ -16,12 +16,8 @@ import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
 
 const UI: VFC = () => {
-  const [editorObject, viewportShading, setViewportShading] = useEditorStore(
+  const [editorObject] = useEditorStore(
-    (state) => [
+    (state) => [state.editorObject],
-      state.editorObject,
-      state.viewportShading,
-      state.setViewportShading,
-    ],
     shallow,
   )
 
@@ -31,6 +27,8 @@ const UI: VFC = () => {
     useVal(editorObject?.props.transformControlsMode) ?? 'translate'
   const transformControlsSpace =
     useVal(editorObject?.props.transformControlsSpace) ?? 'world'
+  const viewportShading =
+    useVal(editorObject?.props.viewportShading) ?? 'rendered'
 
   if (!editorObject) return <></>
 
@@ -63,7 +61,11 @@ const UI: VFC = () => {
               <div className="pointer-events-auto">
                 <ViewportShadingSelect
                   value={viewportShading}
-                  onChange={setViewportShading}
+                  onChange={(shading) => {
+                    studio.transaction(({set}) => {
+                      set(editorObject.props.viewportShading, shading)
+                    })
+                  }}
                 />
               </div>
               <div className="pointer-events-auto">

packages/plugin-r3f/src/store.ts

@@ -147,7 +147,6 @@ export type EditorStore = {
   editables: Record<string, Editable>
   // this will come in handy when we start supporting multiple canvases
   canvasName: string
-  viewportShading: ViewportShading
   sceneSnapshot: Scene | null
   editablesSnapshot: Record<string, EditableSnapshot> | null
   hdrPaths: string[]
@@ -170,7 +169,6 @@ export type EditorStore = {
   addEditable: <T extends EditableType>(type: T, uniqueName: string) => void
   removeEditable: (uniqueName: string) => void
   setSelectedHdr: (hdr: string | null) => void
-  setViewportShading: (mode: ViewportShading) => void
   setUseHdrAsBackground: (use: boolean) => void
   createSnapshot: () => void
   setSheetObject: (uniqueName: string, sheetObject: BaseSheetObjectType) => void
@@ -207,7 +205,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     helpersRoot: new Group(),
     editables: {},
     canvasName: 'default',
-    viewportShading: 'rendered',
     sceneSnapshot: null,
     editablesSnapshot: null,
     hdrPaths: [],
@@ -292,9 +289,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     setSelectedHdr: (hdr) => {
       set({selectedHdr: hdr})
     },
-    setViewportShading: (mode) => {
-      set({viewportShading: mode})
-    },
 
     setUseHdrAsBackground: (use) => {
       set({useHdrAsBackground: use})
@@ -343,6 +337,12 @@ const editorSheetObjectConfig = {
       'world',
       ['local', 'world'],
     ),
+    viewportShading: types.stringLiteral<ViewportShading>('rendered', [
+      'flat',
+      'rendered',
+      'solid',
+      'wireframe',
+    ]),
   }),
 }