@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,99 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { darken } from 'polished';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import createGrid from './createGrid';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  pointer-events: none;
+`;
+export const stampsGridTheme = {
+    fullUnitStampColor: `#6a6a6a`,
+    stampFontSize: '10px',
+    get subUnitStampColor() {
+        return darken(0.2, stampsGridTheme.fullUnitStampColor);
+    },
+};
+const TheStamps = styled.div `
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  z-index: 2;
+  will-change: transform;
+  pointer-events: none;
+`;
+const FullSecondStampsContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  & > span {
+    position: absolute;
+    display: block;
+    top: 9px;
+    left: -10px;
+    color: ${stampsGridTheme.fullUnitStampColor};
+    text-align: center;
+    font-size: ${stampsGridTheme.stampFontSize};
+    width: 20px;
+
+    &.full-unit {
+      color: ${stampsGridTheme.fullUnitStampColor};
+    }
+
+    &.sub-unit {
+      color: ${stampsGridTheme.subUnitStampColor};
+    }
+  }
+
+  pointer-events: none;
+`;
+const StampsGrid = ({ layoutP, width }) => {
+    const containerRef = useRef(null);
+    const [fullSecondStampsContainer, fullSecondStampsContainerRef] = useState(null);
+    useLayoutEffect(() => {
+        if (!fullSecondStampsContainer)
+            return;
+        return prism(() => {
+            const sequence = val(layoutP.sheet).getSequence();
+            return {
+                fullSecondStampsContainer,
+                clippedSpaceRange: val(layoutP.clippedSpace.range),
+                clippedSpaceWidth: val(layoutP.clippedSpace.width),
+                unitSpaceToClippedSpace: val(layoutP.clippedSpace.fromUnitSpace),
+                leftPadding: val(layoutP.scaledSpace.leftPadding),
+                fps: sequence.subUnitsPerUnit,
+                sequencePositionFormatter: sequence.positionFormatter,
+                snapToGrid: (n) => sequence.closestGridPosition(n),
+            };
+        }).onChange(getStudio().ticker, drawStamps, true);
+    }, [fullSecondStampsContainer, width, layoutP]);
+    return (React.createElement(Container, { ref: containerRef, style: { width: width + 'px' } },
+        React.createElement(TheStamps, { style: { width: width + 'px' } },
+            React.createElement(FullSecondStampsContainer, { ref: fullSecondStampsContainerRef }))));
+};
+export default StampsGrid;
+function drawStamps(opts) {
+    const { fullSecondStampsContainer, sequencePositionFormatter, snapToGrid, unitSpaceToClippedSpace, } = opts;
+    let innerHTML = '';
+    createGrid(opts, (_posInUnitSpace, isFullUnit) => {
+        const posInUnitSpace = snapToGrid(_posInUnitSpace);
+        const posInClippedSpace = unitSpaceToClippedSpace(posInUnitSpace);
+        if (isFullUnit) {
+            innerHTML += createStampClass(sequencePositionFormatter.formatFullUnitForGrid(posInUnitSpace), posInClippedSpace, 'full-unit');
+        }
+        else {
+            innerHTML += createStampClass(sequencePositionFormatter.formatSubUnitForGrid(posInUnitSpace), posInClippedSpace, 'sub-unit');
+        }
+    });
+    fullSecondStampsContainer.innerHTML = innerHTML;
+}
+function createStampClass(pos, x, type) {
+    return `<span class="${type}" style="transform: translate3d(${x.toFixed(1)}px, -50%, 0);">${pos}</span>`;
+}

package/dist/panels/SequenceEditorPanel/FrameGrid/createGrid.d.ts

@@ -0,0 +1,23 @@
+import type { IRange } from '@tomorrowevening/theatre-shared/utils/types';
+/**
+ * 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, }: {
+    /**
+     * the width of the canvas, in pixels
+     */
+    clippedSpaceWidth: number;
+    clippedSpaceRange: IRange;
+    fps: number;
+    /**
+     * the minimum amount of space between two grid lines
+     */
+    gapWidth?: number;
+}, cb: (posInUnitSpace: number, isFullUnit: boolean) => void): void;
+//# sourceMappingURL=createGrid.d.ts.map

package/dist/panels/SequenceEditorPanel/FrameGrid/createGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGrid.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/FrameGrid/createGrid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAavE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,EACE,iBAAiB,EACjB,iBAAiB,EACjB,GAAG,EACH,QAAc,GACf,EAAE;IACD;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,EACD,EAAE,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,GACxD,IAAI,CA4CN"}

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

@@ -0,0 +1,49 @@
+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.d.ts

@@ -0,0 +1,52 @@
+import type { Prism, Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from './layout/layout';
+export declare enum FrameStampPositionType {
+    hidden = 0,
+    locked = 1,
+    snapped = 2,
+    free = 3
+}
+/**
+ * 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.
+ */
+declare const FrameStampPositionProvider: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    children: React.ReactNode;
+}>;
+export declare const useFrameStampPositionD: () => Prism<[pos: number, posType: FrameStampPositionType]>;
+/** Version of {@link useLockFrameStampPosition} which allows you to directly set status of a lock. */
+export declare const useLockFrameStampPositionRef: () => (shouldLock: boolean, posValue: number) => void;
+export declare const useLockFrameStampPosition: (shouldLock: boolean, val: number) => void;
+/**
+ * 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 declare const includeLockFrameStampAttrs: (value: number | 'hide') => {
+    "data-theatre-lock-framestamp-to": string;
+};
+export default FrameStampPositionProvider;
+//# sourceMappingURL=FrameStampPositionProvider.d.ts.map

package/dist/panels/SequenceEditorPanel/FrameStampPositionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameStampPositionProvider.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAE,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAKtE,OAAO,KAON,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,iBAAiB,CAAA;AAO9D,oBAAY,sBAAsB;IAChC,MAAM,IAAA;IACN,MAAM,IAAA;IACN,OAAO,IAAA;IACP,IAAI,IAAA;CACL;AAiBD;;;;;GAKG;AACH,QAAA,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAqEA,CAAA;AAED,eAAO,MAAM,sBAAsB,6DAAqC,CAAA;AAExE,sGAAsG;AACtG,eAAO,MAAM,4BAA4B,qBAYjB,OAAO,YAAY,MAAM,SAqBhD,CAAA;AAED,eAAO,MAAM,yBAAyB,eAAgB,OAAO,OAAO,MAAM,SAkBzE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,0BAA0B,UAAW,MAAM,GAAG,MAAM;;CAE/D,CAAA;AAkDF,eAAe,0BAA0B,CAAA"}

package/dist/panels/SequenceEditorPanel/FrameStampPositionProvider.js

@@ -0,0 +1,189 @@
+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.d.ts

@@ -0,0 +1,25 @@
+import type { TrackData } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import { graphEditorColors } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor';
+export type ExtremumSpace = {
+    fromValueSpace: (v: number) => number;
+    toValueSpace: (v: number) => number;
+    deltaToValueSpace: (v: number) => number;
+    lock(): VoidFn;
+};
+declare const BasicKeyframedTrack: React.VFC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    sheetObject: SheetObject;
+    pathToProp: PathToProp;
+    trackId: SequenceTrackId;
+    trackData: TrackData;
+    color: keyof typeof graphEditorColors;
+}>;
+export default BasicKeyframedTrack;
+//# sourceMappingURL=BasicKeyframedTrack.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/BasicKeyframedTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicKeyframedTrack.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/BasicKeyframedTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,SAAS,EACV,MAAM,wEAAwE,CAAA;AAC/E,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAC/E,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAA;AAE9E,OAAO,KAAK,EAAkB,MAAM,EAAC,MAAM,6CAA6C,CAAA;AACxF,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAC/D,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,EAAC,iBAAiB,EAAC,MAAM,oFAAoF,CAAA;AAUpH,MAAM,MAAM,aAAa,GAAG;IAC1B,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,IAAI,IAAI,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,OAAO,iBAAiB,CAAA;CACtC,CA6FA,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -0,0 +1,91 @@
+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.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type KeyframeEditor from './KeyframeEditor';
+type IProps = Parameters<typeof KeyframeEditor>[0];
+declare const Curve: React.VFC<IProps>;
+/**
+ * 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 declare function transformBox(xInUnitSpace: number, yInExtremumSpace: number, widthInUnitSpace: number, heightInExtremumSpace: number): string;
+export default Curve;
+//# sourceMappingURL=Curve.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/Curve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Curve.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/Curve.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AASlD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAKlD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAkD5B,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,MAAM,EACxB,gBAAgB,EAAE,MAAM,EACxB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAoBR;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,87 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type KeyframeEditor from './KeyframeEditor';
+export declare const dotSize = 6;
+type Which = 'left' | 'right';
+type IProps = Parameters<typeof KeyframeEditor>[0] & {
+    which: Which;
+};
+declare const CurveHandle: React.VFC<IProps>;
+export default CurveHandle;
+//# sourceMappingURL=CurveHandle.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/CurveHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurveHandle.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/CurveHandle.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAGlD,eAAO,MAAM,OAAO,IAAI,CAAA;AAgCxB,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAE7B,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAAA;AAEnE,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAmElC,CAAA;AAED,eAAe,WAAW,CAAA"}