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

Started implementing ProjectDetails

Browse source
This commit is contained in:
Aria Minaei 2021-08-09 15:23:14 +02:00
parent d38070025c
commit 49c97ebfcf
4 changed files with 85 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
theatre/studio/src/UIRoot/PanelsRoot.tsx
View file

@ -1,5 +1,5 @@
import OutlinePanel from '@theatre/studio/panels/OutlinePanel/OutlinePanel' import OutlinePanel from '@theatre/studio/panels/OutlinePanel/OutlinePanel'
import ObjectEditorPanel from '@theatre/studio/panels/DetailPanel/ObjectEditorPanel' import DetailPanel from '@theatre/studio/panels/DetailPanel/DetailPanel'
import React from 'react' import React from 'react'
import getStudio from '@theatre/studio/getStudio' import getStudio from '@theatre/studio/getStudio'
import {useVal} from '@theatre/dataverse-react' import {useVal} from '@theatre/dataverse-react'
@ -18,7 +18,7 @@ const PanelsRoot: React.FC = () => {
<> <>
{paneEls} {paneEls}
<OutlinePanel /> <OutlinePanel />
<ObjectEditorPanel /> <DetailPanel />
<SequenceEditorPanel /> <SequenceEditorPanel />
</> </>
) )

87
theatre/studio/src/panels/DetailPanel/ObjectEditorPanel.tsx → theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
View file

@ -1,17 +1,16 @@
import {getOutlineSelection} from '@theatre/studio/selectors' import {getOutlineSelection} from '@theatre/studio/selectors'
import {usePrism} from '@theatre/dataverse-react' import {usePrism} from '@theatre/dataverse-react'
import {prism} from '@theatre/dataverse'
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import DeterminePropEditor from './propEditors/DeterminePropEditor' import {isProject, isSheetObject} from '@theatre/shared/instanceTypes'
import {isSheetObject} from '@theatre/shared/instanceTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import { import {
panelZIndexes, panelZIndexes,
TitleBar_Piece, TitleBar_Piece,
TitleBar_Punctuation, TitleBar_Punctuation,
} from '@theatre/studio/panels/BasePanel/common' } from '@theatre/studio/panels/BasePanel/common'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import ObjectDetails from './ObjectDetails'
import ProjectDetails from './ProjectDetails'
const Container = styled.div` const Container = styled.div`
background-color: transparent; background-color: transparent;
@ -97,47 +96,57 @@ const Body = styled.div`
user-select: none; user-select: none;
` `
const ObjectEditorPanel: React.FC<{}> = (props) => { const DetailPanel: React.FC<{}> = (props) => {
return usePrism(() => { return usePrism(() => {
const selection = getOutlineSelection() const selection = getOutlineSelection()
const obj = selection.find((s): s is SheetObject => isSheetObject(s)) const obj = selection.find(isSheetObject)
if (obj) {
return (
<Container>
<Content>
<Header>
<Title
title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}`}
>
<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
if (!obj) return <></> <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>
{obj.sheet.address.sheetInstanceId}{' '}
</TitleBar_Piece>
const key = prism.memo('key', () => JSON.stringify(obj.address), [obj]) <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
</Title>
</Header>
<Body>
<ObjectDetails objects={[obj]} />
</Body>
</Content>
</Container>
)
}
const project = selection.find(isProject)
if (project) {
return (
<Container>
<Content>
<Header>
<Title title={`${project.address.projectId}`}>
<TitleBar_Piece>{project.address.projectId} </TitleBar_Piece>
</Title>
</Header>
<Body>
<ProjectDetails projects={[project]} />
</Body>
</Content>
</Container>
)
}
return ( return <></>
<Container>
<Content>
<Header>
<Title
title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}`}
>
<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>
{obj.sheet.address.sheetInstanceId}{' '}
</TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
</Title>
</Header>
<Body>
<DeterminePropEditor
key={key}
obj={obj}
pointerToProp={obj.propsP}
propConfig={obj.template.config}
depth={1}
/>
</Body>
</Content>
</Container>
)
}, []) }, [])
} }
export default ObjectEditorPanel export default DetailPanel

23
theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx Normal file
View file

@ -0,0 +1,23 @@
import React, {useMemo} from 'react'
import DeterminePropEditor from './propEditors/DeterminePropEditor'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
const ObjectDetails: React.FC<{
objects: SheetObject[]
}> = ({objects}) => {
// @todo add support for multiple objects (it would show their common props)
const obj = objects[0]
const key = useMemo(() => JSON.stringify(obj.address), [obj])
return (
<DeterminePropEditor
key={key}
obj={obj}
pointerToProp={obj.propsP}
propConfig={obj.template.config}
depth={1}
/>
)
}
export default ObjectDetails

12
theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx Normal file
View file

@ -0,0 +1,12 @@
import type Project from '@theatre/core/projects/Project'
import React from 'react'
const ProjectDetails: React.FC<{
projects: Project[]
}> = ({projects}) => {
const project = projects[0]
return <div>editing project {project.address.projectId}</div>
}
export default ProjectDetails