@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+import { simplePropEditorByPropType } from '@tomorrowevening/theatre-studio/propEditors/simpleEditors/simplePropEditorByPropType';
+import last from 'lodash-es/last';
+import { useTempTransactionEditingTools } from './useTempTransactionEditingTools';
+import { valueInProp } from '@tomorrowevening/theatre-shared/propTypes/utils';
+const SingleKeyframePropEditorContainer = styled.div `
+  display: flex;
+  align-items: stretch;
+  min-width: 200px;
+
+  select {
+    min-width: 100px;
+  }
+`;
+const SingleKeyframePropLabel = styled.div `
+  font-style: normal;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 13px;
+  letter-spacing: 0.01em;
+  padding: 6px 6px 6px 0;
+
+  width: 40%;
+
+  color: #919191;
+
+  overflow: hidden;
+`;
+const INDENT_PX = 10;
+/**
+ * Given a propConfig, this function gives the corresponding prop editor for
+ * use in the dope sheet inline prop editor on a keyframe.
+ * {@link DeterminePropEditorForDetail} does the same thing for the details panel. The main difference
+ * between this function and {@link DeterminePropEditorForDetail} is that this
+ * one shows prop editors *without* keyframe navigation controls (that look
+ * like `< ・ >`).
+ *
+ * @param p - propConfig object for any type of prop.
+ */
+export function DeterminePropEditorForKeyframeTree(p) {
+    if (p.type === 'sheetObject') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SingleKeyframePropLabel, { style: { paddingLeft: `${p.indent * INDENT_PX}px` } }, p.sheetObject.address.objectKey),
+            p.children.map((c, i) => (React.createElement(DeterminePropEditorForKeyframeTree, { key: i, ...c, autoFocusInput: p.autoFocusInput && i === 0, indent: p.indent + 1 })))));
+    }
+    else if (p.type === 'propWithChildren') {
+        const label = p.propConfig.label ?? last(p.pathToProp);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SingleKeyframePropLabel, { style: { paddingLeft: `${p.indent * INDENT_PX}px` } }, label),
+            p.children.map((c, i) => (React.createElement(DeterminePropEditorForKeyframeTree, { key: i, ...c, autoFocusInput: p.autoFocusInput && i === 0, indent: p.indent + 1 })))));
+    }
+    else {
+        return (React.createElement(PrimitivePropEditor, { ...p, autoFocusInput: p.autoFocusInput, indent: p.indent }));
+    }
+}
+const SingleKeyframeSimplePropEditorContainer = styled.div `
+  display: flex;
+  align-items: center;
+  width: 60%;
+`;
+function PrimitivePropEditor(p) {
+    const label = p.propConfig.label ?? last(p.pathToProp);
+    const editingTools = useEditingToolsForKeyframeEditorPopover(p);
+    if (p.propConfig.type === 'enum') {
+        // notice: enums are not implemented, yet.
+        return React.createElement(React.Fragment, null);
+    }
+    else {
+        const PropEditor = simplePropEditorByPropType[p.propConfig.type];
+        return (React.createElement(SingleKeyframePropEditorContainer, null,
+            React.createElement(SingleKeyframePropLabel, null,
+                React.createElement("span", { style: { paddingLeft: `${p.indent * INDENT_PX}px` } }, label)),
+            React.createElement(SingleKeyframeSimplePropEditorContainer, null,
+                React.createElement(PropEditor, { editingTools: editingTools, propConfig: p.propConfig, value: valueInProp(p.keyframe.value, p.propConfig), autoFocus: p.autoFocusInput }))));
+    }
+}
+// These editing tools are distinct from the editing tools used in the
+// prop editors in the details panel: These editing tools edit the value of a keyframe
+// while the details editing tools edit the value of the sequence at the playhead
+// (potentially creating a new keyframe).
+function useEditingToolsForKeyframeEditorPopover(props) {
+    const obj = props.sheetObject;
+    return useTempTransactionEditingTools(({ stateEditors }, value) => {
+        const newKeyframe = { ...props.keyframe, value };
+        stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+            ...obj.address,
+            trackId: props.trackId,
+            keyframes: [newKeyframe],
+            snappingFunction: obj.sheet.getSequence().closestGridPosition,
+        });
+    }, obj);
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ISingleKeyframeEditorProps } from './SingleKeyframeEditor';
+export declare const DOT_SIZE_PX = 6;
+type ISingleKeyframeDotProps = ISingleKeyframeEditorProps;
+/** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */
+declare const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps>;
+export default SingleKeyframeDot;
+//# sourceMappingURL=SingleKeyframeDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleKeyframeDot.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAc5C,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAA;AAgBtE,eAAO,MAAM,WAAW,IAAI,CAAA;AA6E5B,KAAK,uBAAuB,GAAG,0BAA0B,CAAA;AAEzD,wFAAwF;AACxF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAoDzD,CAAA;AAED,eAAe,iBAAiB,CAAA"}

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

@@ -0,0 +1,254 @@
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import { absoluteDims } from '@tomorrowevening/theatre-studio/utils/absoluteDims';
+import { useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
+import { copyableKeyframesFromSelection } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { collectKeyframeSnapPositions, snapToNone, snapToSome, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
+import { useKeyframeInlineEditorPopover } from './useSingleKeyframeInlineEditorPopover';
+import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+export const DOT_SIZE_PX = 6;
+const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2;
+const dotTheme = {
+    normalColor: '#40AAA4',
+    selectedColor: '#F2C95C',
+    inlineEditorOpenColor: '#FCF3DC',
+    selectedAndInlineEditorOpenColor: '#CBEBEA',
+};
+const selectBackgroundForDiamond = ({ isSelected, isInlineEditorPopoverOpen, }) => {
+    if (isSelected && isInlineEditorPopoverOpen) {
+        return dotTheme.inlineEditorOpenColor;
+    }
+    else if (isSelected) {
+        return dotTheme.selectedColor;
+    }
+    else if (isInlineEditorPopoverOpen) {
+        return dotTheme.selectedAndInlineEditorOpenColor;
+    }
+    else {
+        return dotTheme.normalColor;
+    }
+};
+/** The keyframe diamond ◆ */
+const Diamond = styled.div `
+  position: absolute;
+  ${absoluteDims(DOT_SIZE_PX)}
+
+  background: ${(props) => selectBackgroundForDiamond(props)};
+  transform: rotateZ(45deg);
+
+  ${(props) => props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''};
+
+  z-index: 1;
+  pointer-events: none;
+`;
+const Square = styled.div `
+  position: absolute;
+  ${absoluteDims(DOT_SIZE_PX * 1.5)}
+
+  background: ${(props) => selectBackgroundForDiamond(props)};
+
+  ${(props) => props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''};
+
+  z-index: 1;
+  pointer-events: none;
+`;
+const HitZone = styled.div `
+  z-index: 1;
+  cursor: ew-resize;
+
+  position: absolute;
+  ${absoluteDims(12)};
+  ${pointerEventsAutoInNormalMode};
+
+  & + ${Diamond} {
+    ${(props) => props.isInlineEditorPopoverOpen ? absoluteDims(DOT_HOVER_SIZE_PX) : ''}
+  }
+
+  &:hover + ${Diamond} {
+    ${absoluteDims(DOT_HOVER_SIZE_PX)}
+  }
+`;
+/** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */
+const SingleKeyframeDot = (props) => {
+    const logger = useLogger('SingleKeyframeDot', props.keyframe.id);
+    const presence = usePresence(props.itemKey);
+    const [ref, node] = useRefAndState(null);
+    const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props);
+    const { node: inlineEditorPopover, toggle: toggleEditor, isOpen: isInlineEditorPopoverOpen, } = useKeyframeInlineEditorPopover([
+        {
+            type: 'primitiveProp',
+            keyframe: props.keyframe,
+            pathToProp: props.leaf.pathToProp,
+            propConfig: props.leaf.propConf,
+            sheetObject: props.leaf.sheetObject,
+            trackId: props.leaf.trackId,
+        },
+    ]);
+    const [isDragging] = useDragForSingleKeyframeDot(node, props, {
+        onClickFromDrag(dragStartEvent) {
+            toggleEditor(dragStartEvent, ref.current);
+        },
+    });
+    const showDiamond = !props.keyframe.type || props.keyframe.type === 'bezier';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HitZone, { ref: ref, isInlineEditorPopoverOpen: isInlineEditorPopoverOpen, ...presence.attrs }),
+        showDiamond ? (React.createElement(Diamond, { isSelected: !!props.selection, isInlineEditorPopoverOpen: isInlineEditorPopoverOpen, flag: presence.flag })) : (React.createElement(Square, { isSelected: !!props.selection, isInlineEditorPopoverOpen: isInlineEditorPopoverOpen, flag: presence.flag })),
+        inlineEditorPopover,
+        contextMenu));
+};
+export default SingleKeyframeDot;
+function useSingleKeyframeContextMenu(target, logger, props) {
+    return useContextMenu(target, {
+        displayName: 'Keyframe',
+        menuItems: () => {
+            const copyableKeyframes = copyableKeyframesFromSelection(props.leaf.sheetObject.address.projectId, props.leaf.sheetObject.address.sheetId, props.selection);
+            return [
+                {
+                    label: copyableKeyframes.length > 0 ? 'Copy (selection)' : 'Copy',
+                    callback: () => {
+                        if (copyableKeyframes.length > 0) {
+                            getStudio().transaction((api) => {
+                                api.stateEditors.studio.ahistoric.setClipboardKeyframes(copyableKeyframes);
+                            });
+                        }
+                        else {
+                            getStudio().transaction((api) => {
+                                api.stateEditors.studio.ahistoric.setClipboardKeyframes([
+                                    { keyframe: props.keyframe, pathToProp: props.leaf.pathToProp },
+                                ]);
+                            });
+                        }
+                    },
+                },
+                {
+                    label: props.selection !== undefined ? 'Delete (selection)' : 'Delete',
+                    callback: () => {
+                        if (props.selection) {
+                            props.selection.delete();
+                        }
+                        else {
+                            getStudio().transaction(({ stateEditors }) => {
+                                stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
+                                    ...props.leaf.sheetObject.address,
+                                    keyframeIds: [props.keyframe.id],
+                                    trackId: props.leaf.trackId,
+                                });
+                            });
+                        }
+                    },
+                },
+            ];
+        },
+        onOpen() {
+            logger._debug('Show keyframe', props);
+        },
+    });
+}
+function useDragForSingleKeyframeDot(node, props, options) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const { onClickFromDrag } = options;
+    const useDragOpts = useMemo(() => {
+        return {
+            debugName: 'KeyframeDot/useDragKeyframe',
+            onDragStart(event) {
+                const props = propsRef.current;
+                const tracksByObject = val(getStudio().atomP.historic.coreByProject[props.leaf.sheetObject.address.projectId].sheetsById[props.leaf.sheetObject.address.sheetId].sequence
+                    .tracksByObject);
+                const snapPositions = collectKeyframeSnapPositions(tracksByObject, 
+                // Calculate all the valid snap positions in the sequence editor,
+                // excluding this keyframe, and any selection it is part of.
+                function shouldIncludeKeyfram(keyframe, { trackId, objectKey }) {
+                    return (
+                    // we exclude this keyframe from being a snap target
+                    keyframe.id !== props.keyframe.id &&
+                        !(
+                        // if the current dragged keyframe is in the selection,
+                        (props.selection &&
+                            // then we exclude it 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) {
+                    const { selection, leaf } = props;
+                    const { sheetObject } = leaf;
+                    const handlers = selection
+                        .getDragHandlers({
+                        ...sheetObject.address,
+                        domNode: node,
+                        positionAtStartOfDrag: props.track.data.keyframes[props.index].position,
+                    })
+                        .onDragStart(event);
+                    // this opens the regular inline keyframe editor on click.
+                    // in the future, we may want to show an multi-editor, like in the
+                    // single tween editor, so that selected keyframes' values can be changed
+                    // together
+                    return (handlers && {
+                        ...handlers,
+                        onClick: 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 original = propsAtStartOfDrag.track.data.keyframes[propsAtStartOfDrag.index];
+                        const newPosition = Math.max(
+                        // check if our event hoversover a [data-pos] element
+                        DopeSnap.checkIfMouseEventSnapToPos(event, {
+                            ignore: node,
+                        }) ??
+                            // if we don't find snapping target, check the distance dragged + original position
+                            original.position + toUnitSpace(dx), 
+                        // sanitize to minimum of zero
+                        0);
+                        tempTransaction?.discard();
+                        tempTransaction = undefined;
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                ...propsAtStartOfDrag.leaf.sheetObject.address,
+                                trackId: propsAtStartOfDrag.leaf.trackId,
+                                keyframes: [{ ...original, position: newPosition }],
+                                snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        if (dragHappened) {
+                            tempTransaction?.commit();
+                        }
+                        else {
+                            tempTransaction?.discard();
+                        }
+                        snapToNone();
+                    },
+                    onClick(ev) {
+                        onClickFromDrag(ev);
+                    },
+                };
+            },
+        };
+    }, [onClickFromDrag]);
+    const [isDragging] = useDrag(node, useDragOpts);
+    // Lock frame stamp to the current position of the dragged keyframe instead of
+    // the mouse position, so that it appears centered above the keyframe even
+    // regardless of where in the hit zone of the keyframe the mouse is located.
+    useLockFrameStampPosition(isDragging, props.keyframe.position);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
+    return [isDragging];
+}

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

@@ -0,0 +1,19 @@
+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_PrimitiveProp } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/tree';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { TrackWithId } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+import type { StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+export type ISingleKeyframeEditorProps = {
+    index: number;
+    keyframe: Keyframe;
+    track: TrackWithId;
+    itemKey: StudioSheetItemKey;
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    leaf: SequenceEditorTree_PrimitiveProp;
+    selection: undefined | DopeSheetSelection;
+};
+declare const SingleKeyframeEditor: React.VFC<ISingleKeyframeEditorProps>;
+export default SingleKeyframeEditor;
+//# sourceMappingURL=SingleKeyframeEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleKeyframeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.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,EAAC,gCAAgC,EAAC,MAAM,wEAAwE,CAAA;AAC5H,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,sGAAsG,CAAA;AACrI,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,2CAA2C,CAAA;AAQjF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,EAAE,kBAAkB,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,IAAI,EAAE,gCAAgC,CAAA;IACtC,SAAS,EAAE,SAAS,GAAG,kBAAkB,CAAA;CAC1C,CAAA;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,0BAA0B,CA2B/D,CAAA;AAED,eAAe,oBAAoB,CAAA"}

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

@@ -0,0 +1,22 @@
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import styled from 'styled-components';
+import SingleKeyframeConnector from './BasicKeyframeConnector';
+import SingleKeyframeDot from './SingleKeyframeDot';
+const SingleKeyframeEditorContainer = styled.div `
+  position: absolute;
+`;
+const noConnector = React.createElement(React.Fragment, null);
+const SingleKeyframeEditor = React.memo((props) => {
+    const { index, track: { data: trackData }, } = props;
+    const cur = trackData.keyframes[index];
+    const next = trackData.keyframes[index + 1];
+    const connected = cur.connectedRight && !!next;
+    return (React.createElement(SingleKeyframeEditorContainer, { style: {
+            top: `${props.leaf.nodeHeight / 2}px`,
+            left: `calc(${val(props.layoutP.scaledSpace.leftPadding)}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position}px))`,
+        } },
+        React.createElement(SingleKeyframeDot, { ...props, itemKey: props.itemKey }),
+        connected ? React.createElement(SingleKeyframeConnector, { ...props }) : noConnector));
+});
+export default SingleKeyframeEditor;

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

@@ -0,0 +1,29 @@
+import type { SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { Keyframe } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { PropTypeConfig_AllSimples, PropTypeConfig_Compound, PropTypeConfig_Enum } from '@tomorrowevening/theatre-core/propTypes';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { UnknownValidCompoundProps } from '@tomorrowevening/theatre-core/propTypes/internals';
+/** The editor that pops up when directly clicking a Keyframe. */
+export declare function useKeyframeInlineEditorPopover(props: EditingOptionsTree[] | null): import("@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover").IPopover;
+export type EditingOptionsTree = SheetObjectEditingOptionsTree | PropWithChildrenEditingOptionsTree | PrimitivePropEditingOptions;
+export type SheetObjectEditingOptionsTree = {
+    type: 'sheetObject';
+    sheetObject: SheetObject;
+    children: EditingOptionsTree[];
+};
+export type PropWithChildrenEditingOptionsTree = {
+    type: 'propWithChildren';
+    propConfig: PropTypeConfig_Compound<UnknownValidCompoundProps>;
+    pathToProp: PathToProp;
+    children: EditingOptionsTree[];
+};
+export type PrimitivePropEditingOptions = {
+    type: 'primitiveProp';
+    keyframe: Keyframe;
+    propConfig: PropTypeConfig_AllSimples | PropTypeConfig_Enum;
+    sheetObject: SheetObject;
+    trackId: SequenceTrackId;
+    pathToProp: PathToProp;
+};
+//# sourceMappingURL=useSingleKeyframeInlineEditorPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSingleKeyframeInlineEditorPopover.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAA;AAC9E,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,wEAAwE,CAAA;AACpG,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EACV,yBAAyB,EACzB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAC/E,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,mDAAmD,CAAA;AAEhG,iEAAiE;AACjE,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,kBAAkB,EAAE,GAAG,IAAI,sFAkBnC;AAED,MAAM,MAAM,kBAAkB,GAC1B,6BAA6B,GAC7B,kCAAkC,GAClC,2BAA2B,CAAA;AAC/B,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,EAAE,aAAa,CAAA;IACnB,WAAW,EAAE,WAAW,CAAA;IACxB,QAAQ,EAAE,kBAAkB,EAAE,CAAA;CAC/B,CAAA;AACD,MAAM,MAAM,kCAAkC,GAAG;IAC/C,IAAI,EAAE,kBAAkB,CAAA;IACxB,UAAU,EAAE,uBAAuB,CAAC,yBAAyB,CAAC,CAAA;IAC9D,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,kBAAkB,EAAE,CAAA;CAC/B,CAAA;AACD,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,eAAe,CAAA;IACrB,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,EAAE,yBAAyB,GAAG,mBAAmB,CAAA;IAC3D,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
+import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
+import { DeterminePropEditorForKeyframeTree } from './DeterminePropEditorForSingleKeyframe';
+/** The editor that pops up when directly clicking a Keyframe. */
+export function useKeyframeInlineEditorPopover(props) {
+    return usePopover({ debugName: 'useKeyframeInlineEditorPopover' }, () => (React.createElement(BasicPopover, { showPopoverEdgeTriangle: true },
+        React.createElement("div", { style: { margin: '1px 2px 1px 10px' } }, !Array.isArray(props)
+            ? undefined
+            : props.map((prop, i) => (React.createElement(DeterminePropEditorForKeyframeTree, { key: i, ...prop, autoFocusInput: i === 0, indent: 0 })))))));
+}

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

@@ -0,0 +1,18 @@
+import type { SerializableValue } from '@tomorrowevening/theatre-shared/utils/types';
+import type { ITransactionPrivateApi } from '@tomorrowevening/theatre-studio/StudioStore/StudioStore';
+import type { IEditingTools } from '@tomorrowevening/theatre-studio/propEditors/utils/IEditingTools';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+/**
+ * This function takes a function `writeTx` that sets a value in the private Studio API and
+ * returns a memoized editingTools object which contains three functions:
+ * - `temporarilySetValue` - uses `writeTx` to set a value that can be discarded
+ * - `discardTemporaryValue` - if `temporarilySetValue` was called, discards the value it set
+ * - `permanentlySetValue` - uses `writeTx` to set a value
+ *
+ * @param writeTx - a function that uses a value to perform an action using the
+ * private Studio API.
+ * @returns an editingTools object that can be passed to `DeterminePropEditorForKeyframe` or
+ * `DetailDeterminePropEditor` and is used by the prop editors in `simplePropEditorByPropType`.
+ */
+export declare function useTempTransactionEditingTools<T extends SerializableValue>(writeTx: (api: ITransactionPrivateApi, value: T) => void, obj: SheetObject): IEditingTools<T>;
+//# sourceMappingURL=useTempTransactionEditingTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTempTransactionEditingTools.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useTempTransactionEditingTools.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,6CAA6C,CAAA;AAClF,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,yDAAyD,CAAA;AAChE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iEAAiE,CAAA;AAElG,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAGrF;;;;;;;;;;;GAWG;AACH,wBAAgB,8BAA8B,CAAC,CAAC,SAAS,iBAAiB,EACxE,OAAO,EAAE,CAAC,GAAG,EAAE,sBAAsB,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,EACxD,GAAG,EAAE,WAAW,GACf,aAAa,CAAC,CAAC,CAAC,CAElB"}

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

@@ -0,0 +1,43 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { useMemo } from 'react';
+/**
+ * This function takes a function `writeTx` that sets a value in the private Studio API and
+ * returns a memoized editingTools object which contains three functions:
+ * - `temporarilySetValue` - uses `writeTx` to set a value that can be discarded
+ * - `discardTemporaryValue` - if `temporarilySetValue` was called, discards the value it set
+ * - `permanentlySetValue` - uses `writeTx` to set a value
+ *
+ * @param writeTx - a function that uses a value to perform an action using the
+ * private Studio API.
+ * @returns an editingTools object that can be passed to `DeterminePropEditorForKeyframe` or
+ * `DetailDeterminePropEditor` and is used by the prop editors in `simplePropEditorByPropType`.
+ */
+export function useTempTransactionEditingTools(writeTx, obj) {
+    return useMemo(() => createTempTransactionEditingTools(writeTx, obj), []);
+}
+function createTempTransactionEditingTools(writeTx, obj) {
+    let currentTransaction = null;
+    const createTempTx = (value) => getStudio().tempTransaction((api) => writeTx(api, value));
+    function discardTemporaryValue() {
+        currentTransaction?.discard();
+        currentTransaction = null;
+    }
+    const editAssets = {
+        createAsset: obj.sheet.project.assetStorage.createAsset,
+        getAssetUrl: (asset) => asset.id
+            ? obj.sheet.project.assetStorage.getAssetUrl(asset.id)
+            : undefined,
+    };
+    return {
+        temporarilySetValue(value) {
+            discardTemporaryValue();
+            currentTransaction = createTempTx(value);
+        },
+        discardTemporaryValue,
+        permanentlySetValue(value) {
+            discardTemporaryValue();
+            createTempTx(value).commit();
+        },
+        ...editAssets,
+    };
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DopeSheetBackground.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAGvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CASA,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -0,0 +1,24 @@
+import { theme } from '@tomorrowevening/theatre-studio/css';
+import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
+import { useVal } from '@tomorrowevening/theatre-react';
+import { darken, transparentize } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import FrameGrid from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid';
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${() => zIndexes.rightBackground};
+  overflow: hidden;
+  background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))};
+  pointer-events: none;
+`;
+const DopeSheetBackground = ({ layoutP }) => {
+    const width = useVal(layoutP.rightDims.width);
+    const height = useVal(layoutP.panelDims.height);
+    return (React.createElement(Container, { style: { width: width + 'px' } },
+        React.createElement(FrameGrid, { width: width, height: height, layoutP: layoutP })));
+};
+export default DopeSheetBackground;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DopeSheetSelectionView.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,KAAK,EAEV,yBAAyB,EAC1B,MAAM,0EAA0E,CAAA;AAkBjF,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAsBA,CAAA;AAoaD,eAAe,sBAAsB,CAAA"}