@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,187 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IAggregateKeyframeEditorProps } from './AggregateKeyframeEditor';
+import type { IAggregateKeyframeEditorUtils } from './useAggregateKeyframeEditorUtils';
+type IAggregateKeyframeDotProps = {
+    editorProps: IAggregateKeyframeEditorProps;
+    utils: IAggregateKeyframeEditorUtils;
+};
+export declare function AggregateKeyframeDot(props: React.PropsWithChildren<IAggregateKeyframeDotProps>): React.JSX.Element;
+export {};
+//# sourceMappingURL=AggregateKeyframeDot.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AggregateKeyframeDot.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,2BAA2B,CAAA;AAC5E,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,mCAAmC,CAAA;AAuBpF,KAAK,0BAA0B,GAAG;IAChC,WAAW,EAAE,6BAA6B,CAAA;IAC1C,KAAK,EAAE,6BAA6B,CAAA;CACrC,CAAA;AA4DD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,qBAyD3D"}

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

@@ -0,0 +1,158 @@
+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.d.ts

@@ -0,0 +1,44 @@
+import type { Keyframe } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type { DopeSheetSelection, SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { SequenceEditorTree_PropWithChildren, SequenceEditorTree_Sheet, SequenceEditorTree_SheetObject } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/tree';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { AggregateKeyframePositionIsSelected } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack';
+import type { KeyframeWithTrack } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+import type { SheetObjectAddress } from '@tomorrowevening/theatre-shared/utils/addresses';
+export type IAggregateKeyframesAtPosition = {
+    position: number;
+    /** all tracks have a keyframe for this position (otherwise, false means 'partial') */
+    allHere: boolean;
+    selected: AggregateKeyframePositionIsSelected | undefined;
+    keyframes: KeyframeWithTrack[];
+};
+export type AggregatedKeyframeConnection = SheetObjectAddress & {
+    trackId: SequenceTrackId;
+    left: Keyframe;
+    right: Keyframe;
+};
+export type IAggregateKeyframeEditorProps = {
+    index: number;
+    aggregateKeyframes: IAggregateKeyframesAtPosition[];
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    viewModel: SequenceEditorTree_PropWithChildren | SequenceEditorTree_SheetObject | SequenceEditorTree_Sheet;
+    selection: undefined | DopeSheetSelection;
+};
+/**
+ * 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.
+ */
+declare const AggregateKeyframeEditor: React.VFC<IAggregateKeyframeEditorProps>;
+export default AggregateKeyframeEditor;
+//# sourceMappingURL=AggregateKeyframeEditor.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AggregateKeyframeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,wEAAwE,CAAA;AACpG,OAAO,KAAK,EACV,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,0EAA0E,CAAA;AACjF,OAAO,KAAK,EACV,mCAAmC,EACnC,wBAAwB,EACxB,8BAA8B,EAC/B,MAAM,wEAAwE,CAAA;AAC/E,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAA;AAC9E,OAAO,KAAK,EAAC,mCAAmC,EAAC,MAAM,4HAA4H,CAAA;AACnL,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,sGAAsG,CAAA;AAC3I,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iDAAiD,CAAA;AASvF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CAAA;IAChB,sFAAsF;IACtF,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,mCAAmC,GAAG,SAAS,CAAA;IACzD,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,GAAG;IAC9D,OAAO,EAAE,eAAe,CAAA;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,EAAE,6BAA6B,EAAE,CAAA;IACnD,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,SAAS,EACL,mCAAmC,GACnC,8BAA8B,GAC9B,wBAAwB,CAAA;IAC5B,SAAS,EAAE,SAAS,GAAG,kBAAkB,CAAA;CAC1C,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,6BAA6B,CAkBlE,CAAA;AAEJ,eAAe,uBAAuB,CAAA"}

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

@@ -0,0 +1,32 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AggregateKeyframePositionIsSelected } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack';
+import { PresenceFlag } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+export declare const HitZone: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare function AggregateKeyframeVisualDot(props: {
+    flag: PresenceFlag | undefined;
+    isSelected: AggregateKeyframePositionIsSelected | undefined;
+    isAllHere: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=AggregateKeyframeVisualDot.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AggregateKeyframeVisualDot.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,mCAAmC,EAAC,MAAM,4HAA4H,CAAA;AAC9K,OAAO,EAAC,YAAY,EAAC,MAAM,0DAA0D,CAAA;AAiBrF,eAAO,MAAM,OAAO,oEAenB,CAAA;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE;IAChD,IAAI,EAAE,YAAY,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,mCAAmC,GAAG,SAAS,CAAA;IAC3D,SAAS,EAAE,OAAO,CAAA;CACnB,qBAeA"}

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

@@ -0,0 +1,61 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export declare function iif<F extends () => any>(fn: F): ReturnType<F>;
+//# sourceMappingURL=iif.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/iif.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iif.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/iif.tsx"],"names":[],"mappings":"AAAA,wBAAgB,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAE7D"}

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

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

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/useAggregateKeyframeEditorUtils.d.ts

@@ -0,0 +1,23 @@
+import type { IAggregateKeyframeEditorProps } from './AggregateKeyframeEditor';
+export type IAggregateKeyframeEditorUtils = ReturnType<typeof useAggregateKeyframeEditorUtils>;
+export declare function useAggregateKeyframeEditorUtils(props: Pick<IAggregateKeyframeEditorProps, 'index' | 'aggregateKeyframes' | 'selection' | 'viewModel'>): {
+    itemKey: import("@tomorrowevening/theatre-shared/utils/ids").StudioSheetItemKey;
+    cur: import("./AggregateKeyframeEditor").IAggregateKeyframesAtPosition;
+    connected: {
+        length: number;
+        selected: boolean;
+    } | null;
+    isAggregateEditingInCurvePopover: boolean;
+    allConnections: import("@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections").KeyframeConnectionWithAddress[];
+};
+export declare function getAggregateKeyframeEditorUtilsPrismFn(props: Pick<IAggregateKeyframeEditorProps, 'index' | 'aggregateKeyframes' | 'selection' | 'viewModel'>): () => {
+    itemKey: import("@tomorrowevening/theatre-shared/utils/ids").StudioSheetItemKey;
+    cur: import("./AggregateKeyframeEditor").IAggregateKeyframesAtPosition;
+    connected: {
+        length: number;
+        selected: boolean;
+    } | null;
+    isAggregateEditingInCurvePopover: boolean;
+    allConnections: import("@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections").KeyframeConnectionWithAddress[];
+};
+//# sourceMappingURL=useAggregateKeyframeEditorUtils.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/useAggregateKeyframeEditorUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAggregateKeyframeEditorUtils.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/useAggregateKeyframeEditorUtils.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,2BAA2B,CAAA;AAGlC,MAAM,MAAM,6BAA6B,GAAG,UAAU,CACpD,OAAO,+BAA+B,CACvC,CAAA;AAID,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,IAAI,CACT,6BAA6B,EAC7B,OAAO,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,CAC3D;;;;;;;;;EAUF;AAID,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,IAAI,CACT,6BAA6B,EAC7B,OAAO,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,CAC3D;;;;;;;;;EAoFF"}

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

@@ -0,0 +1,73 @@
+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,
+        };
+    };
+}