@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerEditorPopover.js

@@ -1,65 +0,0 @@
-import React, { useLayoutEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { useVal } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-import BasicStringInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicStringInput';
-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 MarkerEditorPopover = ({ layoutP, marker }) => {
-    const sheet = useVal(layoutP.sheet);
-    const fns = useMemo(() => {
-        let tempTransaction;
-        return {
-            temporarilySetValue(newLabel) {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-                tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                    stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.updateMarker({
-                        sheetAddress: sheet.address,
-                        markerId: marker.id,
-                        label: newLabel,
-                    });
-                });
-            },
-            discardTemporaryValue() {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-            },
-            permanentlySetValue(newLabel) {
-                if (tempTransaction) {
-                    tempTransaction.discard();
-                    tempTransaction = undefined;
-                }
-                getStudio().transaction(({ stateEditors }) => {
-                    stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.updateMarker({
-                        sheetAddress: sheet.address,
-                        markerId: marker.id,
-                        label: newLabel,
-                    });
-                });
-            },
-        };
-    }, [layoutP, sheet]);
-    const inputRef = useRef(null);
-    useLayoutEffect(() => {
-        inputRef.current.focus();
-    }, []);
-    return (React.createElement(Container, null,
-        React.createElement(BasicStringInput, { value: marker.label ?? '', ...fns, isValid: () => true, inputRef: inputRef })));
-};
-export default MarkerEditorPopover;

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

@@ -1,13 +0,0 @@
-import { useVal } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import React from 'react';
-import MarkerDot from './MarkerDot';
-const Markers = ({ layoutP, }) => {
-    const sheetAddress = useVal(layoutP.sheet.address);
-    const markerSetP = getStudio().atomP.historic.projects.stateByProjectId[sheetAddress.projectId]
-        .stateBySheetId[sheetAddress.sheetId].sequenceEditor.markerSet;
-    const markerAllIds = useVal(markerSetP.allIds);
-    return (React.createElement(React.Fragment, null, markerAllIds &&
-        Object.keys(markerAllIds).map((markerId) => (React.createElement(MarkerDot, { key: markerId, layoutP: layoutP, markerId: markerId })))));
-};
-export default Markers;

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

@@ -1,265 +0,0 @@
-import RoomToClick from '@tomorrowevening/theatre-studio/uiComponents/RoomToClick';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import { usePrism, useVal } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import clamp from 'lodash-es/clamp';
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
-import { includeLockFrameStampAttrs, useLockFrameStampPosition, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
-import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-import PlayheadPositionPopover from './PlayheadPositionPopover';
-import { getIsPlayheadAttachedToFocusRange } from '@tomorrowevening/theatre-studio/UIRoot/useKeyboardShortcuts';
-import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { generateSequenceMarkerId } from '@tomorrowevening/theatre-shared/utils/ids';
-import DopeSnap from './DopeSnap';
-import { snapToAll, snapToNone, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
-const Container = styled.div `
-  --thumbColor: #00e0ff;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  height: 100%;
-  z-index: ${() => zIndexes.playhead};
-  pointer-events: none;
-
-  display: ${(props) => (props.isVisible ? 'block' : 'none')};
-`;
-const Rod = styled.div `
-  position: absolute;
-  top: 8px;
-  width: 0;
-  height: calc(100% - 8px);
-  border-left: 1px solid #27e0fd;
-  z-index: 10;
-  pointer-events: none;
-
-  #pointer-root.draggingPositionInSequenceEditor &:not(.seeking) {
-    /* pointer-events: auto; */
-    /* cursor: var(${lockedCursorCssVarName}); */
-
-    &:after {
-      position: absolute;
-      inset: -8px;
-      display: block;
-      content: ' ';
-    }
-  }
-`;
-const Thumb = styled.div `
-  background-color: var(--thumbColor);
-  position: absolute;
-  width: 5px;
-  height: 13px;
-  top: -4px;
-  left: -2px;
-  z-index: 11;
-  cursor: ew-resize;
-  --sunblock-color: #1f2b2b;
-
-  ${pointerEventsAutoInNormalMode};
-
-  ${Container}.seeking > & {
-    pointer-events: none !important;
-  }
-
-  #pointer-root.draggingPositionInSequenceEditor
-    ${Container}:not(.seeking)
-    > & {
-    pointer-events: auto;
-    cursor: var(${lockedCursorCssVarName});
-  }
-
-  ${Container}.playheadattachedtofocusrange > & {
-    top: -8px;
-    --sunblock-color: #005662;
-    &:before,
-    &:after {
-      border-bottom-width: 8px;
-    }
-  }
-
-  &:before {
-    position: absolute;
-    display: block;
-    content: ' ';
-    left: -2px;
-    width: 0;
-    height: 0;
-    border-bottom: 4px solid var(--sunblock-color);
-    border-left: 2px solid transparent;
-  }
-
-  &:after {
-    position: absolute;
-    display: block;
-    content: ' ';
-    right: -2px;
-    width: 0;
-    height: 0;
-    border-bottom: 4px solid var(--sunblock-color);
-    border-right: 2px solid transparent;
-  }
-`;
-const Squinch = styled.div `
-  position: absolute;
-  left: 1px;
-  right: 1px;
-  top: 13px;
-  border-top: 3px solid var(--thumbColor);
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-  pointer-events: none;
-
-  /* ${Container}.playheadattachedtofocusrange & {
-    top: 10px;
-    &:before,
-    &:after {
-      height: 15px;
-    }
-  } */
-
-  &:before {
-    position: absolute;
-    display: block;
-    content: ' ';
-    top: -4px;
-    left: -2px;
-    height: 8px;
-    width: 2px;
-    background: none;
-    border-radius: 0 100% 0 0;
-    border-top: 1px solid var(--thumbColor);
-    border-right: 1px solid var(--thumbColor);
-  }
-
-  &:after {
-    position: absolute;
-    display: block;
-    content: ' ';
-    top: -4px;
-    right: -2px;
-    height: 8px;
-    width: 2px;
-    background: none;
-    border-radius: 100% 0 0 0;
-    border-top: 1px solid var(--thumbColor);
-    border-left: 1px solid var(--thumbColor);
-  }
-`;
-const Tooltip = styled.div `
-  display: none;
-  position: absolute;
-  top: -20px;
-  left: 4px;
-  padding: 0 2px;
-  transform: translateX(-50%);
-  background: #1a1a1a;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 10px;
-  line-height: 18px;
-  text-align: center;
-  ${Thumb}:hover &, ${Container}.seeking & {
-    display: block;
-  }
-`;
-const Playhead = ({ layoutP, }) => {
-    const [thumbRef, thumbNode] = useRefAndState(null);
-    const { node: popoverNode, toggle: togglePopover, close: closePopover, } = usePopover({ debugName: 'Playhead' }, () => {
-        return (React.createElement(BasicPopover, null,
-            React.createElement(PlayheadPositionPopover, { layoutP: layoutP, onRequestClose: closePopover })));
-    });
-    const gestureHandlers = useMemo(() => {
-        return {
-            debugName: 'RightOverlay/Playhead',
-            onDragStart() {
-                const sequence = val(layoutP.sheet).getSequence();
-                const posBeforeSeek = sequence.position;
-                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
-                const setIsSeeking = val(layoutP.seeker.setIsSeeking);
-                setIsSeeking(true);
-                snapToAll();
-                return {
-                    onDrag(dx, _, event) {
-                        const deltaPos = scaledSpaceToUnitSpace(dx);
-                        sequence.position =
-                            DopeSnap.checkIfMouseEventSnapToPos(event, {
-                                ignore: thumbNode,
-                            }) ??
-                                // unsnapped
-                                clamp(posBeforeSeek + deltaPos, 0, sequence.length);
-                    },
-                    onDragEnd(dragHappened) {
-                        setIsSeeking(false);
-                        snapToNone();
-                    },
-                    onClick(e) {
-                        togglePopover(e, thumbRef.current);
-                    },
-                };
-            },
-        };
-    }, [layoutP, thumbNode]);
-    const [isDragging] = useDrag(thumbNode, gestureHandlers);
-    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
-    // hide the frame stamp when seeking
-    useLockFrameStampPosition(useVal(layoutP.seeker.isSeeking) || isDragging, -1);
-    const [contextMenu] = usePlayheadContextMenu(thumbNode, {
-        // pass in a pointer to ensure we aren't spending retrieval on every render
-        layoutP,
-    });
-    return usePrism(() => {
-        const isSeeking = val(layoutP.seeker.isSeeking);
-        const sequence = val(layoutP.sheet).getSequence();
-        const isPlayheadAttachedToFocusRange = val(getIsPlayheadAttachedToFocusRange(sequence));
-        const posInUnitSpace = sequence.positionPrism.getValue();
-        const posInClippedSpace = val(layoutP.clippedSpace.fromUnitSpace)(posInUnitSpace);
-        const isVisible = posInClippedSpace >= 0 &&
-            posInClippedSpace <= val(layoutP.clippedSpace.width);
-        return (React.createElement(React.Fragment, null,
-            contextMenu,
-            popoverNode,
-            React.createElement(Container, { isVisible: isVisible, style: { transform: `translate3d(${posInClippedSpace}px, 0, 0)` }, className: `${isSeeking && 'seeking'} ${isPlayheadAttachedToFocusRange && 'playheadattachedtofocusrange'}`, ...includeLockFrameStampAttrs('hide') },
-                React.createElement(Thumb, { ref: thumbRef, ...DopeSnap.includePositionSnapAttrs(posInUnitSpace) },
-                    React.createElement(RoomToClick, { room: 8 }),
-                    React.createElement(Squinch, null),
-                    React.createElement(Tooltip, null, sequence.positionFormatter.formatForPlayhead(sequence.closestGridPosition(posInUnitSpace)))),
-                React.createElement(Rod, { ...DopeSnap.includePositionSnapAttrs(posInUnitSpace), className: isSeeking ? 'seeking' : '' }))));
-    }, [layoutP, thumbRef, popoverNode]);
-};
-export default Playhead;
-function usePlayheadContextMenu(node, options) {
-    return useContextMenu(node, {
-        menuItems() {
-            return [
-                {
-                    label: 'Place marker',
-                    callback: () => {
-                        getStudio().transaction(({ stateEditors }) => {
-                            // only retrieve val on callback to reduce unnecessary work on every use
-                            const sheet = val(options.layoutP.sheet);
-                            const sheetSequence = sheet.getSequence();
-                            stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.replaceMarkers({
-                                sheetAddress: sheet.address,
-                                markers: [
-                                    {
-                                        id: generateSequenceMarkerId(),
-                                        position: sheetSequence.position,
-                                    },
-                                ],
-                                snappingFunction: sheetSequence.closestGridPosition,
-                            });
-                        });
-                    },
-                },
-            ];
-        },
-    });
-}

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

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import BasicNumberInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicNumberInput';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-import { useLayoutEffect, useMemo, useRef } from 'react';
-import React from 'react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import clamp from 'lodash-es/clamp';
-const greaterThanOrEqualToZero = (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 PlayheadPositionPopover = ({ layoutP, onRequestClose }) => {
-    const sheet = val(layoutP.sheet);
-    const sequence = sheet.getSequence();
-    const fns = useMemo(() => {
-        let tempPosition;
-        const originalPosition = sequence.position;
-        return {
-            temporarilySetValue(newPosition) {
-                if (tempPosition) {
-                    tempPosition = undefined;
-                }
-                tempPosition = clamp(newPosition, 0, sequence.length);
-                sequence.position = tempPosition;
-            },
-            discardTemporaryValue() {
-                if (tempPosition) {
-                    tempPosition = undefined;
-                    sequence.position = originalPosition;
-                    onRequestClose('discardTemporaryValue');
-                }
-            },
-            permanentlySetValue(newPosition) {
-                if (tempPosition) {
-                    tempPosition = undefined;
-                }
-                sequence.position = clamp(newPosition, 0, sequence.length);
-                onRequestClose('permanentlySetValue');
-            },
-        };
-    }, [layoutP, sequence]);
-    const inputRef = useRef(null);
-    useLayoutEffect(() => {
-        inputRef.current.focus();
-    }, []);
-    return usePrism(() => {
-        const sequence = sheet.getSequence();
-        const value = Number(val(sequence.pointer.position).toFixed(3));
-        return (React.createElement(Container, null,
-            React.createElement(Label, null, "Sequence position"),
-            React.createElement(BasicNumberInput, { value: value, ...fns, isValid: greaterThanOrEqualToZero, inputRef: inputRef, nudge: nudge })));
-    }, [sheet, fns, inputRef]);
-};
-export default PlayheadPositionPopover;

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

@@ -1,35 +0,0 @@
-import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import LengthIndicator from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator';
-import FrameStamp from './FrameStamp';
-import HorizontalScrollbar from './HorizontalScrollbar';
-import Playhead from './Playhead';
-import TopStrip from './TopStrip';
-import FocusRangeCurtains from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/FocusRangeCurtains';
-import Markers from './Markers/Markers';
-const Container = styled.div `
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: ${() => zIndexes.rightOverlay};
-  overflow: visible;
-  pointer-events: none;
-`;
-const RightOverlay = ({ layoutP }) => {
-    return usePrism(() => {
-        const width = val(layoutP.rightDims.width);
-        return (React.createElement(Container, { style: { width: width + 'px' } },
-            React.createElement(Playhead, { layoutP: layoutP }),
-            React.createElement(HorizontalScrollbar, { layoutP: layoutP }),
-            React.createElement(FrameStamp, { layoutP: layoutP }),
-            React.createElement(TopStrip, { layoutP: layoutP }),
-            React.createElement(Markers, { layoutP: layoutP }),
-            React.createElement(LengthIndicator, { layoutP: layoutP }),
-            React.createElement(FocusRangeCurtains, { layoutP: layoutP })));
-    }, [layoutP]);
-};
-export default RightOverlay;

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

@@ -1,31 +0,0 @@
-import { useVal } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import styled from 'styled-components';
-import StampsGrid from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid';
-import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import FocusRangeZone from './FocusRangeZone/FocusRangeZone';
-export const topStripHeight = 18;
-export const topStripTheme = {
-    backgroundColor: `#1f2120eb`,
-    borderColor: `#1c1e21`,
-};
-const Container = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: ${topStripHeight}px;
-  box-sizing: border-box;
-  background: ${topStripTheme.backgroundColor};
-  border-bottom: 1px solid ${topStripTheme.borderColor};
-  ${pointerEventsAutoInNormalMode};
-`;
-const TopStrip = ({ layoutP, }) => {
-    const width = useVal(layoutP.rightDims.width);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Container, { ...includeLockFrameStampAttrs('hide') },
-            React.createElement(StampsGrid, { layoutP: layoutP, width: width, height: topStripHeight }),
-            React.createElement(FocusRangeZone, { layoutP: layoutP }))));
-};
-export default TopStrip;

package/dist/panels/SequenceEditorPanel/SequenceEditorPanel.js

@@ -1,179 +0,0 @@
-import { getOutlineSelection } from '@tomorrowevening/theatre-studio/selectors';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { valToAtom } from '@tomorrowevening/theatre-shared/utils/valToAtom';
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import DopeSheet from './DopeSheet/DopeSheet';
-import GraphEditor from './GraphEditor/GraphEditor';
-import { sequenceEditorPanelLayout } from './layout/layout';
-import RightOverlay from './RightOverlay/RightOverlay';
-import BasePanel, { usePanel } from '@tomorrowevening/theatre-studio/panels/BasePanel/BasePanel';
-import PanelDragZone from '@tomorrowevening/theatre-studio/panels/BasePanel/PanelDragZone';
-import PanelWrapper from '@tomorrowevening/theatre-studio/panels/BasePanel/PanelWrapper';
-import FrameStampPositionProvider from './FrameStampPositionProvider';
-import { isSheet, isSheetObject } from '@tomorrowevening/theatre-shared/instanceTypes';
-import { uniq } from 'lodash-es';
-import GraphEditorToggle from './GraphEditorToggle';
-import { panelZIndexes, TitleBar, TitleBar_Piece, TitleBar_Punctuation, } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
-import { usePresenceListenersOnRootElement } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-const Container = styled(PanelWrapper) `
-  z-index: ${panelZIndexes.sequenceEditorPanel};
-  box-shadow: 2px 2px 0 rgb(0 0 0 / 11%);
-`;
-const LeftBackground = styled.div `
-  background-color: rgba(40, 43, 47, 0.99);
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: -1;
-  pointer-events: none;
-`;
-export const zIndexes = (() => {
-    const s = {
-        rightBackground: 0,
-        scrollableArea: 0,
-        rightOverlay: 0,
-        lengthIndicatorCover: 0,
-        lengthIndicatorStrip: 0,
-        playhead: 0,
-        currentFrameStamp: 0,
-        marker: 0,
-        horizontalScrollbar: 0,
-    };
-    // sort the z-indexes
-    let i = -1;
-    for (const key of Object.keys(s)) {
-        s[key] = i;
-        i++;
-    }
-    return s;
-})();
-const Header_Container = styled(PanelDragZone) `
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-`;
-const defaultPosition = {
-    edges: {
-        left: { from: 'screenLeft', distance: 0.1 },
-        right: { from: 'screenRight', distance: 0.2 },
-        top: { from: 'screenBottom', distance: 0.4 },
-        bottom: { from: 'screenBottom', distance: 0.01 },
-    },
-};
-const minDims = { width: 800, height: 200 };
-const SequenceEditorPanel = (props) => {
-    return (React.createElement(BasePanel, { panelId: 'sequenceEditor', defaultPosition: defaultPosition, minDims: minDims },
-        React.createElement(Content, null)));
-};
-const Content = () => {
-    const { dims } = usePanel();
-    const [containerNode, setContainerNode] = useState(null);
-    usePresenceListenersOnRootElement(containerNode);
-    return usePrism(() => {
-        const panelSize = prism.memo('panelSize', () => {
-            const width = dims.width;
-            const height = dims.height;
-            return {
-                width: width,
-                height: height,
-                widthWithoutBorder: width - 2,
-                heightWithoutBorder: height - 4,
-                screenX: dims.left,
-                screenY: dims.top,
-            };
-        }, [dims]);
-        const selectedSheets = uniq(getOutlineSelection()
-            .filter((s) => isSheet(s) || isSheetObject(s))
-            .map((s) => (isSheetObject(s) ? s.sheet : s)));
-        const selectedTemplates = uniq(selectedSheets.map((s) => s.template));
-        if (selectedTemplates.length !== 1)
-            return React.createElement(React.Fragment, null);
-        const sheet = selectedSheets[0];
-        if (!sheet)
-            return React.createElement(React.Fragment, null);
-        const panelSizeP = valToAtom('panelSizeP', panelSize).pointer;
-        // We make a unique key based on the sheet's address, so that
-        // <Left /> and <Right />
-        // don't have to listen to changes in sheet
-        const key = prism.memo('key', () => JSON.stringify(sheet.address), [sheet]);
-        const layoutP = prism
-            .memo('layout', () => {
-            return sequenceEditorPanelLayout(sheet, panelSizeP);
-        }, [sheet, panelSizeP])
-            .getValue();
-        // Show sequence editor if there are keyframed properties, or if there's a sequence duration or markers
-        const hasChildren = val(layoutP.tree.children).length > 0;
-        const sequenceState = val(sheet.project.pointers.historic.sheetsById[sheet.address.sheetId]
-            .sequence);
-        const hasSequenceData = (sequenceState?.length && sequenceState.length > 0) ||
-            (sequenceState?.markers && sequenceState.markers.length > 0);
-        if (!hasChildren && !hasSequenceData)
-            return React.createElement(React.Fragment, null);
-        const containerRef = prism.memo('containerRef', preventHorizontalWheelEvents, []);
-        const graphEditorAvailable = val(layoutP.graphEditorDims.isAvailable);
-        const graphEditorOpen = val(layoutP.graphEditorDims.isOpen);
-        return (React.createElement(Container, { ref: (elt) => {
-                containerRef(elt);
-                if (elt !== containerNode) {
-                    setContainerNode(elt);
-                }
-            } },
-            React.createElement(LeftBackground, { style: { width: `${val(layoutP.leftDims.width)}px` } }),
-            React.createElement(FrameStampPositionProvider, { layoutP: layoutP },
-                React.createElement(Header, { layoutP: layoutP }),
-                React.createElement(DopeSheet, { key: key + '-dopeSheet', layoutP: layoutP }),
-                graphEditorOpen && (React.createElement(GraphEditor, { key: key + '-graphEditor', layoutP: layoutP })),
-                graphEditorAvailable && React.createElement(GraphEditorToggle, { layoutP: layoutP }),
-                React.createElement(RightOverlay, { layoutP: layoutP }))));
-    }, [dims, containerNode]);
-};
-const Header = ({ layoutP, }) => {
-    return usePrism(() => {
-        const sheet = val(layoutP.sheet);
-        return (React.createElement(Header_Container, { style: {
-                width: val(layoutP.leftDims.width),
-            } },
-            React.createElement(TitleBar, null,
-                React.createElement(TitleBar_Piece, null,
-                    sheet.address.sheetId,
-                    " "),
-                React.createElement(TitleBar_Punctuation, null,
-                    ':',
-                    "\u00A0"),
-                React.createElement(TitleBar_Piece, null,
-                    sheet.address.sheetInstanceId,
-                    " "),
-                React.createElement(TitleBar_Punctuation, null,
-                    "\u00A0",
-                    '>',
-                    "\u00A0"),
-                React.createElement(TitleBar_Piece, null, "Sequence"))));
-    }, [layoutP]);
-};
-export default SequenceEditorPanel;
-const preventHorizontalWheelEvents = () => {
-    let lastNode = null;
-    const listenerOptions = {
-        passive: false,
-        capture: false,
-    };
-    const receiveWheelEvent = (event) => {
-        if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    return (node) => {
-        if (lastNode !== node && lastNode) {
-            lastNode.removeEventListener('wheel', receiveWheelEvent, listenerOptions);
-        }
-        lastNode = node;
-        if (node) {
-            node.addEventListener('wheel', receiveWheelEvent, listenerOptions);
-        }
-    };
-};