@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRangeCurtains.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/FocusRangeCurtains.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAI/D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAEvH,OAAO,KAAgB,MAAM,OAAO,CAAA;AAgBpC,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CA8FA,CAAA;AAED,eAAe,kBAAkB,CAAA"}

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

@@ -0,0 +1,88 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { topStripHeight } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+const divWidth = 1000;
+const Curtain = styled.div `
+  position: absolute;
+  top: ${topStripHeight}px;
+  left: 0;
+  opacity: 0.15;
+  width: ${divWidth}px;
+  transform-origin: top left;
+  pointer-events: none;
+  background-color: ${(props) => (props.enabled ? '#000000' : 'transparent')};
+`;
+const FocusRangeCurtains = ({ layoutP }) => {
+    const existingRangeD = useMemo(() => prism(() => {
+        const { projectId, sheetId } = val(layoutP.sheet).address;
+        const existingRange = val(getStudio().atomP.ahistoric.projects.stateByProjectId[projectId]
+            .stateBySheetId[sheetId].sequence.focusRange);
+        return existingRange;
+    }), [layoutP]);
+    return usePrism(() => {
+        const existingRange = existingRangeD.getValue();
+        if (!existingRange || !existingRange.enabled)
+            return null;
+        const { range } = existingRange;
+        const height = val(layoutP.rightDims.height) - topStripHeight;
+        const unitSpaceToClippedSpace = val(layoutP.clippedSpace.fromUnitSpace);
+        const clippedSpaceWidth = val(layoutP.clippedSpace.width);
+        const els = [];
+        {
+            // the left (start) curtain
+            // starts from 0px
+            let startX = 0;
+            // ends in the start of the range
+            let endX = unitSpaceToClippedSpace(existingRange.range.start);
+            let scaleX, translateX;
+            // hide the curtain if:
+            if (
+            // endX would be larger than startX, which means the curtain is to the left of the RightOverlay
+            startX > endX) {
+                // fully hide it then with scaleX = 0
+                translateX = 0;
+                scaleX = 0;
+            }
+            else {
+                // clip the end of the curtain if it's going over the right side of RightOverlay
+                if (endX > clippedSpaceWidth) {
+                    //
+                    endX = clippedSpaceWidth;
+                }
+                translateX = startX;
+                scaleX = (endX - startX) / divWidth;
+            }
+            els.push({ translateX, scaleX });
+        }
+        {
+            // the right (end) curtain
+            // starts at the end of the range
+            let startX = unitSpaceToClippedSpace(existingRange.range.end);
+            // and ends at the right edge of RightOverlay (which is clippedSpaceWidth)
+            let endX = clippedSpaceWidth;
+            let scaleX, translateX;
+            // if the whole curtain falls to the right of RightOverlay, hide it
+            if (startX > endX) {
+                translateX = 0;
+                scaleX = 0;
+            }
+            else {
+                // if the left of the curtain falls on the left of RightOverlay, clip it
+                if (startX < 0) {
+                    startX = 0;
+                }
+                translateX = startX;
+                scaleX = (endX - startX) / divWidth;
+            }
+            els.push({ translateX, scaleX });
+        }
+        return (React.createElement(React.Fragment, null, els.map(({ translateX, scaleX }, i) => (React.createElement(Curtain, { key: `curtain-${i}`, enabled: true, style: {
+                height: `${height}px`,
+                transform: `translateX(${translateX}px) scaleX(${scaleX})`,
+            } })))));
+    }, [layoutP, existingRangeD]);
+};
+export default FocusRangeCurtains;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.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 HorizontallyScrollableArea: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    height: number;
+    children: React.ReactNode;
+}>;
+export default HorizontallyScrollableArea;
+//# sourceMappingURL=HorizontallyScrollableArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontallyScrollableArea.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAIvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAAiC,MAAM,OAAO,CAAA;AA0BrD,QAAA,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAgCC,CAAA;AAEF,eAAe,0BAA0B,CAAA"}

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

@@ -0,0 +1,215 @@
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { clamp, mapValues } from 'lodash-es';
+import React, { useLayoutEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { useReceiveVerticalWheelEvent } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/VerticalScrollContainer';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import { snapToAll, snapToNone } from './KeyframeSnapTarget';
+const Container = styled.div `
+  position: absolute;
+
+  right: 0;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  ${pointerEventsAutoInNormalMode};
+
+  // hide the scrollbar on Gecko
+  scrollbar-width: none;
+
+  // hide the scrollbar on Webkit/Blink
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const HorizontallyScrollableArea = React.memo(({ layoutP, children, height }) => {
+    const { width, unitSpaceToScaledSpaceMultiplier } = usePrism(() => ({
+        width: val(layoutP.rightDims.width),
+        unitSpaceToScaledSpaceMultiplier: val(layoutP.scaledSpace.fromUnitSpace)(1),
+    }), [layoutP]);
+    const [containerRef, containerNode] = useRefAndState(null);
+    useHandlePanAndZoom(layoutP, containerNode);
+    useDragPlayheadHandlers(layoutP, containerNode);
+    useUpdateScrollFromClippedSpaceRange(layoutP, containerNode);
+    return (React.createElement(Container, { ref: containerRef, style: {
+            width: width + 'px',
+            height: height + 'px',
+            // @ts-expect-error
+            '--unitSpaceToScaledSpaceMultiplier': unitSpaceToScaledSpaceMultiplier,
+        } }, children));
+});
+export default HorizontallyScrollableArea;
+function useDragPlayheadHandlers(layoutP, containerEl) {
+    const handlers = useMemo(() => {
+        return {
+            debugName: 'HorizontallyScrollableArea',
+            onDragStart(event) {
+                if (event.target instanceof HTMLInputElement) {
+                    // editing some value
+                    return false;
+                }
+                if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+                    // e.g. marquee selection has shiftKey
+                    return false;
+                }
+                if (event
+                    .composedPath()
+                    .some((el) => el instanceof HTMLElement && el.draggable === true)) {
+                    // Question: I think to check if we want another descendent element
+                    // to be able to take control of this drag event.
+                    // Question: e.g. for `useDragKeyframe`?
+                    return false;
+                }
+                const initialPositionInClippedSpace = event.clientX - containerEl.getBoundingClientRect().left;
+                const initialPositionInUnitSpace = clamp(val(layoutP.clippedSpace.toUnitSpace)(initialPositionInClippedSpace), 0, Infinity);
+                const setIsSeeking = val(layoutP.seeker.setIsSeeking);
+                const sequence = val(layoutP.sheet).getSequence();
+                sequence.position = initialPositionInUnitSpace;
+                const posBeforeSeek = initialPositionInUnitSpace;
+                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
+                setIsSeeking(true);
+                snapToAll();
+                return {
+                    onDrag(dx, _, event) {
+                        const deltaPos = scaledSpaceToUnitSpace(dx);
+                        const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length);
+                        let newPosition = unsnappedPos;
+                        const snapPos = DopeSnap.checkIfMouseEventSnapToPos(event, {});
+                        if (snapPos != null) {
+                            newPosition = snapPos;
+                        }
+                        sequence.position = newPosition;
+                    },
+                    onDragEnd() {
+                        setIsSeeking(false);
+                        snapToNone();
+                    },
+                };
+            },
+        };
+    }, [layoutP, containerEl]);
+    const [isDragging] = useDrag(containerEl, handlers);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
+}
+function useHandlePanAndZoom(layoutP, node) {
+    const receiveVerticalWheelEvent = useReceiveVerticalWheelEvent();
+    useLayoutEffect(() => {
+        if (!node)
+            return;
+        const receiveWheelEvent = (event) => {
+            // pinch
+            if (event.ctrlKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                const pivotPointInClippedSpace = event.clientX - node.getBoundingClientRect().left;
+                const pivotPointInUnitSpace = val(layoutP.clippedSpace.toUnitSpace)(pivotPointInClippedSpace);
+                const oldRange = val(layoutP.clippedSpace.range);
+                const delta = normalize(event.deltaY, [-50, 50]);
+                const scaleFactor = 1 + delta * 0.03;
+                const newRange = mapValues(oldRange, (originalPos) => {
+                    return ((originalPos - pivotPointInUnitSpace) * scaleFactor +
+                        pivotPointInUnitSpace);
+                });
+                // Set maximum scroll points based on the sequence length.
+                // This is to avoid zooming out to infinity.
+                const sequenceLength = val(layoutP.sheet).getSequence().length;
+                const maxEnd = sequenceLength + sequenceLength * 0.25;
+                val(layoutP.clippedSpace.setRange)(normalizeRange(newRange, [0, maxEnd]));
+                return;
+            }
+            // panning
+            else if (event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                const sequenceLength = val(layoutP.sheet).getSequence().length;
+                const oldRange = val(layoutP.clippedSpace.range);
+                const windowSize = oldRange.end - oldRange.start;
+                const speed = windowSize / sequenceLength;
+                // if there's no deltaY, the browser is probably assigning to deltaX because of the shiftKey
+                // it appeared that Safari + Chrome continue to use deltaY with shiftKey, while FF on macOS
+                // updates the deltaX with deltaY unchanged.
+                // this is a little awkward with track pads + shift on macOS FF, but that's not a big deal
+                // since scrolling horizontally with macOS track pads is not necessary to hold shift.
+                const delta = normalize(event.deltaY || event.deltaX, [-50, 50]);
+                const scaleFactor = delta * 0.05 * speed;
+                const newRange = mapValues(oldRange, (originalPos) => originalPos + scaleFactor);
+                val(layoutP.clippedSpace.setRange)(newRange);
+                return;
+            }
+            else {
+                receiveVerticalWheelEvent(event);
+                event.preventDefault();
+                event.stopPropagation();
+                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
+                const deltaPos = scaledSpaceToUnitSpace(event.deltaX * 1);
+                const oldRange = val(layoutP.clippedSpace.range);
+                const newRange = mapValues(oldRange, (p) => p + deltaPos);
+                const setRange = val(layoutP.clippedSpace.setRange);
+                setRange(newRange);
+                return;
+            }
+        };
+        const listenerOptions = {
+            capture: true,
+            passive: false,
+        };
+        node.addEventListener('wheel', receiveWheelEvent, listenerOptions);
+        return () => {
+            node.removeEventListener('wheel', receiveWheelEvent, listenerOptions);
+        };
+    }, [node, layoutP]);
+    useDrag(node, useMemo(() => {
+        return {
+            onDragStart(e) {
+                const oldRange = val(layoutP.clippedSpace.range);
+                const setRange = val(layoutP.clippedSpace.setRange);
+                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
+                e.preventDefault();
+                e.stopPropagation();
+                return {
+                    onDrag(dx, dy, _, __, deltaYFromLastEvent) {
+                        receiveVerticalWheelEvent({ deltaY: -deltaYFromLastEvent });
+                        const delta = -scaledSpaceToUnitSpace(dx);
+                        const newRange = mapValues(oldRange, (originalPos) => originalPos + delta);
+                        setRange(newRange);
+                    },
+                };
+            },
+            debugName: 'HorizontallyScrollableArea Middle Button Drag',
+            buttons: [1],
+            lockCSSCursorTo: 'grabbing',
+        };
+    }, [layoutP]));
+}
+function normalize(value, [min, max]) {
+    return Math.max(Math.min(value, max), min);
+}
+function normalizeRange(range, minMax) {
+    return mapValues(range, (pos) => normalize(pos, minMax));
+}
+function useUpdateScrollFromClippedSpaceRange(layoutP, node) {
+    useLayoutEffect(() => {
+        if (!node)
+            return;
+        const d = prism(() => {
+            const range = val(layoutP.clippedSpace.range);
+            const rangeStartInScaledSpace = val(layoutP.scaledSpace.fromUnitSpace)(range.start);
+            return rangeStartInScaledSpace;
+        });
+        const update = () => {
+            const rangeStartInScaledSpace = d.getValue();
+            node.scrollLeft = rangeStartInScaledSpace;
+        };
+        const untap = d.onStale(update);
+        update();
+        const timeout = setTimeout(update, 100);
+        return () => {
+            clearTimeout(timeout);
+            untap();
+        };
+    }, [layoutP, node]);
+}

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

@@ -0,0 +1,36 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { ObjectAddressKey, SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { BasicKeyframedTrack, HistoricPositionalSequence, Keyframe } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+export type ISnapTargetPRops = {
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    leaf: {
+        nodeHeight: number;
+    };
+    position: number;
+};
+declare const KeyframeSnapTarget: React.VFC<ISnapTargetPRops>;
+export default KeyframeSnapTarget;
+export type KeyframeSnapPositions = {
+    [objectKey: ObjectAddressKey]: {
+        [trackId: SequenceTrackId]: number[];
+    };
+};
+export declare const snapPositionsStateD: import("@tomorrowevening/theatre-dataverse").Prism<{
+    mode: 'snapToAll';
+} | {
+    mode: 'snapToSome';
+    positions: KeyframeSnapPositions;
+} | {
+    mode: 'snapToNone';
+}>;
+export declare function snapToAll(): void;
+export declare function snapToNone(): void;
+export declare function snapToSome(positions: KeyframeSnapPositions): void;
+export declare function collectKeyframeSnapPositions(tracksByObject: HistoricPositionalSequence['tracksByObject'], shouldIncludeKeyframe: (kf: Keyframe, track: {
+    trackId: SequenceTrackId;
+    trackData: BasicKeyframedTrack;
+    objectKey: ObjectAddressKey;
+}) => boolean): KeyframeSnapPositions;
+//# sourceMappingURL=KeyframeSnapTarget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyframeSnapTarget.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,KAAK,EAAE,OAAO,EAAC,MAAM,oCAAoC,CAAC;AAGjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,2CAA2C,CAAA;AAChG,OAAO,KAAK,EACV,mBAAmB,EACnB,0BAA0B,EAC1B,QAAQ,EACT,MAAM,wEAAwE,CAAA;AAiB/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,IAAI,EAAE;QAAC,UAAU,EAAE,MAAM,CAAA;KAAC,CAAA;IAC1B,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAoBnD,CAAA;AAED,eAAe,kBAAkB,CAAA;AAEjC,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,SAAS,EAAE,gBAAgB,GAAG;QAC7B,CAAC,OAAO,EAAE,eAAe,GAAG,MAAM,EAAE,CAAA;KACrC,CAAA;CACF,CAAA;AAkBD,eAAO,MAAM,mBAAmB;UAbpB,WAAW;;UAIX,YAAY;eACP,qBAAqB;;UAI1B,YAAY;EAIuB,CAAA;AAE/C,wBAAgB,SAAS,SAExB;AAED,wBAAgB,UAAU,SAEzB;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,qBAAqB,QAE1D;AAED,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,0BAA0B,CAAC,gBAAgB,CAAC,EAC5D,qBAAqB,EAAE,CACrB,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE;IACL,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,mBAAmB,CAAA;IAC9B,SAAS,EAAE,gBAAgB,CAAA;CAC5B,KACE,OAAO,GACX,qBAAqB,CAwBvB"}