variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Housekeeping

Browse source
This commit is contained in:
Aria Minaei 2021-07-22 22:11:26 +02:00
parent ab7ed34f96
commit 2a773b4100
2 changed files with 93 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
View file

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

16
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

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