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

Implement ToolbarIconButton

Browse source
This commit is contained in:
Aria Minaei 2021-07-22 21:26:34 +02:00
parent a11918fc20
commit 20603afd40
8 changed files with 147 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

76
packages/plugin-r3f/src/components/SnapshotEditor.tsx
View file

@ -7,12 +7,10 @@ import {OrbitControls} from '@react-three/drei'
import shallow from 'zustand/shallow'
import root from 'react-shadow/styled-components'
import ProxyManager from './ProxyManager'
import studio from '@theatre/studio'
import studio, {ToolbarIconButton} from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import IconButton from './Toolbar/utils/IconButton'
import {BiRefresh} from 'react-icons/bi'
import {PortalContext} from 'reakit'
import {IoCameraReverseOutline} from 'react-icons/all'
const GlobalStyle = createGlobalStyle`
:host {
@ -134,42 +132,42 @@ const SnapshotEditor: React.FC<{}> = () => {
<StyleSheetManager disableVendorPrefixes>
<>
<GlobalStyle />
<PortalContext.Provider value={overlay}>
<Wrapper>
<Overlay ref={setOverlay}>
<Tools>
<IconButton
icon={<BiRefresh />}
label="Refresh Snapshot"
onClick={createSnapshot}
></IconButton>
</Tools>
</Overlay>
{/* <PortalContext.Provider value={overlay}> */}
<Wrapper>
<Overlay ref={setOverlay}>
<Tools>
<ToolbarIconButton
icon={<IoCameraReverseOutline />}
label="Refresh Snapshot"
onClick={createSnapshot}
></ToolbarIconButton>
</Tools>
</Overlay>
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
// @ts-ignore
colorManagement
camera={initialEditorCamera}
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadowMap
dpr={[1, 2]}
fog={'red'}
onPointerMissed={() =>
studio.__experimental_setSelection([])
}
>
<EditorScene />
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
</PortalContext.Provider>
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
// @ts-ignore
colorManagement
camera={initialEditorCamera}
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadowMap
dpr={[1, 2]}
fog={'red'}
onPointerMissed={() =>
studio.__experimental_setSelection([])
}
>
<EditorScene />
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
{/* </PortalContext.Provider> */}
</>
</StyleSheetManager>
</root.div>

22
packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
View file

@ -1,17 +1,13 @@
import type {VFC} from 'react'
import React from 'react'
import TransformControlsModeSelect from './TransformControlsModeSelect'
import {useEditorStore} from '../../store'
import shallow from 'zustand/shallow'
import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
import ViewportShadingSelect from './ViewportShadingSelect'
import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
import {GiPocketBow, IoCameraOutline} from 'react-icons/all'
import {Vector3} from 'three'
import type {$FixMe} from '@theatre/shared/utils/types'
import studio from '@theatre/studio'
import studio, {ToolbarIconButton} from '@theatre/studio'
import {getSelected} from '../useSelected'
import {usePrism, useVal} from '@theatre/dataverse-react'
import IconButton from './utils/IconButton'
import styled from 'styled-components'
const ToolGroup = styled.div`
@ -40,15 +36,15 @@ const Toolbar: VFC = () => {
return (
<>
<ToolGroup>
<button
<ToolbarIconButton
onClick={() => {
studio.createPane('snapshotEditor')
}}
>
Create snapshot
</button>
icon={<IoCameraOutline />}
label="Create snapshot"
/>
</ToolGroup>
<ToolGroup>
{/* <ToolGroup>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
@ -103,9 +99,9 @@ const Toolbar: VFC = () => {
}
}}
/>
</ToolGroup>
</ToolGroup> */}
<ToolGroup>
<IconButton
<ToolbarIconButton
label="Align object to view"
icon={<GiPocketBow />}
onClick={() => {

73
packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx
View file

@ -1,73 +0,0 @@
import type {ReactElement} from 'react'
import React, {forwardRef} from 'react'
import type {ButtonProps} from 'reakit'
import {Button} from 'reakit'
import type {IconType} from 'react-icons'
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
import styled from 'styled-components'
import {transparentize} from 'polished'
export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
icon: ReactElement<IconType>
label: string
}
const TheButton = styled(TooltipReference)`
display: flex;
position: relative;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: 11px;
line-height: 1.25em;
font-weight: 600;
height: 24px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #e6e6e5;
background-color: #313131ba;
border: 0 transparent;
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
&:focus {
outline: none;
}
color: #e6e6e5;
background-color: #313131;
&:hover {
background-color: ${transparentize(0.5, '#313131')};
}
border: 0 transparent;
`
const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
({label, icon, className, ...props}, ref) => {
const tooltip = useTooltipState()
return (
<>
<TheButton
{...props}
{...tooltip}
forwardedAs={Button}
aria-label={label}
>
{icon}
</TheButton>
<Tooltip {...tooltip}>{label}</Tooltip>
</>
)
},
)
export default IconButton

8
packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx
View file

@ -19,6 +19,8 @@ const Container = styled(TooltipImpl)`
font-weight: 500;
`
export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
<Container {...props} className={className as string} />
)
export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => {
console.log('deprecate tooltip')
return <Container {...props} className={className as string} />
}