@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/PropWithChildrenRow.js

@@ -1,18 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import PrimitivePropRow from './PrimitivePropRow';
-import RightRow from './Row';
-import AggregatedKeyframeTrack from './AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-import { collectAggregateKeyframesInPrism } from './collectAggregateKeyframes';
-import { ProvideLogger, useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
-export const decideRowByPropType = (leaf, layoutP) => leaf.type === 'propWithChildren' ? (React.createElement(RightPropWithChildrenRow, { layoutP: layoutP, viewModel: leaf, key: 'prop' + leaf.pathToProp[leaf.pathToProp.length - 1] })) : (React.createElement(PrimitivePropRow, { layoutP: layoutP, leaf: leaf, key: 'prop' + leaf.pathToProp[leaf.pathToProp.length - 1] }));
-const RightPropWithChildrenRow = ({ viewModel, layoutP }) => {
-    const logger = useLogger('RightPropWithChildrenRow', viewModel.pathToProp.join());
-    return usePrism(() => {
-        const aggregatedKeyframes = collectAggregateKeyframesInPrism(viewModel);
-        const node = (React.createElement(AggregatedKeyframeTrack, { layoutP: layoutP, aggregatedKeyframes: aggregatedKeyframes, viewModel: viewModel }));
-        return (React.createElement(ProvideLogger, { logger: logger },
-            React.createElement(RightRow, { leaf: viewModel, node: node, isCollapsed: viewModel.isCollapsed }, viewModel.children.map((propLeaf) => decideRowByPropType(propLeaf, layoutP)))));
-    }, [viewModel, layoutP]);
-};
-export default RightPropWithChildrenRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/Right.js

@@ -1,30 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import DopeSheetSelectionView from './DopeSheetSelectionView';
-import HorizontallyScrollableArea from './HorizontallyScrollableArea';
-import SheetRow from './SheetRow';
-export const contentWidth = 1000000;
-const ListContainer = styled.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: absolute;
-  left: 0;
-  width: ${contentWidth}px;
-`;
-const Right = ({ layoutP }) => {
-    return usePrism(() => {
-        const tree = val(layoutP.tree);
-        const height = val(layoutP.tree.top) +
-            // stretch the height of the dope sheet in case the rows don't cover its whole vertical space
-            Math.max(val(layoutP.tree.heightIncludingChildren), val(layoutP.dopeSheetDims.height));
-        return (React.createElement(React.Fragment, null,
-            React.createElement(HorizontallyScrollableArea, { layoutP: layoutP, height: height },
-                React.createElement(DopeSheetSelectionView, { layoutP: layoutP, height: height },
-                    React.createElement(ListContainer, { style: { top: tree.top + 'px' } },
-                        React.createElement(SheetRow, { leaf: tree, layoutP: layoutP }))))));
-    }, [layoutP]);
-};
-export default Right;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/Row.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-const RightRowContainer = styled.li `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  box-sizing: border-box;
-  position: relative;
-`;
-const RightRowNodeWrapper = styled.div `
-  box-sizing: border-box;
-  width: 100%;
-  position: relative;
-
-  &:before {
-    position: absolute;
-    display: block;
-    content: ' ';
-    left: -40px;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    box-sizing: border-box;
-    border-bottom: 1px solid #252b3869;
-    background: ${(props) => (props.isEven ? 'transparent' : '#6b8fb505')};
-  }
-`;
-const RightRowChildren = styled.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-/**
- * @remarks
- * Right now, we're rendering a hierarchical dom tree that reflects the hierarchy of
- * objects, compound props, and their subs. This is not necessary and makes styling complicated.
- * Instead of this, we can simply render a list. This should be easy to do, since the view model
- * in {@link calculateSequenceEditorTree} already includes all the vertical placement information
- * (height and top) we need to render the nodes as a list.
- *
- * Note that we don't need to change {@link calculateSequenceEditorTree} to be list-based. It can
- * retain its hierarchy. It's just the DOM tree that should be list-based.
- */
-const RightRow = ({ leaf, children, node, isCollapsed }) => {
-    const hasChildren = Array.isArray(children) && children.length > 0;
-    return leaf.shouldRender ? (React.createElement(RightRowContainer, null,
-        React.createElement(RightRowNodeWrapper, { style: { height: leaf.nodeHeight + 'px' }, isEven: leaf.n % 2 === 0 }, node),
-        hasChildren && React.createElement(RightRowChildren, null, children))) : null;
-};
-export default RightRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/SheetObjectRow.js

@@ -1,14 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import { decideRowByPropType } from './PropWithChildrenRow';
-import RightRow from './Row';
-import { collectAggregateKeyframesInPrism } from './collectAggregateKeyframes';
-import AggregatedKeyframeTrack from './AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-const RightSheetObjectRow = ({ leaf, layoutP }) => {
-    return usePrism(() => {
-        const aggregatedKeyframes = collectAggregateKeyframesInPrism(leaf);
-        const node = (React.createElement(AggregatedKeyframeTrack, { layoutP: layoutP, aggregatedKeyframes: aggregatedKeyframes, viewModel: leaf }));
-        return (React.createElement(RightRow, { leaf: leaf, node: node, isCollapsed: leaf.isCollapsed }, leaf.children.map((leaf) => decideRowByPropType(leaf, layoutP))));
-    }, [leaf, layoutP]);
-};
-export default RightSheetObjectRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.js

@@ -1,14 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import RightSheetObjectRow from './SheetObjectRow';
-import RightRow from './Row';
-import { collectAggregateKeyframesInPrism } from './collectAggregateKeyframes';
-import AggregatedKeyframeTrack from './AggregatedKeyframeTrack/AggregatedKeyframeTrack';
-const SheetRow = ({ leaf, layoutP }) => {
-    return usePrism(() => {
-        const aggregatedKeyframes = collectAggregateKeyframesInPrism(leaf);
-        const node = (React.createElement(AggregatedKeyframeTrack, { layoutP: layoutP, aggregatedKeyframes: aggregatedKeyframes, viewModel: leaf }));
-        return (React.createElement(RightRow, { leaf: leaf, node: node, isCollapsed: leaf.isCollapsed }, leaf.children.map((sheetObjectLeaf) => (React.createElement(RightSheetObjectRow, { layoutP: layoutP, key: 'sheetObject-' + sheetObjectLeaf.sheetObject.address.objectKey, leaf: sheetObjectLeaf })))));
-    }, [leaf, layoutP]);
-};
-export default SheetRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes.js

@@ -1,92 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
-import { encodePathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
-import { uniq } from 'lodash-es';
-/**
- * Collect {@link AggregatedKeyframes} information from the given tree row with children.
- *
- * Must be called within a `prism` context.
- *
- * Implementation progress 2/10:
- *  - This currently does a lot of duplicate work for each compound rows' compound rows.
- *    - This appears to have O(N) complexity with N being the number of "things" in the
- *      tree, thus we don't see an immediate need to cache it further.
- *    - If concerned, consider making a playground with a lot of objects to test this kind of thing.
- *
- * Note that we do not need to filter to only tracks that should be displayed, because we
- * do not do anything counting or iterating over all tracks.
- *
- * Furthermore, we _could_ have been traversing the tree of the sheet and producing
- * an aggreagte from that, but _that_ aggregate would not take into account
- * things like filters in the `SequenceEditorPanel`, where the filter would exclude
- * certain objects and props from the tree.
- *
- */
-export function collectAggregateKeyframesInPrism(leaf) {
-    const tracks = leaf.type === 'sheet'
-        ? collectAggregateKeyframesSheet(leaf)
-        : collectAggregateKeyframesCompoundOrObject(leaf);
-    return {
-        byPosition: keyframesByPositionFromTrackWithIds(tracks),
-        tracks,
-    };
-}
-function keyframesByPositionFromTrackWithIds(tracks) {
-    const byPosition = new Map();
-    for (const track of tracks) {
-        for (const kf of track.data.keyframes) {
-            let existing = byPosition.get(kf.position);
-            if (!existing) {
-                existing = [];
-                byPosition.set(kf.position, existing);
-            }
-            existing.push({
-                kf,
-                track,
-                itemKey: createStudioSheetItemKey.forTrackKeyframe(track.sheetObject, track.id, kf.id),
-            });
-        }
-    }
-    return byPosition;
-}
-function collectAggregateKeyframesSheet(leaf) {
-    return leaf.children.flatMap(collectAggregateKeyframesCompoundOrObject);
-}
-function collectAggregateKeyframesCompoundOrObject(leaf) {
-    return leaf.children.flatMap((childLeaf) => childLeaf.type === 'propWithChildren'
-        ? collectAggregateKeyframesCompoundOrObject(childLeaf)
-        : collectAggregateKeyframesPrimitiveProp(childLeaf));
-}
-function collectAggregateKeyframesPrimitiveProp(leaf) {
-    const sheetObject = leaf.sheetObject;
-    const projectId = sheetObject.address.projectId;
-    const sheetObjectTracksP = getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey];
-    const trackId = val(sheetObjectTracksP.trackIdByPropPath[encodePathToProp(leaf.pathToProp)]);
-    if (!trackId)
-        return [];
-    const trackData = val(sheetObjectTracksP.trackData[trackId]);
-    if (!trackData)
-        return [];
-    return [{ id: trackId, data: trackData, sheetObject }];
-}
-/**
- * Collects all the snap positions for an aggregate track.
- */
-export function collectAggregateSnapPositionsSheet(leaf, snapTargetPositions) {
-    return uniq(leaf.children.flatMap((childLeaf) => collectAggregateSnapPositionsObjectOrCompound(childLeaf, snapTargetPositions)));
-}
-export function collectAggregateSnapPositionsObjectOrCompound(leaf, snapTargetPositions) {
-    return uniq(leaf.children.flatMap((childLeaf) => childLeaf.type === 'propWithChildren'
-        ? collectAggregateSnapPositionsObjectOrCompound(childLeaf, snapTargetPositions)
-        : collectAggregateSnapPositionsPrimitiveProp(childLeaf, snapTargetPositions)));
-}
-function collectAggregateSnapPositionsPrimitiveProp(leaf, snapTargetPositions) {
-    const sheetObject = leaf.sheetObject;
-    const projectId = sheetObject.address.projectId;
-    const sheetObjectTracksP = getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey];
-    const trackId = val(sheetObjectTracksP.trackIdByPropPath[encodePathToProp(leaf.pathToProp)]);
-    if (!trackId)
-        return [];
-    return snapTargetPositions[sheetObject.address.objectKey]?.[trackId] ?? [];
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.js

@@ -1,62 +0,0 @@
-import { lighten, saturate } from 'polished';
-import React from 'react';
-import styled from 'styled-components';
-import { DOT_SIZE_PX } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot';
-const CONNECTOR_HEIGHT = DOT_SIZE_PX / 2 + 1;
-const CONNECTOR_WIDTH_UNSCALED = 1000;
-export const CONNECTOR_THEME = {
-    normalColor: `#365b59`,
-    selectedColor: `#8A7842`,
-    barColor: (values) => {
-        const base = values.isSelected
-            ? CONNECTOR_THEME.selectedColor
-            : CONNECTOR_THEME.normalColor;
-        return values.isPopoverOpen ? saturate(0.2, lighten(0.2, base)) : base;
-    },
-    hoverColor: (values) => {
-        const base = values.isSelected
-            ? CONNECTOR_THEME.selectedColor
-            : CONNECTOR_THEME.normalColor;
-        return values.isPopoverOpen
-            ? saturate(0.2, lighten(0.2, base))
-            : saturate(0.1, lighten(0.1, base));
-    },
-};
-const Container = styled.div `
-  position: absolute;
-  background: ${CONNECTOR_THEME.barColor};
-  height: ${CONNECTOR_HEIGHT}px;
-  width: ${CONNECTOR_WIDTH_UNSCALED}px;
-
-  left: 0;
-  top: -${CONNECTOR_HEIGHT / 2}px;
-  transform-origin: top left;
-  z-index: 0;
-  cursor: ew-resize;
-
-  &:after {
-    display: block;
-    position: absolute;
-    content: ' ';
-    top: -4px;
-    bottom: -4px;
-    left: 0;
-    right: 0;
-  }
-
-  &:hover {
-    background: ${CONNECTOR_THEME.hoverColor};
-  }
-`;
-export const ConnectorLine = React.forwardRef((props, ref) => {
-    const themeValues = {
-        isPopoverOpen: props.isPopoverOpen,
-        isSelected: props.isSelected,
-    };
-    return (React.createElement(Container, { ...themeValues, ref: ref, style: {
-            // Previously we used scale3d, which had weird fuzzy rendering look in both FF & Chrome
-            transform: `scaleX(calc(var(--unitSpaceToScaledSpaceMultiplier) * ${props.connectorLengthInUnitSpace / CONNECTOR_WIDTH_UNSCALED}))`,
-        }, onClick: (e) => {
-            props.openPopover?.(e);
-        } }, props.children));
-});

package/dist/panels/SequenceEditorPanel/DopeSheet/selections.js

@@ -1,149 +0,0 @@
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { commonRootOfPathsToProps, decodePathToProp, } from '@tomorrowevening/theatre-shared/utils/addresses';
-/**
- * Keyframe connections are considered to be selected if the first
- * keyframe in the connection is selected
- */
-export function isKeyframeConnectionInSelection(keyframeConnection, selection) {
-    for (const { keyframeId } of flatSelectionKeyframeIds(selection)) {
-        if (keyframeConnection.left.id === keyframeId)
-            return true;
-    }
-    return false;
-}
-/**
- * Returns an array of all the selected keyframes
- * that are connected to one another. Useful for changing
- * the tweening in between keyframes.
- *
- * TODO - rename to selectedKeyframeConnectionsD(), or better yet,
- * make it a `prism.ensurePrism()` function, rather than returning
- * a prism.
- */
-export function selectedKeyframeConnections(projectId, sheetId, selection) {
-    return prism(() => {
-        if (selection === undefined)
-            return [];
-        let ckfs = [];
-        for (const { objectKey, trackId } of flatSelectionTrackIds(selection)) {
-            const track = val(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
-                .sequence.tracksByObject[objectKey].trackData[trackId]);
-            if (track) {
-                ckfs = ckfs.concat(keyframeConnections(track.keyframes)
-                    .filter((kfc) => isKeyframeConnectionInSelection(kfc, selection))
-                    .map(({ left, right }) => ({
-                    left,
-                    right,
-                    trackId,
-                    objectKey,
-                    sheetId,
-                    projectId,
-                })));
-            }
-        }
-        return ckfs;
-    });
-}
-/**
- * Given a selection, returns a list of keyframes and paths
- * that are relative to a common root path. For example, if
- * the selection contains a keyframe on both the following tracks:
- * - exObject.transform.position.x
- * - exObject.transform.position.y
- * then the result will be
- * ```
- * [{ keyframe, pathToProp: ['x']}, { keyframe, pathToProp: ['y']}]
- * ```
- *
- * If the selection contains a keyframe on
- * all the following tracks:
- * - exObject.transform.position.x
- * - exObject.transform.position.y
- * - exObject.transform.scale.x
- * then the result will be
- * ```
- * [
- *   {keyframe, pathToProp: ['position', 'x']},
- *   {keyframe, pathToProp: ['position', 'y']},
- *   {keyframe, pathToProp: ['scale',    'x']},
- * ]
- * ```
- */
-export function copyableKeyframesFromSelection(projectId, sheetId, selection) {
-    if (selection === undefined)
-        return [];
-    let kfs = [];
-    for (const { objectKey, trackId, keyframeIds } of flatSelectionTrackIds(selection)) {
-        kfs = kfs.concat(keyframesWithPaths({
-            projectId,
-            sheetId,
-            objectKey,
-            trackId,
-            keyframeIds,
-        }) ?? []);
-    }
-    const commonPath = commonRootOfPathsToProps(kfs.map((kf) => kf.pathToProp));
-    const keyframesWithCommonRootPath = kfs.map(({ keyframe, pathToProp }) => ({
-        keyframe,
-        pathToProp: pathToProp.slice(commonPath.length),
-    }));
-    return keyframesWithCommonRootPath;
-}
-/**
- * @see copyableKeyframesFromSelection
- */
-export function keyframesWithPaths({ projectId, sheetId, objectKey, trackId, keyframeIds, }) {
-    const tracksByObject = val(getStudio().atomP.historic.coreByProject[projectId].sheetsById[sheetId]
-        .sequence.tracksByObject[objectKey]);
-    const track = tracksByObject?.trackData[trackId];
-    if (!track)
-        return null;
-    const propPathByTrackId = swapKeyAndValue(tracksByObject?.trackIdByPropPath || {});
-    const encodedPropPath = propPathByTrackId[trackId];
-    if (!encodedPropPath)
-        return null;
-    const pathToProp = [objectKey, ...decodePathToProp(encodedPropPath)];
-    return keyframeIds
-        .map((keyframeId) => ({
-        keyframe: track.keyframes.find((keyframe) => keyframe.id === keyframeId),
-        pathToProp,
-    }))
-        .filter(({ keyframe }) => keyframe !== undefined);
-}
-function swapKeyAndValue(obj) {
-    const result = {};
-    for (const [key, value] of Object.entries(obj)) {
-        result[value] = key;
-    }
-    return result;
-}
-export function keyframeConnections(keyframes) {
-    return keyframes
-        .map((kf, i) => ({ left: kf, right: keyframes[i + 1] }))
-        .slice(0, -1); // remmove the last entry because it is { left: kf, right: undefined }
-}
-export function flatSelectionKeyframeIds(selection) {
-    const result = [];
-    for (const [objectKey, maybeObjectRecord] of Object.entries(selection?.byObjectKey ?? {})) {
-        for (const [trackId, maybeTrackRecord] of Object.entries(maybeObjectRecord?.byTrackId ?? {})) {
-            for (const keyframeId of Object.keys(maybeTrackRecord?.byKeyframeId ?? {})) {
-                result.push({ objectKey, trackId, keyframeId });
-            }
-        }
-    }
-    return result;
-}
-export function flatSelectionTrackIds(selection) {
-    const result = [];
-    for (const [objectKey, maybeObjectRecord] of Object.entries(selection?.byObjectKey ?? {})) {
-        for (const [trackId, maybeTrackRecord] of Object.entries(maybeObjectRecord?.byTrackId ?? {})) {
-            result.push({
-                objectKey,
-                trackId,
-                keyframeIds: Object.keys(maybeTrackRecord?.byKeyframeId ?? {}),
-            });
-        }
-    }
-    return result;
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp.js

@@ -1,10 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-export function setCollapsedSheetItem(isCollapsed, toCollapse) {
-    getStudio().transaction(({ stateEditors }) => {
-        stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.sequenceEditorCollapsableItems.set({
-            ...toCollapse.sheetAddress,
-            studioSheetItemKey: toCollapse.sheetItemKey,
-            isCollapsed,
-        });
-    });
-}

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

@@ -1,92 +0,0 @@
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import React, { useLayoutEffect, useMemo, 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;
-`;
-const TheCanvas = styled.canvas `
-  position: relative;
-  left: 0;
-`;
-/**
- * from https://github.com/jonobr1/two.js/blob/758672c280278da2980b57e42ecb96eab4fe7a95/src/utils/get-ratio.js#L20
- */
-const getBackingStoreRatio = (ctx) => {
-    const _ctx = ctx;
-    return (_ctx.webkitBackingStorePixelRatio ||
-        _ctx.mozBackingStorePixelRatio ||
-        _ctx.msBackingStorePixelRatio ||
-        _ctx.oBackingStorePixelRatio ||
-        _ctx.backingStorePixelRatio ||
-        1);
-};
-const getDevicePixelRatio = () => window.devicePixelRatio || 1;
-const getRatio = (ctx) => {
-    return getDevicePixelRatio() / getBackingStoreRatio(ctx);
-};
-const FrameGrid = ({ layoutP, width, height }) => {
-    const containerRef = useRef(null);
-    const [canvas, canvasRef] = useState(null);
-    const { ctx, ratio } = useMemo(() => {
-        if (!canvas)
-            return {};
-        const ctx = canvas.getContext('2d');
-        const ratio = getRatio(ctx);
-        return { ctx, ratio };
-    }, [canvas]);
-    useLayoutEffect(() => {
-        if (!ctx)
-            return;
-        canvas.width = width * ratio;
-        canvas.height = height * ratio;
-        const untap = prism(() => {
-            const sequence = val(layoutP.sheet).getSequence();
-            return {
-                ctx,
-                clippedSpaceRange: val(layoutP.clippedSpace.range),
-                clippedSpaceWidth: val(layoutP.clippedSpace.width),
-                unitSpaceToClippedSpace: val(layoutP.clippedSpace.fromUnitSpace),
-                height,
-                leftPadding: val(layoutP.scaledSpace.leftPadding),
-                fps: sequence.subUnitsPerUnit,
-                snapToGrid: (n) => sequence.closestGridPosition(n),
-            };
-        }).onChange(getStudio().ticker, (p) => {
-            ctx.save();
-            ctx.scale(ratio, ratio);
-            drawGrid(p);
-            ctx.restore();
-        }, true);
-        return () => {
-            untap();
-        };
-    }, [ctx, width, height, layoutP]);
-    return (React.createElement(Container, { ref: containerRef, style: { width: width + 'px' } },
-        React.createElement(TheCanvas, { ref: canvasRef, style: {
-                width: width + 'px',
-                height: height + 'px',
-            } })));
-};
-export default FrameGrid;
-function drawGrid(opts) {
-    const { clippedSpaceWidth, height, ctx, unitSpaceToClippedSpace, snapToGrid } = opts;
-    ctx.clearRect(0, 0, clippedSpaceWidth, height);
-    createGrid(opts, (_posInUnitSpace, isFullSecond) => {
-        const posInUnitSpace = snapToGrid(_posInUnitSpace);
-        const posInClippedSpace = Math.floor(unitSpaceToClippedSpace(posInUnitSpace));
-        ctx.strokeStyle = isFullSecond
-            ? 'rgba(225, 225, 225, 0.04)'
-            : 'rgba(255, 255, 255, 0.01)';
-        ctx.beginPath();
-        ctx.moveTo(posInClippedSpace, 0);
-        ctx.lineTo(posInClippedSpace, height);
-        ctx.stroke();
-        ctx.closePath();
-    });
-}

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

@@ -1,99 +0,0 @@
-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>`;
-}