Housekeeping

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

@@ -7,7 +7,7 @@ import {Vector3} from 'three'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio, {ToolbarIconButton} from '@theatre/studio'
 import {getSelected} from '../useSelected'
-import {usePrism, useVal} from '@theatre/dataverse-react'
+import {useVal} from '@theatre/dataverse-react'
 import styled from 'styled-components'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
@@ -18,10 +18,6 @@ const ToolGroup = styled.div`
 `
 
 const Toolbar: VFC = () => {
-  usePrism(() => {
-    const panes = studio.getPanesOfType('snapshotEditor')
-  }, [])
-
   const [editorObject] = useEditorStore(
     (state) => [state.editorObject],
     shallow,
@@ -38,7 +34,6 @@ const Toolbar: VFC = () => {
 
   return (
     <>
-      <ToolGroup>
       <ToolbarIconButton
         onClick={() => {
           studio.createPane('snapshotEditor')
@@ -46,8 +41,6 @@ const Toolbar: VFC = () => {
         icon={<IoCameraOutline />}
         label="Create snapshot"
       />
-      </ToolGroup>
-      <ToolGroup>
       <TransformControlsModeSelect
         value={transformControlsMode}
         onChange={(value) =>
@@ -56,8 +49,6 @@ const Toolbar: VFC = () => {
           )
         }
       />
-      </ToolGroup>
-      <ToolGroup>
       <TransformControlsSpaceSelect
         value={transformControlsSpace}
         onChange={(space) => {
@@ -66,8 +57,6 @@ const Toolbar: VFC = () => {
           })
         }}
       />
-      </ToolGroup>
-      <ToolGroup>
       <ViewportShadingSelect
         value={viewportShading}
         onChange={(shading) => {
@@ -76,8 +65,7 @@ const Toolbar: VFC = () => {
           })
         }}
       />
-      </ToolGroup>
-      <ToolGroup>
+
       <ToolbarIconButton
         label="Focus on selected"
         icon={<RiFocus3Line />}
@@ -90,8 +78,7 @@ const Toolbar: VFC = () => {
 
           if (selected) {
             focusObject =
-                useEditorStore.getState().editablesSnapshot![selected]
-                  .proxyObject
+              useEditorStore.getState().editablesSnapshot![selected].proxyObject
           }
 
           if (orbitControls && focusObject) {
@@ -102,8 +89,7 @@ const Toolbar: VFC = () => {
           }
         }}
       />
-      </ToolGroup>
-      <ToolGroup>
+
       <ToolbarIconButton
         label="Align object to view"
         icon={<GiPocketBow />}
@@ -118,8 +104,7 @@ const Toolbar: VFC = () => {
 
           if (selected) {
             proxyObject =
-                useEditorStore.getState().editablesSnapshot![selected]
-                  .proxyObject
+              useEditorStore.getState().editablesSnapshot![selected].proxyObject
 
             if (proxyObject && camera) {
               const direction = new Vector3()
@@ -137,7 +122,6 @@ const Toolbar: VFC = () => {
           }
         }}
       />
-      </ToolGroup>
     </>
   )
 }

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -1,9 +1,12 @@
 import type {ReactElement} from 'react'
 import React from 'react'
 import styled from 'styled-components'
-import {Tooltip, TooltipReference} from '@theatre/studio/uiComponents/Tooltip'
+import {
+  Tooltip,
+  TooltipReference,
+  useTooltipState,
+} from '@theatre/studio/uiComponents/Tooltip'
 import type {ButtonProps} from 'reakit'
-import {useTooltipState} from 'reakit'
 import {Button} from 'reakit'
 
 export const TheButton = styled(TooltipReference)`
@@ -44,20 +47,19 @@ const ToolbarIconButton: React.FC<
     icon: ReactElement
     label: string
   }
-> = (props) => {
+> = ({label, icon, ...props}) => {
   const tooltip = useTooltipState()
   return (
     <>
       <TheButton
         {...tooltip}
         forwardedAs={Button}
-        aria-label={props.label}
+        aria-label={label}
         onClick={props.onClick}
-        className={props.className}
       >
-        {props.icon}
+        {icon}
       </TheButton>
-      <Tooltip {...tooltip}>{props.label}</Tooltip>
+      <Tooltip {...tooltip}>{label}</Tooltip>
     </>
   )
 }