@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,88 +0,0 @@
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { topStripHeight } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-const divWidth = 1000;
-const Curtain = styled.div `
-  position: absolute;
-  top: ${topStripHeight}px;
-  left: 0;
-  opacity: 0.15;
-  width: ${divWidth}px;
-  transform-origin: top left;
-  pointer-events: none;
-  background-color: ${(props) => (props.enabled ? '#000000' : 'transparent')};
-`;
-const FocusRangeCurtains = ({ layoutP }) => {
-    const existingRangeD = useMemo(() => prism(() => {
-        const { projectId, sheetId } = val(layoutP.sheet).address;
-        const existingRange = val(getStudio().atomP.ahistoric.projects.stateByProjectId[projectId]
-            .stateBySheetId[sheetId].sequence.focusRange);
-        return existingRange;
-    }), [layoutP]);
-    return usePrism(() => {
-        const existingRange = existingRangeD.getValue();
-        if (!existingRange || !existingRange.enabled)
-            return null;
-        const { range } = existingRange;
-        const height = val(layoutP.rightDims.height) - topStripHeight;
-        const unitSpaceToClippedSpace = val(layoutP.clippedSpace.fromUnitSpace);
-        const clippedSpaceWidth = val(layoutP.clippedSpace.width);
-        const els = [];
-        {
-            // the left (start) curtain
-            // starts from 0px
-            let startX = 0;
-            // ends in the start of the range
-            let endX = unitSpaceToClippedSpace(existingRange.range.start);
-            let scaleX, translateX;
-            // hide the curtain if:
-            if (
-            // endX would be larger than startX, which means the curtain is to the left of the RightOverlay
-            startX > endX) {
-                // fully hide it then with scaleX = 0
-                translateX = 0;
-                scaleX = 0;
-            }
-            else {
-                // clip the end of the curtain if it's going over the right side of RightOverlay
-                if (endX > clippedSpaceWidth) {
-                    //
-                    endX = clippedSpaceWidth;
-                }
-                translateX = startX;
-                scaleX = (endX - startX) / divWidth;
-            }
-            els.push({ translateX, scaleX });
-        }
-        {
-            // the right (end) curtain
-            // starts at the end of the range
-            let startX = unitSpaceToClippedSpace(existingRange.range.end);
-            // and ends at the right edge of RightOverlay (which is clippedSpaceWidth)
-            let endX = clippedSpaceWidth;
-            let scaleX, translateX;
-            // if the whole curtain falls to the right of RightOverlay, hide it
-            if (startX > endX) {
-                translateX = 0;
-                scaleX = 0;
-            }
-            else {
-                // if the left of the curtain falls on the left of RightOverlay, clip it
-                if (startX < 0) {
-                    startX = 0;
-                }
-                translateX = startX;
-                scaleX = (endX - startX) / divWidth;
-            }
-            els.push({ translateX, scaleX });
-        }
-        return (React.createElement(React.Fragment, null, els.map(({ translateX, scaleX }, i) => (React.createElement(Curtain, { key: `curtain-${i}`, enabled: true, style: {
-                height: `${height}px`,
-                transform: `translateX(${translateX}px) scaleX(${scaleX})`,
-            } })))));
-    }, [layoutP, existingRangeD]);
-};
-export default FocusRangeCurtains;

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

@@ -1,215 +0,0 @@
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import { clamp, mapValues } from 'lodash-es';
-import React, { useLayoutEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { useReceiveVerticalWheelEvent } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/VerticalScrollContainer';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
-import { snapToAll, snapToNone } from './KeyframeSnapTarget';
-const Container = styled.div `
-  position: absolute;
-
-  right: 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  ${pointerEventsAutoInNormalMode};
-
-  // hide the scrollbar on Gecko
-  scrollbar-width: none;
-
-  // hide the scrollbar on Webkit/Blink
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const HorizontallyScrollableArea = React.memo(({ layoutP, children, height }) => {
-    const { width, unitSpaceToScaledSpaceMultiplier } = usePrism(() => ({
-        width: val(layoutP.rightDims.width),
-        unitSpaceToScaledSpaceMultiplier: val(layoutP.scaledSpace.fromUnitSpace)(1),
-    }), [layoutP]);
-    const [containerRef, containerNode] = useRefAndState(null);
-    useHandlePanAndZoom(layoutP, containerNode);
-    useDragPlayheadHandlers(layoutP, containerNode);
-    useUpdateScrollFromClippedSpaceRange(layoutP, containerNode);
-    return (React.createElement(Container, { ref: containerRef, style: {
-            width: width + 'px',
-            height: height + 'px',
-            // @ts-expect-error
-            '--unitSpaceToScaledSpaceMultiplier': unitSpaceToScaledSpaceMultiplier,
-        } }, children));
-});
-export default HorizontallyScrollableArea;
-function useDragPlayheadHandlers(layoutP, containerEl) {
-    const handlers = useMemo(() => {
-        return {
-            debugName: 'HorizontallyScrollableArea',
-            onDragStart(event) {
-                if (event.target instanceof HTMLInputElement) {
-                    // editing some value
-                    return false;
-                }
-                if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
-                    // e.g. marquee selection has shiftKey
-                    return false;
-                }
-                if (event
-                    .composedPath()
-                    .some((el) => el instanceof HTMLElement && el.draggable === true)) {
-                    // Question: I think to check if we want another descendent element
-                    // to be able to take control of this drag event.
-                    // Question: e.g. for `useDragKeyframe`?
-                    return false;
-                }
-                const initialPositionInClippedSpace = event.clientX - containerEl.getBoundingClientRect().left;
-                const initialPositionInUnitSpace = clamp(val(layoutP.clippedSpace.toUnitSpace)(initialPositionInClippedSpace), 0, Infinity);
-                const setIsSeeking = val(layoutP.seeker.setIsSeeking);
-                const sequence = val(layoutP.sheet).getSequence();
-                sequence.position = initialPositionInUnitSpace;
-                const posBeforeSeek = initialPositionInUnitSpace;
-                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
-                setIsSeeking(true);
-                snapToAll();
-                return {
-                    onDrag(dx, _, event) {
-                        const deltaPos = scaledSpaceToUnitSpace(dx);
-                        const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length);
-                        let newPosition = unsnappedPos;
-                        const snapPos = DopeSnap.checkIfMouseEventSnapToPos(event, {});
-                        if (snapPos != null) {
-                            newPosition = snapPos;
-                        }
-                        sequence.position = newPosition;
-                    },
-                    onDragEnd() {
-                        setIsSeeking(false);
-                        snapToNone();
-                    },
-                };
-            },
-        };
-    }, [layoutP, containerEl]);
-    const [isDragging] = useDrag(containerEl, handlers);
-    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
-}
-function useHandlePanAndZoom(layoutP, node) {
-    const receiveVerticalWheelEvent = useReceiveVerticalWheelEvent();
-    useLayoutEffect(() => {
-        if (!node)
-            return;
-        const receiveWheelEvent = (event) => {
-            // pinch
-            if (event.ctrlKey) {
-                event.preventDefault();
-                event.stopPropagation();
-                const pivotPointInClippedSpace = event.clientX - node.getBoundingClientRect().left;
-                const pivotPointInUnitSpace = val(layoutP.clippedSpace.toUnitSpace)(pivotPointInClippedSpace);
-                const oldRange = val(layoutP.clippedSpace.range);
-                const delta = normalize(event.deltaY, [-50, 50]);
-                const scaleFactor = 1 + delta * 0.03;
-                const newRange = mapValues(oldRange, (originalPos) => {
-                    return ((originalPos - pivotPointInUnitSpace) * scaleFactor +
-                        pivotPointInUnitSpace);
-                });
-                // Set maximum scroll points based on the sequence length.
-                // This is to avoid zooming out to infinity.
-                const sequenceLength = val(layoutP.sheet).getSequence().length;
-                const maxEnd = sequenceLength + sequenceLength * 0.25;
-                val(layoutP.clippedSpace.setRange)(normalizeRange(newRange, [0, maxEnd]));
-                return;
-            }
-            // panning
-            else if (event.shiftKey) {
-                event.preventDefault();
-                event.stopPropagation();
-                const sequenceLength = val(layoutP.sheet).getSequence().length;
-                const oldRange = val(layoutP.clippedSpace.range);
-                const windowSize = oldRange.end - oldRange.start;
-                const speed = windowSize / sequenceLength;
-                // if there's no deltaY, the browser is probably assigning to deltaX because of the shiftKey
-                // it appeared that Safari + Chrome continue to use deltaY with shiftKey, while FF on macOS
-                // updates the deltaX with deltaY unchanged.
-                // this is a little awkward with track pads + shift on macOS FF, but that's not a big deal
-                // since scrolling horizontally with macOS track pads is not necessary to hold shift.
-                const delta = normalize(event.deltaY || event.deltaX, [-50, 50]);
-                const scaleFactor = delta * 0.05 * speed;
-                const newRange = mapValues(oldRange, (originalPos) => originalPos + scaleFactor);
-                val(layoutP.clippedSpace.setRange)(newRange);
-                return;
-            }
-            else {
-                receiveVerticalWheelEvent(event);
-                event.preventDefault();
-                event.stopPropagation();
-                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
-                const deltaPos = scaledSpaceToUnitSpace(event.deltaX * 1);
-                const oldRange = val(layoutP.clippedSpace.range);
-                const newRange = mapValues(oldRange, (p) => p + deltaPos);
-                const setRange = val(layoutP.clippedSpace.setRange);
-                setRange(newRange);
-                return;
-            }
-        };
-        const listenerOptions = {
-            capture: true,
-            passive: false,
-        };
-        node.addEventListener('wheel', receiveWheelEvent, listenerOptions);
-        return () => {
-            node.removeEventListener('wheel', receiveWheelEvent, listenerOptions);
-        };
-    }, [node, layoutP]);
-    useDrag(node, useMemo(() => {
-        return {
-            onDragStart(e) {
-                const oldRange = val(layoutP.clippedSpace.range);
-                const setRange = val(layoutP.clippedSpace.setRange);
-                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
-                e.preventDefault();
-                e.stopPropagation();
-                return {
-                    onDrag(dx, dy, _, __, deltaYFromLastEvent) {
-                        receiveVerticalWheelEvent({ deltaY: -deltaYFromLastEvent });
-                        const delta = -scaledSpaceToUnitSpace(dx);
-                        const newRange = mapValues(oldRange, (originalPos) => originalPos + delta);
-                        setRange(newRange);
-                    },
-                };
-            },
-            debugName: 'HorizontallyScrollableArea Middle Button Drag',
-            buttons: [1],
-            lockCSSCursorTo: 'grabbing',
-        };
-    }, [layoutP]));
-}
-function normalize(value, [min, max]) {
-    return Math.max(Math.min(value, max), min);
-}
-function normalizeRange(range, minMax) {
-    return mapValues(range, (pos) => normalize(pos, minMax));
-}
-function useUpdateScrollFromClippedSpaceRange(layoutP, node) {
-    useLayoutEffect(() => {
-        if (!node)
-            return;
-        const d = prism(() => {
-            const range = val(layoutP.clippedSpace.range);
-            const rangeStartInScaledSpace = val(layoutP.scaledSpace.fromUnitSpace)(range.start);
-            return rangeStartInScaledSpace;
-        });
-        const update = () => {
-            const rangeStartInScaledSpace = d.getValue();
-            node.scrollLeft = rangeStartInScaledSpace;
-        };
-        const untap = d.onStale(update);
-        update();
-        const timeout = setTimeout(update, 100);
-        return () => {
-            clearTimeout(timeout);
-            untap();
-        };
-    }, [layoutP, node]);
-}

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

@@ -1,55 +0,0 @@
-import { Atom } from '@tomorrowevening/theatre-dataverse';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import { DopeSnapHitZoneUI } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI';
-const HitZone = styled.div `
-  z-index: 1;
-  cursor: ew-resize;
-
-  ${DopeSnapHitZoneUI.CSS}
-
-  #pointer-root.draggingPositionInSequenceEditor & {
-    ${DopeSnapHitZoneUI.CSS_WHEN_SOMETHING_DRAGGING}
-  }
-`;
-const Container = styled.div `
-  position: absolute;
-`;
-const KeyframeSnapTarget = (props) => {
-    return (React.createElement(Container, { style: {
-            top: `${props.leaf.nodeHeight / 2}px`,
-            left: `calc(${val(props.layoutP.scaledSpace.leftPadding)}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${props.position}px))`,
-        } },
-        React.createElement(HitZone, { ...DopeSnapHitZoneUI.reactProps({
-                isDragging: false,
-                position: props.position,
-            }) })));
-};
-export default KeyframeSnapTarget;
-const stateB = new Atom({ mode: 'snapToNone' });
-export const snapPositionsStateD = stateB.prism;
-export function snapToAll() {
-    stateB.set({ mode: 'snapToAll' });
-}
-export function snapToNone() {
-    stateB.set({ mode: 'snapToNone' });
-}
-export function snapToSome(positions) {
-    stateB.set({ mode: 'snapToSome', positions });
-}
-export function collectKeyframeSnapPositions(tracksByObject, shouldIncludeKeyframe) {
-    return Object.fromEntries(Object.entries(tracksByObject).map(([objectKey, trackDataAndTrackIdByPropPath]) => [
-        objectKey,
-        Object.fromEntries(Object.entries(trackDataAndTrackIdByPropPath.trackData).map(([trackId, track]) => [
-            trackId,
-            track.keyframes
-                .filter((kf) => shouldIncludeKeyframe(kf, {
-                trackId,
-                trackData: track,
-                objectKey,
-            }))
-                .map((keyframe) => keyframe.position),
-        ])),
-    ]));
-}

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

@@ -1,69 +0,0 @@
-import React, { useLayoutEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { usePrism, useVal } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import BasicNumberInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicNumberInput';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-const greaterThanZero = (v) => isFinite(v) && v > 0;
-const Container = styled.div `
-  display: flex;
-  gap: 8px;
-  padding: 4px 8px;
-  height: 28px;
-  align-items: center;
-`;
-const Label = styled.div `
-  ${propNameTextCSS};
-  white-space: nowrap;
-`;
-const nudge = ({ deltaX }) => deltaX * 0.25;
-const LengthEditorPopover = ({ layoutP }) => {
-    const sheet = useVal(layoutP.sheet);
-    const fns = useMemo(() => {
-        let tempTransaction;
-        return {
-            temporarilySetValue(newLength) {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-                tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                    stateEditors.coreByProject.historic.sheetsById.sequence.setLength({
-                        ...sheet.address,
-                        length: newLength,
-                    });
-                });
-            },
-            discardTemporaryValue() {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-            },
-            permanentlySetValue(newLength) {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-                getStudio().transaction(({ stateEditors }) => {
-                    stateEditors.coreByProject.historic.sheetsById.sequence.setLength({
-                        ...sheet.address,
-                        length: newLength,
-                    });
-                });
-            },
-        };
-    }, [layoutP, sheet]);
-    const inputRef = useRef(null);
-    useLayoutEffect(() => {
-        inputRef.current.focus();
-    }, []);
-    return usePrism(() => {
-        const sequence = sheet.getSequence();
-        const sequenceLength = sequence.length;
-        return (React.createElement(Container, null,
-            React.createElement(Label, null, "Sequence length"),
-            React.createElement(BasicNumberInput, { value: sequenceLength, ...fns, isValid: greaterThanZero, inputRef: inputRef, nudge: nudge })));
-    }, [sheet, fns, inputRef]);
-};
-export default LengthEditorPopover;

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

@@ -1,217 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
-import { topStripHeight } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
-import { includeLockFrameStampAttrs, useLockFrameStampPosition, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { GoChevronLeft, GoChevronRight } from 'react-icons/all';
-import LengthEditorPopover from './LengthEditorPopover';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-const coverWidth = 1000;
-const colors = {
-    stripNormal: `#0000006c`,
-    stripActive: `#000000`,
-};
-const Strip = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 4px;
-  z-index: ${() => zIndexes.lengthIndicatorStrip};
-  pointer-events: none;
-
-  &:after {
-    display: block;
-    content: ' ';
-    position: absolute;
-    /* top: ${topStripHeight}px; */
-    top: 0;
-    bottom: 0;
-    left: -1px;
-    width: 1px;
-    background-color: ${colors.stripNormal};
-  }
-
-  &:hover:after,
-  &.dragging:after {
-    background-color: ${colors.stripActive};
-  }
-`;
-const ThumbContainer = styled.div `
-  position: absolute;
-  top: ${topStripHeight - 15}px;
-  width: 100px;
-  left: -50px;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-`;
-const Tooltip = styled.div `
-  margin-top: 8px;
-  font-size: 10px;
-  white-space: nowrap;
-  padding: 2px 8px;
-  border-radius: 2px;
-  ${pointerEventsAutoInNormalMode};
-  cursor: ew-resize;
-  color: #464646;
-  background-color: #0000004d;
-  display: none;
-
-  ${Strip}:hover &, ${Strip}.dragging & {
-    display: block;
-    color: white;
-    background-color: ${colors.stripActive};
-  }
-`;
-const Tumb = styled.div `
-  font-size: 10px;
-  white-space: nowrap;
-  padding: 1px 2px;
-  border-radius: 2px;
-  ${pointerEventsAutoInNormalMode};
-  justify-content: center;
-  align-items: center;
-  cursor: ew-resize;
-  color: #5d5d5d;
-  background-color: #191919;
-
-  ${Strip}:hover &, ${Strip}.dragging & {
-    color: white;
-    background-color: ${colors.stripActive};
-
-    & > svg:first-child {
-      margin-right: -1px;
-    }
-  }
-
-  & > svg:first-child {
-    margin-right: -4px;
-  }
-`;
-const Cover = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgb(23 23 23 / 43%);
-  width: ${coverWidth}px;
-  z-index: ${() => zIndexes.lengthIndicatorCover};
-  transform-origin: left top;
-
-  ${Strip}.dragging ~ &, ${Strip}:hover ~ & {
-    background-color: rgb(23 23 23 / 60%);
-  }
-`;
-const RENDER_OUT_OF_VIEW_X = -10000;
-/**
- * This appears at the end of the sequence where you can adjust the length of the sequence.
- * Kinda looks like `< >` at the top bar at end of the sequence editor.
- */
-const LengthIndicator = ({ layoutP }) => {
-    const [nodeRef, node] = useRefAndState(null);
-    const [isDragging] = useDragBulge(node, { layoutP });
-    const { node: popoverNode, toggle: togglePopover, close: closePopover, } = usePopover({ debugName: 'LengthIndicator' }, () => {
-        return (React.createElement(BasicPopover, null,
-            React.createElement(LengthEditorPopover, { layoutP: layoutP, onRequestClose: closePopover })));
-    });
-    return usePrism(() => {
-        const sheet = val(layoutP.sheet);
-        const height = val(layoutP.rightDims.height);
-        const sequence = sheet.getSequence();
-        const sequenceLength = sequence.length;
-        const startInUnitSpace = sequenceLength;
-        let startX = val(layoutP.clippedSpace.fromUnitSpace)(startInUnitSpace);
-        let endX = val(layoutP.clippedSpace.width);
-        let scaleX, translateX;
-        if (startX > endX) {
-            translateX = 0;
-            scaleX = 0;
-        }
-        else {
-            if (startX < 0) {
-                startX = 0;
-            }
-            translateX = startX;
-            scaleX = (endX - startX) / coverWidth;
-        }
-        return (React.createElement(React.Fragment, null,
-            popoverNode,
-            React.createElement(Strip, { style: {
-                    height: height + 'px',
-                    transform: `translateX(${translateX === 0 ? RENDER_OUT_OF_VIEW_X : translateX}px)`,
-                }, className: isDragging ? 'dragging' : '' },
-                React.createElement(ThumbContainer, null,
-                    React.createElement(Tumb, { ref: nodeRef, 
-                        // title="Length of the sequence. Drag or click to change."
-                        onClick: (e) => {
-                            togglePopover(e, node);
-                        }, ...includeLockFrameStampAttrs('hide') },
-                        React.createElement(GoChevronLeft, null),
-                        React.createElement(GoChevronRight, null)),
-                    React.createElement(Tooltip, null,
-                        "Sequence length:",
-                        ' ',
-                        sequence.positionFormatter.formatBasic(sequenceLength)))),
-            React.createElement(Cover, { title: "Length", style: {
-                    height: height + 'px',
-                    transform: `translateX(${translateX}px) scale(${scaleX}, 1)`,
-                } })));
-    }, [layoutP, nodeRef, isDragging, popoverNode]);
-};
-function useDragBulge(node, props) {
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const gestureHandlers = useMemo(() => {
-        return {
-            debugName: 'LengthIndicator/useDragBulge',
-            lockCSSCursorTo: 'ew-resize',
-            onDragStart(event) {
-                let tempTransaction;
-                const propsAtStartOfDrag = propsRef.current;
-                const sheet = val(propsRef.current.layoutP.sheet);
-                const initialLength = sheet.getSequence().length;
-                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
-                return {
-                    onDrag(dx, dy, event) {
-                        const delta = toUnitSpace(dx);
-                        if (tempTransaction) {
-                            tempTransaction.discard();
-                            tempTransaction = undefined;
-                        }
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            stateEditors.coreByProject.historic.sheetsById.sequence.setLength({
-                                ...sheet.address,
-                                length: initialLength + delta,
-                            });
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        if (dragHappened) {
-                            if (tempTransaction) {
-                                tempTransaction.commit();
-                            }
-                        }
-                        else {
-                            if (tempTransaction) {
-                                tempTransaction.discard();
-                            }
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    const [isDragging] = useDrag(node, gestureHandlers);
-    useLockFrameStampPosition(isDragging, -1);
-    return [isDragging];
-}
-export default LengthIndicator;

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

@@ -1,25 +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 RightRow from './Row';
-import BasicKeyframedTrack from './BasicKeyframedTrack/BasicKeyframedTrack';
-import { useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
-const PrimitivePropRow = ({ leaf, layoutP }) => {
-    const logger = useLogger('PrimitivePropRow', leaf.pathToProp.join());
-    return usePrism(() => {
-        const { sheetObject } = leaf;
-        const { trackId } = leaf;
-        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') {
-            logger.errorDev(`trackData type ${trackData?.type} is not yet supported on the sequence editor`);
-            return (React.createElement(RightRow, { leaf: leaf, isCollapsed: false, node: React.createElement("div", null) }));
-        }
-        else {
-            const node = (React.createElement(BasicKeyframedTrack, { layoutP: layoutP, trackData: trackData, leaf: leaf }));
-            return React.createElement(RightRow, { leaf: leaf, isCollapsed: false, node: node });
-        }
-    }, [leaf, layoutP]);
-};
-export default PrimitivePropRow;