diff --git a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
index 47a08d5..b562077 100644
--- a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
+++ b/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,106 +34,94 @@ const Toolbar: VFC = () => {
return (
<>
-
- {
- studio.createPane('snapshotEditor')
- }}
- icon={}
- label="Create snapshot"
- />
-
-
-
- studio.transaction(({set}) =>
- set(editorObject!.props.transformControls.mode, value),
+ {
+ studio.createPane('snapshotEditor')
+ }}
+ icon={}
+ label="Create snapshot"
+ />
+
+ studio.transaction(({set}) =>
+ set(editorObject!.props.transformControls.mode, value),
+ )
+ }
+ />
+ {
+ studio.transaction(({set}) => {
+ set(editorObject.props.transformControls.space, space)
+ })
+ }}
+ />
+ {
+ studio.transaction(({set}) => {
+ set(editorObject.props.viewport.shading, shading)
+ })
+ }}
+ />
+
+ }
+ onClick={() => {
+ const orbitControls =
+ useEditorStore.getState().orbitControlsRef?.current
+ const selected = getSelected()
+
+ let focusObject
+
+ if (selected) {
+ focusObject =
+ useEditorStore.getState().editablesSnapshot![selected].proxyObject
+ }
+
+ if (orbitControls && focusObject) {
+ focusObject.getWorldPosition(
+ // @ts-ignore TODO
+ orbitControls.target as Vector3,
)
}
- />
-
-
- {
- studio.transaction(({set}) => {
- set(editorObject.props.transformControls.space, space)
- })
- }}
- />
-
-
- {
- studio.transaction(({set}) => {
- set(editorObject.props.viewport.shading, shading)
- })
- }}
- />
-
-
- }
- onClick={() => {
- const orbitControls =
- useEditorStore.getState().orbitControlsRef?.current
- const selected = getSelected()
+ }}
+ />
- let focusObject
+ }
+ onClick={() => {
+ const camera = (
+ useEditorStore.getState().orbitControlsRef?.current as $FixMe
+ )?.object
- if (selected) {
- focusObject =
- useEditorStore.getState().editablesSnapshot![selected]
- .proxyObject
+ const selected = getSelected()
+
+ let proxyObject
+
+ if (selected) {
+ proxyObject =
+ useEditorStore.getState().editablesSnapshot![selected].proxyObject
+
+ if (proxyObject && camera) {
+ const direction = new Vector3()
+ const position = camera.position.clone()
+
+ camera.getWorldDirection(direction)
+ proxyObject.position.set(0, 0, 0)
+ proxyObject.lookAt(direction)
+
+ proxyObject.parent!.worldToLocal(position)
+ proxyObject.position.copy(position)
+
+ proxyObject.updateMatrix()
}
-
- if (orbitControls && focusObject) {
- focusObject.getWorldPosition(
- // @ts-ignore TODO
- orbitControls.target as Vector3,
- )
- }
- }}
- />
-
-
- }
- onClick={() => {
- const camera = (
- useEditorStore.getState().orbitControlsRef?.current as $FixMe
- )?.object
-
- const selected = getSelected()
-
- let proxyObject
-
- if (selected) {
- proxyObject =
- useEditorStore.getState().editablesSnapshot![selected]
- .proxyObject
-
- if (proxyObject && camera) {
- const direction = new Vector3()
- const position = camera.position.clone()
-
- camera.getWorldDirection(direction)
- proxyObject.position.set(0, 0, 0)
- proxyObject.lookAt(direction)
-
- proxyObject.parent!.worldToLocal(position)
- proxyObject.position.copy(position)
-
- proxyObject.updateMatrix()
- }
- }
- }}
- />
-
+ }
+ }}
+ />
>
)
}
diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
index ae6eba9..90c4fc9 100644
--- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
+++ b/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 (
<>
- {props.icon}
+ {icon}
- {props.label}
+ {label}
>
)
}