@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,49 +0,0 @@
-import { memoize } from 'lodash-es';
-const getFactorsOfNumber = memoize((divisionsPerUnit) => {
-    const factors = [];
-    for (let i = 1; i <= divisionsPerUnit; i++) {
-        if (divisionsPerUnit % i === 0) {
-            factors.push(i);
-        }
-    }
-    return factors;
-});
-/**
- * Calls cb() for every grid line that must be drawn.
- *
- * @remarks
- * For the sake of simplicity, I've named the variables as if the sequence's
- * length is counted in seconds, and the sub-unit is called fps
- * (frames per second). But the algorithm should work for any fps rate, and also
- * non-time-based sequences.
- */
-export default function createGrid({ clippedSpaceRange, clippedSpaceWidth, fps, gapWidth = 120, }, cb) {
-    // If fps is 60, then frameLengthInSeconeds would be 1/60 => 0.033
-    const frameLengthInSeconeds = 1 / fps;
-    // how much of the timeline is visible.
-    const clippedSpaceLengthInSeconds = clippedSpaceRange.end - clippedSpaceRange.start; // eg: if start: 1 AND end: 3 THEN length = 2
-    // how many pixels of space does one frame take
-    const frameWidthInScreenSpace = clippedSpaceWidth / (fps * clippedSpaceLengthInSeconds);
-    // Number of frames that fit in the smallest cell possible.
-    // a cell is basically the space between two grid lines
-    const numberOfFramesFittingInMinimumCellWidth = Math.floor(gapWidth / frameWidthInScreenSpace);
-    // Number of frames in each cell, so that lines would be drawn at full seconds
-    const numberOfFramesPerCell = 
-    // if we can't fit a full 60 frames in a cell (or a multiple of 60 frames),
-    numberOfFramesFittingInMinimumCellWidth < fps
-        ? getFactorsOfNumber(fps).find(
-        // then try fitting 30 frames, or 20, or 15, and other factors of 60
-        (factor) => factor >= numberOfFramesFittingInMinimumCellWidth)
-        : // otherwise, determine how many full seconds we can fit in a cell
-            fps * Math.floor(numberOfFramesFittingInMinimumCellWidth / fps);
-    const cellLengthInSeconds = numberOfFramesPerCell * frameLengthInSeconeds;
-    // the number of the first cell we'll draw
-    const startCell = Math.floor(clippedSpaceRange.start / cellLengthInSeconds);
-    // and the last one
-    const endCell = Math.ceil(clippedSpaceRange.end / cellLengthInSeconds);
-    for (let cell = startCell; cell <= endCell; cell++) {
-        const posInUnitSpace = cell * cellLengthInSeconds;
-        const isFullSecond = posInUnitSpace % 1 === 0;
-        cb(posInUnitSpace, isFullSecond);
-    }
-}

package/dist/panels/SequenceEditorPanel/FrameStampPositionProvider.js

@@ -1,189 +0,0 @@
-import { Atom, prism, val } from '@tomorrowevening/theatre-dataverse';
-import mousePositionD from '@tomorrowevening/theatre-studio/utils/mousePositionD';
-import { inRange, last } from 'lodash-es';
-import React, { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, } from 'react';
-export var FrameStampPositionType;
-(function (FrameStampPositionType) {
-    FrameStampPositionType[FrameStampPositionType["hidden"] = 0] = "hidden";
-    FrameStampPositionType[FrameStampPositionType["locked"] = 1] = "locked";
-    FrameStampPositionType[FrameStampPositionType["snapped"] = 2] = "snapped";
-    FrameStampPositionType[FrameStampPositionType["free"] = 3] = "free";
-})(FrameStampPositionType || (FrameStampPositionType = {}));
-const context = createContext(null);
-let lastLockId = 0;
-/**
- * Provides snapping positions to "stamps".
- *
- * One example of a stamp includes the "Keyframe Dot" which show a `⌜⌞⌝⌟` kinda UI
- * around the dot when dragged over.
- */
-const FrameStampPositionProvider = ({ children, layoutP }) => {
-    const locksAtom = useMemo(() => new Atom([]), []);
-    const currentD = useMemo(() => prism(() => {
-        const pointerPos = prism
-            .memo('p', () => pointerPositionInUnitSpace(layoutP), [layoutP])
-            .getValue();
-        const locks = val(locksAtom.pointer);
-        if (locks.length > 0) {
-            return last(locks).position;
-        }
-        else {
-            return pointerPos;
-        }
-    }), [layoutP]);
-    const getLock = useCallback(() => {
-        const id = lastLockId++;
-        locksAtom.reduce((list) => [
-            ...list,
-            {
-                id,
-                position: [-1, FrameStampPositionType.hidden],
-            },
-        ]);
-        const unlock = () => {
-            locksAtom.reduce((list) => list.filter((lock) => lock.id !== id));
-        };
-        const set = (posInUnitSpace) => {
-            locksAtom.reduce((list) => {
-                const index = list.findIndex((lock) => lock.id === id);
-                if (index === -1) {
-                    console.warn(`Lock is already freed. This is a bug.`);
-                    return list;
-                }
-                const newList = [...list];
-                newList.splice(index, 1, {
-                    id,
-                    position: [
-                        posInUnitSpace,
-                        posInUnitSpace === -1
-                            ? FrameStampPositionType.hidden
-                            : FrameStampPositionType.locked,
-                    ],
-                });
-                return newList;
-            });
-        };
-        return {
-            set,
-            unlock,
-        };
-    }, []);
-    const value = {
-        currentD,
-        getLock,
-    };
-    return React.createElement(context.Provider, { value: value }, children);
-};
-export const useFrameStampPositionD = () => useContext(context).currentD;
-/** Version of {@link useLockFrameStampPosition} which allows you to directly set status of a lock. */
-export const useLockFrameStampPositionRef = () => {
-    const { getLock } = useContext(context);
-    const lockRef = useRef();
-    useLayoutEffect(() => {
-        return () => {
-            lockRef.current?.unlock();
-        };
-    }, []);
-    return useMemo(() => {
-        let prevLock = undefined;
-        return (shouldLock, posValue) => {
-            // Do if shouldLock changed
-            if (prevLock?.shouldLock !== shouldLock) {
-                if (shouldLock) {
-                    lockRef.current = getLock();
-                }
-                else {
-                    lockRef.current?.unlock();
-                }
-            }
-            // Do if position changed
-            if (prevLock?.pos !== posValue) {
-                if (shouldLock) {
-                    lockRef.current?.set(posValue);
-                }
-            }
-            // Set arguments we are going to diff against next time
-            prevLock = { shouldLock, pos: posValue };
-        };
-    }, [getLock]);
-};
-export const useLockFrameStampPosition = (shouldLock, val) => {
-    const { getLock } = useContext(context);
-    const lockRef = useRef();
-    useLayoutEffect(() => {
-        if (!shouldLock)
-            return;
-        lockRef.current = getLock();
-        return () => {
-            lockRef.current.unlock();
-        };
-    }, [shouldLock, getLock]);
-    useLayoutEffect(() => {
-        if (shouldLock) {
-            lockRef.current.set(val);
-        }
-    }, [val, shouldLock]);
-};
-/**
- * This attribute is used so that when the cursor hovers over a keyframe,
- * the framestamp snaps to the position of that keyframe.
- *
- * Use as a spread in a React element.
- *
- * @example
- * ```tsx
- * <div {...includeLockFrameStampAttrs(10)}/>
- * ```
- *
- * @remarks
- * Elements that need this behavior must set a data attribute like so:
- * <div data-theatre-lock-framestamp-to="120.55" />
- * Setting this attribute to "hide" hides the stamp.
- *
- * @see lockedCursorCssVarName - CSS variable used to set the cursor on an element that
- * should lock the framestamp. Look for usages.
- * @see pointerEventsAutoInNormalMode - CSS snippet used to correctly set
- * `pointer-events` on an element that should lock the framestamp.
- *
- * See {@link FrameStampPositionProvider}
- *
- */
-export const includeLockFrameStampAttrs = (value) => ({
-    [ATTR_LOCK_FRAMESTAMP]: value === 'hide' ? value : value.toFixed(3),
-});
-const ATTR_LOCK_FRAMESTAMP = 'data-theatre-lock-framestamp-to';
-const pointerPositionInUnitSpace = (layoutP) => {
-    return prism(() => {
-        const rightDims = val(layoutP.rightDims);
-        const clippedSpaceToUnitSpace = val(layoutP.clippedSpace.toUnitSpace);
-        const mousePos = val(mousePositionD);
-        if (!mousePos)
-            return [-1, FrameStampPositionType.hidden];
-        for (const el of mousePos.composedPath()) {
-            if (!(el instanceof HTMLElement || el instanceof SVGElement))
-                break;
-            if (el.hasAttribute(ATTR_LOCK_FRAMESTAMP)) {
-                const val = el.getAttribute(ATTR_LOCK_FRAMESTAMP);
-                if (typeof val !== 'string')
-                    continue;
-                if (val === 'hide')
-                    return [-1, FrameStampPositionType.hidden];
-                const double = parseFloat(val);
-                if (isFinite(double) && double >= 0)
-                    return [double, FrameStampPositionType.snapped];
-            }
-        }
-        const { clientX, clientY } = mousePos;
-        const { screenX: x, screenY: y, width: rightWidth, height } = rightDims;
-        if (inRange(clientX, x, x + rightWidth) &&
-            inRange(clientY, y + 16 /* leaving a bit of space for the top stip here */, y + height)) {
-            const posInRightDims = clientX - x;
-            const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims);
-            return [posInUnitSpace, FrameStampPositionType.free];
-        }
-        else {
-            return [-1, FrameStampPositionType.hidden];
-        }
-    });
-};
-export default FrameStampPositionProvider;

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/BasicKeyframedTrack.js

@@ -1,91 +0,0 @@
-import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
-import React, { useMemo, useRef, useState } from 'react';
-import { graphEditorColors } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor';
-import KeyframeEditor from './KeyframeEditor/KeyframeEditor';
-import { getPropConfigByPath, isPropConfigComposite, valueInProp, } from '@tomorrowevening/theatre-shared/propTypes/utils';
-import { useVal } from '@tomorrowevening/theatre-react';
-const BasicKeyframedTrack = React.memo(({ layoutP, trackData, sheetObject, trackId, color, pathToProp }) => {
-    const propConfig = getPropConfigByPath(useVal(sheetObject.template.configPointer), pathToProp);
-    if (isPropConfigComposite(propConfig)) {
-        console.error(`Composite prop types cannot be keyframed`);
-        return React.createElement(React.Fragment, null);
-    }
-    const [areExtremumsLocked, setAreExtremumsLocked] = useState(false);
-    const lockExtremums = useMemo(() => {
-        const locks = new Set();
-        return function lockExtremums() {
-            const shouldLock = locks.size === 0;
-            locks.add(unlock);
-            if (shouldLock)
-                setAreExtremumsLocked(true);
-            function unlock() {
-                const wasLocked = locks.size > 0;
-                locks.delete(unlock);
-                if (wasLocked && locks.size === 0)
-                    setAreExtremumsLocked(false);
-            }
-            return unlock;
-        };
-    }, []);
-    const extremumSpace = useMemo(() => {
-        const extremums = propConfig.type === 'number'
-            ? calculateScalarExtremums(trackData.keyframes, propConfig)
-            : calculateNonScalarExtremums(trackData.keyframes);
-        const fromValueSpace = (val) => (val - extremums[0]) / (extremums[1] - extremums[0]);
-        const toValueSpace = (ex) => extremums[0] + deltaToValueSpace(ex);
-        const deltaToValueSpace = (ex) => ex * (extremums[1] - extremums[0]);
-        return {
-            fromValueSpace,
-            toValueSpace,
-            deltaToValueSpace,
-            lock: lockExtremums,
-        };
-    }, [trackData.keyframes]);
-    const cachedExtremumSpace = useRef(undefined);
-    if (!areExtremumsLocked) {
-        cachedExtremumSpace.current = extremumSpace;
-    }
-    const keyframeEditors = trackData.keyframes.map((kf, index) => (React.createElement(KeyframeEditor, { pathToProp: pathToProp, propConfig: propConfig, itemKey: createStudioSheetItemKey.forTrackKeyframe(sheetObject, trackId, kf.id), keyframe: kf, index: index, trackData: trackData, layoutP: layoutP, sheetObject: sheetObject, trackId: trackId, isScalar: propConfig.type === 'number', key: kf.id, extremumSpace: cachedExtremumSpace.current, color: color })));
-    return (React.createElement("g", { style: {
-            // @ts-ignore
-            '--main-color': graphEditorColors[color].iconColor,
-        } }, keyframeEditors));
-});
-export default BasicKeyframedTrack;
-function calculateScalarExtremums(keyframes, propConfig) {
-    let min = Infinity, max = -Infinity;
-    function check(n) {
-        min = Math.min(n, min);
-        max = Math.max(n, max);
-    }
-    keyframes.forEach((cur, i) => {
-        const curVal = valueInProp(cur.value, propConfig);
-        check(curVal);
-        if (!cur.connectedRight)
-            return;
-        const next = keyframes[i + 1];
-        if (!next)
-            return;
-        const diff = (typeof next.value === 'number' ? next.value : 1) - curVal;
-        check(curVal + cur.handles[3] * diff);
-        check(curVal + next.handles[1] * diff);
-    });
-    return [min, max];
-}
-function calculateNonScalarExtremums(keyframes) {
-    let min = 0, max = 1;
-    function check(n) {
-        min = Math.min(n, min);
-        max = Math.max(n, max);
-    }
-    keyframes.forEach((cur, i) => {
-        if (!cur.connectedRight)
-            return;
-        const next = keyframes[i + 1];
-        if (!next)
-            return;
-        check(cur.handles[3]);
-        check(next.handles[1]);
-    });
-    return [min, max];
-}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/Curve.js

@@ -1,87 +0,0 @@
-import { valueInProp } from '@tomorrowevening/theatre-shared/propTypes/utils';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import React from 'react';
-import styled from 'styled-components';
-const SVGPath = styled.path `
-  stroke-width: 2;
-  stroke: var(--main-color);
-  fill: none;
-  vector-effect: non-scaling-stroke;
-`;
-// for keyframe.type === 'hold'
-const pathForHoldType = `M 0 0 L 1 0 L 1 1`;
-const Curve = (props) => {
-    const { index, trackData } = props;
-    const cur = trackData.keyframes[index];
-    const next = trackData.keyframes[index + 1];
-    const connectorLengthInUnitSpace = next.position - cur.position;
-    const [nodeRef, node] = useRefAndState(null);
-    const [contextMenu] = useConnectorContextMenu(node, props);
-    const curValue = props.isScalar
-        ? valueInProp(cur.value, props.propConfig)
-        : 0;
-    const nextValue = props.isScalar
-        ? valueInProp(next.value, props.propConfig)
-        : 1;
-    const leftYInExtremumSpace = props.extremumSpace.fromValueSpace(curValue);
-    const rightYInExtremumSpace = props.extremumSpace.fromValueSpace(nextValue);
-    const heightInExtremumSpace = rightYInExtremumSpace - leftYInExtremumSpace;
-    const transform = transformBox(cur.position, leftYInExtremumSpace, connectorLengthInUnitSpace, heightInExtremumSpace);
-    const x1 = cur.handles[2];
-    const y1 = cur.handles[3];
-    const x2 = next.handles[0];
-    const y2 = next.handles[1];
-    const pathD = `M 0 0 C ${x1} ${y1} ${x2} ${y2} 1 1`;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SVGPath, { ref: nodeRef, d: !cur.type || cur.type === 'bezier' ? pathD : pathForHoldType, style: {
-                transform,
-            } }),
-        contextMenu));
-};
-/**
- * Assuming a box such that: `{x: 0, y: 0, width: 1px, height: 1px}`
- * and given the desired coordinates of:
- * `{x: xInUnitSpace, y: yInExtremumSpace, width: widthInUnitSpace, height: heightInExtremumSpace}`,
- * `transformBox()` returns a CSS transform that transforms the box into its right dimensions
- * in the GraphEditor space.
- */
-export function transformBox(xInUnitSpace, yInExtremumSpace, widthInUnitSpace, heightInExtremumSpace) {
-    const translateX = `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${xInUnitSpace}px)`;
-    const translateY = `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${yInExtremumSpace}) * 1px)`;
-    if (widthInUnitSpace === 0) {
-        widthInUnitSpace = 0.0001;
-    }
-    const scaleX = `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${widthInUnitSpace})`;
-    if (heightInExtremumSpace === 0) {
-        heightInExtremumSpace = 0.001;
-    }
-    const scaleY = `calc(var(--graphEditorVerticalSpace) * ${heightInExtremumSpace * -1})`;
-    return `translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`;
-}
-export default Curve;
-function useConnectorContextMenu(node, props) {
-    const { index, trackData } = props;
-    const cur = trackData.keyframes[index];
-    const next = trackData.keyframes[index + 1];
-    return useContextMenu(node, {
-        menuItems: () => {
-            return [
-                {
-                    label: 'Delete',
-                    callback: () => {
-                        getStudio().transaction(({ stateEditors }) => {
-                            const { deleteKeyframes } = stateEditors.coreByProject.historic.sheetsById.sequence;
-                            deleteKeyframes({
-                                ...props.sheetObject.address,
-                                trackId: props.trackId,
-                                keyframeIds: [cur.id, next.id],
-                            });
-                        });
-                    },
-                },
-            ];
-        },
-    });
-}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/CurveHandle.js

@@ -1,186 +0,0 @@
-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 { clamp } from 'lodash-es';
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { transformBox } from './Curve';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-export const dotSize = 6;
-const Circle = styled.circle `
-  stroke-width: 1px;
-  vector-effect: non-scaling-stroke;
-  fill: var(--main-color);
-  r: 2px;
-  pointer-events: none;
-`;
-const HitZone = styled.circle `
-  stroke-width: 6px;
-  vector-effect: non-scaling-stroke;
-  r: 6px;
-  fill: transparent;
-  cursor: move;
-  ${pointerEventsAutoInNormalMode};
-  &:hover {
-  }
-  &:hover + ${Circle} {
-    r: 6px;
-  }
-`;
-const Line = styled.path `
-  stroke-width: 1;
-  stroke: var(--main-color);
-  /* stroke: gray; */
-  fill: none;
-  vector-effect: non-scaling-stroke;
-`;
-const CurveHandle = (props) => {
-    const [ref, node] = useRefAndState(null);
-    const { index, trackData } = props;
-    const cur = trackData.keyframes[index];
-    const next = trackData.keyframes[index + 1];
-    const [contextMenu] = useOurContextMenu(node, props);
-    useOurDrags(node, props);
-    const posInDiffSpace = props.which === 'left' ? cur.handles[2] : next.handles[0];
-    const posInUnitSpace = cur.position + (next.position - cur.position) * posInDiffSpace;
-    const valInDiffSpace = props.which === 'left' ? cur.handles[3] : next.handles[1];
-    const curValue = props.isScalar ? cur.value : 0;
-    const nextValue = props.isScalar ? next.value : 1;
-    const value = curValue + (nextValue - curValue) * valInDiffSpace;
-    const valInExtremumSpace = props.extremumSpace.fromValueSpace(value);
-    const heightInExtremumSpace = valInExtremumSpace -
-        props.extremumSpace.fromValueSpace(props.which === 'left' ? curValue : nextValue);
-    const lineTransform = transformBox(props.which === 'left' ? cur.position : next.position, props.extremumSpace.fromValueSpace(props.which === 'left' ? curValue : nextValue), posInUnitSpace - (props.which === 'left' ? cur.position : next.position), heightInExtremumSpace);
-    return (React.createElement("g", null,
-        React.createElement(HitZone, { ref: ref, style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${posInUnitSpace} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${valInExtremumSpace}) * 1px)`,
-            } }),
-        React.createElement(Circle, { style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${posInUnitSpace} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${valInExtremumSpace}) * 1px)`,
-            } }),
-        React.createElement(Line, { d: "M 0 0 L 1 1", style: {
-                transform: lineTransform,
-            } }),
-        contextMenu));
-};
-export default CurveHandle;
-function useOurDrags(node, props) {
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const handlers = useMemo(() => {
-        return {
-            debugName: 'CurveHandler/useOurDrags',
-            lockCSSCursorTo: 'move',
-            onDragStart() {
-                let tempTransaction;
-                const propsAtStartOfDrag = propsRef.current;
-                const scaledToUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
-                const verticalToExtremumSpace = val(propsAtStartOfDrag.layoutP.graphEditorVerticalSpace.toExtremumSpace);
-                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
-                return {
-                    onDrag(dxInScaledSpace, dy) {
-                        if (tempTransaction) {
-                            tempTransaction.discard();
-                            tempTransaction = undefined;
-                        }
-                        const { index, trackData } = propsAtStartOfDrag;
-                        const cur = trackData.keyframes[index];
-                        const next = trackData.keyframes[index + 1];
-                        const dPosInUnitSpace = scaledToUnitSpace(dxInScaledSpace);
-                        let dPosInKeyframeDiffSpace = dPosInUnitSpace / (next.position - cur.position);
-                        const dyInVerticalSpace = -dy;
-                        const dYInExtremumSpace = verticalToExtremumSpace(dyInVerticalSpace);
-                        const dYInValueSpace = propsAtStartOfDrag.extremumSpace.deltaToValueSpace(dYInExtremumSpace);
-                        const curValue = props.isScalar ? cur.value : 0;
-                        const nextValue = props.isScalar ? next.value : 1;
-                        const dyInKeyframeDiffSpace = dYInValueSpace / (nextValue - curValue);
-                        if (propsAtStartOfDrag.which === 'left') {
-                            const handleX = clamp(cur.handles[2] + dPosInKeyframeDiffSpace, 0, 1);
-                            const handleY = cur.handles[3] + dyInKeyframeDiffSpace;
-                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                                stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
-                                    ...propsAtStartOfDrag.sheetObject.address,
-                                    snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
-                                    trackId: propsAtStartOfDrag.trackId,
-                                    keyframes: [
-                                        {
-                                            ...cur,
-                                            handles: [
-                                                cur.handles[0],
-                                                cur.handles[1],
-                                                handleX,
-                                                handleY,
-                                            ],
-                                        },
-                                    ],
-                                });
-                            });
-                        }
-                        else {
-                            const handleX = clamp(next.handles[0] + dPosInKeyframeDiffSpace, 0, 1);
-                            const handleY = next.handles[1] + dyInKeyframeDiffSpace;
-                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                                stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
-                                    ...propsAtStartOfDrag.sheetObject.address,
-                                    trackId: propsAtStartOfDrag.trackId,
-                                    snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
-                                    keyframes: [
-                                        {
-                                            ...next,
-                                            handles: [
-                                                handleX,
-                                                handleY,
-                                                next.handles[2],
-                                                next.handles[3],
-                                            ],
-                                        },
-                                    ],
-                                });
-                            });
-                        }
-                    },
-                    onDragEnd(dragHappened) {
-                        unlockExtremums();
-                        if (dragHappened) {
-                            if (tempTransaction) {
-                                tempTransaction.commit();
-                            }
-                        }
-                        else {
-                            if (tempTransaction) {
-                                tempTransaction.discard();
-                            }
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    useDrag(node, handlers);
-}
-function useOurContextMenu(node, props) {
-    return useContextMenu(node, {
-        menuItems: () => {
-            return [
-                {
-                    label: 'Delete',
-                    callback: () => {
-                        getStudio().transaction(({ stateEditors }) => {
-                            stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
-                                ...props.sheetObject.address,
-                                keyframeIds: [props.keyframe.id],
-                                trackId: props.trackId,
-                            });
-                        });
-                    },
-                },
-            ];
-        },
-    });
-}