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