@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,254 +0,0 @@
-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.js

@@ -1,22 +0,0 @@
-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.js

@@ -1,11 +0,0 @@
-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.js

@@ -1,43 +0,0 @@
-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.js

@@ -1,24 +0,0 @@
-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.js

@@ -1,272 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import useKeyDown from '@tomorrowevening/theatre-studio/uiComponents/useKeyDown';
-import useValToAtom from '@tomorrowevening/theatre-studio/uiComponents/useValToAtom';
-import mutableSetDeep from '@tomorrowevening/theatre-shared/utils/mutableSetDeep';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
-import { collectAggregateKeyframesInPrism } from './collectAggregateKeyframes';
-import { useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
-const HITBOX_SIZE_PX = 5;
-const Container = styled.div `
-  cursor: ${(props) => (props.isShiftDown ? 'cell' : 'default')};
-`;
-const DopeSheetSelectionView = ({ layoutP, children, height }) => {
-    const [containerRef, containerNode] = useRefAndState(null);
-    const isShiftDown = useKeyDown('Shift');
-    const selectionBounds = useCaptureSelection(layoutP, containerNode);
-    const selectionBoundsRef = useRef(selectionBounds);
-    selectionBoundsRef.current = selectionBounds;
-    return (React.createElement(Container, { style: { height: height + 'px' }, ref: containerRef, isShiftDown: isShiftDown, className: "selectionview" },
-        selectionBounds && (React.createElement(SelectionRectangle, { state: selectionBounds, layoutP: layoutP })),
-        children));
-};
-function useCaptureSelection(layoutP, containerNode) {
-    const [ref, state] = useRefAndState(null);
-    const logger = useLogger('useCaptureSelection');
-    useDrag(containerNode, useMemo(() => {
-        return {
-            debugName: 'DopeSheetSelectionView/useCaptureSelection',
-            dontBlockMouseDown: true,
-            lockCSSCursorTo: 'cell',
-            onDragStart(event) {
-                if (!event.shiftKey || event.target instanceof HTMLInputElement) {
-                    return false;
-                }
-                const rect = containerNode.getBoundingClientRect();
-                // all the `val()` calls here are meant to be read cold
-                const posInScaledSpace = event.clientX -
-                    rect.left -
-                    // selection is happening in left padded space, convert it to normal space
-                    val(layoutP.scaledSpace.leftPadding);
-                const posInUnitSpace = val(layoutP.scaledSpace.toUnitSpace)(posInScaledSpace);
-                ref.current = {
-                    h: [posInUnitSpace, posInUnitSpace],
-                    v: [event.clientY - rect.top, event.clientY - rect.top],
-                };
-                val(layoutP.selectionAtom).set({ current: undefined });
-                return {
-                    onDrag(_dx, _dy, event) {
-                        // const state = ref.current!
-                        const rect = containerNode.getBoundingClientRect();
-                        const posInScaledSpace = event.clientX -
-                            rect.left -
-                            // selection is happening in left padded space, convert it to normal space
-                            val(layoutP.scaledSpace.leftPadding);
-                        const posInUnitSpace = val(layoutP.scaledSpace.toUnitSpace)(posInScaledSpace);
-                        ref.current = {
-                            h: [ref.current.h[0], posInUnitSpace],
-                            v: [ref.current.v[0], event.clientY - rect.top],
-                        };
-                        const selection = utils.boundsToSelection(logger, val(layoutP), ref.current);
-                        val(layoutP.selectionAtom).set({ current: selection });
-                    },
-                    onDragEnd(_dragHappened) {
-                        ref.current = null;
-                    },
-                };
-            },
-        };
-    }, [layoutP, containerNode, ref]));
-    return state;
-}
-var utils;
-(function (utils) {
-    const collectForAggregatedChildren = (logger, layout, leaf, bounds, selectionByObjectKey) => {
-        const aggregatedKeyframes = collectAggregateKeyframesInPrism(leaf);
-        if (leaf.top + leaf.nodeHeight / 2 + HITBOX_SIZE_PX > bounds.v[0] &&
-            leaf.top + leaf.nodeHeight / 2 - HITBOX_SIZE_PX < bounds.v[1]) {
-            for (const [position, keyframes] of aggregatedKeyframes.byPosition) {
-                const hitboxWidth = layout.scaledSpace.toUnitSpace(HITBOX_SIZE_PX);
-                const isHitboxOutsideSelection = position + hitboxWidth <= bounds.h[0] ||
-                    position - hitboxWidth >= bounds.h[1];
-                if (isHitboxOutsideSelection)
-                    continue;
-                for (const keyframeWithTrack of keyframes) {
-                    mutableSetDeep(selectionByObjectKey, (selectionByObjectKeyP) => 
-                    // convenience for accessing a deep path which might not actually exist
-                    // through the use of pointer proxy (so we don't have to deal with undeifned )
-                    selectionByObjectKeyP[keyframeWithTrack.track.sheetObject.address.objectKey].byTrackId[keyframeWithTrack.track.id].byKeyframeId[keyframeWithTrack.kf.id], true);
-                }
-            }
-        }
-        collectChildren(logger, layout, leaf, bounds, selectionByObjectKey);
-    };
-    const collectorByLeafType = {
-        sheet(logger, layout, leaf, bounds, selectionByObjectKey) {
-            collectForAggregatedChildren(logger, layout, leaf, bounds, selectionByObjectKey);
-        },
-        propWithChildren(logger, layout, leaf, bounds, selectionByObjectKey) {
-            collectForAggregatedChildren(logger, layout, leaf, bounds, selectionByObjectKey);
-        },
-        sheetObject(logger, layout, leaf, bounds, selectionByObjectKey) {
-            collectForAggregatedChildren(logger, layout, leaf, bounds, selectionByObjectKey);
-        },
-        primitiveProp(logger, layout, leaf, bounds, selectionByObjectKey) {
-            const { sheetObject, trackId } = leaf;
-            const trackData = val(getStudio().atomP.historic.coreByProject[sheetObject.address.projectId]
-                .sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey].trackData[trackId]);
-            if (bounds.v[0] >
-                leaf.top + leaf.heightIncludingChildren / 2 + HITBOX_SIZE_PX ||
-                leaf.top + leaf.heightIncludingChildren / 2 - HITBOX_SIZE_PX >
-                    bounds.v[1]) {
-                return;
-            }
-            for (const kf of trackData.keyframes) {
-                if (kf.position + layout.scaledSpace.toUnitSpace(HITBOX_SIZE_PX) <=
-                    bounds.h[0])
-                    continue;
-                if (kf.position - layout.scaledSpace.toUnitSpace(HITBOX_SIZE_PX) >=
-                    bounds.h[1])
-                    break;
-                mutableSetDeep(selectionByObjectKey, (selectionByObjectKeyP) => 
-                // convenience for accessing a deep path which might not actually exist
-                // through the use of pointer proxy (so we don't have to deal with undeifned )
-                selectionByObjectKeyP[sheetObject.address.objectKey].byTrackId[trackId].byKeyframeId[kf.id], true);
-            }
-        },
-    };
-    const collectChildren = (logger, layout, leaf, bounds, selectionByObjectKey) => {
-        if ('children' in leaf) {
-            for (const sub of leaf.children) {
-                collectFromAnyLeaf(logger, layout, sub, bounds, selectionByObjectKey);
-            }
-        }
-    };
-    function collectFromAnyLeaf(logger, layout, leaf, bounds, selectionByObjectKey) {
-        // don't collect from non rendered
-        if (!leaf.shouldRender)
-            return;
-        if (bounds.v[0] > leaf.top + leaf.heightIncludingChildren ||
-            leaf.top > bounds.v[1]) {
-            return;
-        }
-        const collector = collectorByLeafType[leaf.type];
-        if (collector) {
-            collector(logger, layout, leaf, bounds, selectionByObjectKey);
-        }
-        else {
-            collectChildren(logger, layout, leaf, bounds, selectionByObjectKey);
-        }
-    }
-    function boundsToSelection(logger, layout, bounds) {
-        const selectionByObjectKey = {};
-        bounds = sortBounds(bounds);
-        const tree = layout.tree;
-        collectFromAnyLeaf(logger.utilFor.internal(), layout, tree, bounds, selectionByObjectKey);
-        const sheet = layout.tree.sheet;
-        return {
-            type: 'DopeSheetSelection',
-            byObjectKey: selectionByObjectKey,
-            getDragHandlers(origin) {
-                return {
-                    debugName: 'DopeSheetSelectionView/boundsToSelection',
-                    onDragStart() {
-                        let tempTransaction;
-                        const toUnitSpace = layout.scaledSpace.toUnitSpace;
-                        return {
-                            onDrag(dx, _, event) {
-                                if (tempTransaction) {
-                                    tempTransaction.discard();
-                                    tempTransaction = undefined;
-                                }
-                                const snapPos = DopeSnap.checkIfMouseEventSnapToPos(event, {
-                                    ignore: origin.domNode,
-                                });
-                                const delta = snapPos != null
-                                    ? snapPos - origin.positionAtStartOfDrag
-                                    : toUnitSpace(dx);
-                                tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                                    const transformKeyframes = stateEditors.coreByProject.historic.sheetsById.sequence
-                                        .transformKeyframes;
-                                    for (const objectKey of Object.keys(selectionByObjectKey)) {
-                                        const { byTrackId } = selectionByObjectKey[objectKey];
-                                        for (const trackId of Object.keys(byTrackId)) {
-                                            const { byKeyframeId } = byTrackId[trackId];
-                                            transformKeyframes({
-                                                trackId,
-                                                keyframeIds: Object.keys(byKeyframeId),
-                                                translate: delta,
-                                                scale: 1,
-                                                origin: 0,
-                                                snappingFunction: sheet.getSequence().closestGridPosition,
-                                                objectKey,
-                                                projectId: origin.projectId,
-                                                sheetId: origin.sheetId,
-                                            });
-                                        }
-                                    }
-                                });
-                            },
-                            onDragEnd(dragHappened) {
-                                if (dragHappened)
-                                    tempTransaction?.commit();
-                                else
-                                    tempTransaction?.discard();
-                            },
-                        };
-                    },
-                };
-            },
-            delete() {
-                getStudio().transaction(({ stateEditors }) => {
-                    const deleteKeyframes = stateEditors.coreByProject.historic.sheetsById.sequence
-                        .deleteKeyframes;
-                    for (const objectKey of Object.keys(selectionByObjectKey)) {
-                        const { byTrackId } = selectionByObjectKey[objectKey];
-                        for (const trackId of Object.keys(byTrackId)) {
-                            const { byKeyframeId } = byTrackId[trackId];
-                            deleteKeyframes({
-                                ...sheet.address,
-                                objectKey,
-                                trackId,
-                                keyframeIds: Object.keys(byKeyframeId),
-                            });
-                        }
-                    }
-                });
-            },
-        };
-    }
-    utils.boundsToSelection = boundsToSelection;
-})(utils || (utils = {}));
-const SelectionRectangleDiv = styled.div `
-  position: absolute;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px dashed rgba(255, 255, 255, 0.4);
-  box-sizing: border-box;
-`;
-const sortBounds = (b) => {
-    return {
-        h: [...b.h].sort((a, b) => a - b),
-        v: [...b.v].sort((a, b) => a - b),
-    };
-};
-const SelectionRectangle = ({ state, layoutP }) => {
-    const atom = useValToAtom(state);
-    return usePrism(() => {
-        const state = val(atom.pointer);
-        const sorted = sortBounds(state);
-        const unitSpaceToScaledSpace = val(layoutP.scaledSpace.fromUnitSpace);
-        const leftPadding = val(layoutP.scaledSpace.leftPadding);
-        const positionsInScaledSpace = sorted.h
-            .map(unitSpaceToScaledSpace)
-            // bounds are in normal space, convert them left-padded space
-            .map((coord) => coord + leftPadding);
-        const top = sorted.v[0];
-        const height = sorted.v[1] - sorted.v[0];
-        const left = positionsInScaledSpace[0];
-        const width = positionsInScaledSpace[1] - positionsInScaledSpace[0];
-        return (React.createElement(SelectionRectangleDiv, { style: {
-                top: top + 'px',
-                height: height + 'px',
-                left: left + 'px',
-                width: width + 'px',
-            } }));
-    }, [layoutP, atom]);
-};
-export default DopeSheetSelectionView;