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

Migrated more of r3f to styled-components

Browse source
This commit is contained in:
Aria Minaei 2021-07-04 19:49:36 +02:00
parent b109dca19b
commit 596b7e9d81
1 changed files with 138 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

245
packages/plugin-r3f/src/components/UI.tsx
View file

@ -15,6 +15,44 @@ import {getSelected} from './useSelected'
import {useVal} from '@theatre/dataverse-react'
import IconButton from './elements/IconButton'
import {PortalContext} from 'reakit'
import styled from 'styled-components'
const Container = styled.div`
z-index: 50;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
pointer-events: none;
`
const TopRow = styled.div`
position: relative;
margin: 1.25rem;
height: 100%;
display: flex;
flex: 1 1 0%;
justify-content: space-between;
align-items: flex-start;
`
const Toolbar = styled.div`
display: flex;
gap: 1rem;
`
const ToolGroup = styled.div`
pointer-events: auto;
`
const ReferenceWindowContainer = styled.div`
z-index: -10;
right: 0px;
top: 0px;
position: absolute;
`
const UI: VFC = () => {
const [editorObject] = useEditorStore(
@ -37,114 +75,107 @@ const UI: VFC = () => {
return (
<PortalContext.Provider value={wrapper}>
<div
className="absolute inset-0 z-50 pointer-events-none"
ref={setWrapper}
>
<div className="flex h-full">
<div className="relative flex-1 m-5">
<div className="flex items-start justify-between">
<div className="flex gap-4">
<div className="pointer-events-auto">
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControlsMode, value),
)
<Container ref={setWrapper}>
<TopRow>
<Toolbar>
<ToolGroup>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControlsMode, value),
)
}
/>
</ToolGroup>
<ToolGroup>
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControlsSpace, space)
})
}}
/>
</ToolGroup>
<ToolGroup>
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewportShading, shading)
})
}}
/>
</ToolGroup>
<ToolGroup>
<IconButton
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>
<IconButton
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()
}
/>
</div>
<div className="pointer-events-auto">
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControlsSpace, space)
})
}}
/>
</div>
<div className="pointer-events-auto">
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewportShading, shading)
})
}}
/>
</div>
<div className="pointer-events-auto">
<IconButton
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,
)
}
}}
/>
</div>
<div className="pointer-events-auto">
<IconButton
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()
}
}
}}
/>
</div>
</div>
<div className="absolute right-0 top-0 -z-10">
<ReferenceWindow height={referenceWindowSize} />
</div>
</div>
</div>
</div>
</div>
}
}}
/>
</ToolGroup>
</Toolbar>
<ReferenceWindowContainer>
<ReferenceWindow height={referenceWindowSize} />
</ReferenceWindowContainer>
</TopRow>
</Container>
</PortalContext.Provider>
)
}