@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,185 @@
+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 React from 'react';
+import { useMemo, useRef } from 'react';
+import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
+import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
+import CurveEditorPopover, { isConnectionEditingInCurvePopover, } from './CurveEditorPopover/CurveEditorPopover';
+import { ConnectorLine } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine';
+import { COLOR_POPOVER_BACK } from './CurveEditorPopover/colors';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import { copyableKeyframesFromSelection } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
+import { selectedKeyframeConnections } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
+import styled from 'styled-components';
+const POPOVER_MARGIN = 5;
+const EasingPopover = styled(BasicPopover) `
+  --popover-outer-stroke: transparent;
+  --popover-inner-stroke: ${COLOR_POPOVER_BACK};
+`;
+const BasicKeyframeConnector = (props) => {
+    const { index, track } = props;
+    const cur = track.data.keyframes[index];
+    const next = track.data.keyframes[index + 1];
+    const [nodeRef, node] = useRefAndState(null);
+    const { node: popoverNode, toggle: togglePopover, close: closePopover, } = usePopover(() => {
+        const rightDims = val(props.layoutP.rightDims);
+        return {
+            debugName: 'Connector',
+            constraints: {
+                minX: rightDims.screenX + POPOVER_MARGIN,
+                maxX: rightDims.screenX + rightDims.width - POPOVER_MARGIN,
+            },
+        };
+    }, () => React.createElement(SingleCurveEditorPopover, { ...props, closePopover: closePopover }));
+    const [contextMenu] = useConnectorContextMenu(props, node, cur, next);
+    useDragKeyframe(node, props);
+    const connectorLengthInUnitSpace = next.position - cur.position;
+    const isInCurveEditorPopoverSelection = usePrism(() => isConnectionEditingInCurvePopover({
+        ...props.leaf.sheetObject.address,
+        trackId: props.leaf.trackId,
+        left: cur,
+        right: next,
+    }), [props.leaf.sheetObject.address, props.leaf.trackId, cur, next]);
+    const themeValues = {
+        isPopoverOpen: isInCurveEditorPopoverSelection,
+        isSelected: props.selection !== undefined,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ConnectorLine, { ref: nodeRef, connectorLengthInUnitSpace: connectorLengthInUnitSpace, ...themeValues, openPopover: (e) => {
+                if (node)
+                    togglePopover(e, node);
+            } }, popoverNode),
+        contextMenu));
+};
+export default BasicKeyframeConnector;
+const SingleCurveEditorPopover = React.forwardRef((props, ref) => {
+    const { index, track: { data: trackData }, selection, } = props;
+    const cur = trackData.keyframes[index];
+    const next = trackData.keyframes[index + 1];
+    const trackId = props.leaf.trackId;
+    const address = props.leaf.sheetObject.address;
+    const selectedConnections = usePrism(() => selectedKeyframeConnections(address.projectId, address.sheetId, selection).getValue(), [address, selection]);
+    const curveConnection = {
+        left: cur,
+        right: next,
+        trackId,
+        ...address,
+    };
+    return (React.createElement(EasingPopover, { showPopoverEdgeTriangle: false, 
+        // @ts-ignore @todo
+        ref: ref },
+        React.createElement(CurveEditorPopover, { curveConnection: curveConnection, additionalConnections: selectedConnections, onRequestClose: props.closePopover })));
+});
+function useDragKeyframe(node, props) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const gestureHandlers = useMemo(() => {
+        return {
+            debugName: 'useDragKeyframe',
+            lockCSSCursorTo: 'ew-resize',
+            onDragStart(event) {
+                const props = propsRef.current;
+                let tempTransaction;
+                if (props.selection) {
+                    const { selection, leaf } = props;
+                    const { sheetObject } = leaf;
+                    return selection
+                        .getDragHandlers({
+                        ...sheetObject.address,
+                        domNode: node,
+                        positionAtStartOfDrag: props.track.data.keyframes[props.index].position,
+                    })
+                        .onDragStart(event);
+                }
+                const propsAtStartOfDrag = props;
+                const sequence = val(propsAtStartOfDrag.layoutP.sheet).getSequence();
+                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
+                return {
+                    onDrag(dx, dy, event) {
+                        const delta = toUnitSpace(dx);
+                        if (tempTransaction) {
+                            tempTransaction.discard();
+                            tempTransaction = undefined;
+                        }
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.transformKeyframes({
+                                ...propsAtStartOfDrag.leaf.sheetObject.address,
+                                trackId: propsAtStartOfDrag.leaf.trackId,
+                                keyframeIds: [
+                                    propsAtStartOfDrag.keyframe.id,
+                                    propsAtStartOfDrag.track.data.keyframes[propsAtStartOfDrag.index + 1].id,
+                                ],
+                                translate: delta,
+                                scale: 1,
+                                origin: 0,
+                                snappingFunction: sequence.closestGridPosition,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        if (dragHappened) {
+                            if (tempTransaction) {
+                                tempTransaction.commit();
+                            }
+                        }
+                        else {
+                            if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                        }
+                    },
+                };
+            },
+        };
+    }, []);
+    useDrag(node, gestureHandlers);
+}
+function useConnectorContextMenu(props, node, cur, next) {
+    // TODO?: props.selection is undefined if only one of the connected keyframes is selected
+    return useContextMenu(node, {
+        displayName: 'Tween',
+        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: cur, pathToProp: props.leaf.pathToProp },
+                                    { keyframe: next, pathToProp: props.leaf.pathToProp },
+                                ]);
+                            });
+                        }
+                    },
+                },
+                {
+                    label: props.selection ? '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: [cur.id, next.id],
+                                    trackId: props.leaf.trackId,
+                                });
+                            });
+                        }
+                    },
+                },
+            ];
+        },
+    });
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { KeyframeConnectionWithAddress } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
+type ICurveEditorPopoverProps = {
+    /**
+     * Called when user hits enter/escape
+     */
+    onRequestClose: (reason: string) => void;
+    curveConnection: KeyframeConnectionWithAddress;
+    additionalConnections: Array<KeyframeConnectionWithAddress>;
+};
+declare const CurveEditorPopover: React.VFC<ICurveEditorPopoverProps>;
+export default CurveEditorPopover;
+/**
+ * n mod m without negative results e.g. `mod(-1,5) = 4` contrasted with `-1 % 5 = -1`.
+ *
+ * ref: https://web.archive.org/web/20090717035140if_/javascript.about.com/od/problemsolving/a/modulobug.htm
+ */
+export declare function mod(n: number, m: number): number;
+declare const isCurveEditorOpenD: import("@tomorrowevening/theatre-dataverse").Prism<boolean>, isConnectionEditingInCurvePopover: (con: KeyframeConnectionWithAddress) => boolean;
+export { isCurveEditorOpenD, isConnectionEditingInCurvePopover };
+//# sourceMappingURL=CurveEditorPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurveEditorPopover.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAA;AAkBd,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,iFAAiF,CAAA;AA+FlI,KAAK,wBAAwB,GAAG;IAC9B;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAExC,eAAe,EAAE,6BAA6B,CAAA;IAC9C,qBAAqB,EAAE,KAAK,CAAC,6BAA6B,CAAC,CAAA;CAC5D,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,wBAAwB,CAmR3D,CAAA;AAED,eAAe,kBAAkB,CAAA;AAkGjC;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,UAEvC;AAoBD,QAAA,MAAO,kBAAkB,+DAAE,iCAAiC,QAkBf,6BAA6B,YAUpE,CAAA;AAEN,OAAO,EAAC,kBAAkB,EAAE,iCAAiC,EAAC,CAAA"}

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

@@ -0,0 +1,397 @@
+import { Atom, prism } from '@tomorrowevening/theatre-dataverse';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import styled from 'styled-components';
+import fuzzy from 'fuzzy';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import CurveSegmentEditor from './CurveSegmentEditor';
+import EasingOption from './EasingOption';
+import { cssCubicBezierArgsFromHandles, handlesFromCssCubicBezierArgs, EASING_PRESETS, areEasingsSimilar, } from './shared';
+import { COLOR_BASE, COLOR_POPOVER_BACK } from './colors';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { useUIOptionGrid, Outcome } from './useUIOptionGrid';
+const PRESET_COLUMNS = 3;
+const PRESET_SIZE = 53;
+const APPROX_TOOLTIP_HEIGHT = 25;
+const Grid = styled.div `
+  background: ${COLOR_POPOVER_BACK};
+  display: grid;
+  grid-template-areas:
+    'search  tween'
+    'presets tween';
+  grid-template-rows: 32px 1fr;
+  grid-template-columns: ${PRESET_COLUMNS * PRESET_SIZE}px 120px;
+  gap: 1px;
+  height: 120px;
+`;
+const OptionsContainer = styled.div `
+  overflow: auto;
+  grid-area: presets;
+
+  display: grid;
+  grid-template-columns: repeat(${PRESET_COLUMNS}, 1fr);
+  grid-auto-rows: min-content;
+  gap: 1px;
+
+  overflow-y: scroll;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  &::-webkit-scrollbar {
+    /* WebKit */
+    width: 0;
+    height: 0;
+  }
+`;
+const SearchBox = styled.input.attrs({ type: 'text' }) `
+  background-color: ${COLOR_BASE};
+  border: none;
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 6px;
+  font-size: 12px;
+  outline: none;
+  cursor: text;
+  text-align: left;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  grid-area: search;
+
+  &:hover {
+    background-color: #212121;
+  }
+
+  &:focus {
+    background-color: rgba(16, 16, 16, 0.26);
+    outline: 1px solid rgba(0, 0, 0, 0.35);
+  }
+`;
+const CurveEditorContainer = styled.div `
+  grid-area: tween;
+  background: ${COLOR_BASE};
+`;
+const NoResultsFoundContainer = styled.div `
+  grid-column: 1 / 4;
+  padding: 6px;
+  color: #888888;
+`;
+/**
+ * Tracking for what kinds of events are allowed to change the input's value.
+ */
+var TextInputMode;
+(function (TextInputMode) {
+    /**
+     * Initial mode, don't try to override the value.
+     */
+    TextInputMode[TextInputMode["init"] = 0] = "init";
+    /**
+     * In `user` mode, the text input field does not update when the curve
+     * changes so that the user's search is preserved.
+     */
+    TextInputMode[TextInputMode["user"] = 1] = "user";
+    /**
+     * In `auto` mode, the text input field is continually updated to
+     * a CSS cubic bezier args string to reflect the state of the curve.
+     */
+    TextInputMode[TextInputMode["auto"] = 2] = "auto";
+    TextInputMode[TextInputMode["multipleValues"] = 3] = "multipleValues";
+})(TextInputMode || (TextInputMode = {}));
+const CurveEditorPopover = (props) => {
+    const allConnections = useMemo(() => [props.curveConnection, ...props.additionalConnections], [props.curveConnection, ...props.additionalConnections]);
+    ////// `tempTransaction` //////
+    /*
+     * `tempTransaction` is used for all edits in this popover. The transaction
+     * is discared if the user presses escape, otherwise it is committed when the
+     * popover closes.
+     */
+    const tempTransaction = useRef(null);
+    useEffect(() => {
+        const unlock = getLock(allConnections);
+        // Clean-up function, called when this React component unmounts.
+        // When it unmounts, we want to commit edits that are outstanding
+        return () => {
+            unlock();
+            tempTransaction.current?.commit();
+        };
+    }, [tempTransaction]);
+    ////// Keyframe and trackdata //////
+    const easing = [
+        props.curveConnection.left.handles[2],
+        props.curveConnection.left.handles[3],
+        props.curveConnection.right.handles[0],
+        props.curveConnection.right.handles[1],
+    ];
+    ////// Text input data and reactivity //////
+    const inputRef = useRef(null);
+    // Select the easing string on popover open for quick copy&paste
+    useLayoutEffect(() => {
+        inputRef.current?.select();
+        inputRef.current?.focus();
+    }, [inputRef.current]);
+    const [inputValue, setInputValue] = useState(cssCubicBezierArgsFromHandles(easing));
+    const onInputChange = (e) => {
+        if (e === undefined)
+            return;
+        setTextInputMode(TextInputMode.user);
+        setInputValue(e.target.value);
+        const maybeHandles = handlesFromCssCubicBezierArgs(e.target.value);
+        if (maybeHandles)
+            setEdit(e.target.value);
+    };
+    const onSearchKeyDown = (e) => {
+        setTextInputMode(TextInputMode.user);
+        // Prevent scrolling on arrow key press
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp')
+            e.preventDefault();
+        if (e.key === 'ArrowDown') {
+            grid.focusFirstItem();
+            optionsRef.current[displayedPresets[0].label]?.current?.focus();
+        }
+        else if (e.key === 'Escape') {
+            discardTempValue(tempTransaction);
+            props.onRequestClose('key Escape');
+        }
+        else if (e.key === 'Enter') {
+            props.onRequestClose('key Enter');
+        }
+    };
+    const [textInputMode, setTextInputMode] = useState(TextInputMode.init);
+    useEffect(() => {
+        if (textInputMode === TextInputMode.auto) {
+            setInputValue(cssCubicBezierArgsFromHandles(easing));
+        }
+        else if (textInputMode === TextInputMode.multipleValues) {
+            if (inputValue !== '')
+                setInputValue('');
+        }
+    }, allConnections);
+    // `edit` keeps track of the current edited state of the curve.
+    const [edit, setEdit] = useState(cssCubicBezierArgsFromHandles(easing));
+    // `preview` is used when hovering over a curve to preview it.
+    const [preview, setPreview] = useState(null);
+    // When `preview` or `edit` change, use the `tempTransaction` to change the
+    // curve in Theate's data.
+    useEffect(() => {
+        if (textInputMode !== TextInputMode.init &&
+            textInputMode !== TextInputMode.multipleValues)
+            setTempValue(tempTransaction, allConnections, preview ?? edit ?? '');
+    }, [preview, edit, textInputMode]);
+    ////// selection stuff //////
+    if (allConnections.some(areConnectedKeyframesTheSameAs(props.curveConnection)) &&
+        textInputMode === TextInputMode.init) {
+        setTextInputMode(TextInputMode.multipleValues);
+    }
+    //////  Curve editing reactivity //////
+    const onCurveChange = (newHandles) => {
+        setTextInputMode(TextInputMode.auto);
+        const value = cssCubicBezierArgsFromHandles(newHandles);
+        setInputValue(value);
+        setEdit(value);
+        // ensure that the text input is selected when curve is changing.
+        inputRef.current?.select();
+        inputRef.current?.focus();
+    };
+    const onCancelCurveChange = () => { };
+    ////// Preset reactivity //////
+    const displayedPresets = useMemo(() => {
+        const isInputValueAQuery = /^[A-Za-z]/.test(inputValue);
+        if (isInputValueAQuery) {
+            return fuzzy
+                .filter(inputValue, EASING_PRESETS, {
+                extract: (el) => el.label,
+            })
+                .map((result) => result.original);
+        }
+        else {
+            return EASING_PRESETS;
+        }
+    }, [inputValue]);
+    // Use the first preset in the search when the displayed presets change
+    useEffect(() => {
+        if (textInputMode === TextInputMode.user && displayedPresets[0])
+            setEdit(displayedPresets[0].value);
+    }, [displayedPresets]);
+    ////// Option grid specification and reactivity //////
+    const onEasingOptionKeydown = (e) => {
+        if (e.key === 'Escape') {
+            discardTempValue(tempTransaction);
+            props.onRequestClose('key Escape');
+            e.stopPropagation();
+        }
+        else if (e.key === 'Enter') {
+            props.onRequestClose('key Enter');
+            e.stopPropagation();
+        }
+    };
+    const onEasingOptionMouseOver = (item) => {
+        // Set the `textInputMode` to `auto` if it was `init` before
+        // to enable the easing previews
+        if (textInputMode === TextInputMode.init)
+            setTextInputMode(TextInputMode.auto);
+        setPreview(item.value);
+    };
+    const onEasingOptionMouseOut = () => setPreview(null);
+    const onSelectEasingOption = (item) => {
+        setTempValue(tempTransaction, allConnections, item.value);
+        props.onRequestClose('selected easing option');
+        return Outcome.Handled;
+    };
+    // A map to store all html elements corresponding to easing options
+    const optionsRef = useRef(EASING_PRESETS.reduce((acc, curr) => {
+        acc[curr.label] = { current: null };
+        return acc;
+    }, {}));
+    const [optionsContainerRef, optionsContainer] = useRefAndState(null);
+    // Keep track of option container scroll position
+    const [optionsScrollPosition, setOptionsScrollPosition] = useState(0);
+    useEffect(() => {
+        const listener = () => {
+            setOptionsScrollPosition(optionsContainer?.scrollTop ?? 0);
+        };
+        optionsContainer?.addEventListener('scroll', listener);
+        return () => optionsContainer?.removeEventListener('scroll', listener);
+    }, [optionsContainer]);
+    const grid = useUIOptionGrid({
+        items: displayedPresets,
+        uiColumns: 3,
+        onSelectItem: onSelectEasingOption,
+        canVerticleExit(exitSide) {
+            if (exitSide === 'top') {
+                inputRef.current?.select();
+                inputRef.current?.focus();
+                return Outcome.Handled;
+            }
+            return Outcome.Passthrough;
+        },
+        renderItem: ({ item: preset, select }) => (React.createElement(EasingOption, { key: preset.label, easing: preset, tabIndex: 0, onKeyDown: onEasingOptionKeydown, ref: optionsRef.current[preset.label], onMouseOver: () => onEasingOptionMouseOver(preset), onMouseOut: onEasingOptionMouseOut, onClick: select, tooltipPlacement: (optionsRef.current[preset.label].current?.offsetTop ?? 0) -
+                (optionsScrollPosition ?? 0) <
+                PRESET_SIZE + APPROX_TOOLTIP_HEIGHT
+                ? 'bottom'
+                : 'top', isSelected: areEasingsSimilar(easing, handlesFromCssCubicBezierArgs(preset.value)) })),
+    });
+    // When the user navigates highlight between presets, focus the preset el and set the
+    // easing data to match the highlighted preset
+    useLayoutEffect(() => {
+        if (grid.currentSelection !== null &&
+            document.activeElement !== inputRef.current // prevents taking focus away from input
+        ) {
+            const maybePresetEl = optionsRef.current?.[grid.currentSelection.label]?.current;
+            maybePresetEl?.focus();
+            setEdit(grid.currentSelection.value);
+            const isInputValueAQuery = /^[A-Za-z]/.test(inputValue);
+            if (!isInputValueAQuery) {
+                setInputValue(grid.currentSelection.value);
+            }
+        }
+    }, [grid.currentSelection]);
+    return (React.createElement(Grid, null,
+        React.createElement(SearchBox, { value: inputValue, placeholder: textInputMode === TextInputMode.multipleValues
+                ? 'Multiple easings selected'
+                : 'Search presets...', onPaste: setTimeoutFunction(onInputChange), onChange: onInputChange, ref: inputRef, onKeyDown: onSearchKeyDown }),
+        React.createElement(OptionsContainer, { ref: optionsContainerRef, onKeyDown: (evt) => grid.onParentEltKeyDown(evt) },
+            grid.gridItems,
+            grid.gridItems.length === 0 ? (React.createElement(NoResultsFoundContainer, null, "No results found")) : undefined),
+        React.createElement(CurveEditorContainer, { onClick: () => inputRef.current?.focus() },
+            React.createElement(CurveSegmentEditor, { curveConnection: props.curveConnection, backgroundConnections: props.additionalConnections, onCurveChange: onCurveChange, onCancelCurveChange: onCancelCurveChange }))));
+};
+export default CurveEditorPopover;
+function setTempValue(tempTransaction, keyframeConnections, newCurveCssCubicBezier) {
+    tempTransaction.current?.discard();
+    tempTransaction.current = null;
+    const handles = handlesFromCssCubicBezierArgs(newCurveCssCubicBezier);
+    if (handles === null) {
+        tempTransaction.current = transactionSetHold(keyframeConnections);
+    }
+    else {
+        tempTransaction.current = transactionSetCubicBezier(keyframeConnections, handles);
+    }
+}
+function discardTempValue(tempTransaction) {
+    tempTransaction.current?.discard();
+    tempTransaction.current = null;
+}
+function transactionSetCubicBezier(keyframeConnections, handles) {
+    return getStudio().tempTransaction(({ stateEditors }) => {
+        const { setHandlesForKeyframe, setKeyframeType: setKeyframeType } = stateEditors.coreByProject.historic.sheetsById.sequence;
+        for (const { projectId, sheetId, objectKey, trackId, left, right, } of keyframeConnections) {
+            setHandlesForKeyframe({
+                projectId,
+                sheetId,
+                objectKey,
+                trackId,
+                keyframeId: left.id,
+                start: [handles[0], handles[1]],
+            });
+            setHandlesForKeyframe({
+                projectId,
+                sheetId,
+                objectKey,
+                trackId,
+                keyframeId: right.id,
+                end: [handles[2], handles[3]],
+            });
+            setKeyframeType({
+                projectId,
+                sheetId,
+                objectKey,
+                trackId,
+                keyframeId: left.id,
+                keyframeType: 'bezier',
+            });
+        }
+    });
+}
+function transactionSetHold(keyframeConnections) {
+    return getStudio().tempTransaction(({ stateEditors }) => {
+        const { setKeyframeType: setKeyframeType } = stateEditors.coreByProject.historic.sheetsById.sequence;
+        for (const { projectId, sheetId, objectKey, trackId, left, } of keyframeConnections) {
+            setKeyframeType({
+                projectId,
+                sheetId,
+                objectKey,
+                trackId,
+                keyframeId: left.id,
+                keyframeType: 'hold',
+            });
+        }
+    });
+}
+/**
+ * n mod m without negative results e.g. `mod(-1,5) = 4` contrasted with `-1 % 5 = -1`.
+ *
+ * ref: https://web.archive.org/web/20090717035140if_/javascript.about.com/od/problemsolving/a/modulobug.htm
+ */
+export function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+function setTimeoutFunction(f, timeout) {
+    return () => setTimeout(f, timeout);
+}
+function areConnectedKeyframesTheSameAs({ left: left1, right: right1, }) {
+    return ({ left: left2, right: right2 }) => left1.handles[2] !== left2.handles[2] ||
+        left1.handles[3] !== left2.handles[3] ||
+        right1.handles[0] !== right2.handles[0] ||
+        right1.handles[1] !== right2.handles[1];
+}
+const { isCurveEditorOpenD, isConnectionEditingInCurvePopover, getLock } = (() => {
+    const connectionsInCurvePopoverEdit = new Atom([]);
+    return {
+        getLock(connections) {
+            connectionsInCurvePopoverEdit.set(connections);
+            return function unlock() {
+                connectionsInCurvePopoverEdit.set([]);
+            };
+        },
+        isCurveEditorOpenD: prism(() => {
+            return connectionsInCurvePopoverEdit.prism.getValue().length > 0;
+        }),
+        // must be run in a prism
+        isConnectionEditingInCurvePopover(con) {
+            prism.ensurePrism();
+            return connectionsInCurvePopoverEdit.prism
+                .getValue()
+                .some(({ left, right }) => con.left.id === left.id && con.right.id === right.id);
+        },
+    };
+})();
+export { isCurveEditorOpenD, isConnectionEditingInCurvePopover };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CubicBezierHandles } from './shared';
+import type { KeyframeConnectionWithAddress } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/selections';
+type ICurveSegmentEditorProps = {
+    onCurveChange: (newHandles: CubicBezierHandles) => void;
+    onCancelCurveChange: () => void;
+    curveConnection: KeyframeConnectionWithAddress;
+    backgroundConnections: Array<KeyframeConnectionWithAddress>;
+};
+declare const CurveSegmentEditor: React.VFC<ICurveSegmentEditorProps>;
+export default CurveSegmentEditor;
+//# sourceMappingURL=CurveSegmentEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurveSegmentEditor.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveSegmentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,UAAU,CAAA;AAGhD,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,iFAAiF,CAAA;AAqDlI,KAAK,wBAAwB,GAAG;IAC9B,aAAa,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACvD,mBAAmB,EAAE,MAAM,IAAI,CAAA;IAC/B,eAAe,EAAE,6BAA6B,CAAA;IAC9C,qBAAqB,EAAE,KAAK,CAAC,6BAA6B,CAAC,CAAA;CAC5D,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,wBAAwB,CAgP3D,CAAA;AACD,eAAe,kBAAkB,CAAA"}