diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
index 595a6b1..d916b8d 100644
--- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
@@ -3,17 +3,14 @@ import type {PanelPosition} from '@theatre/studio/store/types'
import type {PaneInstance} from '@theatre/studio/TheatreStudio'
import React, {useCallback} from 'react'
import styled from 'styled-components'
-import {
- TitleBar,
- F2 as F2Impl,
-} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
+import {F2 as F2Impl, TitleBar} from './common'
import BasePanel from './BasePanel'
import PanelDragZone from './PanelDragZone'
import PanelWrapper from './PanelWrapper'
import {ErrorBoundary} from 'react-error-boundary'
import {IoClose} from 'react-icons/all'
import getStudio from '@theatre/studio/getStudio'
-import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
+import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
const defaultPosition: PanelPosition = {
edges: {
diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx
new file mode 100644
index 0000000..ad05bf8
--- /dev/null
+++ b/theatre/studio/src/panels/BasePanel/common.tsx
@@ -0,0 +1,61 @@
+import {theme} from '@theatre/studio/css'
+import styled from 'styled-components'
+
+export const panelZIndexes = {
+ get outlinePanel() {
+ return 1
+ },
+
+ get propsPanel() {
+ return panelZIndexes.outlinePanel
+ },
+
+ get sequenceEditorPanel() {
+ return this.outlinePanel - 1
+ },
+
+ get toolbar() {
+ return this.outlinePanel + 1
+ },
+
+ get pluginPanes() {
+ return this.sequenceEditorPanel - 1
+ },
+}
+
+export const propsEditorBackground = theme.panel.bg
+
+export const TitleBar_Piece = styled.span`
+ white-space: nowrap;
+`
+
+export const TitleBar_Punctuation = styled.span`
+ white-space: nowrap;
+ color: ${theme.panel.head.punctuation.color};
+`
+
+export const F2 = styled.div`
+ background: ${propsEditorBackground};
+ flex-grow: 1;
+ overflow-y: scroll;
+ padding: 0;
+`
+
+export const titleBarHeight = 20
+
+export const TitleBar = styled.div`
+ height: ${titleBarHeight}px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ position: relative;
+ color: #adadadb3;
+ border-bottom: 1px solid rgb(0 0 0 / 13%);
+ background-color: #25272b;
+ font-size: 10px;
+ font-weight: 500;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+`
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
index d453a4b..d812d72 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
@@ -1,113 +1,70 @@
-import {theme} from '@theatre/studio/css'
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 type {PanelPosition} from '@theatre/studio/store/types/historic'
-import BasePanel from '@theatre/studio/panels/BasePanel/BasePanel'
-import PanelWrapper from '@theatre/studio/panels/BasePanel/PanelWrapper'
-import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
import {isSheetObject} from '@theatre/shared/instanceTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
-import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
+import {
+ panelZIndexes,
+ TitleBar_Punctuation,
+} from '@theatre/studio/panels/BasePanel/common'
-const Container = styled(PanelWrapper)`
- overflow-y: hidden;
- display: flex;
- flex-direction: column;
+const Container = styled.div`
background-color: transparent;
- /* background-color: #282b2ff0; */
- box-shadow: none;
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50px;
+ bottom: 8px;
z-index: ${panelZIndexes.propsPanel};
- &:after {
- position: absolute;
+ &:before {
display: block;
content: ' ';
- left: 0;
- width: 1px;
- bottom: 0;
+ position: absolute;
top: 0;
- /* border-left: 1px solid #3a3a44; */
+ bottom: 0;
+ right: 0;
+ width: 20px;
+ pointer-events: auto;
}
`
-const emptyPanel =
-
-export const titleBarHeight = 20
-
-export const TitleBar = styled.div`
- height: ${titleBarHeight}px;
- box-sizing: border-box;
+const Content = styled.div`
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 320px;
+ overflow-y: hidden;
display: flex;
- align-items: center;
- padding: 0 10px;
- position: relative;
- color: #adadadb3;
- border-bottom: 1px solid rgb(0 0 0 / 13%);
- background-color: #25272b;
- font-size: 10px;
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ flex-direction: column;
+ transform: translateX(100%);
+ pointer-events: auto;
+
+ ${Container}:hover & {
+ transform: translateX(0);
+ }
`
-const F1_1 = styled.div`
+const Title = styled.div`
+ width: 100%;
+`
+
+const Header = styled.div`
display: none;
`
-export const TitleBar_Piece = styled.span`
- white-space: nowrap;
-`
-
-export const TitleBar_Punctuation = styled.span`
- white-space: nowrap;
- color: ${theme.panel.head.punctuation.color};
-`
-
-export const propsEditorBackground = theme.panel.bg
-
-export const F2 = styled.div`
- background: ${propsEditorBackground};
+const Body = styled.div`
flex-grow: 1;
overflow-y: scroll;
padding: 0;
`
-const F2_2 = styled.div`
- background: transparent;
- flex-grow: 1;
- overflow-y: scroll;
- padding: 6px 0 0 0;
-`
-
-const defaultPosition: PanelPosition = {
- edges: {
- left: {from: 'screenRight', distance: 0.4},
- right: {from: 'screenRight', distance: 0.2},
- top: {from: 'screenTop', distance: 0.2},
- bottom: {from: 'screenBottom', distance: 0.2},
- },
-}
-
-const minDims = {width: 300, height: 300}
-
const ObjectEditorPanel: React.FC<{}> = (props) => {
- return (
-
-
-
- )
-}
-
-const Content: React.FC<{}> = () => {
return usePrism(() => {
const selection = getOutlineSelection()
@@ -119,24 +76,26 @@ const Content: React.FC<{}> = () => {
return (
-
-
- {obj.sheet.address.sheetId}{' '}
- {':'}
- {obj.sheet.address.sheetInstanceId}{' '}
- {'>'}
- {obj.address.objectKey}
-
-
-
-
-
+
+
+
+ {obj.sheet.address.sheetId}{' '}
+ {':'}
+ {obj.sheet.address.sheetInstanceId}{' '}
+ {'>'}
+ {obj.address.objectKey}
+
+
+
+
+
+
)
}, [])
diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
index 6e0ee32..682eb75 100644
--- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
-import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
+import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import ProjectsList from './ProjectsList/ProjectsList'
const Container = styled.div`
@@ -49,7 +49,7 @@ const Header = styled.div`
display: none;
`
-const F2 = styled.div`
+const Body = styled.div`
flex-grow: 1;
overflow-y: scroll;
padding: 0;
@@ -62,9 +62,9 @@ const OutlinePanel: React.FC<{}> = (props) => {
-
+
-
+
)
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index 0ba1ebb..352eaae 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
@@ -5,11 +5,7 @@ import type {Pointer} from '@theatre/dataverse'
import {prism, val} from '@theatre/dataverse'
import React from 'react'
import styled from 'styled-components'
-import {
- TitleBar,
- TitleBar_Piece,
- TitleBar_Punctuation,
-} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
+
import DopeSheet from './DopeSheet/DopeSheet'
import GraphEditor from './GraphEditor/GraphEditor'
import type {PanelDims, SequenceEditorPanelLayout} from './layout/layout'
@@ -25,7 +21,12 @@ import type Sheet from '@theatre/core/sheets/Sheet'
import {isSheet, isSheetObject} from '@theatre/shared/instanceTypes'
import {uniq} from 'lodash-es'
import GraphEditorToggle from './GraphEditorToggle'
-import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
+import {
+ panelZIndexes,
+ TitleBar,
+ TitleBar_Piece,
+ TitleBar_Punctuation,
+} from '@theatre/studio/panels/BasePanel/common'
const Container = styled(PanelWrapper)`
z-index: ${panelZIndexes.sequenceEditorPanel};
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
index cac9433..76ced1e 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
+++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
@@ -13,7 +13,7 @@ import type {SequenceTrackId} from '@theatre/shared/utils/ids'
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
import {prism, val} from '@theatre/dataverse'
import logger from '@theatre/shared/logger'
-import {titleBarHeight} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
+import {titleBarHeight} from '@theatre/studio/panels/BasePanel/common'
export type SequenceEditorTree_Row = {
type: Type
diff --git a/theatre/studio/src/panels/panelZIndexes.tsx b/theatre/studio/src/panels/panelZIndexes.tsx
deleted file mode 100644
index f99c583..0000000
--- a/theatre/studio/src/panels/panelZIndexes.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export const panelZIndexes = {
- get outlinePanel() {
- return 1
- },
-
- get propsPanel() {
- return panelZIndexes.outlinePanel
- },
-
- get sequenceEditorPanel() {
- return this.outlinePanel - 1
- },
-
- get toolbar() {
- return this.outlinePanel + 1
- },
-
- get pluginPanes() {
- return this.sequenceEditorPanel - 1
- },
-}
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
index 1523851..60d86ba 100644
--- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
+++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
@@ -1,6 +1,6 @@
import {useVal} from '@theatre/dataverse-react'
import getStudio from '@theatre/studio/getStudio'
-import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
+import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import React from 'react'
import styled from 'styled-components'