@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,58 @@
+import type { SequenceEditorTree_PropWithChildren, SequenceEditorTree_Sheet, SequenceEditorTree_SheetObject } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/tree';
+import type { SequenceTrackId, StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { Keyframe, TrackData } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+/**
+ * An index over a series of keyframes that have been collected from different tracks.
+ *
+ * Usually constructed via {@link collectAggregateKeyframesInPrism}.
+ */
+export type AggregatedKeyframes = {
+    byPosition: Map<number, KeyframeWithTrack[]>;
+    tracks: TrackWithId[];
+};
+export type TrackWithId = {
+    id: SequenceTrackId;
+    data: TrackData;
+    sheetObject: SheetObject;
+};
+export type KeyframeWithTrack = {
+    kf: Keyframe;
+    track: TrackWithId;
+    itemKey: StudioSheetItemKey;
+};
+/**
+ * Collect {@link AggregatedKeyframes} information from the given tree row with children.
+ *
+ * Must be called within a `prism` context.
+ *
+ * Implementation progress 2/10:
+ *  - This currently does a lot of duplicate work for each compound rows' compound rows.
+ *    - This appears to have O(N) complexity with N being the number of "things" in the
+ *      tree, thus we don't see an immediate need to cache it further.
+ *    - If concerned, consider making a playground with a lot of objects to test this kind of thing.
+ *
+ * Note that we do not need to filter to only tracks that should be displayed, because we
+ * do not do anything counting or iterating over all tracks.
+ *
+ * Furthermore, we _could_ have been traversing the tree of the sheet and producing
+ * an aggreagte from that, but _that_ aggregate would not take into account
+ * things like filters in the `SequenceEditorPanel`, where the filter would exclude
+ * certain objects and props from the tree.
+ *
+ */
+export declare function collectAggregateKeyframesInPrism(leaf: SequenceEditorTree_Sheet | SequenceEditorTree_PropWithChildren | SequenceEditorTree_SheetObject): AggregatedKeyframes;
+/**
+ * Collects all the snap positions for an aggregate track.
+ */
+export declare function collectAggregateSnapPositionsSheet(leaf: SequenceEditorTree_Sheet, snapTargetPositions: {
+    [key: string]: {
+        [key: string]: number[];
+    };
+}): number[];
+export declare function collectAggregateSnapPositionsObjectOrCompound(leaf: SequenceEditorTree_PropWithChildren | SequenceEditorTree_SheetObject, snapTargetPositions: {
+    [key: string]: {
+        [key: string]: number[];
+    };
+}): number[];
+//# sourceMappingURL=collectAggregateKeyframes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collectAggregateKeyframes.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,mCAAmC,EACnC,wBAAwB,EACxB,8BAA8B,EAC/B,MAAM,wEAAwE,CAAA;AAC/E,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EACnB,MAAM,2CAA2C,CAAA;AAElD,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,wEAAwE,CAAA;AAG/E,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAErF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAA;IAC5C,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,eAAe,CAAA;IACnB,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,WAAW,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,QAAQ,CAAA;IACZ,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,EAAE,kBAAkB,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gCAAgC,CAC9C,IAAI,EACA,wBAAwB,GACxB,mCAAmC,GACnC,8BAA8B,GACjC,mBAAmB,CAUrB;AAiED;;GAEG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,wBAAwB,EAC9B,mBAAmB,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAC,CAAA;CAAC,GAC9D,MAAM,EAAE,CASV;AAED,wBAAgB,6CAA6C,CAC3D,IAAI,EAAE,mCAAmC,GAAG,8BAA8B,EAC1E,mBAAmB,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAC,CAAA;CAAC,GAC9D,MAAM,EAAE,CAcV"}

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

@@ -0,0 +1,92 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import { encodePathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import { uniq } from 'lodash-es';
+/**
+ * Collect {@link AggregatedKeyframes} information from the given tree row with children.
+ *
+ * Must be called within a `prism` context.
+ *
+ * Implementation progress 2/10:
+ *  - This currently does a lot of duplicate work for each compound rows' compound rows.
+ *    - This appears to have O(N) complexity with N being the number of "things" in the
+ *      tree, thus we don't see an immediate need to cache it further.
+ *    - If concerned, consider making a playground with a lot of objects to test this kind of thing.
+ *
+ * Note that we do not need to filter to only tracks that should be displayed, because we
+ * do not do anything counting or iterating over all tracks.
+ *
+ * Furthermore, we _could_ have been traversing the tree of the sheet and producing
+ * an aggreagte from that, but _that_ aggregate would not take into account
+ * things like filters in the `SequenceEditorPanel`, where the filter would exclude
+ * certain objects and props from the tree.
+ *
+ */
+export function collectAggregateKeyframesInPrism(leaf) {
+    const tracks = leaf.type === 'sheet'
+        ? collectAggregateKeyframesSheet(leaf)
+        : collectAggregateKeyframesCompoundOrObject(leaf);
+    return {
+        byPosition: keyframesByPositionFromTrackWithIds(tracks),
+        tracks,
+    };
+}
+function keyframesByPositionFromTrackWithIds(tracks) {
+    const byPosition = new Map();
+    for (const track of tracks) {
+        for (const kf of track.data.keyframes) {
+            let existing = byPosition.get(kf.position);
+            if (!existing) {
+                existing = [];
+                byPosition.set(kf.position, existing);
+            }
+            existing.push({
+                kf,
+                track,
+                itemKey: createStudioSheetItemKey.forTrackKeyframe(track.sheetObject, track.id, kf.id),
+            });
+        }
+    }
+    return byPosition;
+}
+function collectAggregateKeyframesSheet(leaf) {
+    return leaf.children.flatMap(collectAggregateKeyframesCompoundOrObject);
+}
+function collectAggregateKeyframesCompoundOrObject(leaf) {
+    return leaf.children.flatMap((childLeaf) => childLeaf.type === 'propWithChildren'
+        ? collectAggregateKeyframesCompoundOrObject(childLeaf)
+        : collectAggregateKeyframesPrimitiveProp(childLeaf));
+}
+function collectAggregateKeyframesPrimitiveProp(leaf) {
+    const sheetObject = leaf.sheetObject;
+    const projectId = sheetObject.address.projectId;
+    const sheetObjectTracksP = getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey];
+    const trackId = val(sheetObjectTracksP.trackIdByPropPath[encodePathToProp(leaf.pathToProp)]);
+    if (!trackId)
+        return [];
+    const trackData = val(sheetObjectTracksP.trackData[trackId]);
+    if (!trackData)
+        return [];
+    return [{ id: trackId, data: trackData, sheetObject }];
+}
+/**
+ * Collects all the snap positions for an aggregate track.
+ */
+export function collectAggregateSnapPositionsSheet(leaf, snapTargetPositions) {
+    return uniq(leaf.children.flatMap((childLeaf) => collectAggregateSnapPositionsObjectOrCompound(childLeaf, snapTargetPositions)));
+}
+export function collectAggregateSnapPositionsObjectOrCompound(leaf, snapTargetPositions) {
+    return uniq(leaf.children.flatMap((childLeaf) => childLeaf.type === 'propWithChildren'
+        ? collectAggregateSnapPositionsObjectOrCompound(childLeaf, snapTargetPositions)
+        : collectAggregateSnapPositionsPrimitiveProp(childLeaf, snapTargetPositions)));
+}
+function collectAggregateSnapPositionsPrimitiveProp(leaf, snapTargetPositions) {
+    const sheetObject = leaf.sheetObject;
+    const projectId = sheetObject.address.projectId;
+    const sheetObjectTracksP = getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey];
+    const trackId = val(sheetObjectTracksP.trackIdByPropPath[encodePathToProp(leaf.pathToProp)]);
+    if (!trackId)
+        return [];
+    return snapTargetPositions[sheetObject.address.objectKey]?.[trackId] ?? [];
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type IConnectorThemeValues = {
+    isPopoverOpen: boolean;
+    isSelected: boolean;
+};
+export declare const CONNECTOR_THEME: {
+    normalColor: string;
+    selectedColor: string;
+    barColor: (values: IConnectorThemeValues) => string;
+    hoverColor: (values: IConnectorThemeValues) => string;
+};
+export declare const ConnectorLine: React.ForwardRefExoticComponent<{
+    isPopoverOpen: boolean;
+    openPopover?: ((event: React.MouseEvent) => void) | undefined;
+    isSelected: boolean;
+    connectorLengthInUnitSpace: number;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ConnectorLine.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorLine.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,eAAe;;;uBAGP,qBAAqB;yBAMnB,qBAAqB;CAQ3C,CAAA;AAoCD,eAAO,MAAM,aAAa;mBANT,OAAO;2BACA,gBAAgB,KAAK,IAAI;gBACnC,OAAO;gCACS,MAAM;;;wCA6BlC,CAAA"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.js

@@ -0,0 +1,62 @@
+import { lighten, saturate } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import { DOT_SIZE_PX } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot';
+const CONNECTOR_HEIGHT = DOT_SIZE_PX / 2 + 1;
+const CONNECTOR_WIDTH_UNSCALED = 1000;
+export const CONNECTOR_THEME = {
+    normalColor: `#365b59`,
+    selectedColor: `#8A7842`,
+    barColor: (values) => {
+        const base = values.isSelected
+            ? CONNECTOR_THEME.selectedColor
+            : CONNECTOR_THEME.normalColor;
+        return values.isPopoverOpen ? saturate(0.2, lighten(0.2, base)) : base;
+    },
+    hoverColor: (values) => {
+        const base = values.isSelected
+            ? CONNECTOR_THEME.selectedColor
+            : CONNECTOR_THEME.normalColor;
+        return values.isPopoverOpen
+            ? saturate(0.2, lighten(0.2, base))
+            : saturate(0.1, lighten(0.1, base));
+    },
+};
+const Container = styled.div `
+  position: absolute;
+  background: ${CONNECTOR_THEME.barColor};
+  height: ${CONNECTOR_HEIGHT}px;
+  width: ${CONNECTOR_WIDTH_UNSCALED}px;
+
+  left: 0;
+  top: -${CONNECTOR_HEIGHT / 2}px;
+  transform-origin: top left;
+  z-index: 0;
+  cursor: ew-resize;
+
+  &:after {
+    display: block;
+    position: absolute;
+    content: ' ';
+    top: -4px;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+  }
+
+  &:hover {
+    background: ${CONNECTOR_THEME.hoverColor};
+  }
+`;
+export const ConnectorLine = React.forwardRef((props, ref) => {
+    const themeValues = {
+        isPopoverOpen: props.isPopoverOpen,
+        isSelected: props.isSelected,
+    };
+    return (React.createElement(Container, { ...themeValues, ref: ref, style: {
+            // Previously we used scale3d, which had weird fuzzy rendering look in both FF & Chrome
+            transform: `scaleX(calc(var(--unitSpaceToScaledSpaceMultiplier) * ${props.connectorLengthInUnitSpace / CONNECTOR_WIDTH_UNSCALED}))`,
+        }, onClick: (e) => {
+            props.openPopover?.(e);
+        } }, props.children));
+});

package/dist/panels/SequenceEditorPanel/DopeSheet/selections.d.ts

@@ -0,0 +1,82 @@
+import type { Prism } from '@tomorrowevening/theatre-dataverse';
+import type { KeyframeId, ObjectAddressKey, ProjectId, SequenceTrackId, SheetId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { DopeSheetSelection } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Keyframe } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type { KeyframeWithPathToPropFromCommonRoot } from '@tomorrowevening/theatre-studio/store/types';
+/**
+ * Keyframe connections are considered to be selected if the first
+ * keyframe in the connection is selected
+ */
+export declare function isKeyframeConnectionInSelection(keyframeConnection: {
+    left: Keyframe;
+    right: Keyframe;
+}, selection: DopeSheetSelection): boolean;
+export type KeyframeConnectionWithAddress = {
+    projectId: ProjectId;
+    sheetId: SheetId;
+    objectKey: ObjectAddressKey;
+    trackId: SequenceTrackId;
+    left: Keyframe;
+    right: Keyframe;
+};
+/**
+ * Returns an array of all the selected keyframes
+ * that are connected to one another. Useful for changing
+ * the tweening in between keyframes.
+ *
+ * TODO - rename to selectedKeyframeConnectionsD(), or better yet,
+ * make it a `prism.ensurePrism()` function, rather than returning
+ * a prism.
+ */
+export declare function selectedKeyframeConnections(projectId: ProjectId, sheetId: SheetId, selection: DopeSheetSelection | undefined): Prism<Array<KeyframeConnectionWithAddress>>;
+/**
+ * Given a selection, returns a list of keyframes and paths
+ * that are relative to a common root path. For example, if
+ * the selection contains a keyframe on both the following tracks:
+ * - exObject.transform.position.x
+ * - exObject.transform.position.y
+ * then the result will be
+ * ```
+ * [{ keyframe, pathToProp: ['x']}, { keyframe, pathToProp: ['y']}]
+ * ```
+ *
+ * If the selection contains a keyframe on
+ * all the following tracks:
+ * - exObject.transform.position.x
+ * - exObject.transform.position.y
+ * - exObject.transform.scale.x
+ * then the result will be
+ * ```
+ * [
+ *   {keyframe, pathToProp: ['position', 'x']},
+ *   {keyframe, pathToProp: ['position', 'y']},
+ *   {keyframe, pathToProp: ['scale',    'x']},
+ * ]
+ * ```
+ */
+export declare function copyableKeyframesFromSelection(projectId: ProjectId, sheetId: SheetId, selection: DopeSheetSelection | undefined): KeyframeWithPathToPropFromCommonRoot[];
+/**
+ * @see copyableKeyframesFromSelection
+ */
+export declare function keyframesWithPaths({ projectId, sheetId, objectKey, trackId, keyframeIds, }: {
+    projectId: ProjectId;
+    sheetId: SheetId;
+    objectKey: ObjectAddressKey;
+    trackId: SequenceTrackId;
+    keyframeIds: KeyframeId[];
+}): KeyframeWithPathToPropFromCommonRoot[] | null;
+export declare function keyframeConnections(keyframes: Array<Keyframe>): Array<{
+    left: Keyframe;
+    right: Keyframe;
+}>;
+export declare function flatSelectionKeyframeIds(selection: DopeSheetSelection): Array<{
+    objectKey: ObjectAddressKey;
+    trackId: SequenceTrackId;
+    keyframeId: KeyframeId;
+}>;
+export declare function flatSelectionTrackIds(selection: DopeSheetSelection): Array<{
+    objectKey: ObjectAddressKey;
+    trackId: SequenceTrackId;
+    keyframeIds: Array<KeyframeId>;
+}>;
+//# sourceMappingURL=selections.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/selections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selections.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/selections.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,oCAAoC,CAAA;AAE7D,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,OAAO,EACR,MAAM,2CAA2C,CAAA;AAElD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,0EAA0E,CAAA;AAChH,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,wEAAwE,CAAA;AAMpG,OAAO,KAAK,EAAC,oCAAoC,EAAC,MAAM,6CAA6C,CAAA;AAErG;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,kBAAkB,EAAE;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAC,EACrD,SAAS,EAAE,kBAAkB,GAC5B,OAAO,CAKT;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,gBAAgB,CAAA;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,kBAAkB,GAAG,SAAS,GACxC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC,CA6B7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,kBAAkB,GAAG,SAAS,GACxC,oCAAoC,EAAE,CA2BxC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE;IACD,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,gBAAgB,CAAA;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,WAAW,EAAE,UAAU,EAAE,CAAA;CAC1B,GAAG,oCAAoC,EAAE,GAAG,IAAI,CAyBhD;AAYD,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,GACzB,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAC,CAAC,CAI1C;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,kBAAkB,GAAG,KAAK,CAAC;IAC7E,SAAS,EAAE,gBAAgB,CAAA;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;CACvB,CAAC,CAgBD;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,kBAAkB,GAAG,KAAK,CAAC;IAC1E,SAAS,EAAE,gBAAgB,CAAA;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;CAC/B,CAAC,CAgBD"}

package/dist/panels/SequenceEditorPanel/DopeSheet/selections.js

@@ -0,0 +1,149 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { commonRootOfPathsToProps, decodePathToProp, } from '@tomorrowevening/theatre-shared/utils/addresses';
+/**
+ * Keyframe connections are considered to be selected if the first
+ * keyframe in the connection is selected
+ */
+export function isKeyframeConnectionInSelection(keyframeConnection, selection) {
+    for (const { keyframeId } of flatSelectionKeyframeIds(selection)) {
+        if (keyframeConnection.left.id === keyframeId)
+            return true;
+    }
+    return false;
+}
+/**
+ * Returns an array of all the selected keyframes
+ * that are connected to one another. Useful for changing
+ * the tweening in between keyframes.
+ *
+ * TODO - rename to selectedKeyframeConnectionsD(), or better yet,
+ * make it a `prism.ensurePrism()` function, rather than returning
+ * a prism.
+ */
+export function selectedKeyframeConnections(projectId, sheetId, selection) {
+    return prism(() => {
+        if (selection === undefined)
+            return [];
+        let ckfs = [];
+        for (const { objectKey, trackId } of flatSelectionTrackIds(selection)) {
+            const track = val(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
+                .sequence.tracksByObject[objectKey].trackData[trackId]);
+            if (track) {
+                ckfs = ckfs.concat(keyframeConnections(track.keyframes)
+                    .filter((kfc) => isKeyframeConnectionInSelection(kfc, selection))
+                    .map(({ left, right }) => ({
+                    left,
+                    right,
+                    trackId,
+                    objectKey,
+                    sheetId,
+                    projectId,
+                })));
+            }
+        }
+        return ckfs;
+    });
+}
+/**
+ * Given a selection, returns a list of keyframes and paths
+ * that are relative to a common root path. For example, if
+ * the selection contains a keyframe on both the following tracks:
+ * - exObject.transform.position.x
+ * - exObject.transform.position.y
+ * then the result will be
+ * ```
+ * [{ keyframe, pathToProp: ['x']}, { keyframe, pathToProp: ['y']}]
+ * ```
+ *
+ * If the selection contains a keyframe on
+ * all the following tracks:
+ * - exObject.transform.position.x
+ * - exObject.transform.position.y
+ * - exObject.transform.scale.x
+ * then the result will be
+ * ```
+ * [
+ *   {keyframe, pathToProp: ['position', 'x']},
+ *   {keyframe, pathToProp: ['position', 'y']},
+ *   {keyframe, pathToProp: ['scale',    'x']},
+ * ]
+ * ```
+ */
+export function copyableKeyframesFromSelection(projectId, sheetId, selection) {
+    if (selection === undefined)
+        return [];
+    let kfs = [];
+    for (const { objectKey, trackId, keyframeIds } of flatSelectionTrackIds(selection)) {
+        kfs = kfs.concat(keyframesWithPaths({
+            projectId,
+            sheetId,
+            objectKey,
+            trackId,
+            keyframeIds,
+        }) ?? []);
+    }
+    const commonPath = commonRootOfPathsToProps(kfs.map((kf) => kf.pathToProp));
+    const keyframesWithCommonRootPath = kfs.map(({ keyframe, pathToProp }) => ({
+        keyframe,
+        pathToProp: pathToProp.slice(commonPath.length),
+    }));
+    return keyframesWithCommonRootPath;
+}
+/**
+ * @see copyableKeyframesFromSelection
+ */
+export function keyframesWithPaths({ projectId, sheetId, objectKey, trackId, keyframeIds, }) {
+    const tracksByObject = val(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
+        .sequence.tracksByObject[objectKey]);
+    const track = tracksByObject?.trackData[trackId];
+    if (!track)
+        return null;
+    const propPathByTrackId = swapKeyAndValue(tracksByObject?.trackIdByPropPath || {});
+    const encodedPropPath = propPathByTrackId[trackId];
+    if (!encodedPropPath)
+        return null;
+    const pathToProp = [objectKey, ...decodePathToProp(encodedPropPath)];
+    return keyframeIds
+        .map((keyframeId) => ({
+        keyframe: track.keyframes.find((keyframe) => keyframe.id === keyframeId),
+        pathToProp,
+    }))
+        .filter(({ keyframe }) => keyframe !== undefined);
+}
+function swapKeyAndValue(obj) {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        result[value] = key;
+    }
+    return result;
+}
+export function keyframeConnections(keyframes) {
+    return keyframes
+        .map((kf, i) => ({ left: kf, right: keyframes[i + 1] }))
+        .slice(0, -1); // remmove the last entry because it is { left: kf, right: undefined }
+}
+export function flatSelectionKeyframeIds(selection) {
+    const result = [];
+    for (const [objectKey, maybeObjectRecord] of Object.entries(selection?.byObjectKey ?? {})) {
+        for (const [trackId, maybeTrackRecord] of Object.entries(maybeObjectRecord?.byTrackId ?? {})) {
+            for (const keyframeId of Object.keys(maybeTrackRecord?.byKeyframeId ?? {})) {
+                result.push({ objectKey, trackId, keyframeId });
+            }
+        }
+    }
+    return result;
+}
+export function flatSelectionTrackIds(selection) {
+    const result = [];
+    for (const [objectKey, maybeObjectRecord] of Object.entries(selection?.byObjectKey ?? {})) {
+        for (const [trackId, maybeTrackRecord] of Object.entries(maybeObjectRecord?.byTrackId ?? {})) {
+            result.push({
+                objectKey,
+                trackId,
+                keyframeIds: Object.keys(maybeTrackRecord?.byKeyframeId ?? {}),
+            });
+        }
+    }
+    return result;
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp.d.ts

@@ -0,0 +1,7 @@
+import type { StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { SheetAddress, WithoutSheetInstance } from '@tomorrowevening/theatre-shared/utils/addresses';
+export declare function setCollapsedSheetItem(isCollapsed: boolean, toCollapse: {
+    sheetAddress: WithoutSheetInstance<SheetAddress>;
+    sheetItemKey: StudioSheetItemKey;
+}): void;
+//# sourceMappingURL=setCollapsedSheetObjectOrCompoundProp.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setCollapsedSheetObjectOrCompoundProp.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,2CAA2C,CAAA;AAEjF,OAAO,KAAK,EACV,YAAY,EACZ,oBAAoB,EACrB,MAAM,iDAAiD,CAAA;AAExD,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,OAAO,EACpB,UAAU,EAAE;IACV,YAAY,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAA;IAChD,YAAY,EAAE,kBAAkB,CAAA;CACjC,QAWF"}

package/dist/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp.js

@@ -0,0 +1,10 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+export function setCollapsedSheetItem(isCollapsed, toCollapse) {
+    getStudio().transaction(({ stateEditors }) => {
+        stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.sequenceEditorCollapsableItems.set({
+            ...toCollapse.sheetAddress,
+            studioSheetItemKey: toCollapse.sheetItemKey,
+            isCollapsed,
+        });
+    });
+}

package/dist/panels/SequenceEditorPanel/FrameGrid/FrameGrid.d.ts

@@ -0,0 +1,10 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+declare const FrameGrid: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    width: number;
+    height: number;
+}>;
+export default FrameGrid;
+//# sourceMappingURL=FrameGrid.d.ts.map

package/dist/panels/SequenceEditorPanel/FrameGrid/FrameGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameGrid.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/FrameGrid/FrameGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAEvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuCvE,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAyDA,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/panels/SequenceEditorPanel/FrameGrid/FrameGrid.js

@@ -0,0 +1,92 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import createGrid from './createGrid';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  pointer-events: none;
+`;
+const TheCanvas = styled.canvas `
+  position: relative;
+  left: 0;
+`;
+/**
+ * from https://github.com/jonobr1/two.js/blob/758672c280278da2980b57e42ecb96eab4fe7a95/src/utils/get-ratio.js#L20
+ */
+const getBackingStoreRatio = (ctx) => {
+    const _ctx = ctx;
+    return (_ctx.webkitBackingStorePixelRatio ||
+        _ctx.mozBackingStorePixelRatio ||
+        _ctx.msBackingStorePixelRatio ||
+        _ctx.oBackingStorePixelRatio ||
+        _ctx.backingStorePixelRatio ||
+        1);
+};
+const getDevicePixelRatio = () => window.devicePixelRatio || 1;
+const getRatio = (ctx) => {
+    return getDevicePixelRatio() / getBackingStoreRatio(ctx);
+};
+const FrameGrid = ({ layoutP, width, height }) => {
+    const containerRef = useRef(null);
+    const [canvas, canvasRef] = useState(null);
+    const { ctx, ratio } = useMemo(() => {
+        if (!canvas)
+            return {};
+        const ctx = canvas.getContext('2d');
+        const ratio = getRatio(ctx);
+        return { ctx, ratio };
+    }, [canvas]);
+    useLayoutEffect(() => {
+        if (!ctx)
+            return;
+        canvas.width = width * ratio;
+        canvas.height = height * ratio;
+        const untap = prism(() => {
+            const sequence = val(layoutP.sheet).getSequence();
+            return {
+                ctx,
+                clippedSpaceRange: val(layoutP.clippedSpace.range),
+                clippedSpaceWidth: val(layoutP.clippedSpace.width),
+                unitSpaceToClippedSpace: val(layoutP.clippedSpace.fromUnitSpace),
+                height,
+                leftPadding: val(layoutP.scaledSpace.leftPadding),
+                fps: sequence.subUnitsPerUnit,
+                snapToGrid: (n) => sequence.closestGridPosition(n),
+            };
+        }).onChange(getStudio().ticker, (p) => {
+            ctx.save();
+            ctx.scale(ratio, ratio);
+            drawGrid(p);
+            ctx.restore();
+        }, true);
+        return () => {
+            untap();
+        };
+    }, [ctx, width, height, layoutP]);
+    return (React.createElement(Container, { ref: containerRef, style: { width: width + 'px' } },
+        React.createElement(TheCanvas, { ref: canvasRef, style: {
+                width: width + 'px',
+                height: height + 'px',
+            } })));
+};
+export default FrameGrid;
+function drawGrid(opts) {
+    const { clippedSpaceWidth, height, ctx, unitSpaceToClippedSpace, snapToGrid } = opts;
+    ctx.clearRect(0, 0, clippedSpaceWidth, height);
+    createGrid(opts, (_posInUnitSpace, isFullSecond) => {
+        const posInUnitSpace = snapToGrid(_posInUnitSpace);
+        const posInClippedSpace = Math.floor(unitSpaceToClippedSpace(posInUnitSpace));
+        ctx.strokeStyle = isFullSecond
+            ? 'rgba(225, 225, 225, 0.04)'
+            : 'rgba(255, 255, 255, 0.01)';
+        ctx.beginPath();
+        ctx.moveTo(posInClippedSpace, 0);
+        ctx.lineTo(posInClippedSpace, height);
+        ctx.stroke();
+        ctx.closePath();
+    });
+}

package/dist/panels/SequenceEditorPanel/FrameGrid/StampsGrid.d.ts

@@ -0,0 +1,15 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+export declare const stampsGridTheme: {
+    fullUnitStampColor: string;
+    stampFontSize: string;
+    readonly subUnitStampColor: string;
+};
+declare const StampsGrid: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    width: number;
+    height: number;
+}>;
+export default StampsGrid;
+//# sourceMappingURL=StampsGrid.d.ts.map

package/dist/panels/SequenceEditorPanel/FrameGrid/StampsGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StampsGrid.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAA0C,MAAM,OAAO,CAAA;AAa9D,eAAO,MAAM,eAAe;;;;CAM3B,CAAA;AAwCD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CA8BA,CAAA;AAED,eAAe,UAAU,CAAA"}