@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.js

@@ -1,187 +0,0 @@
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React, { useMemo, useRef } from 'react';
-import { ConnectorLine } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine';
-import { AggregateKeyframePositionIsSelected } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import CurveEditorPopover from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover';
-import { useAggregateKeyframeEditorUtils } from './useAggregateKeyframeEditorUtils';
-import styled from 'styled-components';
-import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-import { copyableKeyframesFromSelection, keyframesWithPaths, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
-import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
-import { commonRootOfPathsToProps } from '@tomorrowevening/theatre-shared/utils/addresses';
-const POPOVER_MARGIN_PX = 5;
-const EasingPopoverWrapper = styled(BasicPopover) `
-  --popover-outer-stroke: transparent;
-  --popover-inner-stroke: rgba(26, 28, 30, 0.97);
-`;
-export const AggregateCurveEditorPopover = React.forwardRef((props, ref) => {
-    const { allConnections } = useAggregateKeyframeEditorUtils(props);
-    return (React.createElement(EasingPopoverWrapper, { showPopoverEdgeTriangle: false, 
-        // @ts-ignore @todo
-        ref: ref },
-        React.createElement(CurveEditorPopover, { curveConnection: allConnections[0], additionalConnections: allConnections, onRequestClose: props.closePopover })));
-});
-export const AggregateKeyframeConnector = (props) => {
-    const [nodeRef, node] = useRefAndState(null);
-    const { editorProps } = props;
-    const [contextMenu] = useConnectorContextMenu(props, node);
-    const [isDragging] = useDragKeyframe(node, props.editorProps);
-    const { node: popoverNode, toggle: togglePopover, close: closePopover, } = usePopover(() => {
-        const rightDims = val(editorProps.layoutP.rightDims);
-        return {
-            debugName: 'Connector',
-            constraints: {
-                minX: rightDims.screenX + POPOVER_MARGIN_PX,
-                maxX: rightDims.screenX + rightDims.width - POPOVER_MARGIN_PX,
-            },
-        };
-    }, () => {
-        return (React.createElement(AggregateCurveEditorPopover, { ...editorProps, closePopover: closePopover }));
-    });
-    const { connected, isAggregateEditingInCurvePopover } = props.utils;
-    // We don't want to interrupt an existing drag, so in order to persist the dragged
-    // html node, we just set the connector length to 0, but we don't remove it yet.
-    return connected || isDragging ? (React.createElement(React.Fragment, null,
-        React.createElement(ConnectorLine, { ref: nodeRef, connectorLengthInUnitSpace: connected ? connected.length : 0, isSelected: connected ? connected.selected : false, isPopoverOpen: isAggregateEditingInCurvePopover, openPopover: (e) => {
-                if (node)
-                    togglePopover(e, node);
-            } }),
-        popoverNode,
-        contextMenu)) : (React.createElement(React.Fragment, null));
-};
-function useDragKeyframe(node, editorProps) {
-    const propsRef = useRef(editorProps);
-    propsRef.current = editorProps;
-    const gestureHandlers = useMemo(() => {
-        return {
-            debugName: 'useDragKeyframe',
-            lockCSSCursorTo: 'ew-resize',
-            onDragStart(event) {
-                const props = propsRef.current;
-                let tempTransaction;
-                const keyframes = props.aggregateKeyframes[props.index].keyframes;
-                const { selection, viewModel } = props;
-                const address = viewModel.type === 'sheet'
-                    ? viewModel.sheet.address
-                    : viewModel.sheetObject.address;
-                if (selection &&
-                    props.aggregateKeyframes[props.index].selected ===
-                        AggregateKeyframePositionIsSelected.AllSelected) {
-                    return selection
-                        .getDragHandlers({
-                        ...address,
-                        domNode: node,
-                        positionAtStartOfDrag: props.aggregateKeyframes[props.index].position,
-                    })
-                        .onDragStart(event);
-                }
-                const propsAtStartOfDrag = props;
-                const sequence = val(propsAtStartOfDrag.layoutP.sheet).getSequence();
-                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
-                return {
-                    onDrag(dx, dy, event) {
-                        const delta = toUnitSpace(dx);
-                        if (tempTransaction) {
-                            tempTransaction.discard();
-                            tempTransaction = undefined;
-                        }
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            for (const keyframe of keyframes) {
-                                stateEditors.coreByProject.historic.sheetsById.sequence.transformKeyframes({
-                                    ...keyframe.track.sheetObject.address,
-                                    trackId: keyframe.track.id,
-                                    keyframeIds: [
-                                        keyframe.kf.id,
-                                        keyframe.track.data.keyframes[keyframe.track.data.keyframes.indexOf(keyframe.kf) + 1].id,
-                                    ],
-                                    translate: delta,
-                                    scale: 1,
-                                    origin: 0,
-                                    snappingFunction: sequence.closestGridPosition,
-                                });
-                            }
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        if (dragHappened) {
-                            if (tempTransaction) {
-                                tempTransaction.commit();
-                            }
-                        }
-                        else {
-                            if (tempTransaction) {
-                                tempTransaction.discard();
-                            }
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    return useDrag(node, gestureHandlers);
-}
-function useConnectorContextMenu(props, node) {
-    return useContextMenu(node, {
-        displayName: 'Aggregate Tween',
-        menuItems: () => {
-            // see AGGREGATE_COPY_PASTE.md for explanation of this
-            // code that makes some keyframes with paths for copying
-            // to clipboard
-            const kfs = props.utils.allConnections.reduce((acc, con) => acc.concat(keyframesWithPaths({
-                ...con,
-                keyframeIds: [con.left.id, con.right.id],
-            }) ?? []), []);
-            const commonPath = commonRootOfPathsToProps(kfs.map((kf) => kf.pathToProp));
-            const keyframesWithCommonRootPath = kfs.map(({ keyframe, pathToProp }) => ({
-                keyframe,
-                pathToProp: pathToProp.slice(commonPath.length),
-            }));
-            const viewModel = props.editorProps.viewModel;
-            const address = viewModel.type === 'sheet'
-                ? viewModel.sheet.address
-                : viewModel.sheetObject.address;
-            return [
-                {
-                    label: 'Copy',
-                    callback: () => {
-                        if (props.editorProps.selection) {
-                            const copyableKeyframes = copyableKeyframesFromSelection(address.projectId, address.sheetId, props.editorProps.selection);
-                            getStudio().transaction((api) => {
-                                api.stateEditors.studio.ahistoric.setClipboardKeyframes(copyableKeyframes);
-                            });
-                        }
-                        else {
-                            getStudio().transaction((api) => {
-                                api.stateEditors.studio.ahistoric.setClipboardKeyframes(keyframesWithCommonRootPath);
-                            });
-                        }
-                    },
-                },
-                {
-                    label: 'Delete',
-                    callback: () => {
-                        if (props.editorProps.selection) {
-                            props.editorProps.selection.delete();
-                        }
-                        else {
-                            getStudio().transaction(({ stateEditors }) => {
-                                for (const con of props.utils.allConnections) {
-                                    stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
-                                        ...address,
-                                        objectKey: con.objectKey,
-                                        keyframeIds: [con.left.id, con.right.id],
-                                        trackId: con.trackId,
-                                    });
-                                }
-                            });
-                        }
-                    },
-                },
-            ];
-        },
-    });
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.js

@@ -1,158 +0,0 @@
-import React from 'react';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
-import { AggregateKeyframeVisualDot, HitZone } from './AggregateKeyframeVisualDot';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { copyableKeyframesFromSelection, keyframesWithPaths, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
-import { commonRootOfPathsToProps } from '@tomorrowevening/theatre-shared/utils/addresses';
-import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
-import { useKeyframeInlineEditorPopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover';
-const isOptionsTreeNodeNotNull = (a) => a !== null;
-function sheetObjectBuild(viewModel, keyframes) {
-    const children = viewModel.children
-        .map((a) => a.type === 'propWithChildren'
-        ? propWithChildrenBuild(a, keyframes)
-        : primitivePropBuild(a, keyframes))
-        .filter(isOptionsTreeNodeNotNull);
-    if (children.length === 0)
-        return null;
-    return {
-        type: 'sheetObject',
-        sheetObject: viewModel.sheetObject,
-        children,
-    };
-}
-function propWithChildrenBuild(viewModel, keyframes) {
-    const children = viewModel.children
-        .map((a) => a.type === 'propWithChildren'
-        ? propWithChildrenBuild(a, keyframes)
-        : primitivePropBuild(a, keyframes))
-        .filter(isOptionsTreeNodeNotNull);
-    if (children.length === 0)
-        return null;
-    return {
-        type: 'propWithChildren',
-        pathToProp: viewModel.pathToProp,
-        propConfig: viewModel.propConf,
-        children,
-    };
-}
-function primitivePropBuild(viewModelLeaf, keyframes) {
-    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) {
-    const { cur } = props.utils;
-    const inlineEditorPopover = useKeyframeInlineEditorPopover(props.editorProps.viewModel.type === 'sheet'
-        ? null
-        : props.editorProps.viewModel.type === 'sheetObject'
-            ? sheetObjectBuild(props.editorProps.viewModel, cur.keyframes)
-                ?.children ?? null
-            : propWithChildrenBuild(props.editorProps.viewModel, cur.keyframes)
-                ?.children ?? null);
-    const presence = usePresence(props.utils.itemKey);
-    presence.useRelations(() => cur.keyframes.map((kf) => ({
-        affects: kf.itemKey,
-        flag: PresenceFlag.Primary,
-    })), [
-        // Hmm: Is this a valid fix for the changing size of the useEffect's dependency array?
-        // also: does it work properly with selections?
-        cur.keyframes
-            .map((keyframeWithTrack) => keyframeWithTrack.track.id)
-            .join('-'),
-    ]);
-    const [ref, node] = useRefAndState(null);
-    const [contextMenu] = useAggregateKeyframeContextMenu(props, node);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HitZone, { ref: ref, ...presence.attrs, ...DopeSnap.includePositionSnapAttrs(cur.position), onClick: (e) => props.editorProps.viewModel.type !== 'sheet'
-                ? inlineEditorPopover.open(e, ref.current)
-                : null }),
-        React.createElement(AggregateKeyframeVisualDot, { flag: presence.flag, isAllHere: cur.allHere, isSelected: cur.selected }),
-        contextMenu,
-        inlineEditorPopover.node));
-}
-function useAggregateKeyframeContextMenu(props, target) {
-    return useContextMenu(target, {
-        displayName: 'Aggregate Keyframe',
-        menuItems: () => {
-            const viewModel = props.editorProps.viewModel;
-            const selection = props.editorProps.selection;
-            return [
-                {
-                    label: selection ? 'Copy (selection)' : 'Copy',
-                    callback: () => {
-                        // see AGGREGATE_COPY_PASTE.md for explanation of this
-                        // code that makes some keyframes with paths for copying
-                        // to clipboard
-                        if (selection) {
-                            const { projectId, sheetId } = viewModel.type === 'sheet'
-                                ? viewModel.sheet.address
-                                : viewModel.sheetObject.address;
-                            const copyableKeyframes = copyableKeyframesFromSelection(projectId, sheetId, selection);
-                            getStudio().transaction((api) => {
-                                api.stateEditors.studio.ahistoric.setClipboardKeyframes(copyableKeyframes);
-                            });
-                        }
-                        else {
-                            const kfs = props.utils.cur.keyframes.flatMap((kfWithTrack) => keyframesWithPaths({
-                                ...kfWithTrack.track.sheetObject.address,
-                                trackId: kfWithTrack.track.id,
-                                keyframeIds: [kfWithTrack.kf.id],
-                            }) ?? []);
-                            const basePathRelativeToSheet = viewModel.type === 'sheet'
-                                ? []
-                                : viewModel.type === 'sheetObject'
-                                    ? [viewModel.sheetObject.address.objectKey]
-                                    : viewModel.type === 'propWithChildren'
-                                        ? [
-                                            viewModel.sheetObject.address.objectKey,
-                                            ...viewModel.pathToProp,
-                                        ]
-                                        : []; // should be unreachable unless new viewModel/leaf types are added
-                            const commonPath = commonRootOfPathsToProps([
-                                basePathRelativeToSheet,
-                                ...kfs.map((kf) => kf.pathToProp),
-                            ]);
-                            const keyframesWithCommonRootPath = kfs.map(({ keyframe, pathToProp }) => ({
-                                keyframe,
-                                pathToProp: pathToProp.slice(commonPath.length),
-                            }));
-                            getStudio().transaction((api) => {
-                                api.stateEditors.studio.ahistoric.setClipboardKeyframes(keyframesWithCommonRootPath);
-                            });
-                        }
-                    },
-                },
-                {
-                    label: selection ? 'Delete (selection)' : 'Delete',
-                    callback: () => {
-                        if (selection) {
-                            selection.delete();
-                        }
-                        else {
-                            getStudio().transaction(({ stateEditors }) => {
-                                for (const kfWithTrack of props.utils.cur.keyframes) {
-                                    stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
-                                        ...kfWithTrack.track.sheetObject.address,
-                                        keyframeIds: [kfWithTrack.kf.id],
-                                        trackId: kfWithTrack.track.id,
-                                    });
-                                }
-                            });
-                        }
-                    },
-                },
-            ];
-        },
-    });
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.js

@@ -1,32 +0,0 @@
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import { AggregateKeyframeConnector } from './AggregateKeyframeConnector';
-import { useAggregateKeyframeEditorUtils } from './useAggregateKeyframeEditorUtils';
-import { AggregateKeyframeDot } from './AggregateKeyframeDot';
-const AggregateKeyframeEditorContainer = styled.div `
-  position: absolute;
-`;
-/**
- * TODO we're spending a lot of cycles on each render of each aggreagte keyframes.
- *
- * Each keyframe node is doing O(N) operations, N being the number of underlying
- * keyframes it represetns.
- *
- * The biggest example is the `isConnectionEditingInCurvePopover()` call which is run
- * for every underlying keyframe, every time this component is rendered.
- *
- * We can optimize this away by doing all of this work _once_ when a curve editor popover
- * is open. This would require having some kind of stable identity for each aggregate row.
- * Let's defer that work until other interactive keyframe editing PRs are merged in.
- */
-const AggregateKeyframeEditor = React.memo((props) => {
-    const utils = useAggregateKeyframeEditorUtils(props);
-    return (React.createElement(AggregateKeyframeEditorContainer, { style: {
-            top: `${props.viewModel.nodeHeight / 2}px`,
-            left: `calc(${val(props.layoutP.scaledSpace.leftPadding)}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${utils.cur.position}px))`,
-        } },
-        React.createElement(AggregateKeyframeDot, { editorProps: props, utils: utils }),
-        React.createElement(AggregateKeyframeConnector, { editorProps: props, utils: utils })));
-});
-export default AggregateKeyframeEditor;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { AggregateKeyframePositionIsSelected } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-import { PresenceFlag } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-import styled from 'styled-components';
-import { absoluteDims } from '@tomorrowevening/theatre-studio/utils/absoluteDims';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-const DOT_SIZE_PX = 16;
-const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2;
-/** The keyframe diamond ◆ */
-const DotContainer = styled.div `
-  position: absolute;
-  ${absoluteDims(DOT_SIZE_PX)}
-  z-index: 1;
-`;
-// hmm kinda weird to organize like this (exporting `HitZone`). Maybe there's a way to re-use
-// this interpolation of `DotContainer` using something like extended components or something.
-export const HitZone = styled.div `
-  z-index: 2;
-  cursor: ew-resize;
-
-  position: absolute;
-  ${absoluteDims(12)};
-  ${pointerEventsAutoInNormalMode};
-
-  &:hover
-    + ${DotContainer},
-    #pointer-root.draggingPositionInSequenceEditor
-    &:hover
-    + ${DotContainer} {
-    ${absoluteDims(DOT_HOVER_SIZE_PX)}
-  }
-`;
-export function AggregateKeyframeVisualDot(props) {
-    const theme = {
-        isSelected: props.isSelected,
-        flag: props.flag,
-    };
-    return (React.createElement(DotContainer, null, props.isAllHere ? (React.createElement(AggregateDotAllHereSvg, { ...theme })) : (React.createElement(AggregateDotSomeHereSvg, { ...theme }))));
-}
-const SELECTED_COLOR = '#F2C95C';
-const DEFAULT_PRIMARY_COLOR = '#40AAA4';
-const DEFAULT_SECONDARY_COLOR = '#45747C';
-const selectionColorAll = (theme) => theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected
-    ? SELECTED_COLOR
-    : theme.isSelected ===
-        AggregateKeyframePositionIsSelected.AtLeastOneUnselected
-        ? DEFAULT_PRIMARY_COLOR
-        : DEFAULT_SECONDARY_COLOR;
-const selectionColorSome = (theme) => theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected
-    ? SELECTED_COLOR
-    : theme.isSelected ===
-        AggregateKeyframePositionIsSelected.AtLeastOneUnselected
-        ? DEFAULT_PRIMARY_COLOR
-        : DEFAULT_SECONDARY_COLOR;
-const AggregateDotAllHereSvg = (theme) => (React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { x: "4.46443", y: "10.0078", width: "5", height: "5", transform: "rotate(-45 4.46443 10.0078)", fill: "#212327" // background knockout fill
-        , stroke: selectionColorSome(theme) }),
-    React.createElement("rect", { x: "3.75732", y: "6.01953", width: "6", height: "6", transform: "rotate(-45 3.75732 6.01953)", fill: selectionColorAll(theme), stroke: theme.flag === PresenceFlag.Primary ? 'white' : undefined, strokeWidth: theme.flag === PresenceFlag.Primary ? '2px' : undefined })));
-// when the aggregate keyframes are sparse across tracks at this position
-const AggregateDotSomeHereSvg = (theme) => (React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { x: "4.46443", y: "8", width: "5", height: "5", transform: "rotate(-45 4.46443 8)", fill: "#23262B", stroke: theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme), strokeWidth: theme.flag === PresenceFlag.Primary ? '2px' : undefined })));

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/iif.js

@@ -1,3 +0,0 @@
-export function iif(fn) {
-    return fn();
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/useAggregateKeyframeEditorUtils.js

@@ -1,73 +0,0 @@
-import { prism } from '@tomorrowevening/theatre-dataverse';
-import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
-import { AggregateKeyframePositionIsSelected } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-import { isConnectionEditingInCurvePopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { selectedKeyframeConnections } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
-import { iif } from './iif';
-// I think this was pulled out for performance
-// 1/10: Not sure this is properly split up
-export function useAggregateKeyframeEditorUtils(props) {
-    const { index, aggregateKeyframes, selection } = props;
-    return usePrism(getAggregateKeyframeEditorUtilsPrismFn(props), [
-        index,
-        aggregateKeyframes,
-        selection,
-        props.viewModel,
-    ]);
-}
-// I think this was pulled out for performance
-// 1/10: Not sure this is properly split up
-export function getAggregateKeyframeEditorUtilsPrismFn(props) {
-    const { index, aggregateKeyframes, selection } = props;
-    const { projectId, sheetId } = props.viewModel.type === 'sheet'
-        ? props.viewModel.sheet.address
-        : props.viewModel.sheetObject.address;
-    return () => {
-        const cur = aggregateKeyframes[index];
-        const next = aggregateKeyframes[index + 1];
-        const curAndNextAggregateKeyframesMatch = next &&
-            cur.keyframes.length === next.keyframes.length &&
-            cur.keyframes.every(({ track }, ind) => next.keyframes[ind].track === track);
-        const connected = curAndNextAggregateKeyframesMatch
-            ? {
-                length: next.position - cur.position,
-                selected: cur.selected === AggregateKeyframePositionIsSelected.AllSelected &&
-                    next.selected === AggregateKeyframePositionIsSelected.AllSelected,
-            }
-            : null;
-        const aggregatedConnections = !connected
-            ? []
-            : cur.keyframes.map(({ kf, track }, i) => ({
-                ...track.sheetObject.address,
-                trackId: track.id,
-                left: kf,
-                right: next.keyframes[i].kf,
-            }));
-        const allConnections = iif(() => {
-            const selectedConnections = prism
-                .memo('selectedConnections', () => selectedKeyframeConnections(projectId, sheetId, selection), [projectId, sheetId, selection])
-                .getValue();
-            return [...aggregatedConnections, ...selectedConnections];
-        });
-        const isAggregateEditingInCurvePopover = aggregatedConnections.every((con) => isConnectionEditingInCurvePopover(con));
-        const itemKey = prism.memo('itemKey', () => {
-            if (props.viewModel.type === 'sheet') {
-                return createStudioSheetItemKey.forSheetAggregateKeyframe(props.viewModel.sheet, cur.position);
-            }
-            else if (props.viewModel.type === 'sheetObject') {
-                return createStudioSheetItemKey.forSheetObjectAggregateKeyframe(props.viewModel.sheetObject, cur.position);
-            }
-            else {
-                return createStudioSheetItemKey.forCompoundPropAggregateKeyframe(props.viewModel.sheetObject, props.viewModel.pathToProp, cur.position);
-            }
-        }, [props.viewModel, cur.position]);
-        return {
-            itemKey,
-            cur,
-            connected,
-            isAggregateEditingInCurvePopover,
-            allConnections,
-        };
-    };
-}