@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

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

@@ -0,0 +1,12 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import React from 'react';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+declare const PlayheadPositionPopover: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    /**
+     * Called when user hits enter/escape
+     */
+    onRequestClose: (reason: string) => void;
+}>;
+export default PlayheadPositionPopover;
+//# sourceMappingURL=PlayheadPositionPopover.d.ts.map

package/dist/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadPositionPopover.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAMvH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAoB/D,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CAwDA,CAAA;AAED,eAAe,uBAAuB,CAAA"}

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

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

@@ -0,0 +1,8 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+declare const RightOverlay: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default RightOverlay;
+//# sourceMappingURL=RightOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/RightOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAGvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAgBA,CAAA;AAED,eAAe,YAAY,CAAA"}

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

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

@@ -0,0 +1,13 @@
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+export declare const topStripHeight = 18;
+export declare const topStripTheme: {
+    backgroundColor: string;
+    borderColor: string;
+};
+declare const TopStrip: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default TopStrip;
+//# sourceMappingURL=TopStrip.d.ts.map

package/dist/panels/SequenceEditorPanel/RightOverlay/TopStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopStrip.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAMvH,eAAO,MAAM,cAAc,KAAK,CAAA;AAEhC,eAAO,MAAM,aAAa;;;CAGzB,CAAA;AAcD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAAC,CAarE,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare const zIndexes: {
+    rightBackground: number;
+    scrollableArea: number;
+    rightOverlay: number;
+    lengthIndicatorCover: number;
+    lengthIndicatorStrip: number;
+    playhead: number;
+    currentFrameStamp: number;
+    marker: number;
+    horizontalScrollbar: number;
+};
+declare const SequenceEditorPanel: React.VFC<{}>;
+export default SequenceEditorPanel;
+//# sourceMappingURL=SequenceEditorPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SequenceEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAiB,MAAM,OAAO,CAAA;AA0CrC,eAAO,MAAM,QAAQ;;;;;;;;;;CAqBjB,CAAA;AAoBJ,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,CAUtC,CAAA;AA+HD,eAAe,mBAAmB,CAAA"}

package/dist/panels/SequenceEditorPanel/SequenceEditorPanel.js

@@ -0,0 +1,179 @@
+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);
+        }
+    };
+};

package/dist/panels/SequenceEditorPanel/VerticalScrollContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type ReceiveVerticalWheelEventFn = (ev: Pick<WheelEvent, 'deltaY'>) => void;
+/**
+ * See {@link VerticalScrollContainer} and references for how to use this.
+ */
+export declare const useReceiveVerticalWheelEvent: () => ReceiveVerticalWheelEventFn;
+/**
+ * This is used in the sequence editor where we block wheel events to handle
+ * pan/zoom on the time axis. The issue this solves, is that when blocking those
+ * wheel events, we prevent the vertical scroll events from being fired. This container
+ * comes with a context and a hook (see {@link useReceiveVerticalWheelEvent}) that allows
+ * the code that traps the wheel events to pass them to the vertical scroller root, which
+ * we then use to manually dispatch scroll events.
+ */
+declare const VerticalScrollContainer: React.FC<{
+    children: React.ReactNode;
+}>;
+export default VerticalScrollContainer;
+//# sourceMappingURL=VerticalScrollContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalScrollContainer.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAqB3E,KAAK,2BAA2B,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,KAAK,IAAI,CAAA;AAI3E;;GAEG;AACH,eAAO,MAAM,4BAA4B,QAAO,2BAC/B,CAAA;AAEjB;;;;;;;GAOG;AACH,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAcA,CAAA;AAED,eAAe,uBAAuB,CAAA"}