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

Implement studio.globalToolbar

Browse source
This commit is contained in:
Aria Minaei 2021-07-13 16:13:15 +02:00
parent 86547aa4cb
commit 921bc44270
18 changed files with 433 additions and 924 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/plugin-r3f/package.json
View file

@ -43,6 +43,7 @@
"@theatre/core": "workspace:*",
"@theatre/studio": "workspace:*",
"lodash-es": "^4.17.21",
"polished": "^4.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",

19
packages/plugin-r3f/src/components/Editor.tsx
View file

@ -6,11 +6,10 @@ import {useEditorStore} from '../store'
import {OrbitControls} from '@react-three/drei'
import shallow from 'zustand/shallow'
import root from 'react-shadow/styled-components'
import Toolbar from './Toolbar/Toolbar'
import ProxyManager from './ProxyManager'
import studio from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
import styled, {createGlobalStyle} from 'styled-components'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
const GlobalStyle = createGlobalStyle`
:host {
@ -52,12 +51,13 @@ const EditorScene = () => {
return (
<>
{showGrid && <gridHelper args={[1000, 1000, 0x444444, 0x888888]} />}
{showGrid && <gridHelper args={[20, 20, '#6e6e6e', '#4a4b4b']} />}
{showAxes && <axesHelper args={[500]} />}
{/* @ts-ignore */}
<OrbitControls ref={orbitControlsRef} enableDamping={false} />
<primitive object={helpersRoot}></primitive>
<ProxyManager orbitControlsRef={orbitControlsRef} />
<color attach="background" args={[0.24, 0.24, 0.24]} />
</>
)
}
@ -106,9 +106,11 @@ const Editor: VFC = () => {
return (
<root.div>
<StyleSheetManager disableVendorPrefixes>
<>
<GlobalStyle />
<Wrapper id="theatre-plugin-r3f-root" visible={true}>
<Toolbar />
{/* <Toolbar /> */}
{sceneSnapshot ? (
<>
<CanvasWrapper>
@ -120,8 +122,11 @@ const Editor: VFC = () => {
gl.setClearColor('white')
}}
shadowMap
pixelRatio={window.devicePixelRatio}
onPointerMissed={() => studio.__experimental_setSelection([])}
dpr={[1, 2]}
fog={'red'}
onPointerMissed={() =>
studio.__experimental_setSelection([])
}
>
<EditorScene />
</Canvas>
@ -129,6 +134,8 @@ const Editor: VFC = () => {
</>
) : null}
</Wrapper>
</>
</StyleSheetManager>
</root.div>
)
}

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

@ -1,5 +1,4 @@
import type {VFC} from 'react'
import {useState} from 'react'
import React from 'react'
import TransformControlsModeSelect from './TransformControlsModeSelect'
import {useEditorStore} from '../../store'
@ -13,35 +12,8 @@ import studio from '@theatre/studio'
import {getSelected} from '../useSelected'
import {useVal} from '@theatre/dataverse-react'
import IconButton from './utils/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 Tools = styled.div`
display: flex;
gap: 1rem;
`
const ToolGroup = styled.div`
pointer-events: auto;
`
@ -59,15 +31,10 @@ const Toolbar: VFC = () => {
const viewportShading =
useVal(editorObject?.props.viewport.shading) ?? 'rendered'
const [wrapper, setWrapper] = useState<null | HTMLDivElement>(null)
if (!editorObject) return <></>
return (
<PortalContext.Provider value={wrapper}>
<Container ref={setWrapper}>
<TopRow>
<Tools>
<>
<ToolGroup>
<TransformControlsModeSelect
value={transformControlsMode}
@ -130,8 +97,7 @@ const Toolbar: VFC = () => {
icon={<GiPocketBow />}
onClick={() => {
const camera = (
useEditorStore.getState().orbitControlsRef
?.current as $FixMe
useEditorStore.getState().orbitControlsRef?.current as $FixMe
)?.object
const selected = getSelected()
@ -160,10 +126,7 @@ const Toolbar: VFC = () => {
}}
/>
</ToolGroup>
</Tools>
</TopRow>
</Container>
</PortalContext.Provider>
</>
)
}

46
packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
View file

@ -13,42 +13,38 @@ interface OptionButtonProps<Option> {
onClick: () => void
}
const _TooltipRef = styled(TooltipReference)<{selected: boolean}>`
const TheButton = styled(TooltipReference)<{selected: boolean}>`
display: flex;
position: relative;
align-items: center;
justify-content: center;
vertical-align: middle;
width: auto;
font-size: 0.875rem;
line-height: 1.25rem;
font-size: 11px;
line-height: 1.25em;
font-weight: 600;
height: 1.75rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
border: 0 transparent;
height: 24px;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid #22222238;
&:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
&:last-child {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
border-radius: 2px;
&:focus {
outline: none;
}
color: ${({selected}) => (selected ? 'white' : 'rgba(55, 65, 81, 1)')};
background-color: ${({selected}) =>
selected ? 'rgba(6, 95, 70, 1)' : 'rgba(243, 244, 246, 1);'};
color: #e6e6e5;
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: ${({selected}) =>
selected ? 'rgba(6, 78, 59, 1)' : 'rgba(229, 231, 235, 1);'};
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
&.selected,
&.selected:hover {
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
`
@ -62,15 +58,16 @@ function OptionButton<Option>({
const tooltip = useTooltipState()
return (
<>
<_TooltipRef
<TheButton
{...tooltip}
forwardedAs={Button}
selected={option === value}
className={option === value ? 'selected' : undefined}
aria-label={label}
onClick={onClick}
>
{icon}
</_TooltipRef>
</TheButton>
<Tooltip {...tooltip}>{label}</Tooltip>
</>
)
@ -89,6 +86,7 @@ interface CompactModeSelectProps<Option> {
const Container = styled(Group)`
display: flex;
gap: 2px;
`
const CompactModeSelect = <Option extends string | number>({

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

@ -5,45 +5,48 @@ 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 _TooltipRef = styled(TooltipReference)`
const TheButton = styled(TooltipReference)`
display: flex;
position: relative;
align-items: center;
justify-content: center;
vertical-align: middle;
width: auto;
font-size: 0.875rem;
line-height: 1.25rem;
font-size: 11px;
line-height: 1.25em;
font-weight: 600;
height: 1.75rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
height: 24px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #e6e6e5;
background-color: #313131ba;
border: 0 transparent;
&:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
&:focus {
outline: none;
}
color: rgba(55, 65, 81, 1);
background-color: rgba(243, 244, 246, 1);
color: #e6e6e5;
background-color: #313131;
&:hover {
background-color: rgba(229, 231, 235, 1);
background-color: ${transparentize(0.5, '#313131')};
}
border: 0 transparent;
@ -53,14 +56,14 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
const tooltip = useTooltipState()
return (
<>
<_TooltipRef
<TheButton
{...props}
{...tooltip}
forwardedAs={Button}
aria-label={label}
>
{icon}
</_TooltipRef>
</TheButton>
<Tooltip {...tooltip}>{label}</Tooltip>
</>
)

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

@ -1,24 +1,22 @@
import type {VFC} from 'react'
import React from 'react'
import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
import {transparentize} from 'polished'
import type {TooltipProps} from 'reakit'
import styled from 'styled-components'
export {TooltipReference, useTooltipState}
const Container = styled(TooltipImpl)`
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding: 3px 5px;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: 0.125rem;
background-color: rgba(55, 65, 81, 1);
font-size: 11px;
line-height: 1.25em;
border-radius: 2px;
background-color: ${transparentize(0.5, '#313131')};
color: white;
pointer-events: none;
font-weight: 500;
`
export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (

8
packages/plugin-r3f/src/index.tsx
View file

@ -8,8 +8,16 @@ export type {EditorHelperProps} from './components/EditorHelper'
export {default as editable} from './components/editable'
export {bindToCanvas} from './store'
export type {EditableState, BindFunction} from './store'
import studio from '@theatre/studio'
import Toolbar from './components/Toolbar/Toolbar'
if (process.env.NODE_ENV === 'development') {
studio.extend({
id: '@theatre/plugin-r3f',
globalToolbar: {
component: Toolbar,
},
})
const editorRoot = document.createElement('div')
document.body.appendChild(editorRoot)

17
packages/plugin-r3f/src/store.ts
View file

@ -306,6 +306,23 @@ const editorSheetObjectConfig = types.compound({
},
{as: 'menu', label: 'Shading'},
),
mode: types.stringLiteral(
'translate',
{
translate: 'Translate',
rotate: 'Rotate',
scale: 'Scale',
},
{as: 'switch', label: 'Mode'},
),
space: types.stringLiteral(
'world',
{
local: 'Local',
world: 'World',
},
{as: 'switch', label: 'Space'},
),
},
{label: 'Viewport Config'},
),

20
theatre/core/src/propTypes/index.ts
View file

@ -124,6 +124,25 @@ export const compound = <Props extends IValidCompoundProps>(
}
}
export interface PropTypeConfig_CSSRGBA
extends IBasePropType<{r: number; g: number; b: number; a: number}> {
type: 'cssrgba'
default: {r: number; g: number; b: number; a: number}
}
export const rgba = (
defaultValue: {r: number; b: number; g: number; a: number},
extras?: PropTypeConfigExtras,
): PropTypeConfig_CSSRGBA => {
return {
type: 'cssrgba',
valueType: null as $IntentionalAny,
[s]: 'TheatrePropType',
label: extras?.label,
default: defaultValue,
}
}
export interface PropTypeConfig_Enum extends IBasePropType<{}> {
type: 'enum'
cases: Record<string, PropTypeConfig>
@ -135,6 +154,7 @@ export type PropTypeConfig_AllPrimitives =
| PropTypeConfig_Boolean
| PropTypeConfig_String
| PropTypeConfig_StringLiteral<$IntentionalAny>
| PropTypeConfig_CSSRGBA
export type PropTypeConfig =
| PropTypeConfig_AllPrimitives

2
theatre/package.json
View file

@ -63,7 +63,6 @@
"json-touch-patch": "^0.11.2",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"microbundle": "^0.13.0",
"nanoid": "^3.1.23",
"npm-run-all": "^4.1.5",
"null-loader": "^4.0.1",
@ -77,6 +76,7 @@
"react-shadow": "^19.0.2",
"react-use": "^17.2.4",
"react-use-gesture": "^9.1.3",
"reakit": "^1.3.8",
"redux": "^3.7.2",
"redux-actions": "^2.6.5",
"rimraf": "^3.0.2",

25
theatre/studio/src/Studio.ts
View file

@ -9,7 +9,7 @@ import type {
ITransactionPrivateApi,
} from './StudioStore/StudioStore'
import StudioStore from './StudioStore/StudioStore'
import type {IStudio} from './TheatreStudio'
import type {IExtension, IStudio} from './TheatreStudio'
import TheatreStudio from './TheatreStudio'
import {nanoid} from 'nanoid/non-secure'
import type Project from '@theatre/core/projects/Project'
@ -30,6 +30,11 @@ export class Studio {
private readonly _store = new StudioStore()
private _corePrivateApi: typeof privateAPI | undefined
private _extensions: Atom<{byId: Record<string, IExtension>}> = new Atom({
byId: {},
})
readonly extensionsP = this._extensions.pointer.byId
constructor() {
this.address = {studioId: nanoid(10)}
this.publicApi = new TheatreStudio(this)
@ -90,4 +95,22 @@ export class Studio {
get corePrivateAPI() {
return this._corePrivateApi
}
extend(extension: IExtension) {
if (!extension || typeof extension !== 'object') {
throw new Error(`Extensions must be JS objects`)
}
if (typeof extension.id !== 'string') {
throw new Error(`extension.id must be a string`)
}
if (this._extensions.getState().byId[extension.id]) {
throw new Error(
`An extension with the id of ${extension.id} already exists`,
)
}
this._extensions.setIn(['byId', extension.id], extension)
}
}

35
theatre/studio/src/TheatreStudio.ts
View file

@ -3,7 +3,7 @@ import studioTicker from '@theatre/studio/studioTicker'
import type {IDerivation, Pointer} from '@theatre/dataverse'
import {prism} from '@theatre/dataverse'
import SimpleCache from '@theatre/shared/utils/SimpleCache'
import type {VoidFn} from '@theatre/shared/utils/types'
import type {$IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
import type {IScrub} from '@theatre/studio/Scrub'
import type {Studio} from '@theatre/studio/Studio'
@ -11,12 +11,39 @@ import {isSheetObjectPublicAPI} from '@theatre/shared/instanceTypes'
import {getOutlineSelection} from './selectors'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import getStudio from './getStudio'
import type React from 'react'
import type {
PropTypeConfig_Boolean,
PropTypeConfig_Compound,
} from '@theatre/core/propTypes'
export interface ITransactionAPI {
set<V>(pointer: Pointer<V>, value: V): void
unset<V>(pointer: Pointer<V>): void
}
export interface IPanelType<DataType extends PropTypeConfig_Compound<{}>> {
sheetName: string
dataType: DataType
component: React.ComponentType<{
id: string
object: ISheetObject<
PropTypeConfig_Compound<{
visible: PropTypeConfig_Boolean
data: DataType
}>
>
}>
}
export type IExtension = {
id: string
globalToolbar?: {
component: React.ComponentType<{}>
}
panes?: Record<string, IPanelType<$IntentionalAny>>
}
export interface IStudio {
readonly ui: {
show(): void
@ -34,6 +61,8 @@ export interface IStudio {
): VoidFunction
readonly selection: Array<ISheetObject>
extend(extension: IExtension): void
}
export default class TheatreStudio implements IStudio {
@ -62,6 +91,10 @@ export default class TheatreStudio implements IStudio {
*/
constructor(internals: Studio) {}
extend(extension: IExtension): void {
getStudio().extend(extension)
}
transaction(fn: (api: ITransactionAPI) => void): void {
return getStudio().transaction(({set, unset}) => {
return fn({set, unset})

7
theatre/studio/src/UI.ts
View file

@ -1,4 +1,4 @@
import UIRootWrapper from '@theatre/studio/UIRoot/UIRootWrapper'
import UIRoot from '@theatre/studio/UIRoot/UIRoot'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import React from 'react'
import ReactDOM from 'react-dom'
@ -54,10 +54,7 @@ export default class UI {
this._renderTimeout = undefined
this._documentBodyUIIsRenderedIn = document.body
this._documentBodyUIIsRenderedIn.appendChild(this.containerEl)
ReactDOM.render(
React.createElement(UIRootWrapper, {studio: this.studio}),
this.containerShadow,
)
ReactDOM.render(React.createElement(UIRoot), this.containerShadow)
}
this._renderTimeout = setTimeout(renderCallback, 10)
}

34
theatre/studio/src/UIRoot/UIRoot.tsx
View file

@ -1,13 +1,15 @@
import getStudio from '@theatre/studio/getStudio'
import type {Studio} from '@theatre/studio/Studio'
import {usePrism} from '@theatre/dataverse-react'
import {val} from '@theatre/dataverse'
import React from 'react'
import {createGlobalStyle, StyleSheetManager} from 'styled-components'
import EnsureProjectsDontHaveErrors from './EnsureProjectsDontHaveErrors'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import PanelsRoot from './PanelsRoot'
import ProvideTheme from './ProvideTheme'
import TheTrigger from './TheTrigger'
import GlobalToolbar from '@theatre/studio/toolbars/GlobalToolbar/GlobalToolbar'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {PortalContext} from 'reakit'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
const GlobalStyle = createGlobalStyle`
:host {
@ -28,13 +30,28 @@ const GlobalStyle = createGlobalStyle`
}
`
export default function UIRoot({studio}: {studio: Studio}) {
const Container = styled.div`
z-index: 50;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
pointer-events: none;
`
export default function UIRoot() {
const studio = getStudio()
const [containerRef, container] = useRefAndState<HTMLDivElement>(
undefined as $IntentionalAny,
)
const inside = usePrism(() => {
const visiblityState = val(studio.atomP.ahistoric.visibilityState)
const initialised = val(studio.atomP.ephemeral.initialised)
const shouldShowTrigger = visiblityState === 'onlyTriggerIsVisible'
const shouldShowPanels = visiblityState === 'everythingIsVisible'
const shouldShowGlobalToolbar = visiblityState !== 'everythingIsHidden'
return !initialised ? null : (
<StyleSheetManager
@ -44,13 +61,18 @@ export default function UIRoot({studio}: {studio: Studio}) {
<>
<GlobalStyle />
<ProvideTheme>
<PortalContext.Provider value={container}>
<Container ref={containerRef}>
{shouldShowGlobalToolbar && <GlobalToolbar />}
{shouldShowTrigger && <TheTrigger />}
{shouldShowPanels && <PanelsRoot />}
</Container>
</PortalContext.Provider>
</ProvideTheme>
</>
</StyleSheetManager>
)
}, [studio])
}, [studio, containerRef, container])
return <EnsureProjectsDontHaveErrors>{inside}</EnsureProjectsDontHaveErrors>
return inside
}

28
theatre/studio/src/UIRoot/UIRootWrapper.tsx
View file

@ -1,28 +0,0 @@
import type {Studio} from '@theatre/studio/Studio'
import React from 'react'
import UIRoot from './UIRoot'
export default class UIRootWrapper extends React.Component<{
studio: Studio
}> {
state = {UIRoot}
componentDidMount() {
const self = this
if (
process.env.NODE_ENV !== 'production' &&
typeof module === 'object' &&
module &&
module.hot
) {
module.hot.accept('./UIRoot', () => {
const UIRoot = require('./UIRoot').default
self.setState({UIRoot})
})
}
}
render() {
const UIRoot = this.state.UIRoot
const rootEl = <UIRoot studio={this.props.studio} />
return rootEl
}
}

1
theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx
View file

@ -68,6 +68,7 @@ const propEditorByPropType: {
enum: () => <></>,
boolean: BooleanPropEditor,
stringLiteral: StringLiteralPropEditor,
cssrgba: () => <></>,
}
const DeterminePropEditor: React.FC<{

35
theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx Normal file
View file

@ -0,0 +1,35 @@
import {useVal} from '@theatre/dataverse-react'
import getStudio from '@theatre/studio/getStudio'
import React from 'react'
import styled from 'styled-components'
const Container = styled.div`
position: fixed;
z-index: 50;
top: 12px;
right: 12px;
left: 12px;
pointer-events: none;
display: flex;
gap: 1rem;
`
const GlobalToolbar: React.FC<{}> = (props) => {
const groups: Array<React.ReactNode> = []
const extensions = useVal(getStudio().extensionsP)
for (const [, extension] of Object.entries(extensions)) {
if (extension.globalToolbar) {
groups.push(
<extension.globalToolbar.component
key={'extensionToolbar-' + extension.id}
/>,
)
}
}
return <Container>{groups}</Container>
}
export default GlobalToolbar

781
yarn.lock
View file

File diff suppressed because it is too large Load diff