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

184
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 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 (
<>
<ToolGroup>
<ToolbarIconButton
onClick={() => {
studio.createPane('snapshotEditor')
}}
icon={<IoCameraOutline />}
label="Create snapshot"
/>
</ToolGroup>
<ToolGroup>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControls.mode, value),
<ToolbarIconButton
onClick={() => {
studio.createPane('snapshotEditor')
}}
icon={<IoCameraOutline />}
label="Create snapshot"
/>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControls.mode, value),
)
}
/>
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControls.space, space)
})
}}
/>
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewport.shading, shading)
})
}}
/>
<ToolbarIconButton
label="Focus on selected"
icon={<RiFocus3Line />}
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,
)
}
/>
</ToolGroup>
<ToolGroup>
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControls.space, space)
})
}}
/>
</ToolGroup>
<ToolGroup>
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewport.shading, shading)
})
}}
/>
</ToolGroup>
<ToolGroup>
<ToolbarIconButton
label="Focus on selected"
icon={<RiFocus3Line />}
onClick={() => {
const orbitControls =
useEditorStore.getState().orbitControlsRef?.current
const selected = getSelected()
}}
/>
let focusObject
<ToolbarIconButton
label="Align object to view"
icon={<GiPocketBow />}
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,
)
}
}}
/>
</ToolGroup>
<ToolGroup>
<ToolbarIconButton
label="Align object to view"
icon={<GiPocketBow />}
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()
}
}
}}
/>
</ToolGroup>
}
}}
/>
</>
)
}

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

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