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 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,15 +75,10 @@ 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">
<Container ref={setWrapper}>
<TopRow>
<Toolbar>
<ToolGroup>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
@ -54,8 +87,8 @@ const UI: VFC = () => {
)
}
/>
</div>
<div className="pointer-events-auto">
</ToolGroup>
<ToolGroup>
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
@ -64,8 +97,8 @@ const UI: VFC = () => {
})
}}
/>
</div>
<div className="pointer-events-auto">
</ToolGroup>
<ToolGroup>
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
@ -74,8 +107,8 @@ const UI: VFC = () => {
})
}}
/>
</div>
<div className="pointer-events-auto">
</ToolGroup>
<ToolGroup>
<IconButton
label="Focus on selected"
icon={<RiFocus3Line />}
@ -100,8 +133,8 @@ const UI: VFC = () => {
}
}}
/>
</div>
<div className="pointer-events-auto">
</ToolGroup>
<ToolGroup>
<IconButton
label="Align object to view"
icon={<GiPocketBow />}
@ -136,15 +169,13 @@ const UI: VFC = () => {
}
}}
/>
</div>
</div>
<div className="absolute right-0 top-0 -z-10">
</ToolGroup>
</Toolbar>
<ReferenceWindowContainer>
<ReferenceWindow height={referenceWindowSize} />
</div>
</div>
</div>
</div>
</div>
</ReferenceWindowContainer>
</TopRow>
</Container>
</PortalContext.Provider>
)
}