@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,162 +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 React, { useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
-import { useKeyframeInlineEditorPopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover';
-import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-export const dotSize = 6;
-const Circle = styled.circle `
-  fill: var(--main-color);
-  stroke-width: 1px;
-  vector-effect: non-scaling-stroke;
-
-  r: 2px;
-`;
-const HitZone = styled.circle `
-  stroke-width: 6px;
-  vector-effect: non-scaling-stroke;
-  r: 6px;
-  fill: transparent;
-  ${pointerEventsAutoInNormalMode};
-
-  &:hover + ${Circle} {
-    r: 6px;
-  }
-
-  #pointer-root.normal & {
-    cursor: ew-resize;
-  }
-
-  #pointer-root.draggingPositionInSequenceEditor & {
-    pointer-events: auto;
-    cursor: var(${lockedCursorCssVarName});
-  }
-
-  &.beingDragged {
-    pointer-events: none !important;
-  }
-`;
-const GraphEditorDotNonScalar = (props) => {
-    const [ref, node] = useRefAndState(null);
-    const { index, trackData, itemKey } = props;
-    const cur = trackData.keyframes[index];
-    const [contextMenu] = useKeyframeContextMenu(node, props);
-    const presence = usePresence(itemKey);
-    const curValue = props.which === 'left' ? 0 : 1;
-    const inlineEditorPopover = useKeyframeInlineEditorPopover([
-        {
-            type: 'primitiveProp',
-            keyframe: props.keyframe,
-            pathToProp: props.pathToProp,
-            propConfig: props.propConfig,
-            sheetObject: props.sheetObject,
-            trackId: props.trackId,
-        },
-    ]);
-    const isDragging = useDragKeyframe({
-        node,
-        props,
-        // dragging does not work with also having a click listener
-        onDetectedClick: (event) => inlineEditorPopover.toggle(event, event.target instanceof Element ? event.target : node),
-    });
-    const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HitZone, { ref: ref, style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
-            }, ...presence.attrs, ...includeLockFrameStampAttrs(cur.position), ...DopeSnap.includePositionSnapAttrs(cur.position), className: isDragging ? 'beingDragged' : '' }),
-        React.createElement(Circle, { style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
-                fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
-            } }),
-        inlineEditorPopover.node,
-        contextMenu));
-};
-export default GraphEditorDotNonScalar;
-function useDragKeyframe(options) {
-    const [isDragging, setIsDragging] = useState(false);
-    useLockFrameStampPosition(isDragging, options.props.keyframe.position);
-    const propsRef = useRef(options.props);
-    propsRef.current = options.props;
-    const gestureHandlers = useMemo(() => {
-        return {
-            debugName: 'GraphEditorDotNonScalar/useDragKeyframe',
-            lockCSSCursorTo: 'ew-resize',
-            onDragStart(event) {
-                setIsDragging(true);
-                const propsAtStartOfDrag = propsRef.current;
-                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
-                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
-                let tempTransaction;
-                return {
-                    onDrag(dx, dy) {
-                        const original = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index];
-                        const deltaPos = toUnitSpace(dx);
-                        const updatedKeyframes = [];
-                        const cur = {
-                            ...original,
-                            position: original.position + deltaPos,
-                            value: original.value,
-                            handles: [...original.handles],
-                        };
-                        updatedKeyframes.push(cur);
-                        tempTransaction?.discard();
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
-                                ...propsAtStartOfDrag.sheetObject.address,
-                                trackId: propsAtStartOfDrag.trackId,
-                                keyframes: updatedKeyframes,
-                                snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
-                            });
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        setIsDragging(false);
-                        unlockExtremums();
-                        if (dragHappened) {
-                            tempTransaction?.commit();
-                        }
-                        else {
-                            tempTransaction?.discard();
-                            options.onDetectedClick(event);
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    useDrag(options.node, gestureHandlers);
-    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
-    return isDragging;
-}
-function useKeyframeContextMenu(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,
-                            });
-                        });
-                    },
-                },
-            ];
-        },
-    });
-}

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

@@ -1,209 +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 React, { useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
-import { useKeyframeInlineEditorPopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover';
-import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-export const dotSize = 6;
-const Circle = styled.circle `
-  fill: var(--main-color);
-  stroke-width: 1px;
-  vector-effect: non-scaling-stroke;
-
-  r: 2px;
-`;
-const HitZone = styled.circle `
-  stroke-width: 6px;
-  vector-effect: non-scaling-stroke;
-  r: 6px;
-  fill: transparent;
-  ${pointerEventsAutoInNormalMode};
-
-  &:hover + ${Circle} {
-    r: 6px;
-  }
-
-  #pointer-root.normal & {
-    cursor: move;
-  }
-
-  #pointer-root.draggingPositionInSequenceEditor & {
-    pointer-events: auto;
-    cursor: var(${lockedCursorCssVarName});
-  }
-
-  &.beingDragged {
-    pointer-events: none !important;
-  }
-`;
-const GraphEditorDotScalar = (props) => {
-    const [ref, node] = useRefAndState(null);
-    const { index, trackData } = props;
-    const cur = trackData.keyframes[index];
-    const [contextMenu] = useKeyframeContextMenu(node, props);
-    const presence = usePresence(props.itemKey);
-    const curValue = cur.value;
-    const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue);
-    const inlineEditorPopover = useKeyframeInlineEditorPopover([
-        {
-            type: 'primitiveProp',
-            keyframe: props.keyframe,
-            pathToProp: props.pathToProp,
-            propConfig: props.propConfig,
-            sheetObject: props.sheetObject,
-            trackId: props.trackId,
-        },
-    ]);
-    const isDragging = useDragKeyframe({
-        node,
-        props,
-        // dragging does not work with also having a click listener
-        onDetectedClick: (event) => inlineEditorPopover.toggle(event, event.target instanceof Element ? event.target : node),
-    });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HitZone, { ref: ref, style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
-            }, ...includeLockFrameStampAttrs(cur.position), ...DopeSnap.includePositionSnapAttrs(cur.position), ...presence.attrs, className: isDragging ? 'beingDragged' : '' }),
-        React.createElement(Circle, { style: {
-                // @ts-ignore
-                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
-                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
-                fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
-            } }),
-        inlineEditorPopover.node,
-        contextMenu));
-};
-export default GraphEditorDotScalar;
-function useDragKeyframe(options) {
-    const [isDragging, setIsDragging] = useState(false);
-    useLockFrameStampPosition(isDragging, options.props.keyframe.position);
-    const propsRef = useRef(options.props);
-    propsRef.current = options.props;
-    const gestureHandlers = useMemo(() => {
-        return {
-            debugName: 'GraphEditorDotScalar/useDragKeyframe',
-            lockCSSCursorTo: 'move',
-            onDragStart(event) {
-                setIsDragging(true);
-                const keepSpeeds = !!event.altKey;
-                const propsAtStartOfDrag = propsRef.current;
-                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
-                const verticalToExtremumSpace = val(propsAtStartOfDrag.layoutP.graphEditorVerticalSpace.toExtremumSpace);
-                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
-                let tempTransaction;
-                return {
-                    onDrag(dx, dy) {
-                        const original = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index];
-                        const deltaPos = toUnitSpace(dx);
-                        const dyInVerticalSpace = -dy;
-                        const dYInExtremumSpace = verticalToExtremumSpace(dyInVerticalSpace);
-                        const dYInValueSpace = propsAtStartOfDrag.extremumSpace.deltaToValueSpace(dYInExtremumSpace);
-                        const updatedKeyframes = [];
-                        const cur = {
-                            ...original,
-                            position: original.position + deltaPos,
-                            value: original.value + dYInValueSpace,
-                            handles: [...original.handles],
-                        };
-                        updatedKeyframes.push(cur);
-                        if (keepSpeeds) {
-                            const prev = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index - 1];
-                            if (prev &&
-                                Math.abs(original.value - prev.value) >
-                                    0) {
-                                const newPrev = {
-                                    ...prev,
-                                    handles: [...prev.handles],
-                                };
-                                updatedKeyframes.push(newPrev);
-                                newPrev.handles[3] = preserveRightHandle(prev.handles[3], prev.value, prev.value, original.value, cur.value);
-                            }
-                            const next = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index + 1];
-                            if (next &&
-                                Math.abs(original.value - next.value) >
-                                    0) {
-                                const newNext = {
-                                    ...next,
-                                    handles: [...next.handles],
-                                };
-                                updatedKeyframes.push(newNext);
-                                newNext.handles[1] = preserveLeftHandle(newNext.handles[1], newNext.value, newNext.value, original.value, cur.value);
-                            }
-                        }
-                        tempTransaction?.discard();
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
-                                ...propsAtStartOfDrag.sheetObject.address,
-                                trackId: propsAtStartOfDrag.trackId,
-                                keyframes: updatedKeyframes,
-                                snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
-                            });
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        setIsDragging(false);
-                        unlockExtremums();
-                        if (dragHappened) {
-                            tempTransaction?.commit();
-                        }
-                        else {
-                            tempTransaction?.discard();
-                            options.onDetectedClick(event);
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    useDrag(options.node, gestureHandlers);
-    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move');
-    return isDragging;
-}
-function useKeyframeContextMenu(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,
-                            });
-                        });
-                    },
-                },
-            ];
-        },
-    });
-}
-function preserveRightHandle(rightHandleInKeyframeDeltaSpace, originalValueOfMovedKeyframe, newValueOfMovedKeyframe, originalValueOfNeighbouringKeyframe, newValueOfNeighbouringKeyframe) {
-    const diffOfHandleYToMovingKeyframeInValueSpace = (originalValueOfNeighbouringKeyframe - originalValueOfMovedKeyframe) *
-        rightHandleInKeyframeDeltaSpace;
-    const newHandleYInKeyframeDeltaSpace = diffOfHandleYToMovingKeyframeInValueSpace /
-        (newValueOfNeighbouringKeyframe - newValueOfMovedKeyframe);
-    return newHandleYInKeyframeDeltaSpace;
-}
-function preserveLeftHandle(leftHandleInKeyframeDeltaSpace, originalValueOfMovedKeyframe, newValueOfMovedKeyframe, originalValueOfNeighbouringKeyframe, newValueOfNeighbouringKeyframe) {
-    const handleYInValueSpace = (originalValueOfMovedKeyframe - originalValueOfNeighbouringKeyframe) *
-        leftHandleInKeyframeDeltaSpace +
-        originalValueOfNeighbouringKeyframe;
-    const diffOfHandleYToMovingKeyframeInValueSpace = handleYInValueSpace - originalValueOfMovedKeyframe;
-    const newHandleYInValueSpace = diffOfHandleYToMovingKeyframeInValueSpace + newValueOfMovedKeyframe;
-    const diffOfNewHandleYToNeighbouringKeyframe = newHandleYInValueSpace - newValueOfNeighbouringKeyframe;
-    const newHandleYInKeyframeDeltaSpace = diffOfNewHandleYToNeighbouringKeyframe /
-        (newValueOfMovedKeyframe - newValueOfNeighbouringKeyframe);
-    return newHandleYInKeyframeDeltaSpace;
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { transformBox } from './Curve';
-export const dotSize = 6;
-const SVGPath = styled.path `
-  stroke-width: 2;
-  stroke: var(--main-color);
-  stroke-dasharray: 3 2;
-  fill: none;
-  vector-effect: non-scaling-stroke;
-  opacity: 0.3;
-`;
-const GraphEditorNonScalarDash = (props) => {
-    const { index, trackData } = props;
-    const pathD = `M 0 0 L 1 1`;
-    const transform = transformBox(trackData.keyframes[index].position, props.extremumSpace.fromValueSpace(0), 0, props.extremumSpace.fromValueSpace(1) -
-        props.extremumSpace.fromValueSpace(0));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SVGPath, { d: pathD, style: {
-                transform,
-            } })));
-};
-export default GraphEditorNonScalarDash;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Curve from './Curve';
-import CurveHandle from './CurveHandle';
-import GraphEditorDotScalar from './GraphEditorDotScalar';
-import GraphEditorDotNonScalar from './GraphEditorDotNonScalar';
-import GraphEditorNonScalarDash from './GraphEditorNonScalarDash';
-const Container = styled.g `
-  /* position: absolute; */
-`;
-const noConnector = React.createElement(React.Fragment, null);
-const KeyframeEditor = (props) => {
-    const { index, trackData, isScalar } = props;
-    const cur = trackData.keyframes[index];
-    const next = trackData.keyframes[index + 1];
-    const connected = cur.connectedRight && !!next;
-    const shouldShowCurve = connected && next.value !== cur.value;
-    return (React.createElement(Container, null,
-        shouldShowCurve ? (React.createElement(React.Fragment, null,
-            React.createElement(Curve, { ...props }),
-            !cur.type ||
-                (cur.type === 'bezier' && (React.createElement(React.Fragment, null,
-                    React.createElement(CurveHandle, { ...props, which: "left" }),
-                    React.createElement(CurveHandle, { ...props, which: "right" })))))) : (noConnector),
-        isScalar ? (React.createElement(GraphEditorDotScalar, { ...props })) : (React.createElement(React.Fragment, null,
-            React.createElement(GraphEditorDotNonScalar, { ...props, which: "left" }),
-            React.createElement(GraphEditorDotNonScalar, { ...props, which: "right" }),
-            React.createElement(GraphEditorNonScalarDash, { ...props })))));
-};
-export default KeyframeEditor;

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

@@ -1,73 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { decodePathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
-import getDeep from '@tomorrowevening/theatre-shared/utils/getDeep';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import { contentWidth } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/Right';
-import HorizontallyScrollableArea from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea';
-import PrimitivePropGraph from './PrimitivePropGraph';
-import FrameGrid from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid';
-import { transparentize } from 'polished';
-export const graphEditorColors = {
-    '1': { iconColor: '#b98b08' },
-    '2': { iconColor: '#70a904' },
-    '3': { iconColor: '#2e928a' },
-    '4': { iconColor: '#a943bb' },
-    '5': { iconColor: '#b90808' },
-    '6': { iconColor: '#b4bf0e' },
-};
-const Container = styled.div `
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background: ${transparentize(0.03, '#1a1c1e')};
-`;
-const SVGContainer = styled.svg `
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0;
-  pointer-events: none;
-`;
-const GraphEditor = ({ layoutP }) => {
-    return usePrism(() => {
-        const sheet = val(layoutP.sheet);
-        const selectedPropsByObject = val(getStudio().atomP.historic.projects.stateByProjectId[sheet.address.projectId].stateBySheetId[sheet.address.sheetId].sequenceEditor
-            .selectedPropsByObject);
-        const height = val(layoutP.graphEditorDims.height);
-        const unitSpaceToScaledSpaceMultiplier = val(layoutP.scaledSpace.fromUnitSpace)(1);
-        const graphs = [];
-        if (selectedPropsByObject) {
-            for (const [objectKey, props] of Object.entries(selectedPropsByObject)) {
-                const sheetObject = sheet.getObject(objectKey);
-                if (!sheetObject)
-                    continue;
-                const validSequenceTracks = val(sheetObject.template.getMapOfValidSequenceTracks_forStudio());
-                for (const [encodedPathToProp, graphEditorColor] of Object.entries(props)) {
-                    const pathToProp = decodePathToProp(encodedPathToProp);
-                    const possibleSequenceTrackId = getDeep(validSequenceTracks, pathToProp);
-                    if (!possibleSequenceTrackId)
-                        continue;
-                    graphs.push(React.createElement(PrimitivePropGraph, { key: `graph-${objectKey}-${encodedPathToProp}`, sheetObject: sheetObject, pathToProp: pathToProp, layoutP: layoutP, trackId: possibleSequenceTrackId, color: graphEditorColor }));
-                }
-            }
-        }
-        const width = val(layoutP.rightDims.width);
-        return (React.createElement(Container, { style: {
-                width: width + 'px',
-                height: height + 'px',
-                // @ts-expect-error
-                '--unitSpaceToScaledSpaceMultiplier': unitSpaceToScaledSpaceMultiplier,
-                '--graphEditorVerticalSpace': `${val(layoutP.graphEditorVerticalSpace.space)}`,
-            } },
-            React.createElement(FrameGrid, { layoutP: layoutP, width: width, height: height }),
-            React.createElement(HorizontallyScrollableArea, { layoutP: layoutP, height: height },
-                React.createElement(SVGContainer, { width: contentWidth, height: height, viewBox: `0 0 ${contentWidth} ${height}` },
-                    React.createElement("g", { style: {
-                            transform: `translate(${val(layoutP.scaledSpace.leftPadding)}px, ${val(layoutP.graphEditorDims.padding.top)}px)`,
-                        } }, graphs)))));
-    }, [layoutP]);
-};
-export default GraphEditor;

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

@@ -1,20 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import BasicKeyframedTrack from './BasicKeyframedTrack/BasicKeyframedTrack';
-const PrimitivePropGraph = (props) => {
-    return usePrism(() => {
-        const { sheetObject, trackId } = props;
-        const trackData = val(getStudio().atomP.historic.coreByProject[sheetObject.address.projectId]
-            .sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey].trackData[trackId]);
-        if (trackData?.type !== 'BasicKeyframedTrack') {
-            console.error(`trackData type ${trackData?.type} is not yet supported on the graph editor`);
-            return React.createElement(React.Fragment, null);
-        }
-        else {
-            return React.createElement(BasicKeyframedTrack, { ...props, trackData: trackData });
-        }
-    }, [props.trackId, props.layoutP]);
-};
-export default PrimitivePropGraph;

package/dist/panels/SequenceEditorPanel/GraphEditorToggle.js

@@ -1,59 +0,0 @@
-import { val } from '@tomorrowevening/theatre-dataverse';
-import { useVal } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { VscTriangleUp } from 'react-icons/all';
-import { includeLockFrameStampAttrs } from './FrameStampPositionProvider';
-const Container = styled.button `
-  outline: none;
-  background-color: #1c1d21;
-  border: 1px solid #191919;
-  border-radius: 2px;
-  display: flex;
-  bottom: 14px;
-  right: 8px;
-  z-index: 1;
-  position: absolute;
-
-  padding: 4px 8px;
-  display: flex;
-  color: #656d77;
-  line-height: 20px;
-  font-size: 10px;
-
-  &:hover {
-    color: white;
-  }
-
-  & > svg {
-    transition: transform 0.3s;
-    transform: rotateZ(0deg);
-  }
-
-  &:hover > svg {
-    transform: rotateZ(-20deg);
-  }
-
-  &.open > svg {
-    transform: rotateZ(-180deg);
-  }
-
-  &.open:hover > svg {
-    transform: rotateZ(-160deg);
-  }
-`;
-const GraphEditorToggle = ({ layoutP }) => {
-    const isOpen = useVal(layoutP.graphEditorDims.isOpen);
-    const toggle = useCallback(() => {
-        const isOpen = val(layoutP.graphEditorDims.isOpen);
-        getStudio().transaction(({ stateEditors }) => {
-            stateEditors.studio.historic.panels.sequenceEditor.graphEditor.setIsOpen({
-                isOpen: !isOpen,
-            });
-        });
-    }, [layoutP]);
-    return (React.createElement(Container, { onClick: toggle, title: 'Toggle graph editor', className: isOpen ? 'open' : '', ...includeLockFrameStampAttrs('hide') },
-        React.createElement(VscTriangleUp, null)));
-};
-export default GraphEditorToggle;

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnap.js

@@ -1,36 +0,0 @@
-// Pretty much same code as for keyframe and similar for playhead.
-// Consider if we should unify the implementations.
-// - See "useLockFrameStampPosition"
-// - Also see "pointerPositionInUnitSpace" for a related impl (for different problem)
-const POSITION_SNAP_ATTR = 'data-pos';
-/**
- * Uses `[data-pos]` attribute to understand potential snap targets.
- */
-const DopeSnap = {
-    checkIfMouseEventSnapToPos(event, options) {
-        const snapTarget = event
-            .composedPath()
-            .find((el) => el instanceof Element &&
-            el !== options?.ignore &&
-            el.hasAttribute(POSITION_SNAP_ATTR));
-        if (snapTarget) {
-            const snapPos = parseFloat(snapTarget.getAttribute(POSITION_SNAP_ATTR));
-            if (isFinite(snapPos)) {
-                return snapPos;
-            }
-        }
-        return null;
-    },
-    /**
-     * Use as a spread in a React element
-     *
-     * @example
-     * ```tsx
-     * <div {...DopeSnap.includePositionSnapAttrs(10)}/>
-     * ```
-     */
-    includePositionSnapAttrs(position) {
-        return { [POSITION_SNAP_ATTR]: position };
-    },
-};
-export default DopeSnap;