WIP aggregate editing popover working but !clean

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.tsx

@@ -17,18 +17,86 @@ import type {KeyframeWithPathToPropFromCommonRoot} from '@theatre/studio/store/t
 import {commonRootOfPathsToProps} from '@theatre/shared/utils/addresses'
 import type {ILogger} from '@theatre/shared/logger'
 import DopeSnap from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap'
+import type {EditingOptionsTree} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
+import {useKeyframeInlineEditorPopover} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
+import type {
+  SequenceEditorTree_PrimitiveProp,
+  SequenceEditorTree_PropWithChildren,
+  SequenceEditorTree_SheetObject,
+} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
+import type {KeyframeWithTrack} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes'
 
 type IAggregateKeyframeDotProps = {
   editorProps: IAggregateKeyframeEditorProps
   utils: IAggregateKeyframeEditorUtils
 }
 
+function sheetObjectBuild(
+  viewModel: SequenceEditorTree_SheetObject,
+  keyframes: KeyframeWithTrack[],
+): EditingOptionsTree | null {
+  const children = viewModel.children
+    .map((a) =>
+      a.type === 'propWithChildren'
+        ? propWithChildrenBuild(a, keyframes)
+        : primitivePropBuild(a, keyframes),
+    )
+    .filter((a): a is EditingOptionsTree => a !== null)
+  if (children.length === 0) return null
+  return {
+    type: 'sheetObject',
+    sheetObject: viewModel.sheetObject,
+    children,
+  }
+}
+function propWithChildrenBuild(
+  viewModel: SequenceEditorTree_PropWithChildren,
+  keyframes: KeyframeWithTrack[],
+): EditingOptionsTree | null {
+  const children = viewModel.children
+    .map((a) =>
+      a.type === 'propWithChildren'
+        ? propWithChildrenBuild(a, keyframes)
+        : primitivePropBuild(a, keyframes),
+    )
+    .filter((a): a is EditingOptionsTree => a !== null)
+  if (children.length === 0) return null
+  return {
+    type: 'propWithChildren',
+    pathToProp: viewModel.pathToProp,
+    propConfig: viewModel.propConf,
+    children,
+  }
+}
+function primitivePropBuild(
+  viewModelLeaf: SequenceEditorTree_PrimitiveProp,
+  keyframes: KeyframeWithTrack[],
+): EditingOptionsTree | null {
+  const keyframe = keyframes.find((kf) => kf.track.id === viewModelLeaf.trackId)
+  if (!keyframe) return null
+  return {
+    type: 'primitiveProp',
+    keyframe: keyframe.kf,
+    pathToProp: viewModelLeaf.pathToProp,
+    propConfig: viewModelLeaf.propConf,
+    sheetObject: viewModelLeaf.sheetObject,
+    trackId: viewModelLeaf.trackId,
+  }
+}
+
 export function AggregateKeyframeDot(
   props: React.PropsWithChildren<IAggregateKeyframeDotProps>,
 ) {
   const logger = useLogger('AggregateKeyframeDot')
   const {cur} = props.utils
 
+  const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
+    useKeyframeInlineEditorPopover(
+      props.editorProps.viewModel.type === 'sheetObject'
+        ? sheetObjectBuild(props.editorProps.viewModel, cur.keyframes)
+        : propWithChildrenBuild(props.editorProps.viewModel, cur.keyframes),
+    )
+
   const presence = usePresence(props.utils.itemKey)
   presence.useRelations(
     () =>
@@ -57,6 +125,7 @@ export function AggregateKeyframeDot(
         // Need this for the dragging logic to be able to get the keyframe props
         // based on the position.
         {...DopeSnap.includePositionSnapAttrs(cur.position)}
+        onClick={(e) => openEditor(e, ref.current!)}
       />
       <AggregateKeyframeVisualDot
         flag={presence.flag}
@@ -64,6 +133,7 @@ export function AggregateKeyframeDot(
         isSelected={cur.selected}
       />
       {contextMenu}
+      {inlineEditorPopover}
     </>
   )
 }

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx

@@ -1,28 +1,19 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import type {
+import type {PropTypeConfig_AllSimples} from '@theatre/core/propTypes'
-  PropTypeConfig,
-  PropTypeConfig_AllSimples,
-} from '@theatre/core/propTypes'
-import type {IEditingTools} from '@theatre/studio/propEditors/utils/IEditingTools'
-import type {PropConfigForType} from '@theatre/studio/propEditors/utils/PropConfigForType'
 import type {ISimplePropEditorReactProps} from '@theatre/studio/propEditors/simpleEditors/ISimplePropEditorReactProps'
 import {simplePropEditorByPropType} from '@theatre/studio/propEditors/simpleEditors/simplePropEditorByPropType'
 
 import SingleKeyframeSimplePropEditor from './DeterminePropEditorForSingleKeyframe/SingleKeyframeSimplePropEditor'
-
+import type {
-type IDeterminePropEditorForSingleKeyframeProps<
+  EditingOptionsTree,
-  K extends PropTypeConfig['type'],
+  PrimitivePropEditingOptions,
-> = {
+} from './useSingleKeyframeInlineEditorPopover'
-  editingTools: IEditingTools<PropConfigForType<K>['valueType']>
+import last from 'lodash-es/last'
-  propConfig: PropConfigForType<K>
+import {useTempTransactionEditingTools} from './useTempTransactionEditingTools'
-  keyframeValue: PropConfigForType<K>['valueType']
-  displayLabel?: string
-}
 
 const SingleKeyframePropEditorContainer = styled.div`
-  padding: 2px;
   display: flex;
   align-items: stretch;
 
@@ -30,7 +21,7 @@ const SingleKeyframePropEditorContainer = styled.div`
     min-width: 100px;
   }
 `
-const SingleKeyframePropLabel = styled.span`
+const SingleKeyframePropLabel = styled.div`
   font-style: normal;
   font-weight: 400;
   font-size: 11px;
@@ -42,6 +33,10 @@ const SingleKeyframePropLabel = styled.span`
   color: #919191;
 `
 
+const IndentedThing = styled.div`
+  margin-left: 24px;
+`
+
 /**
  * Given a propConfig, this function gives the corresponding prop editor for
  * use in the dope sheet inline prop editor on a keyframe.
@@ -52,35 +47,73 @@ const SingleKeyframePropLabel = styled.span`
  *
  * @param p - propConfig object for any type of prop.
  */
-export function DeterminePropEditorForSingleKeyframe(
+export function DeterminePropEditorForKeyframeTree(p: EditingOptionsTree) {
-  p: IDeterminePropEditorForSingleKeyframeProps<PropTypeConfig['type']>,
+  if (p.type === 'sheetObject') {
-) {
+    return (
-  const propConfig = p.propConfig
+      <>
-
+        <SingleKeyframePropLabel>
-  if (propConfig.type === 'compound') {
+          {p.sheetObject.address.objectKey}
-    throw new Error(
+        </SingleKeyframePropLabel>
-      'We do not yet support editing compound props for a keyframe',
+        <IndentedThing>
+          {p.children.map((c, i) => (
+            <DeterminePropEditorForKeyframeTree key={i} {...c} />
+          ))}
+        </IndentedThing>
+      </>
     )
-  } else if (propConfig.type === 'enum') {
+  } else if (p.type === 'propWithChildren') {
+    const label = p.propConfig.label ?? last(p.pathToProp)
+    return (
+      <>
+        <SingleKeyframePropLabel>{label}</SingleKeyframePropLabel>
+        <IndentedThing>
+          {p.children.map((c, i) => (
+            <DeterminePropEditorForKeyframeTree key={i} {...c} />
+          ))}
+        </IndentedThing>
+      </>
+    )
+  } else {
+    return <BeepBoop {...p} />
+  }
+}
+
+function BeepBoop(p: PrimitivePropEditingOptions) {
+  const label = p.propConfig.label ?? last(p.pathToProp)
+  const editingTools = useEditingToolsForKeyframeEditorPopover(p)
+
+  if (p.propConfig.type === 'enum') {
     // notice: enums are not implemented, yet.
     return <></>
   } else {
-    const PropEditor = simplePropEditorByPropType[propConfig.type]
+    const PropEditor = simplePropEditorByPropType[
-
+      p.propConfig.type
+    ] as React.VFC<ISimplePropEditorReactProps<PropTypeConfig_AllSimples>>
     return (
       <SingleKeyframePropEditorContainer>
-        <SingleKeyframePropLabel>{p.displayLabel}</SingleKeyframePropLabel>
+        <SingleKeyframePropLabel>{label}</SingleKeyframePropLabel>
         <SingleKeyframeSimplePropEditor
-          SimpleEditorComponent={
+          SimpleEditorComponent={PropEditor}
-            PropEditor as React.VFC<
+          propConfig={p.propConfig}
-              ISimplePropEditorReactProps<PropTypeConfig_AllSimples>
+          editingTools={editingTools}
-            >
+          keyframeValue={p.keyframe.value}
-          }
-          propConfig={propConfig}
-          editingTools={p.editingTools}
-          keyframeValue={p.keyframeValue}
         />
       </SingleKeyframePropEditorContainer>
     )
   }
 }
+
+function useEditingToolsForKeyframeEditorPopover(
+  props: PrimitivePropEditingOptions,
+) {
+  const obj = props.sheetObject
+  return useTempTransactionEditingTools(({stateEditors}, value) => {
+    const newKeyframe = {...props.keyframe, value}
+    stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+      ...obj.address,
+      trackId: props.trackId,
+      keyframes: [newKeyframe],
+      snappingFunction: obj.sheet.getSequence().closestGridPosition,
+    })
+  })
+}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx

@@ -23,7 +23,7 @@ import {
   snapToNone,
   snapToSome,
 } from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget'
-import {useSingleKeyframeInlineEditorPopover} from './useSingleKeyframeInlineEditorPopover'
+import {useKeyframeInlineEditorPopover} from './useSingleKeyframeInlineEditorPopover'
 import usePresence, {
   PresenceFlag,
 } from '@theatre/studio/uiComponents/usePresence'
@@ -95,22 +95,21 @@ const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>`
 type ISingleKeyframeDotProps = ISingleKeyframeEditorProps
 
 /** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */
-const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = React.memo(
+const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
-  (props) => {
+  const logger = useLogger('SingleKeyframeDot', props.keyframe.id)
-    const logger = useLogger('SingleKeyframeDot', props.keyframe.id)
+  const presence = usePresence(props.itemKey)
-    const presence = usePresence(props.itemKey)
+  const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
-    const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
-
-    const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
-    const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
-      useSingleKeyframeInlineEditorPopover({
-        keyframe: props.keyframe,
-        pathToProp: props.leaf.pathToProp,
-        propConf: props.leaf.propConf,
-        sheetObject: props.leaf.sheetObject,
-        trackId: props.leaf.trackId,
-      })
 
+  const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
+  const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
+    useKeyframeInlineEditorPopover({
+      type: 'primitiveProp',
+      keyframe: props.keyframe,
+      pathToProp: props.leaf.pathToProp,
+      propConfig: props.leaf.propConf,
+      sheetObject: props.leaf.sheetObject,
+      trackId: props.leaf.trackId,
+    })
     const [isDragging] = useDragForSingleKeyframeDot(node, props, {
       onClickFromDrag(dragStartEvent) {
         openEditor(dragStartEvent, ref.current!)

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx

@@ -1,53 +1,51 @@
 import React from 'react'
-import last from 'lodash-es/last'
 import usePopover from '@theatre/studio/uiComponents/Popover/usePopover'
 import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover'
-import {useTempTransactionEditingTools} from './useTempTransactionEditingTools'
+import {DeterminePropEditorForKeyframeTree} from './DeterminePropEditorForSingleKeyframe'
-import {DeterminePropEditorForSingleKeyframe} from './DeterminePropEditorForSingleKeyframe'
 import type {SequenceTrackId} from '@theatre/shared/utils/ids'
 import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Historic'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
-import type {PropTypeConfig} from '@theatre/core/propTypes'
+import type {
+  PropTypeConfig_AllSimples,
+  PropTypeConfig_Compound,
+  PropTypeConfig_Enum,
+} from '@theatre/core/propTypes'
 import type {PathToProp} from '@theatre/shared/utils/addresses'
+import type {UnknownValidCompoundProps} from '@theatre/core/propTypes/internals'
 
 /** The editor that pops up when directly clicking a Keyframe. */
-export function useSingleKeyframeInlineEditorPopover(
+export function useKeyframeInlineEditorPopover(
-  props: SingleKeyframeEditingOptions,
+  props: EditingOptionsTree | null,
 ) {
-  const editingTools = useEditingToolsForKeyframeEditorPopover(props)
-  const label = props.propConf.label ?? last(props.pathToProp)
-
   return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => (
     <BasicPopover showPopoverEdgeTriangle>
-      <DeterminePropEditorForSingleKeyframe
+      {props === null ? undefined : (
-        propConfig={props.propConf}
+        <DeterminePropEditorForKeyframeTree {...props} />
-        editingTools={editingTools}
+      )}
-        keyframeValue={props.keyframe.value}
-        displayLabel={label != null ? String(label) : undefined}
-      />
     </BasicPopover>
   ))
 }
 
-type SingleKeyframeEditingOptions = {
+export type EditingOptionsTree =
+  | SheetObjectEditingOptionsTree
+  | PropWithChildrenEditingOptionsTree
+  | PrimitivePropEditingOptions
+type SheetObjectEditingOptionsTree = {
+  type: 'sheetObject'
+  sheetObject: SheetObject
+  children: EditingOptionsTree[]
+}
+type PropWithChildrenEditingOptionsTree = {
+  type: 'propWithChildren'
+  propConfig: PropTypeConfig_Compound<UnknownValidCompoundProps>
+  pathToProp: PathToProp
+  children: EditingOptionsTree[]
+}
+export type PrimitivePropEditingOptions = {
+  type: 'primitiveProp'
   keyframe: Keyframe
-  propConf: PropTypeConfig
+  propConfig: PropTypeConfig_AllSimples | PropTypeConfig_Enum // note: enums are not implemented yet
   sheetObject: SheetObject
   trackId: SequenceTrackId
   pathToProp: PathToProp
 }
-
-function useEditingToolsForKeyframeEditorPopover(
-  props: SingleKeyframeEditingOptions,
-) {
-  const obj = props.sheetObject
-  return useTempTransactionEditingTools(({stateEditors}, value) => {
-    const newKeyframe = {...props.keyframe, value}
-    stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
-      ...obj.address,
-      trackId: props.trackId,
-      keyframes: [newKeyframe],
-      snappingFunction: obj.sheet.getSequence().closestGridPosition,
-    })
-  })
-}

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx

@@ -16,7 +16,7 @@ import {
   useCssCursorLock,
 } from '@theatre/studio/uiComponents/PointerEventsHandler'
 import DopeSnap from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap'
-import {useSingleKeyframeInlineEditorPopover} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
+import {useKeyframeInlineEditorPopover} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
 import usePresence, {
   PresenceFlag,
 } from '@theatre/studio/uiComponents/usePresence'
@@ -71,7 +71,7 @@ const GraphEditorDotNonScalar: React.VFC<IProps> = (props) => {
   const curValue = props.which === 'left' ? 0 : 1
 
   const [inlineEditorPopover, openEditor, _, _isInlineEditorPopoverOpen] =
-    useSingleKeyframeInlineEditorPopover({
+    useKeyframeInlineEditorPopover({
       keyframe: props.keyframe,
       pathToProp: props.pathToProp,
       propConf: props.propConfig,

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx

@@ -16,7 +16,7 @@ import {
   useCssCursorLock,
 } from '@theatre/studio/uiComponents/PointerEventsHandler'
 import DopeSnap from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap'
-import {useSingleKeyframeInlineEditorPopover} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
+import {useKeyframeInlineEditorPopover} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover'
 import usePresence, {
   PresenceFlag,
 } from '@theatre/studio/uiComponents/usePresence'
@@ -71,7 +71,7 @@ const GraphEditorDotScalar: React.VFC<IProps> = (props) => {
 
   const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue)
   const [inlineEditorPopover, openEditor, _, _isInlineEditorPopoverOpen] =
-    useSingleKeyframeInlineEditorPopover({
+    useKeyframeInlineEditorPopover({
       keyframe: props.keyframe,
       pathToProp: props.pathToProp,
       propConf: props.propConfig,

theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts

@@ -18,6 +18,7 @@ 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'
 
 /**
  * Base "view model" for each row with common
@@ -73,6 +74,7 @@ export type SequenceEditorTree_PropWithChildren =
   SequenceEditorTree_Row<'propWithChildren'> & {
     isCollapsed: boolean
     sheetObject: SheetObject
+    propConf: PropTypeConfig_Compound<UnknownValidCompoundProps>
     pathToProp: PathToProp
     children: Array<
       SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp
@@ -233,6 +235,7 @@ export const calculateSequenceEditorTree = (
       addProp_compound(
         sheetObject,
         trackMapping,
+        conf,
         pathToProp,
         conf,
         arrayOfChildren,
@@ -259,6 +262,7 @@ export const calculateSequenceEditorTree = (
   function addProp_compound(
     sheetObject: SheetObject,
     trackMapping: IPropPathToTrackIdTree,
+    propConf: PropTypeConfig_Compound<UnknownValidCompoundProps>,
     pathToProp: PathToProp,
     conf: PropTypeConfig_Compound<$FixMe>,
     arrayOfChildren: Array<
@@ -276,6 +280,7 @@ export const calculateSequenceEditorTree = (
     const row: SequenceEditorTree_PropWithChildren = {
       type: 'propWithChildren',
       isCollapsed,
+      propConf,
       pathToProp,
       sheetItemKey: createStudioSheetItemKey.forSheetObjectProp(
         sheetObject,