Migrated more of r3f to styled-components
This commit is contained in:
Aria Minaei
parent
b109dca19b
commit
596b7e9d81
1 changed files with 138 additions and 107 deletions
|
|
@ -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,114 +75,107 @@ 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">
|
<TransformControlsModeSelect
|
||||||
<div className="relative flex-1 m-5">
|
value={transformControlsMode}
|
||||||
<div className="flex items-start justify-between">
|
onChange={(value) =>
|
||||||
<div className="flex gap-4">
|
studio.transaction(({set}) =>
|
||||||
<div className="pointer-events-auto">
|
set(editorObject!.props.transformControlsMode, value),
|
||||||
<TransformControlsModeSelect
|
)
|
||||||
value={transformControlsMode}
|
}
|
||||||
onChange={(value) =>
|
/>
|
||||||
studio.transaction(({set}) =>
|
</ToolGroup>
|
||||||
set(editorObject!.props.transformControlsMode, value),
|
<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
|
</ToolGroup>
|
||||||
value={transformControlsSpace}
|
</Toolbar>
|
||||||
onChange={(space) => {
|
<ReferenceWindowContainer>
|
||||||
studio.transaction(({set}) => {
|
<ReferenceWindow height={referenceWindowSize} />
|
||||||
set(editorObject.props.transformControlsSpace, space)
|
</ReferenceWindowContainer>
|
||||||
})
|
</TopRow>
|
||||||
}}
|
</Container>
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</PortalContext.Provider>
|
</PortalContext.Provider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue