UX Improvements

* The cam state of SnapshotEditor cameras now persist
* Title bar for the prop editor
* Cleaned up the toolbar

theatre/studio/src/TheatreStudio.ts

@@ -3,7 +3,7 @@ import studioTicker from '@theatre/studio/studioTicker'
 import type {IDerivation, Pointer} from '@theatre/dataverse'
 import {prism} from '@theatre/dataverse'
 import SimpleCache from '@theatre/shared/utils/SimpleCache'
-import type {$FixMe, VoidFn} from '@theatre/shared/utils/types'
+import type {$FixMe, $IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import type {IScrub} from '@theatre/studio/Scrub'
 
 import type {Studio} from '@theatre/studio/Studio'
@@ -16,6 +16,7 @@ import type {
   PropTypeConfig_Boolean,
   PropTypeConfig_Compound,
 } from '@theatre/core/propTypes'
+import {debounce} from 'lodash-es'
 
 export interface ITransactionAPI {
   set<V>(pointer: Pointer<V>, value: V): void
@@ -28,7 +29,7 @@ export interface PaneClassDefinition<
   class: string
   dataType: DataType
   component: React.ComponentType<{
-    id: string
+    paneId: string
     object: ISheetObject<
       PropTypeConfig_Compound<{
         visible: PropTypeConfig_Boolean
@@ -65,6 +66,7 @@ export interface IStudio {
 
   transaction(fn: (api: ITransactionAPI) => void): void
   scrub(): IScrub
+  debouncedScrub(threshhold: number): Pick<IScrub, 'capture'>
 
   __experimental_setSelection(selection: Array<ISheetObject>): void
   __experimental_onSelectionChange(
@@ -158,6 +160,37 @@ export default class TheatreStudio implements IStudio {
     return getStudio().scrub()
   }
 
+  debouncedScrub(threshold: number = 1000): Pick<IScrub, 'capture'> {
+    let currentScrub: IScrub | undefined
+    const scheduleCommit = debounce(() => {
+      const s = currentScrub
+      if (!s) return
+      currentScrub = undefined
+      s.commit()
+    }, threshold)
+
+    const capture = (arg: $IntentionalAny) => {
+      if (!currentScrub) {
+        currentScrub = this.scrub()
+      }
+      let errored = true
+      try {
+        currentScrub.capture(arg)
+        errored = false
+      } finally {
+        if (errored) {
+          const s = currentScrub
+          currentScrub = undefined
+          s.discard()
+        } else {
+          scheduleCommit()
+        }
+      }
+    }
+
+    return {capture}
+  }
+
   getPanesOfType<PaneClass extends string>(
     paneClass: PaneClass,
   ): PaneInstance<PaneClass>[] {

theatre/studio/src/panels/BasePanel/PaneWrapper.tsx

@@ -132,7 +132,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
       </PanelDragZone>
       <F2>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Comp id={paneInstance.instanceId} object={paneInstance.object} />
+          <Comp paneId={paneInstance.instanceId} object={paneInstance.object} />
         </ErrorBoundary>
       </F2>
     </Container>

theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx

@@ -54,6 +54,10 @@ const Title = styled.div`
   font-weight: 500;
   font-size: 10px;
   user-select: none;
+  pointer-events: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `
 
 const headerHeight = `32px`
@@ -106,7 +110,9 @@ const ObjectEditorPanel: React.FC<{}> = (props) => {
       <Container>
         <Content>
           <Header>
-            <Title>
+            <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>

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -1,7 +1,6 @@
 import type {PropTypeConfig_Compound} from '@theatre/core/propTypes'
 import {isPropConfigComposite} from '@theatre/shared/propTypes/utils'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
-import {theme} from '@theatre/studio/css'
 import {usePrism} from '@theatre/dataverse-react'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {getPointerParts} from '@theatre/dataverse'
@@ -25,10 +24,8 @@ const Container = styled.div`
 
 const Header = styled.div`
   height: 30px;
-  /* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */
   display: flex;
   align-items: stretch;
-  /* color: ${theme.panel.body.compoudThing.label.color}; */
   position: relative;
 
   ${rowBg};
@@ -40,17 +37,6 @@ const Padding = styled.div`
   align-items: center;
 `
 
-const IconContainer = styled.div`
-  width: 12px;
-  margin-right: -12px;
-  /* margin-left: ${indentationFormula}; */
-  font-size: 9px;
-  text-align: center;
-  transform: rotateZ(90deg);
-  position: relative;
-  left: -18px;
-`
-
 const PropName = styled.div`
   margin-left: 4px;
   cursor: default;