feature: Add control indicators for Compounds in SequenceEditor

theatre-js · Jun 24, 2022 · 267dc71 · 267dc71
1 parent 7b337a9
commit 267dc71
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 21 deletions.
diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
@@ -56,7 +56,7 @@ const ProjectListItem: React.FC<{
           : 'not-selected'
       }
       select={select}
-    ></BaseItem>
+    />
   )
 }
 

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
@@ -4,12 +4,13 @@ import type {
   SequenceEditorTree_PropWithChildren,
   SequenceEditorTree_SheetObject,
 } from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
-import type {VoidFn} from '@theatre/shared/utils/types'
+import type {$FixMe, VoidFn} from '@theatre/shared/utils/types'
 import React, {useRef} from 'react'
 import {HiOutlineChevronRight} from 'react-icons/all'
 import styled from 'styled-components'
 import {propNameTextCSS} from '@theatre/studio/propEditors/utils/propNameTextCSS'
 import {usePropHighlightMouseEnter} from './usePropHighlightMouseEnter'
+import {useEditingToolsForCompoundProp} from '@theatre/studio/propEditors/useEditingToolsForCompoundProp'
 
 export const LeftRowContainer = styled.li<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -29,7 +30,7 @@ const LeftRowHeader = styled(BaseHeader)<{
   padding-left: calc(8px + var(--depth) * 20px);
 
   display: flex;
-  align-items: stretch;
+  align-items: center;
   color: ${theme.panel.body.compoudThing.label.color};
 
   box-sizing: border-box;
@@ -96,6 +97,10 @@ const AnyCompositeRow: React.FC<{
   isCollapsed,
 }) => {
   const hasChildren = Array.isArray(children) && children.length > 0
+  const controls =
+    leaf.type === 'propWithChildren' ? (
+      <CompoundRowControls leaf={leaf} />
+    ) : undefined
 
   const rowHeaderRef = useRef<HTMLDivElement | null>(null)
 
@@ -116,11 +121,26 @@ const AnyCompositeRow: React.FC<{
         <LeftRowHead_Icon isCollapsed={isCollapsed} onClick={toggleCollapsed}>
           <HiOutlineChevronRight />
         </LeftRowHead_Icon>
+        {controls && <>{controls}&nbsp;</>}
         <LeftRowHead_Label>{label}</LeftRowHead_Label>
       </LeftRowHeader>
       {hasChildren && <LeftRowChildren>{children}</LeftRowChildren>}
     </LeftRowContainer>
   ) : null
 }
 
+function CompoundRowControls({
+  leaf,
+}: {
+  leaf: SequenceEditorTree_PropWithChildren
+}) {
+  const {controlIndicators} = useEditingToolsForCompoundProp(
+    leaf.pointerToProp as $FixMe,
+    leaf.sheetObject,
+    leaf.propConfig,
+  )
+
+  return controlIndicators
+}
+
 export default AnyCompositeRow
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
@@ -1,10 +1,7 @@
 import type {SequenceEditorTree_PrimitiveProp} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
 import getStudio from '@theatre/studio/getStudio'
 import {encodePathToProp} from '@theatre/shared/utils/addresses'
-import pointerDeep from '@theatre/shared/utils/pointerDeep'
 import {usePrism} from '@theatre/react'
-import type {$IntentionalAny} from '@theatre/shared/utils/types'
-import type {Pointer} from '@theatre/dataverse'
 import {val} from '@theatre/dataverse'
 import React, {useCallback, useRef} from 'react'
 import styled from 'styled-components'
@@ -86,14 +83,9 @@ const PrimitivePropRowHead_Label = styled.span`
 const PrimitivePropRow: React.FC<{
   leaf: SequenceEditorTree_PrimitiveProp
 }> = ({leaf}) => {
-  const pointerToProp = pointerDeep(
-    leaf.sheetObject.propsP,
-    leaf.pathToProp,
-  ) as Pointer<$IntentionalAny>
-
   const obj = leaf.sheetObject
   const {controlIndicators} = useEditingToolsForSimplePropInDetailsPanel(
-    pointerToProp,
+    leaf.pointerToProp,
     obj,
     leaf.propConf,
   )

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
@@ -13,11 +13,19 @@ import type {
   StudioSheetItemKey,
 } from '@theatre/shared/utils/ids'
 import {createStudioSheetItemKey} from '@theatre/shared/utils/ids'
-import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
+import type {
+  $FixMe,
+  $IntentionalAny,
+  SerializableMap,
+  SerializablePrimitive,
+} from '@theatre/shared/utils/types'
+import type {Pointer} from '@theatre/dataverse'
 import {prism, val, valueDerivation} from '@theatre/dataverse'
 import logger from '@theatre/shared/logger'
 import {titleBarHeight} from '@theatre/studio/panels/BasePanel/common'
 import type {Studio} from '@theatre/studio/Studio'
+import type {UnknownValidCompoundProps} from '@theatre/core/propTypes/internals'
+import pointerDeep from '@theatre/shared/utils/pointerDeep'
 
 /**
  * Base "view model" for each row with common
@@ -74,6 +82,8 @@ export type SequenceEditorTree_PropWithChildren =
     isCollapsed: boolean
     sheetObject: SheetObject
     pathToProp: PathToProp
+    pointerToProp: Pointer<SerializableMap>
+    propConfig: PropTypeConfig_Compound<UnknownValidCompoundProps>
     children: Array<
       SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp
     >
@@ -84,6 +94,7 @@ export type SequenceEditorTree_PrimitiveProp =
   SequenceEditorTree_Row<'primitiveProp'> & {
     sheetObject: SheetObject
     pathToProp: PathToProp
+    pointerToProp: Pointer<SerializablePrimitive>
     trackId: SequenceTrackId
     propConf: PropTypeConfig_AllSimples
   }
@@ -260,7 +271,7 @@ export const calculateSequenceEditorTree = (
     sheetObject: SheetObject,
     trackMapping: IPropPathToTrackIdTree,
     pathToProp: PathToProp,
-    conf: PropTypeConfig_Compound<$FixMe>,
+    propConfig: PropTypeConfig_Compound<$FixMe>,
     arrayOfChildren: Array<
       SequenceEditorTree_PrimitiveProp | SequenceEditorTree_PropWithChildren
     >,
@@ -273,6 +284,11 @@ export const calculateSequenceEditorTree = (
       ].isCollapsed
     const isCollapsed = valueDerivation(isCollapsedP).getValue() ?? false
 
+    const pointerToProp = pointerDeep(
+      sheetObject.propsP,
+      pathToProp,
+    ) as Pointer<$IntentionalAny>
+
     const row: SequenceEditorTree_PropWithChildren = {
       type: 'propWithChildren',
       isCollapsed,
@@ -281,7 +297,9 @@ export const calculateSequenceEditorTree = (
         sheetObject,
         pathToProp,
       ),
-      sheetObject: sheetObject,
+      propConfig,
+      pointerToProp,
+      sheetObject,
       shouldRender,
       top: topSoFar,
       children: [],
@@ -302,7 +320,7 @@ export const calculateSequenceEditorTree = (
       sheetObject,
       trackMapping,
       pathToProp,
-      conf,
+      propConfig,
       row.children,
       level + 1,
       // collapsed shouldn't render child props
@@ -323,6 +341,11 @@ export const calculateSequenceEditorTree = (
     level: number,
     shouldRender: boolean,
   ) {
+    const pointerToProp = pointerDeep(
+      sheetObject.propsP,
+      pathToProp,
+    ) as Pointer<$IntentionalAny>
+
     const row: SequenceEditorTree_PrimitiveProp = {
       type: 'primitiveProp',
       propConf: propConf,
@@ -333,6 +356,7 @@ export const calculateSequenceEditorTree = (
       ),
       sheetObject: sheetObject,
       pathToProp,
+      pointerToProp,
       shouldRender,
       top: topSoFar,
       nodeHeight: shouldRender ? HEIGHT_OF_ANY_TITLE : 0,

diff --git a/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx b/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx
@@ -3,10 +3,7 @@ import getStudio from '@theatre/studio/getStudio'
 import type {IContextMenuItem} from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
 import getDeep from '@theatre/shared/utils/getDeep'
 import {usePrism} from '@theatre/react'
-import type {
-  $IntentionalAny,
-  SerializablePrimitive,
-} from '@theatre/shared/utils/types'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {getPointerParts, prism, val} from '@theatre/dataverse'
 import type {Pointer} from '@theatre/dataverse'
 import get from 'lodash-es/get'
@@ -49,7 +46,7 @@ interface HasSequences extends CommonStuff {
 
 type Stuff = AllStatic | HasSequences
 
-export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
+export function useEditingToolsForCompoundProp(
   pointerToProp: Pointer<{}>,
   obj: SheetObject,
   propConfig: PropTypeConfig_Compound<{}>,