ObjectEditorPanel now autohides

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 {
+import {F2 as F2Impl, TitleBar} from './common'
-  TitleBar,
-  F2 as F2Impl,
-} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 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: {

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;
+`

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)`
+const Container = styled.div`
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
   background-color: transparent;
-  /* background-color: #282b2ff0; */
+  pointer-events: none;
-  box-shadow: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50px;
+  bottom: 8px;
   z-index: ${panelZIndexes.propsPanel};
 
-  &:after {
+  &:before {
-    position: absolute;
     display: block;
     content: ' ';
-    left: 0;
+    position: absolute;
-    width: 1px;
-    bottom: 0;
     top: 0;
-    /* border-left: 1px solid #3a3a44; */
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    pointer-events: auto;
   }
 `
 
-const emptyPanel = <Container />
+const Content = styled.div`
-
+  position: absolute;
-export const titleBarHeight = 20
+  top: 0;
-
+  bottom: 0;
-export const TitleBar = styled.div`
+  right: 0;
-  height: ${titleBarHeight}px;
+  width: 320px;
-  box-sizing: border-box;
+  overflow-y: hidden;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  padding: 0 10px;
+  transform: translateX(100%);
-  position: relative;
+  pointer-events: auto;
-  color: #adadadb3;
+
-  border-bottom: 1px solid rgb(0 0 0 / 13%);
+  ${Container}:hover & {
-  background-color: #25272b;
+    transform: translateX(0);
-  font-size: 10px;
+  }
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 `
 
-const F1_1 = styled.div`
+const Title = styled.div`
+  width: 100%;
+`
+
+const Header = styled.div`
   display: none;
 `
 
-export const TitleBar_Piece = styled.span`
+const Body = styled.div`
-  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};
   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 (
-    <BasePanel
-      panelId="objectEditor"
-      defaultPosition={defaultPosition}
-      minDims={minDims}
-    >
-      <Content />
-    </BasePanel>
-  )
-}
-
-const Content: React.FC<{}> = () => {
   return usePrism(() => {
     const selection = getOutlineSelection()
 
@@ -119,16 +76,17 @@ const Content: React.FC<{}> = () => {
 
     return (
       <Container>
-        <PanelDragZone>
+        <Content>
-          <F1_1>
+          <Header>
+            <Title>
               {obj.sheet.address.sheetId}{' '}
               <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
               {obj.sheet.address.sheetInstanceId}{' '}
               <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
               {obj.address.objectKey}
-          </F1_1>
+            </Title>
-        </PanelDragZone>
+          </Header>
-        <F2_2>
+          <Body>
             <DeterminePropEditor
               key={key}
               obj={obj}
@@ -136,7 +94,8 @@ const Content: React.FC<{}> = () => {
               propConfig={obj.template.config}
               depth={1}
             />
-        </F2_2>
+          </Body>
+        </Content>
       </Container>
     )
   }, [])

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) => {
         <Header>
           <Title>Outline</Title>
         </Header>
-        <F2>
+        <Body>
           <ProjectsList />
-        </F2>
+        </Body>
       </Content>
     </Container>
   )

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};

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: Type

theatre/studio/src/panels/panelZIndexes.tsx

@@ -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
-  },
-}

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'