@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,19 @@
+import type { 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 { AggregatedKeyframes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+type IAggregatedKeyframeTracksProps = {
+    viewModel: SequenceEditorTree_PropWithChildren | SequenceEditorTree_SheetObject | SequenceEditorTree_Sheet;
+    aggregatedKeyframes: AggregatedKeyframes;
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+};
+declare function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps): React.JSX.Element;
+declare const AggregatedKeyframeTrack: React.MemoExoticComponent<typeof AggregatedKeyframeTrack_memo>;
+export default AggregatedKeyframeTrack;
+export declare enum AggregateKeyframePositionIsSelected {
+    AllSelected = 0,
+    AtLeastOneUnselected = 1,
+    NoneSelected = 2
+}
+//# sourceMappingURL=AggregatedKeyframeTrack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AggregatedKeyframeTrack.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,yBAAyB,EAC1B,MAAM,0EAA0E,CAAA;AACjF,OAAO,KAAK,EACV,mCAAmC,EACnC,wBAAwB,EACxB,8BAA8B,EAC/B,MAAM,wEAAwE,CAAA;AAE/E,OAAO,KAAK,EAAQ,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAEtE,OAAO,KAA0B,MAAM,OAAO,CAAA;AAU9C,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,sGAAsG,CAAA;AAsC7G,KAAK,8BAA8B,GAAG;IACpC,SAAS,EACL,mCAAmC,GACnC,8BAA8B,GAC9B,wBAAwB,CAAA;IAC5B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAAA;AAYD,iBAAS,4BAA4B,CAAC,KAAK,EAAE,8BAA8B,qBA0H1E;AAED,QAAA,MAAM,uBAAuB,gEAA2C,CAAA;AACxE,eAAe,uBAAuB,CAAA;AAEtC,oBAAY,mCAAmC;IAC7C,WAAW,IAAA;IACX,oBAAoB,IAAA;IACpB,YAAY,IAAA;CACb"}

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

@@ -0,0 +1,407 @@
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import { prism, val, pointerToPrism } from '@tomorrowevening/theatre-dataverse';
+import React, { useMemo, Fragment } from 'react';
+import styled from 'styled-components';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import AggregateKeyframeEditor from './AggregateKeyframeEditor/AggregateKeyframeEditor';
+import { collectAggregateSnapPositionsObjectOrCompound } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+import { useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
+import { getAggregateKeyframeEditorUtilsPrismFn } from './AggregateKeyframeEditor/useAggregateKeyframeEditorUtils';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import { useLockFrameStampPositionRef } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { decodePathToProp, doesPathStartWith, encodePathToProp, } from '@tomorrowevening/theatre-shared/utils/addresses';
+import KeyframeSnapTarget, { snapPositionsStateD, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
+import { emptyObject } from '@tomorrowevening/theatre-shared/utils';
+import { collectKeyframeSnapPositions, snapToNone, snapToSome, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
+import { collectAggregateSnapPositionsSheet } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+const AggregatedKeyframeTrackContainer = styled.div `
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+const EMPTY_SELECTION = Object.freeze({
+    selectedPositions: new Map(),
+    selection: undefined,
+});
+function AggregatedKeyframeTrack_memo(props) {
+    const { layoutP, aggregatedKeyframes, viewModel } = props;
+    const logger = useLogger('AggregatedKeyframeTrack');
+    const [containerRef, containerNode] = useRefAndState(null);
+    const { selectedPositions, selection } = useCollectedSelectedPositions(layoutP, aggregatedKeyframes);
+    const [contextMenu, _, isOpen] = useAggregatedKeyframeTrackContextMenu(containerNode, props, () => logger._debug('see aggregatedKeyframes', props.aggregatedKeyframes));
+    const posKfs = useMemo(() => [...aggregatedKeyframes.byPosition.entries()]
+        .sort((a, b) => a[0] - b[0])
+        .map(([position, keyframes]) => ({
+        position,
+        keyframes,
+        selected: selectedPositions.get(position),
+        allHere: keyframes.length === aggregatedKeyframes.tracks.length,
+    })), [aggregatedKeyframes, selectedPositions]);
+    const snapPositionsState = useVal(snapPositionsStateD);
+    const snapToAllKeyframes = snapPositionsState.mode === 'snapToAll';
+    const snapPositions = snapPositionsState.mode === 'snapToSome'
+        ? snapPositionsState.positions
+        : emptyObject;
+    const aggregateSnapPositions = useMemo(() => viewModel.type === 'sheet'
+        ? collectAggregateSnapPositionsSheet(viewModel, snapPositions)
+        : collectAggregateSnapPositionsObjectOrCompound(viewModel, snapPositions), [snapPositions]);
+    const snapTargets = aggregateSnapPositions.map((position) => (React.createElement(KeyframeSnapTarget, { key: 'snap-target-' + position, layoutP: layoutP, leaf: viewModel, position: position })));
+    const keyframeEditorProps = useMemo(() => posKfs.map(({ position, keyframes }, index) => ({
+        position,
+        editorProps: {
+            index,
+            layoutP,
+            viewModel,
+            aggregateKeyframes: posKfs,
+            selection: selectedPositions.has(position) ? selection : undefined,
+        },
+    })), [posKfs, viewModel, selectedPositions]);
+    const [isDragging] = useDragForAggregateKeyframeDot(containerNode, (position) => {
+        return keyframeEditorProps.find((editorProp) => editorProp.position === position)?.editorProps;
+    }, {
+        onClickFromDrag(dragStartEvent) {
+            // TODO Aggregate inline keyframe editor
+            // openEditor(dragStartEvent, ref.current!)
+        },
+    });
+    const keyframeEditors = keyframeEditorProps.map((props, i) => (React.createElement(Fragment, { key: 'agg-' + posKfs[i].keyframes[0].kf.id },
+        snapToAllKeyframes && (React.createElement(KeyframeSnapTarget, { layoutP: layoutP, leaf: viewModel, position: props.position })),
+        React.createElement(AggregateKeyframeEditor, { ...props.editorProps }))));
+    return (React.createElement(AggregatedKeyframeTrackContainer, { ref: containerRef, style: {
+            background: isOpen ? '#444850 ' : 'unset',
+        } },
+        keyframeEditors,
+        snapTargets,
+        contextMenu));
+}
+const AggregatedKeyframeTrack = React.memo(AggregatedKeyframeTrack_memo);
+export default AggregatedKeyframeTrack;
+export var AggregateKeyframePositionIsSelected;
+(function (AggregateKeyframePositionIsSelected) {
+    AggregateKeyframePositionIsSelected[AggregateKeyframePositionIsSelected["AllSelected"] = 0] = "AllSelected";
+    AggregateKeyframePositionIsSelected[AggregateKeyframePositionIsSelected["AtLeastOneUnselected"] = 1] = "AtLeastOneUnselected";
+    AggregateKeyframePositionIsSelected[AggregateKeyframePositionIsSelected["NoneSelected"] = 2] = "NoneSelected";
+})(AggregateKeyframePositionIsSelected || (AggregateKeyframePositionIsSelected = {}));
+const { AllSelected, AtLeastOneUnselected, NoneSelected } = AggregateKeyframePositionIsSelected;
+/** Helper to put together the selected positions */
+function useCollectedSelectedPositions(layoutP, aggregatedKeyframes) {
+    return usePrism(() => val(collectedSelectedPositions(layoutP, aggregatedKeyframes)), [layoutP, aggregatedKeyframes]);
+}
+function collectedSelectedPositions(layoutP, aggregatedKeyframes) {
+    return prism(() => {
+        const selectionAtom = val(layoutP.selectionAtom);
+        const selection = val(selectionAtom.pointer.current);
+        if (!selection)
+            return EMPTY_SELECTION;
+        const selectedAtPositions = new Map();
+        for (const [position, kfsWithTrack] of aggregatedKeyframes.byPosition) {
+            const positionIsSelected = allOrSomeOrNoneSelected(kfsWithTrack, selection);
+            if (positionIsSelected !== undefined &&
+                positionIsSelected !== NoneSelected) {
+                selectedAtPositions.set(position, positionIsSelected);
+            }
+        }
+        return {
+            selectedPositions: selectedAtPositions,
+            selection: val(selectionAtom.pointer.current),
+        };
+    });
+}
+function allOrSomeOrNoneSelected(keyframeWithTracks, selection) {
+    let positionIsSelected = undefined;
+    for (const { track, kf } of keyframeWithTracks) {
+        const kfIsSelected = selection.byObjectKey[track.sheetObject.address.objectKey]?.byTrackId[track.id]?.byKeyframeId?.[kf.id] === true;
+        if (positionIsSelected === undefined) {
+            if (kfIsSelected) {
+                positionIsSelected = AllSelected;
+            }
+            else {
+                positionIsSelected = NoneSelected;
+            }
+        }
+        else if (kfIsSelected) {
+            if (positionIsSelected === NoneSelected) {
+                positionIsSelected = AtLeastOneUnselected;
+            }
+        }
+        else {
+            if (positionIsSelected === AllSelected) {
+                positionIsSelected = AtLeastOneUnselected;
+            }
+        }
+    }
+    return positionIsSelected;
+}
+function useAggregatedKeyframeTrackContextMenu(node, props, debugOnOpen) {
+    return useContextMenu(node, {
+        onOpen: debugOnOpen,
+        displayName: 'Aggregate Keyframe Track',
+        menuItems: () => {
+            const selectionKeyframes = pointerToPrism(getStudio().atomP.ahistoric.clipboard.keyframesWithRelativePaths).getValue() ?? [];
+            return [pasteKeyframesContextMenuItem(props, selectionKeyframes)];
+        },
+    });
+}
+function pasteKeyframesContextMenuItem(props, keyframes) {
+    return {
+        label: 'Paste Keyframes',
+        enabled: keyframes.length > 0,
+        callback: () => {
+            const sheet = val(props.layoutP.sheet);
+            const sequence = sheet.getSequence();
+            if (props.viewModel.type === 'sheet') {
+                pasteKeyframesSheet(props.viewModel, keyframes, sequence);
+            }
+            else {
+                pasteKeyframesObjectOrCompound(props.viewModel, keyframes, sequence);
+            }
+        },
+    };
+}
+/**
+ * Given a list of keyframes that contain paths relative to a common root,
+ * (see `copyableKeyframesFromSelection`) this function pastes those keyframes
+ * into tracks on either the object (if viewModel.type === 'sheetObject') or
+ * the compound prop (if viewModel.type === 'propWithChildren').
+ *
+ * Our copy & paste behavior is currently roughly described in AGGREGATE_COPY_PASTE.md
+ *
+ * @see StudioAhistoricState.clipboard
+ * @see setClipboardNestedKeyframes
+ */
+function pasteKeyframesSheet(viewModel, keyframes, sequence) {
+    const { projectId, sheetId, sheetInstanceId } = viewModel.sheet.address;
+    const areKeyframesAllOnSingleTrack = keyframes.every(({ pathToProp }) => pathToProp.length === 0);
+    if (areKeyframesAllOnSingleTrack) {
+        for (const object of viewModel.children.map((child) => child.sheetObject)) {
+            const tracksByObject = pointerToPrism(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
+                .sequence.tracksByObject[object.address.objectKey]).getValue();
+            const trackIdsOnObject = Object.keys(tracksByObject?.trackData ?? {});
+            pasteKeyframesToMultipleTracks(object.address, trackIdsOnObject, keyframes, sequence);
+        }
+    }
+    else {
+        const tracksByObject = pointerToPrism(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
+            .sequence.tracksByObject).getValue();
+        const placeableKeyframes = keyframes
+            .map(({ keyframe, pathToProp }) => {
+            const objectKey = pathToProp[0];
+            const relativePathToProp = pathToProp.slice(1);
+            const pathToPropEncoded = encodePathToProp([...relativePathToProp]);
+            const trackIdByPropPath = tracksByObject?.[objectKey]?.trackIdByPropPath ?? {};
+            const maybeTrackId = trackIdByPropPath[pathToPropEncoded];
+            return maybeTrackId
+                ? {
+                    keyframe,
+                    trackId: maybeTrackId,
+                    address: {
+                        objectKey,
+                        projectId,
+                        sheetId,
+                        sheetInstanceId,
+                    },
+                }
+                : null;
+        })
+            .filter((result) => result !== null);
+        pasteKeyframesToSpecificTracks(placeableKeyframes, sequence);
+    }
+}
+function pasteKeyframesObjectOrCompound(viewModel, keyframes, sequence) {
+    const { projectId, sheetId, objectKey } = viewModel.sheetObject.address;
+    const trackRecords = pointerToPrism(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
+        .sequence.tracksByObject[objectKey]).getValue();
+    const areKeyframesAllOnSingleTrack = keyframes.every(({ pathToProp }) => pathToProp.length === 0);
+    if (areKeyframesAllOnSingleTrack) {
+        const trackIdsOnObject = Object.keys(trackRecords?.trackData ?? {});
+        if (viewModel.type === 'sheetObject') {
+            pasteKeyframesToMultipleTracks(viewModel.sheetObject.address, trackIdsOnObject, keyframes, sequence);
+        }
+        else {
+            const trackIdByPropPath = trackRecords?.trackIdByPropPath || {};
+            const trackIdsOnCompoundProp = Object.entries(trackIdByPropPath)
+                .filter(([encodedPath, trackId]) => trackId !== undefined &&
+                doesPathStartWith(
+                // e.g. a track with path `['position', 'x']` is under the compound track with path `['position']`
+                decodePathToProp(encodedPath), viewModel.pathToProp))
+                .map(([encodedPath, trackId]) => trackId);
+            pasteKeyframesToMultipleTracks(viewModel.sheetObject.address, trackIdsOnCompoundProp, keyframes, sequence);
+        }
+    }
+    else {
+        const trackIdByPropPath = trackRecords?.trackIdByPropPath || {};
+        const rootPath = viewModel.type === 'propWithChildren' ? viewModel.pathToProp : [];
+        const placeableKeyframes = keyframes
+            .map(({ keyframe, pathToProp: relativePathToProp }) => {
+            const pathToPropEncoded = encodePathToProp([
+                ...rootPath,
+                ...relativePathToProp,
+            ]);
+            const maybeTrackId = trackIdByPropPath[pathToPropEncoded];
+            return maybeTrackId
+                ? {
+                    keyframe,
+                    trackId: maybeTrackId,
+                    address: viewModel.sheetObject.address,
+                }
+                : null;
+        })
+            .filter((result) => result !== null);
+        pasteKeyframesToSpecificTracks(placeableKeyframes, sequence);
+    }
+}
+function pasteKeyframesToMultipleTracks(address, trackIds, keyframes, sequence) {
+    sequence.position = sequence.closestGridPosition(sequence.position);
+    const keyframeOffset = earliestKeyframe(keyframes.map(({ keyframe }) => keyframe))?.position;
+    getStudio().transaction(({ stateEditors }) => {
+        for (const trackId of trackIds) {
+            for (const { keyframe } of keyframes) {
+                stateEditors.coreByProject.historic.sheetsById.sequence.setKeyframeAtPosition({
+                    ...address,
+                    trackId,
+                    position: sequence.position + keyframe.position - keyframeOffset,
+                    handles: keyframe.handles,
+                    value: keyframe.value,
+                    snappingFunction: sequence.closestGridPosition,
+                    type: keyframe.type,
+                });
+            }
+        }
+    });
+}
+function pasteKeyframesToSpecificTracks(keyframesWithTracksToPlaceThemIn, sequence) {
+    sequence.position = sequence.closestGridPosition(sequence.position);
+    const keyframeOffset = earliestKeyframe(keyframesWithTracksToPlaceThemIn.map(({ keyframe }) => keyframe))?.position;
+    getStudio().transaction(({ stateEditors }) => {
+        for (const { keyframe, trackId, address, } of keyframesWithTracksToPlaceThemIn) {
+            stateEditors.coreByProject.historic.sheetsById.sequence.setKeyframeAtPosition({
+                ...address,
+                trackId,
+                position: sequence.position + keyframe.position - keyframeOffset,
+                handles: keyframe.handles,
+                value: keyframe.value,
+                snappingFunction: sequence.closestGridPosition,
+                type: keyframe.type,
+            });
+        }
+    });
+}
+function earliestKeyframe(keyframes) {
+    let curEarliest = null;
+    for (const keyframe of keyframes) {
+        if (curEarliest === null || keyframe.position < curEarliest.position) {
+            curEarliest = keyframe;
+        }
+    }
+    return curEarliest;
+}
+function useDragForAggregateKeyframeDot(containerNode, getPropsForPosition, options) {
+    const logger = useLogger('useDragForAggregateKeyframeDot');
+    const frameStampLock = useLockFrameStampPositionRef();
+    const useDragOpts = useMemo(() => {
+        return {
+            debugName: 'AggregateKeyframeDot/useDragKeyframe',
+            onDragStart(event) {
+                logger._debug('onDragStart', { target: event.target });
+                const positionToFind = Number(event.target.dataset.pos);
+                const props = getPropsForPosition(positionToFind);
+                if (!props) {
+                    logger._debug('no props found for ', { positionToFind });
+                    return false;
+                }
+                frameStampLock(true, positionToFind);
+                const keyframes = prism(getAggregateKeyframeEditorUtilsPrismFn(props)).getValue().cur.keyframes;
+                const address = props.viewModel.type === 'sheet'
+                    ? props.viewModel.sheet.address
+                    : props.viewModel.sheetObject.address;
+                const tracksByObject = val(getStudio().atomP.historic.coreByProject[address.projectId]
+                    .sheetsById[address.sheetId].sequence.tracksByObject);
+                // Calculate all the valid snap positions in the sequence editor,
+                // excluding the child keyframes of this aggregate, and any selection it is part of.
+                const snapPositions = collectKeyframeSnapPositions(tracksByObject, function shouldIncludeKeyfram(keyframe, { trackId, objectKey }) {
+                    return (
+                    // we exclude all the child keyframes of this aggregate keyframe from being a snap target
+                    keyframes.every((kfWithTrack) => keyframe.id !== kfWithTrack.kf.id) &&
+                        !(
+                        // if all of the children of the current aggregate keyframe are in a selection,
+                        (props.selection &&
+                            // then we exclude them and all other keyframes in the selection from being snap targets
+                            props.selection.byObjectKey[objectKey]?.byTrackId[trackId]
+                                ?.byKeyframeId[keyframe.id])));
+                });
+                snapToSome(snapPositions);
+                if (props.selection &&
+                    props.aggregateKeyframes[props.index].selected ===
+                        AggregateKeyframePositionIsSelected.AllSelected) {
+                    const { selection, viewModel } = props;
+                    const handlers = selection
+                        .getDragHandlers({
+                        ...address,
+                        domNode: containerNode,
+                        positionAtStartOfDrag: keyframes[0].kf.position,
+                    })
+                        .onDragStart(event);
+                    return (handlers && {
+                        ...handlers,
+                        onClick: options.onClickFromDrag,
+                        onDragEnd: (...args) => {
+                            handlers.onDragEnd?.(...args);
+                            snapToNone();
+                        },
+                    });
+                }
+                const propsAtStartOfDrag = props;
+                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
+                let tempTransaction;
+                return {
+                    onDrag(dx, dy, event) {
+                        const newPosition = Math.max(
+                        // check if our event hovers over a [data-pos] element
+                        DopeSnap.checkIfMouseEventSnapToPos(event, {
+                        // ignore: node,
+                        }) ??
+                            // if we don't find snapping target, check the distance dragged + original position
+                            keyframes[0].kf.position + toUnitSpace(dx), 
+                        // sanitize to minimum of zero
+                        0);
+                        frameStampLock(true, newPosition);
+                        tempTransaction?.discard();
+                        tempTransaction = undefined;
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            for (const keyframe of keyframes) {
+                                const original = keyframe.kf;
+                                stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                    ...keyframe.track.sheetObject.address,
+                                    trackId: keyframe.track.id,
+                                    keyframes: [{ ...original, position: newPosition }],
+                                    snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                                });
+                            }
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        frameStampLock(false, -1);
+                        if (dragHappened) {
+                            tempTransaction?.commit();
+                        }
+                        else {
+                            tempTransaction?.discard();
+                            options.onClickFromDrag(event);
+                        }
+                        snapToNone();
+                    },
+                    onClick(ev) {
+                        options.onClickFromDrag(ev);
+                    },
+                };
+            },
+        };
+    }, [getPropsForPosition, options.onClickFromDrag]);
+    const [isDragging] = useDrag(containerNode, useDragOpts);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
+    return [isDragging];
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.d.ts

@@ -0,0 +1,13 @@
+import type { TrackData } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { SequenceEditorTree_PrimitiveProp } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/tree';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+type BasicKeyframedTracksProps = {
+    leaf: SequenceEditorTree_PrimitiveProp;
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    trackData: TrackData;
+};
+declare const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps>;
+export default BasicKeyframedTrack;
+//# sourceMappingURL=BasicKeyframedTrack.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicKeyframedTrack.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wEAAwE,CAAA;AACrG,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,wEAAwE,CAAA;AAG5H,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAgB,MAAM,OAAO,CAAA;AAoBpC,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,gCAAgC,CAAA;IACtC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,yBAAyB,CAsG7D,CAAA;AAID,eAAe,mBAAmB,CAAA"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.js

@@ -0,0 +1,108 @@
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import SingleKeyframeEditor from './KeyframeEditor/SingleKeyframeEditor';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { arePathsEqual } from '@tomorrowevening/theatre-shared/utils/addresses';
+import KeyframeSnapTarget, { snapPositionsStateD, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
+import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+const Container = styled.div `
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+const BasicKeyframedTrack = React.memo((props) => {
+    const { layoutP, trackData, leaf } = props;
+    const [containerRef, containerNode] = useRefAndState(null);
+    const { selectedKeyframeIds, selection } = usePrism(() => {
+        const selectionAtom = val(layoutP.selectionAtom);
+        const selectedKeyframeIds = val(selectionAtom.pointer.current.byObjectKey[leaf.sheetObject.address.objectKey].byTrackId[leaf.trackId].byKeyframeId);
+        if (selectedKeyframeIds) {
+            return {
+                selectedKeyframeIds,
+                selection: val(selectionAtom.pointer.current),
+            };
+        }
+        else {
+            return {
+                selectedKeyframeIds: {},
+                selection: undefined,
+            };
+        }
+    }, [layoutP, leaf.trackId]);
+    const [contextMenu, _, isOpen] = useBasicKeyframedTrackContextMenu(containerNode, props);
+    const snapPositionsState = useVal(snapPositionsStateD);
+    const snapPositions = snapPositionsState.mode === 'snapToSome'
+        ? snapPositionsState.positions[leaf.sheetObject.address.objectKey]?.[leaf.trackId]
+        : [] ?? [];
+    const snapToAllKeyframes = snapPositionsState.mode === 'snapToAll';
+    const track = useMemo(() => ({
+        data: trackData,
+        id: leaf.trackId,
+        sheetObject: props.leaf.sheetObject,
+    }), [trackData, leaf.trackId]);
+    const keyframeEditors = trackData.keyframes.map((kf, index) => (React.createElement(SingleKeyframeEditor, { key: 'keyframe-' + kf.id, itemKey: createStudioSheetItemKey.forTrackKeyframe(leaf.sheetObject, leaf.trackId, kf.id), keyframe: kf, index: index, track: track, layoutP: layoutP, leaf: leaf, selection: selectedKeyframeIds[kf.id] === true ? selection : undefined })));
+    const snapTargets = snapPositions.map((position) => (React.createElement(KeyframeSnapTarget, { key: 'snap-target-' + position, layoutP: layoutP, leaf: leaf, position: position })));
+    const additionalSnapTargets = !snapToAllKeyframes
+        ? null
+        : trackData.keyframes.map((kf) => (React.createElement(KeyframeSnapTarget, { key: `additionalSnapTarget-${kf.id}`, layoutP: layoutP, leaf: leaf, position: kf.position })));
+    return (React.createElement(Container, { ref: containerRef, style: {
+            background: isOpen ? '#444850 ' : 'unset',
+        } },
+        keyframeEditors,
+        snapTargets,
+        React.createElement(React.Fragment, null, additionalSnapTargets),
+        contextMenu));
+});
+BasicKeyframedTrack.displayName = `BasicKeyframedTrack`;
+export default BasicKeyframedTrack;
+function useBasicKeyframedTrackContextMenu(node, props) {
+    return useContextMenu(node, {
+        displayName: 'Keyframe Track',
+        menuItems: () => {
+            const selectionKeyframes = val(getStudio().atomP.ahistoric.clipboard.keyframesWithRelativePaths) ?? [];
+            return [pasteKeyframesContextMenuItem(props, selectionKeyframes)];
+        },
+    });
+}
+function pasteKeyframesContextMenuItem(props, keyframes) {
+    return {
+        label: 'Paste Keyframes',
+        enabled: keyframes.length > 0,
+        callback: () => {
+            const sheet = val(props.layoutP.sheet);
+            const sequence = sheet.getSequence();
+            const firstPath = keyframes[0]?.pathToProp;
+            const singleTrackKeyframes = keyframes
+                .filter(({ keyframe, pathToProp }) => arePathsEqual(firstPath, pathToProp))
+                .map(({ keyframe, pathToProp }) => keyframe);
+            getStudio().transaction(({ stateEditors }) => {
+                sequence.position = sequence.closestGridPosition(sequence.position);
+                const keyframeOffset = earliestKeyframe(singleTrackKeyframes)?.position;
+                for (const keyframe of singleTrackKeyframes) {
+                    stateEditors.coreByProject.historic.sheetsById.sequence.setKeyframeAtPosition({
+                        ...props.leaf.sheetObject.address,
+                        trackId: props.leaf.trackId,
+                        position: sequence.position + keyframe.position - keyframeOffset,
+                        handles: keyframe.handles,
+                        value: keyframe.value,
+                        snappingFunction: sequence.closestGridPosition,
+                        type: keyframe.type,
+                    });
+                }
+            });
+        },
+    };
+}
+function earliestKeyframe(keyframes) {
+    let curEarliest = null;
+    for (const keyframe of keyframes) {
+        if (curEarliest === null || keyframe.position < curEarliest.position) {
+            curEarliest = keyframe;
+        }
+    }
+    return curEarliest;
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ISingleKeyframeEditorProps } from './SingleKeyframeEditor';
+type IBasicKeyframeConnectorProps = ISingleKeyframeEditorProps;
+declare const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps>;
+export default BasicKeyframeConnector;
+//# sourceMappingURL=BasicKeyframeConnector.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicKeyframeConnector.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAA;AAkBtE,KAAK,4BAA4B,GAAG,0BAA0B,CAAA;AAE9D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,4BAA4B,CAiEnE,CAAA;AACD,eAAe,sBAAsB,CAAA"}