Moved r3f's toolbar out of the snapshot editor

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

@@ -6,7 +6,7 @@ import {useEditorStore} from '../store'
 import {OrbitControls} from '@react-three/drei'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'
-import UI from './UI'
+import Toolbar from './Toolbar/Toolbar'
 import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
@@ -62,7 +62,7 @@ const EditorScene = () => {
   )
 }
 
-const Wrapper = styled.div<{editorOpen: boolean}>`
+const Wrapper = styled.div<{visible: boolean}>`
   tab-size: 4;
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -74,7 +74,7 @@ const Wrapper = styled.div<{editorOpen: boolean}>`
   bottom: 0px;
   left: 0px;
   z-index: 50;
-  display: ${(props) => (props.editorOpen ? 'block' : 'none')};
+  display: ${(props) => (props.visible ? 'block' : 'none')};
 `
 
 const CanvasWrapper = styled.div`
@@ -107,7 +107,8 @@ const Editor: VFC = () => {
   return (
     <root.div>
       <GlobalStyle />
-      <Wrapper id="theatre-plugin-r3f-root" editorOpen={editorOpen}>
+      <Wrapper id="theatre-plugin-r3f-root" visible={true}>
+        <Toolbar />
         {sceneSnapshot ? (
           <>
             <CanvasWrapper>
@@ -125,8 +126,6 @@ const Editor: VFC = () => {
                 <EditorScene />
               </Canvas>
             </CanvasWrapper>
-
-            <UI />
           </>
         ) : null}
       </Wrapper>

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

@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import {useState} from 'react'
 import React from 'react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
-import {useEditorStore} from '../store'
+import {useEditorStore} from '../../store'
 import shallow from 'zustand/shallow'
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
@@ -10,9 +10,9 @@ import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
 import {Vector3} from 'three'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio from '@theatre/studio'
-import {getSelected} from './useSelected'
+import {getSelected} from '../useSelected'
 import {useVal} from '@theatre/dataverse-react'
-import IconButton from './elements/IconButton'
+import IconButton from './utils/IconButton'
 import {PortalContext} from 'reakit'
 import styled from 'styled-components'
 
@@ -37,7 +37,7 @@ const TopRow = styled.div`
   align-items: flex-start;
 `
 
-const Toolbar = styled.div`
+const Tools = styled.div`
   display: flex;
   gap: 1rem;
 `
@@ -46,7 +46,7 @@ const ToolGroup = styled.div`
   pointer-events: auto;
 `
 
-const UI: VFC = () => {
+const Toolbar: VFC = () => {
   const [editorObject] = useEditorStore(
     (state) => [state.editorObject],
     shallow,
@@ -67,7 +67,7 @@ const UI: VFC = () => {
     <PortalContext.Provider value={wrapper}>
       <Container ref={setWrapper}>
         <TopRow>
-          <Toolbar>
+          <Tools>
             <ToolGroup>
               <TransformControlsModeSelect
                 value={transformControlsMode}
@@ -160,11 +160,11 @@ const UI: VFC = () => {
                 }}
               />
             </ToolGroup>
-          </Toolbar>
+          </Tools>
         </TopRow>
       </Container>
     </PortalContext.Provider>
   )
 }
 
-export default UI
+export default Toolbar

packages/plugin-r3f/src/components/Toolbar/TransformControlsModeSelect.tsx

@@ -1,8 +1,8 @@
 import type {VFC} from 'react'
 import React from 'react'
 import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
-import type {TransformControlsMode} from '../store'
+import type {TransformControlsMode} from '../../store'
-import CompactModeSelect from './elements/CompactModeSelect'
+import CompactModeSelect from './utils/CompactModeSelect'
 
 export interface TransformControlsModeSelectProps {
   value: TransformControlsMode

packages/plugin-r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx

@@ -1,8 +1,8 @@
 import type {VFC} from 'react'
 import React from 'react'
-import type {TransformControlsSpace} from '../store'
+import type {TransformControlsSpace} from '../../store'
 import {BiCube, BiGlobe} from 'react-icons/all'
-import CompactModeSelect from './elements/CompactModeSelect'
+import CompactModeSelect from './utils/CompactModeSelect'
 
 export interface TransformControlsSpaceSelectProps {
   value: TransformControlsSpace

packages/plugin-r3f/src/components/Toolbar/ViewportShadingSelect.tsx

@@ -1,8 +1,8 @@
 import type {VFC} from 'react'
 import React from 'react'
-import type {ViewportShading} from '../store'
+import type {ViewportShading} from '../../store'
 import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
-import CompactModeSelect from './elements/CompactModeSelect'
+import CompactModeSelect from './utils/CompactModeSelect'
 
 export interface ViewportShadingSelectProps {
   value: ViewportShading