@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,136 +0,0 @@
-import React from 'react';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import clamp from 'lodash-es/clamp';
-import styled from 'styled-components';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { useFreezableMemo } from './useFreezableMemo';
-import { COLOR_BASE } from './colors';
-// Defines the dimensions of the SVG viewbox space
-const VIEWBOX_PADDING = 0.12;
-const VIEWBOX_SIZE = 1 + VIEWBOX_PADDING * 2;
-const PATTERN_DOT_SIZE = 0.01;
-const PATTERN_DOT_COUNT = 8;
-const PATTERN_GRID_SIZE = (1 - PATTERN_DOT_SIZE) / (PATTERN_DOT_COUNT - 1);
-// The curve supports a gradient but currently is solid cyan
-const CURVE_START_OVERSHOOT_COLOR = '#3EAAA4';
-const CURVE_START_COLOR = '#3EAAA4';
-const CURVE_MID_START_COLOR = '#3EAAA4';
-const CURVE_MID_COLOR = '#3EAAA4';
-const CURVE_MID_END_COLOR = '#3EAAA4';
-const CURVE_END_COLOR = '#3EAAA4';
-const CURVE_END_OVERSHOOT_COLOR = '#3EAAA4';
-const CONTROL_COLOR = '#B3B3B3';
-const HANDLE_COLOR = '#3eaaa4';
-const HANDLE_HOVER_COLOR = '#67dfd8';
-const BACKGROUND_CURVE_COLORS = [
-    'goldenrod',
-    'cornflowerblue',
-    'dodgerblue',
-    'lawngreen',
-];
-const Circle = styled.circle `
-  stroke-width: 0.1px;
-  vector-effect: non-scaling-stroke;
-  r: 0.04px;
-  pointer-events: none;
-  transition: r 0.15s;
-  fill: ${HANDLE_COLOR};
-`;
-const HitZone = styled.circle `
-  stroke-width: 0.1px;
-  vector-effect: non-scaling-stroke;
-  r: 0.09px;
-  cursor: move;
-  ${pointerEventsAutoInNormalMode};
-  &:hover {
-    opacity: 0.4;
-  }
-  &:hover + ${Circle} {
-    fill: ${HANDLE_HOVER_COLOR};
-  }
-`;
-const CurveSegmentEditor = (props) => {
-    const { curveConnection: { left, right }, backgroundConnections, } = props;
-    // Calculations towards keeping the handles in the viewbox. The extremum space
-    // of this editor vertically scales to keep the handles in the viewbox of the
-    // SVG. This produces a nice "stretching space" effect while you are dragging
-    // the handles.
-    // Demo: https://user-images.githubusercontent.com/11082236/164542544-f1f66de2-f62e-44dd-b4cb-05b5f6e73a52.mp4
-    const minY = Math.min(0, 1 - right.handles[1], 1 - left.handles[3]);
-    const maxY = Math.max(1, 1 - right.handles[1], 1 - left.handles[3]);
-    const h = Math.max(1, maxY - minY);
-    const toExtremumSpace = (y) => (y - minY) / h;
-    const [refSVG, nodeSVG] = useRefAndState(null);
-    const viewboxToElWidthRatio = VIEWBOX_SIZE / (nodeSVG?.clientWidth || 1);
-    const viewboxToElHeightRatio = VIEWBOX_SIZE / (nodeSVG?.clientHeight || 1);
-    const [refLeft, nodeLeft] = useRefAndState(null);
-    useKeyframeDrag(nodeSVG, nodeLeft, props, (dx, dy) => {
-        // TODO - document this
-        const handleX = clamp(left.handles[2] + dx * viewboxToElWidthRatio, 0, 1);
-        const handleY = left.handles[3] - dy * viewboxToElHeightRatio;
-        return [handleX, handleY, right.handles[0], right.handles[1]];
-    });
-    const [refRight, nodeRight] = useRefAndState(null);
-    useKeyframeDrag(nodeSVG, nodeRight, props, (dx, dy) => {
-        // TODO - document this
-        const handleX = clamp(right.handles[0] + dx * viewboxToElWidthRatio, 0, 1);
-        const handleY = right.handles[1] - dy * viewboxToElHeightRatio;
-        return [left.handles[2], left.handles[3], handleX, handleY];
-    });
-    const curvePathDAttrValue = (connection) => `M0 ${toExtremumSpace(1)} C${connection.left.handles[2]} ${toExtremumSpace(1 - connection.left.handles[3])} ${connection.right.handles[0]} ${toExtremumSpace(1 - connection.right.handles[1])} 1 ${toExtremumSpace(0)}`;
-    const holdPointsAttrValue = `0,100 100,100 100,0`;
-    return (React.createElement("svg", { height: "100%", width: "100%", ref: refSVG, viewBox: `${-VIEWBOX_PADDING} ${-VIEWBOX_PADDING} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", fill: "none" },
-        React.createElement("linearGradient", { id: "myGradient", gradientTransform: "rotate(90)" },
-            React.createElement("stop", { offset: toExtremumSpace(-1), stopColor: CURVE_END_OVERSHOOT_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(0), stopColor: CURVE_END_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(0.3), stopColor: CURVE_MID_END_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(0.5), stopColor: CURVE_MID_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(0.7), stopColor: CURVE_MID_START_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(1), stopColor: CURVE_START_COLOR }),
-            React.createElement("stop", { offset: toExtremumSpace(2), stopColor: CURVE_START_OVERSHOOT_COLOR })),
-        React.createElement("pattern", { id: "dot-background-pattern-1", width: PATTERN_GRID_SIZE, height: PATTERN_GRID_SIZE / h, y: -minY / h },
-            React.createElement("rect", { width: PATTERN_DOT_SIZE, height: PATTERN_DOT_SIZE, fill: CONTROL_COLOR, opacity: 0.3 })),
-        React.createElement("rect", { x: 0, y: 0, width: "1", height: 1, fill: "url(#dot-background-pattern-1)" }),
-        React.createElement("pattern", { id: "dot-background-pattern-2", width: PATTERN_GRID_SIZE, height: PATTERN_GRID_SIZE },
-            React.createElement("rect", { width: PATTERN_DOT_SIZE, height: PATTERN_DOT_SIZE, fill: CONTROL_COLOR })),
-        React.createElement("rect", { x: 0, y: toExtremumSpace(0), width: "1", height: toExtremumSpace(1) - toExtremumSpace(0), fill: "url(#dot-background-pattern-2)" }),
-        !left.type || left.type === 'bezier' ? (React.createElement(React.Fragment, null,
-            React.createElement("line", { x1: 0, y1: toExtremumSpace(1), x2: left.handles[2], y2: toExtremumSpace(1 - left.handles[3]), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
-            React.createElement("line", { x1: 1, y1: toExtremumSpace(0), x2: right.handles[0], y2: toExtremumSpace(1 - right.handles[1]), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
-            React.createElement("path", { d: curvePathDAttrValue(props.curveConnection), stroke: "none", fill: "url('#myGradient')", opacity: "0.1" }),
-            backgroundConnections.map((connection, i) => (React.createElement("path", { key: connection.objectKey + '/' + connection.left.id, d: curvePathDAttrValue(connection), stroke: BACKGROUND_CURVE_COLORS[i % BACKGROUND_CURVE_COLORS.length], opacity: 0.6, strokeWidth: "0.01" }))),
-            React.createElement("path", { d: curvePathDAttrValue(props.curveConnection), stroke: "url('#myGradient')", strokeWidth: "0.02" }),
-            React.createElement("circle", { cx: 0, cy: toExtremumSpace(1), r: "0.025", stroke: CURVE_START_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
-            React.createElement("circle", { cx: 1, cy: toExtremumSpace(0), r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
-            React.createElement(HitZone, { ref: refLeft, cx: left.handles[2], cy: toExtremumSpace(1 - left.handles[3]), fill: CURVE_START_COLOR, opacity: 0.2 }),
-            React.createElement(Circle, { cx: left.handles[2], cy: toExtremumSpace(1 - left.handles[3]) }),
-            React.createElement(HitZone, { ref: refRight, cx: right.handles[0], cy: toExtremumSpace(1 - right.handles[1]), fill: CURVE_END_COLOR, opacity: 0.2 }),
-            React.createElement(Circle, { cx: right.handles[0], cy: toExtremumSpace(1 - right.handles[1]) }))) : (React.createElement(React.Fragment, null,
-            React.createElement("line", { x1: 0, y1: toExtremumSpace(1), x2: 1, y2: toExtremumSpace(1), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
-            React.createElement("line", { x1: 1, y1: toExtremumSpace(1), x2: 1, y2: 0, stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
-            React.createElement("circle", { cx: 0, cy: 1, r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
-            React.createElement("circle", { cx: 1, cy: 0, r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE })))));
-};
-export default CurveSegmentEditor;
-function useKeyframeDrag(svgNode, node, props, setHandles) {
-    const handlers = useFreezableMemo((setFrozen) => ({
-        debugName: 'CurveSegmentEditor/useKeyframeDrag',
-        lockCSSCursorTo: 'move',
-        onDragStart() {
-            setFrozen(true);
-            return {
-                onDrag(dx, dy) {
-                    if (!svgNode)
-                        return;
-                    props.onCurveChange(setHandles(dx, dy));
-                },
-                onDragEnd(dragHappened) {
-                    setFrozen(false);
-                    props.onCancelCurveChange();
-                },
-            };
-        },
-    }), [svgNode, props.onCurveChange, props.onCancelCurveChange]);
-    useDrag(node, handlers);
-}

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

@@ -1,52 +0,0 @@
-import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { handlesFromCssCubicBezierArgs } from './shared';
-import SVGCurveSegment from './SVGCurveSegment';
-import { mergeRefs } from 'react-merge-refs';
-import { COLOR_BASE } from './colors';
-import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-const Wrapper = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  aspect-ratio: 1;
-
-  transition: background-color 0.15s;
-  background-color: ${COLOR_BASE};
-  border-radius: 2px;
-  cursor: pointer;
-  outline: none;
-
-  ${({ isSelected }) => isSelected &&
-    css `
-      background-color: #383d42;
-    `}
-
-  &:hover {
-    background-color: #31353a;
-  }
-
-  &:focus {
-    background-color: #383d42;
-  }
-`;
-const EasingTooltip = styled(BasicPopover) `
-  padding: 0.5em;
-  color: white;
-  max-width: 240px;
-  pointer-events: none !important;
-  --popover-bg: black;
-  --popover-outer-stroke: transparent;
-  --popover-inner-stroke: transparent;
-  box-shadow: none;
-`;
-const EasingOption = React.forwardRef((props, ref) => {
-    const [tooltip, tooltipHostRef] = useTooltip({ enabled: true, verticalPlacement: props.tooltipPlacement, verticalGap: 0 }, () => (React.createElement(EasingTooltip, { showPopoverEdgeTriangle: false }, props.easing.label)));
-    return (React.createElement(Wrapper, { ref: mergeRefs([tooltipHostRef, ref]), ...props },
-        tooltip,
-        React.createElement(SVGCurveSegment, { easing: handlesFromCssCubicBezierArgs(props.easing.value), isSelected: props.isSelected })));
-});
-export default EasingOption;

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

@@ -1,43 +0,0 @@
-import React from 'react';
-const VIEWBOX_PADDING = 0.75;
-const SVG_CIRCLE_RADIUS = 0.1;
-const VIEWBOX_SIZE = 1 + VIEWBOX_PADDING * 2;
-const SELECTED_CURVE_COLOR = '#F5F5F5';
-const CURVE_COLOR = '#888888';
-const CONTROL_COLOR = '#4f4f4f';
-const CONTROL_HITZONE_COLOR = 'rgba(255, 255, 255, 0.1)';
-// SVG's y coordinates go from top to bottom, e.g. 1 is vertically lower than 0,
-// but easing points go from bottom to top.
-const toVerticalSVGSpace = (y) => 1 - y;
-const SVGCurveSegment = (props) => {
-    const { easing, isSelected } = props;
-    const curveColor = isSelected ? SELECTED_CURVE_COLOR : CURVE_COLOR;
-    // With a padding of 0, this results in a "unit viewbox" i.e. `0 0 1 1`.
-    // With padding e.g. VIEWBOX_PADDING=0.1, this results in a viewbox of `-0.1 -0,1 1.2 1.2`,
-    // i.e. a viewbox with a top left coordinate of -0.1,-0.1 and a width and height of 1.2,
-    // resulting in bottom right coordinate of 1.1,1.1
-    const SVG_VIEWBOX_ATTR = `${-VIEWBOX_PADDING} ${-VIEWBOX_PADDING} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`;
-    // Bezier SVG
-    if (easing) {
-        const leftControlPoint = [easing[0], toVerticalSVGSpace(easing[1])];
-        const rightControlPoint = [easing[2], toVerticalSVGSpace(easing[3])];
-        return (React.createElement("svg", { height: "100%", width: "100%", viewBox: SVG_VIEWBOX_ATTR, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("line", { x1: "0", y1: "1", x2: leftControlPoint[0], y2: leftControlPoint[1], stroke: CONTROL_COLOR, strokeWidth: "0.1" }),
-            React.createElement("line", { x1: "1", y1: "0", x2: rightControlPoint[0], y2: rightControlPoint[1], stroke: CONTROL_COLOR, strokeWidth: "0.1" }),
-            React.createElement("circle", { cx: leftControlPoint[0], cy: leftControlPoint[1], r: 0.1, fill: CONTROL_HITZONE_COLOR }),
-            React.createElement("circle", { cx: rightControlPoint[0], cy: rightControlPoint[1], r: 0.1, fill: CONTROL_HITZONE_COLOR }),
-            React.createElement("circle", { cx: leftControlPoint[0], cy: leftControlPoint[1], r: SVG_CIRCLE_RADIUS, fill: CONTROL_COLOR }),
-            React.createElement("circle", { cx: rightControlPoint[0], cy: rightControlPoint[1], r: SVG_CIRCLE_RADIUS, fill: CONTROL_COLOR }),
-            React.createElement("path", { d: `M0 1 C${leftControlPoint[0]} ${leftControlPoint[1]} ${rightControlPoint[0]} 
-        ${rightControlPoint[1]} 1 0`, stroke: curveColor, strokeWidth: "0.08" }),
-            React.createElement("circle", { cx: 0, cy: 1, r: SVG_CIRCLE_RADIUS, fill: curveColor }),
-            React.createElement("circle", { cx: 1, cy: 0, r: SVG_CIRCLE_RADIUS, fill: curveColor })));
-    }
-    // "Hold" SVG
-    return (React.createElement("svg", { height: "100%", width: "100%", viewBox: SVG_VIEWBOX_ATTR, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("line", { x1: "0", y1: "1", x2: 1, y2: 1, stroke: curveColor, strokeWidth: "0.08" }),
-        React.createElement("line", { x1: "1", y1: "0", x2: 1, y2: 1, stroke: curveColor, strokeWidth: "0.08" }),
-        React.createElement("circle", { cx: 0, cy: 1, r: SVG_CIRCLE_RADIUS, fill: curveColor }),
-        React.createElement("circle", { cx: 1, cy: 0, r: SVG_CIRCLE_RADIUS, fill: curveColor })));
-};
-export default SVGCurveSegment;

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

@@ -1,3 +0,0 @@
-export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);';
-export const COLOR_BASE = '#272B2F';
-export const COLOR_FOCUS_OUTLINE = '#0A4540';

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

@@ -1,84 +0,0 @@
-const CSS_BEZIER_ARGS_DECIMAL_POINTS = 3; // Doesn't have to be 3, but it matches our preset data
-/** Returns e.g. `"0, 0, 1, 1"`. See {@link CSSCubicBezierArgsString} docs for more context. */
-export function cssCubicBezierArgsFromHandles(points) {
-    return points.map((p) => p.toFixed(CSS_BEZIER_ARGS_DECIMAL_POINTS)).join(', ');
-}
-const MAX_REASONABLE_BEZIER_STRING = 128;
-export function handlesFromCssCubicBezierArgs(str) {
-    if (!str || str?.length > MAX_REASONABLE_BEZIER_STRING)
-        return null;
-    const args = str.split(',');
-    if (args.length !== 4)
-        return null;
-    const nums = args.map((arg) => {
-        return Number(arg.trim());
-    });
-    if (!nums.every((v) => isFinite(v)))
-        return null;
-    if (nums[0] < 0 || nums[0] > 1 || nums[2] < 0 || nums[2] > 1)
-        return null;
-    return nums;
-}
-/**
- * A collection of cubic-bezier approximations of common easing functions
- * - ref: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
- * - ref: [GitHub issue 28 comment "michaeltheory's suggested default easing presets"](https://github.com/theatre-js/theatre/issues/28#issuecomment-938752916)
- **/
-export const EASING_PRESETS = [
-    { label: 'Quad Out', value: '0.250, 0.460, 0.450, 0.940' },
-    { label: 'Quad In Out', value: '0.455, 0.030, 0.515, 0.955' },
-    { label: 'Quad In', value: '0.550, 0.085, 0.680, 0.530' },
-    { label: 'Cubic Out', value: '0.215, 0.610, 0.355, 1.000' },
-    { label: 'Cubic In Out', value: '0.645, 0.045, 0.355, 1.000' },
-    { label: 'Cubic In', value: '0.550, 0.055, 0.675, 0.190' },
-    { label: 'Quart Out', value: '0.165, 0.840, 0.440, 1.000' },
-    { label: 'Quart In Out', value: '0.770, 0.000, 0.175, 1.000' },
-    { label: 'Quart In', value: '0.895, 0.030, 0.685, 0.220' },
-    { label: 'Quint Out', value: '0.230, 1.000, 0.320, 1.000' },
-    { label: 'Quint In Out', value: '0.860, 0.000, 0.070, 1.000' },
-    { label: 'Quint In', value: '0.755, 0.050, 0.855, 0.060' },
-    { label: 'Sine Out', value: '0.390, 0.575, 0.565, 1.000' },
-    { label: 'Sine In Out', value: '0.445, 0.050, 0.550, 0.950' },
-    { label: 'Sine In', value: '0.470, 0.000, 0.745, 0.715' },
-    { label: 'Expo Out', value: '0.190, 1.000, 0.220, 1.000' },
-    { label: 'Expo In Out', value: '1.000, 0.000, 0.000, 1.000' },
-    { label: 'Expo In', value: '0.780, 0.000, 0.810, 0.00' },
-    { label: 'Circ Out', value: '0.075, 0.820, 0.165, 1.000' },
-    { label: 'Circ In Out', value: '0.785, 0.135, 0.150, 0.860' },
-    { label: 'Circ In', value: '0.600, 0.040, 0.980, 0.335' },
-    { label: 'Back Out', value: '0.175, 0.885, 0.320, 1.275' },
-    { label: 'Back In Out', value: '0.680, -0.550, 0.265, 1.550' },
-    { label: 'Back In', value: '0.600, -0.280, 0.735, 0.045' },
-    { label: 'linear', value: '0.5, 0.5, 0.5, 0.5' },
-    { label: 'In Out', value: '0.42,0,0.58,1' },
-    { label: 'Hold', value: '0, 0, Infinity, Infinity' },
-    /* These easings are not being included initially in order to
-       simplify the choices */
-    // {label: 'Back In Out', value: '0.680, -0.550, 0.265, 1.550'},
-    // {label: 'Back In', value: '0.600, -0.280, 0.735, 0.045'},
-    // {label: 'Back Out', value: '0.175, 0.885, 0.320, 1.275'},
-    // {label: 'Circ In Out', value: '0.785, 0.135, 0.150, 0.860'},
-    // {label: 'Circ In', value: '0.600, 0.040, 0.980, 0.335'},
-    // {label: 'Circ Out', value: '0.075, 0.820, 0.165, 1'},
-    // {label: 'Quad In Out', value: '0.455, 0.030, 0.515, 0.955'},
-    // {label: 'Quad In', value: '0.550, 0.085, 0.680, 0.530'},
-    // {label: 'Quad Out', value: '0.250, 0.460, 0.450, 0.940'},
-    // {label: 'Ease Out In', value: '.42, 0, .58, 1'},
-];
-/**
- * Compares two easings and returns true iff they are similar up to a threshold
- *
- * @param easing1 - first easing to compare
- * @param easing2 - second easing to compare
- * @param options - optionally pass an object with a threshold that determines how similar the easings should be
- * @returns boolean if the easings are similar
- */
-export function areEasingsSimilar(easing1, easing2, options = { threshold: 0.02 }) {
-    if (!easing1 || !easing2)
-        return false;
-    let totalDiff = 0;
-    for (let i = 0; i < 4; i++) {
-        totalDiff += Math.abs(easing1[i] - easing2[i]);
-    }
-    return totalDiff < options.threshold;
-}

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

@@ -1,16 +0,0 @@
-import { useMemo, useRef, useState } from 'react';
-/**
- * The same as useMemo except that it can be frozen so that
- * the memoized function is not recomputed even if the dependencies
- * change. It can also be unfrozen.
- *
- * An unfrozen useFreezableMemo is the same as useMemo.
- *
- */
-export function useFreezableMemo(fn, deps) {
-    const [isFrozen, setFreeze] = useState(false);
-    const freezableDeps = useRef(deps);
-    if (!isFrozen)
-        freezableDeps.current = deps;
-    return useMemo(() => fn(setFreeze), freezableDeps.current);
-}

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

@@ -1,82 +0,0 @@
-import { useState } from 'react';
-import { mod } from './CurveEditorPopover';
-export var Outcome;
-(function (Outcome) {
-    Outcome[Outcome["Handled"] = 1] = "Handled";
-    Outcome[Outcome["Passthrough"] = 0] = "Passthrough";
-})(Outcome || (Outcome = {}));
-export function useUIOptionGrid(options) {
-    // Helper functions for moving the highlight in the grid of presets
-    const [selectionIndex, setSelectionIndex] = useState(null);
-    const moveCursorVertical = (vdir) => {
-        if (selectionIndex === null) {
-            if (options.items.length > 0) {
-                // start at the top first one
-                setSelectionIndex(0);
-            }
-            else {
-                // no items
-            }
-            return;
-        }
-        const nextSelectionIndex = selectionIndex + vdir * options.uiColumns;
-        const exitsTop = nextSelectionIndex < 0;
-        const exitsBottom = nextSelectionIndex > options.items.length - 1;
-        if (exitsTop || exitsBottom) {
-            // up and out
-            if (options.canVerticleExit) {
-                if (options.canVerticleExit(exitsTop ? 'top' : 'bottom')) {
-                    // exited and handled
-                    setSelectionIndex(null);
-                    return;
-                }
-            }
-            // block the cursor from leaving (don't do anything)
-            return;
-        }
-        // we know this highlight is in bounds now
-        setSelectionIndex(nextSelectionIndex);
-    };
-    const moveCursorHorizontal = (hdir) => {
-        if (selectionIndex === null)
-            setSelectionIndex(mod(hdir, options.items.length));
-        else if (selectionIndex + hdir < 0) {
-            // Don't exit top on potentially a left arrow, bc that might feel like I should be able to exit right on right arrow.
-            // Also, maybe cursor selection management in inputs is *lame*.
-            setSelectionIndex(null);
-        }
-        else
-            setSelectionIndex(Math.min(selectionIndex + hdir, options.items.length - 1));
-    };
-    const onParentKeydown = (e) => {
-        if (e.key === 'ArrowRight')
-            moveCursorHorizontal(1);
-        else if (e.key === 'ArrowLeft')
-            moveCursorHorizontal(-1);
-        else if (e.key === 'ArrowUp')
-            moveCursorVertical(-1);
-        else if (e.key === 'ArrowDown')
-            moveCursorVertical(1);
-        else
-            return Outcome.Passthrough; // so sorry, plz make this not terrible
-        return Outcome.Handled;
-    };
-    return {
-        focusFirstItem() {
-            setSelectionIndex(0);
-        },
-        onParentEltKeyDown: onParentKeydown,
-        gridItems: options.items.map((item, idx) => options.renderItem({
-            isSelected: idx === selectionIndex,
-            item,
-            select(e) {
-                setSelectionIndex(idx);
-                if (options.onSelectItem(item) === Outcome.Handled) {
-                    e?.preventDefault();
-                    e?.stopPropagation();
-                }
-            },
-        })),
-        currentSelection: options.items[selectionIndex ?? -1] ?? null,
-    };
-}

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

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