diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
index 747197f0e..888ab80ac 100644
--- 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}
- >
+ />
)
}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
index 5b3bad029..4902c742f 100644
--- 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;
@@ -46,11 +47,23 @@ const LeftRowHead_Label = styled.span`
line-height: 26px;
flex-wrap: nowrap;
+ font-weight: bold;
+
${LeftRowHeader}:hover & {
color: #ccc;
}
`
+const LeftRowHead_RightAlign = styled.div`
+ flex-wrap: nowrap;
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ flex-grow: 1;
+ padding-right: 1.9rem;
+ /* border-top: 1px solid #444; */
+`
+
const LeftRowHead_Icon = styled.span<{isCollapsed: boolean}>`
width: 12px;
padding: 8px;
@@ -96,6 +109,10 @@ const AnyCompositeRow: React.FC<{
isCollapsed,
}) => {
const hasChildren = Array.isArray(children) && children.length > 0
+ const controls =
+ leaf.type === 'propWithChildren' ? (
+
+ ) : undefined
const rowHeaderRef = useRef(null)
@@ -116,11 +133,28 @@ const AnyCompositeRow: React.FC<{
- {label}
+
+ {label}
+ {controls && <>{controls} >}
+
{hasChildren && {children}}
) : 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
index e6f124237..6dfa26c66 100644
--- 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
index 877d9d01a..b96a937e1 100644
--- 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
+ propConfig: PropTypeConfig_Compound
children: Array<
SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp
>
@@ -84,6 +94,7 @@ export type SequenceEditorTree_PrimitiveProp =
SequenceEditorTree_Row<'primitiveProp'> & {
sheetObject: SheetObject
pathToProp: PathToProp
+ pointerToProp: Pointer
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
index 9586a99b8..528b3de05 100644
--- 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(
+export function useEditingToolsForCompoundProp(
pointerToProp: Pointer<{}>,
obj: SheetObject,
propConfig: PropTypeConfig_Compound<{}>,