From 49c97ebfcf6924dade54f9d4d04720e1bb690db1 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Mon, 9 Aug 2021 15:23:14 +0200 Subject: [PATCH] Started implementing `ProjectDetails` --- theatre/studio/src/UIRoot/PanelsRoot.tsx | 4 +- ...{ObjectEditorPanel.tsx => DetailPanel.tsx} | 87 ++++++++++--------- .../src/panels/DetailPanel/ObjectDetails.tsx | 23 +++++ .../src/panels/DetailPanel/ProjectDetails.tsx | 12 +++ 4 files changed, 85 insertions(+), 41 deletions(-) rename theatre/studio/src/panels/DetailPanel/{ObjectEditorPanel.tsx => DetailPanel.tsx} (54%) create mode 100644 theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx create mode 100644 theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx index 33e76fd..6d13c61 100644 --- a/theatre/studio/src/UIRoot/PanelsRoot.tsx +++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx @@ -1,5 +1,5 @@ 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 getStudio from '@theatre/studio/getStudio' import {useVal} from '@theatre/dataverse-react' @@ -18,7 +18,7 @@ const PanelsRoot: React.FC = () => { <> {paneEls} - + ) diff --git a/theatre/studio/src/panels/DetailPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx similarity index 54% rename from theatre/studio/src/panels/DetailPanel/ObjectEditorPanel.tsx rename to theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 77d7e80..0025fff 100644 --- a/theatre/studio/src/panels/DetailPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -1,17 +1,16 @@ import {getOutlineSelection} from '@theatre/studio/selectors' import {usePrism} from '@theatre/dataverse-react' -import {prism} from '@theatre/dataverse' import React from 'react' import styled from 'styled-components' -import DeterminePropEditor from './propEditors/DeterminePropEditor' -import {isSheetObject} from '@theatre/shared/instanceTypes' -import type SheetObject from '@theatre/core/sheetObjects/SheetObject' +import {isProject, isSheetObject} from '@theatre/shared/instanceTypes' import { panelZIndexes, TitleBar_Piece, TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' +import ObjectDetails from './ObjectDetails' +import ProjectDetails from './ProjectDetails' const Container = styled.div` background-color: transparent; @@ -97,47 +96,57 @@ const Body = styled.div` user-select: none; ` -const ObjectEditorPanel: React.FC<{}> = (props) => { +const DetailPanel: React.FC<{}> = (props) => { return usePrism(() => { const selection = getOutlineSelection() - const obj = selection.find((s): s is SheetObject => isSheetObject(s)) + const obj = selection.find(isSheetObject) + if (obj) { + return ( + + +
+ ${obj.address.objectKey}`} + > + <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> - if (!obj) return <></> + <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> + <TitleBar_Piece> + {obj.sheet.address.sheetInstanceId}{' '} + </TitleBar_Piece> - const key = prism.memo('key', () => JSON.stringify(obj.address), [obj]) + <TitleBar_Punctuation> {'>'} </TitleBar_Punctuation> + <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece> + +
+ + + + + + ) + } + const project = selection.find(isProject) + if (project) { + return ( + + +
+ + <TitleBar_Piece>{project.address.projectId} </TitleBar_Piece> + +
+ + + + + + ) + } - return ( - - -
- ${obj.address.objectKey}`} - > - <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> - - <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> - <TitleBar_Piece> - {obj.sheet.address.sheetInstanceId}{' '} - </TitleBar_Piece> - - <TitleBar_Punctuation> {'>'} </TitleBar_Punctuation> - <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece> - -
- - - - - - ) + return <> }, []) } -export default ObjectEditorPanel +export default DetailPanel diff --git a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx new file mode 100644 index 0000000..b8a1136 --- /dev/null +++ b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx @@ -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 ( + + ) +} + +export default ObjectDetails diff --git a/theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx new file mode 100644 index 0000000..e2c6ab0 --- /dev/null +++ b/theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx @@ -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
editing project {project.address.projectId}
+} + +export default ProjectDetails