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

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

@ -15,6 +15,44 @@ import {getSelected} from './useSelected'
import {useVal} from '@theatre/dataverse-react' import {useVal} from '@theatre/dataverse-react'
import IconButton from './elements/IconButton' import IconButton from './elements/IconButton'
import {PortalContext} from 'reakit' 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 UI: VFC = () => {
const [editorObject] = useEditorStore( const [editorObject] = useEditorStore(
@ -37,15 +75,10 @@ const UI: VFC = () => {
return ( return (
<PortalContext.Provider value={wrapper}> <PortalContext.Provider value={wrapper}>
<div <Container ref={setWrapper}>
className="absolute inset-0 z-50 pointer-events-none" <TopRow>
ref={setWrapper} <Toolbar>
> <ToolGroup>
<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 <TransformControlsModeSelect
value={transformControlsMode} value={transformControlsMode}
onChange={(value) => onChange={(value) =>
@ -54,8 +87,8 @@ const UI: VFC = () => {
) )
} }
/> />
</div> </ToolGroup>
<div className="pointer-events-auto"> <ToolGroup>
<TransformControlsSpaceSelect <TransformControlsSpaceSelect
value={transformControlsSpace} value={transformControlsSpace}
onChange={(space) => { onChange={(space) => {
@ -64,8 +97,8 @@ const UI: VFC = () => {
}) })
}} }}
/> />
</div> </ToolGroup>
<div className="pointer-events-auto"> <ToolGroup>
<ViewportShadingSelect <ViewportShadingSelect
value={viewportShading} value={viewportShading}
onChange={(shading) => { onChange={(shading) => {
@ -74,8 +107,8 @@ const UI: VFC = () => {
}) })
}} }}
/> />
</div> </ToolGroup>
<div className="pointer-events-auto"> <ToolGroup>
<IconButton <IconButton
label="Focus on selected" label="Focus on selected"
icon={<RiFocus3Line />} icon={<RiFocus3Line />}
@ -100,8 +133,8 @@ const UI: VFC = () => {
} }
}} }}
/> />
</div> </ToolGroup>
<div className="pointer-events-auto"> <ToolGroup>
<IconButton <IconButton
label="Align object to view" label="Align object to view"
icon={<GiPocketBow />} icon={<GiPocketBow />}
@ -136,15 +169,13 @@ const UI: VFC = () => {
} }
}} }}
/> />
</div> </ToolGroup>
</div> </Toolbar>
<div className="absolute right-0 top-0 -z-10"> <ReferenceWindowContainer>
<ReferenceWindow height={referenceWindowSize} /> <ReferenceWindow height={referenceWindowSize} />
</div> </ReferenceWindowContainer>
</div> </TopRow>
</div> </Container>
</div>
</div>
</PortalContext.Provider> </PortalContext.Provider>
) )
} }