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} ) }