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