Chore: Moved r3f's transformControls* to Theatre

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

@@ -18,6 +18,7 @@ import studio from '@theatre/studio'
 import type {ISheetObject} from '@theatre/core'
 import type {$FixMe} from '../types'
 import {useSelected} from './useSelected'
+import {useVal} from '@theatre/dataverse-react'
 
 export interface ProxyManagerProps {
   orbitControlsRef: React.MutableRefObject<typeof OrbitControls | undefined>
@@ -31,22 +32,22 @@ type IEditableProxy = {
 
 const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   const isBeingEdited = useRef(false)
-  const [
-    sceneSnapshot,
-    transformControlsMode,
-    transformControlsSpace,
-    viewportShading,
-    sheetObjects,
-  ] = useEditorStore(
-    (state) => [
-      state.sceneSnapshot,
-      state.transformControlsMode,
-      state.transformControlsSpace,
-      state.viewportShading,
-      state.sheetObjects,
-    ],
-    shallow,
-  )
+  const [editorObject, sceneSnapshot, viewportShading, sheetObjects] =
+    useEditorStore(
+      (state) => [
+        state.editorObject,
+        state.sceneSnapshot,
+        state.viewportShading,
+        state.sheetObjects,
+      ],
+      shallow,
+    )
+  const transformControlsMode =
+    useVal(editorObject?.props.transformControlsMode) ?? 'translate'
+
+  const transformControlsSpace =
+    useVal(editorObject?.props.transformControlsSpace) ?? 'world'
+
   const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot])
   const [editableProxies, setEditableProxies] = useState<{
     [name: string]: IEditableProxy

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

@@ -16,22 +16,10 @@ import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
 
 const UI: VFC = () => {
-  const [
-    editorObject,
-    transformControlsMode,
-    transformControlsSpace,
-    viewportShading,
-    setTransformControlsMode,
-    setTransformControlsSpace,
-    setViewportShading,
-  ] = useEditorStore(
+  const [editorObject, viewportShading, setViewportShading] = useEditorStore(
     (state) => [
       state.editorObject,
-      state.transformControlsMode,
-      state.transformControlsSpace,
       state.viewportShading,
-      state.setTransformControlsMode,
-      state.setTransformControlsSpace,
       state.setViewportShading,
     ],
     shallow,
@@ -39,6 +27,10 @@ const UI: VFC = () => {
 
   const referenceWindowSize =
     useVal(editorObject?.props.referenceWindowSize) ?? 120
+  const transformControlsMode =
+    useVal(editorObject?.props.transformControlsMode) ?? 'translate'
+  const transformControlsSpace =
+    useVal(editorObject?.props.transformControlsSpace) ?? 'world'
 
   if (!editorObject) return <></>
 
@@ -51,13 +43,21 @@ const UI: VFC = () => {
               <div className="pointer-events-auto">
                 <TransformControlsModeSelect
                   value={transformControlsMode}
-                  onChange={(value) => setTransformControlsMode(value)}
+                  onChange={(value) =>
+                    studio.transaction(({set}) =>
+                      set(editorObject!.props.transformControlsMode, value),
+                    )
+                  }
                 />
               </div>
               <div className="pointer-events-auto">
                 <TransformControlsSpaceSelect
                   value={transformControlsSpace}
-                  onChange={setTransformControlsSpace}
+                  onChange={(space) => {
+                    studio.transaction(({set}) => {
+                      set(editorObject.props.transformControlsSpace, space)
+                    })
+                  }}
                 />
               </div>
               <div className="pointer-events-auto">

packages/plugin-r3f/src/store.ts

@@ -147,8 +147,6 @@ export type EditorStore = {
   editables: Record<string, Editable>
   // this will come in handy when we start supporting multiple canvases
   canvasName: string
-  transformControlsMode: TransformControlsMode
-  transformControlsSpace: TransformControlsSpace
   viewportShading: ViewportShading
   sceneSnapshot: Scene | null
   editablesSnapshot: Record<string, EditableSnapshot> | null
@@ -172,8 +170,6 @@ export type EditorStore = {
   addEditable: <T extends EditableType>(type: T, uniqueName: string) => void
   removeEditable: (uniqueName: string) => void
   setSelectedHdr: (hdr: string | null) => void
-  setTransformControlsMode: (mode: TransformControlsMode) => void
-  setTransformControlsSpace: (mode: TransformControlsSpace) => void
   setViewportShading: (mode: ViewportShading) => void
   setUseHdrAsBackground: (use: boolean) => void
   createSnapshot: () => void
@@ -211,8 +207,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     helpersRoot: new Group(),
     editables: {},
     canvasName: 'default',
-    transformControlsMode: 'translate',
-    transformControlsSpace: 'world',
     viewportShading: 'rendered',
     sceneSnapshot: null,
     editablesSnapshot: null,
@@ -298,12 +292,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     setSelectedHdr: (hdr) => {
       set({selectedHdr: hdr})
     },
-    setTransformControlsMode: (mode) => {
-      set({transformControlsMode: mode})
-    },
-    setTransformControlsSpace: (mode) => {
-      set({transformControlsSpace: mode})
-    },
     setViewportShading: (mode) => {
       set({viewportShading: mode})
     },
@@ -347,6 +335,14 @@ const editorSheetObjectConfig = {
     showGrid: types.boolean(true),
     showOverlayIcons: types.boolean(false),
     referenceWindowSize: types.number(120, {min: 0, max: 800}),
+    transformControlsMode: types.stringLiteral<TransformControlsMode>(
+      'translate',
+      ['translate', 'rotate', 'scale'],
+    ),
+    transformControlsSpace: types.stringLiteral<TransformControlsSpace>(
+      'world',
+      ['local', 'world'],
+    ),
   }),
 }