@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,65 @@
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import styled from 'styled-components';
+import { stampsGridTheme } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid';
+import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
+import { topStripTheme } from './TopStrip';
+import { FrameStampPositionType, useFrameStampPositionD, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: 0px;
+`;
+const Label = styled.div `
+  position: absolute;
+  top: 16px;
+  font-size: ${stampsGridTheme.stampFontSize};
+  color: ${stampsGridTheme.fullUnitStampColor};
+  text-align: center;
+  transform: translateX(-50%);
+  background: ${topStripTheme.backgroundColor};
+  padding: 1px 8px;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  z-index: ${() => zIndexes.currentFrameStamp};
+`;
+const Line = styled.div `
+  position: absolute;
+  top: 5px;
+  left: -0px;
+  bottom: 0;
+  width: 0.5px;
+  background: rgba(100, 100, 100, 0.2);
+  pointer-events: none;
+`;
+const FrameStamp = React.memo(({ layoutP }) => {
+    const [posInUnitSpace, posType] = useVal(useFrameStampPositionD());
+    const unitSpaceToClippedSpace = useVal(layoutP.clippedSpace.fromUnitSpace);
+    const { sequence, formatter, clippedSpaceWidth } = usePrism(() => {
+        const sequence = val(layoutP.sheet).getSequence();
+        const clippedSpaceWidth = val(layoutP.clippedSpace.width);
+        return { sequence, formatter: sequence.positionFormatter, clippedSpaceWidth };
+    }, [layoutP]);
+    if (posInUnitSpace == -1) {
+        return React.createElement(React.Fragment, null);
+    }
+    const snappedPosInUnitSpace = posType === FrameStampPositionType.free
+        ? sequence.closestGridPosition(posInUnitSpace)
+        : posInUnitSpace;
+    const posInClippedSpace = unitSpaceToClippedSpace(snappedPosInUnitSpace);
+    const isVisible = posInClippedSpace >= 0 && posInClippedSpace <= clippedSpaceWidth;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, null,
+            React.createElement(Label, { style: {
+                    opacity: isVisible ? 1 : 0,
+                    transform: `translate3d(calc(${posInClippedSpace}px - 50%), 0, 0)`,
+                } }, formatter.formatForPlayhead(snappedPosInUnitSpace)),
+            React.createElement(Line, { posType: posType, style: {
+                    opacity: isVisible ? 1 : 0,
+                    transform: `translate3d(${posInClippedSpace}px, 0, 0)`,
+                } })),
+        ' '));
+});
+export default FrameStamp;

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

@@ -0,0 +1,11 @@
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+/**
+ * The little scrollbar on the bottom of the Right side
+ */
+declare const HorizontalScrollbar: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default HorizontalScrollbar;
+//# sourceMappingURL=HorizontalScrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScrollbar.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAGvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAI/D,OAAO,KAAuC,MAAM,OAAO,CAAA;AA8G3D;;GAEG;AACH,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAkMA,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -0,0 +1,235 @@
+import { useVal } from '@tomorrowevening/theatre-react';
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import mapValues from 'lodash-es/mapValues';
+import { position } from 'polished';
+import React, { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
+import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+const Container = styled.div `
+  --threadHeight: 6px;
+  --bg-inactive: #32353b;
+  --bg-active: #5b5c5d;
+  position: absolute;
+  height: 0;
+  width: 100%;
+  left: 12px;
+  /* bottom: 8px; */
+  z-index: ${() => zIndexes.horizontalScrollbar};
+  ${pointerEventsAutoInNormalMode}
+`;
+const TimeThread = styled.div `
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--threadHeight);
+`;
+const RangeBar = styled.div `
+  position: absolute;
+  height: 5px;
+  background: var(--bg-inactive);
+  cursor: ew-resize;
+  z-index: 2;
+
+  &:hover,
+  &:active {
+    background: var(--bg-active);
+  }
+
+  &:after {
+    ${position('absolute', '-4px')};
+    display: block;
+    content: ' ';
+  }
+`;
+const RangeHandle = styled.div `
+  position: absolute;
+  height: 5px;
+  width: 7px;
+  left: 0;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  display: block;
+
+  &:hover:before {
+    background: var(--bg-active);
+  }
+
+  &:before {
+    ${position('absolute', '0')};
+    display: block;
+    content: ' ';
+    background: var(--bg-inactive);
+    border-radius: 0 2px 2px 0;
+  }
+
+  &:after {
+    ${position('absolute', '-4px')};
+    display: block;
+    content: ' ';
+  }
+`;
+const RangeStartHandle = styled(RangeHandle) `
+  left: calc(-1 * 7px);
+  cursor: w-resize;
+  &:before {
+    transform: scaleX(-1);
+  }
+`;
+const RangeEndHandle = styled(RangeHandle) `
+  cursor: e-resize;
+  left: 0px;
+`;
+const Tooltip = styled.div `
+  display: ${(props) => (props.active ? 'block' : 'none')};
+  position: absolute;
+  top: -20px;
+  left: 4px;
+  padding: 0 4px;
+  transform: translateX(-50%);
+  background: #131d1f;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+
+  ${RangeStartHandle}:hover &,
+  ${RangeEndHandle}:hover &,
+  ${RangeBar}:hover ~ ${RangeStartHandle} &,
+  ${RangeBar}:hover ~ ${RangeEndHandle} & {
+    display: block;
+  }
+`;
+/**
+ * The little scrollbar on the bottom of the Right side
+ */
+const HorizontalScrollbar = ({ layoutP }) => {
+    const unitPosToHumanReadablePos = useCallback((n) => n.toFixed(2), []);
+    // const dd = usePrism(() => val(layoutP.sheet).getSequence().positionFormatter.formatForPlayhead, [layoutP])
+    const relevantValuesD = useMemo(() => prism(() => {
+        const rightWidth = val(layoutP.rightDims.width) - 25;
+        const clippedSpaceRange = val(layoutP.clippedSpace.range);
+        const sequenceLength = val(layoutP.sheet).getSequence().length;
+        const assumedLengthOfSequence = Math.max(clippedSpaceRange.end, sequenceLength);
+        const rangeStartX = (clippedSpaceRange.start / assumedLengthOfSequence) * rightWidth;
+        const rangeEndX = (clippedSpaceRange.end / assumedLengthOfSequence) * rightWidth;
+        return {
+            rightWidth,
+            clippedSpaceRange,
+            sequenceLength,
+            assumedLengthOfSequence,
+            rangeStartX,
+            rangeEndX,
+            bottom: val(layoutP.horizontalScrollbarDims.bottom),
+        };
+    }), [layoutP]);
+    const { rangeStartX, rangeEndX, clippedSpaceRange, bottom } = useVal(relevantValuesD);
+    const [beingDragged, setBeingDragged] = useState('nothing');
+    const handles = useMemo(() => {
+        let valuesBeforeDrag = val(relevantValuesD);
+        let noteValuesBeforeDrag = () => {
+            valuesBeforeDrag = val(relevantValuesD);
+        };
+        const deltaXToDeltaPos = (dx) => {
+            const asAFractionOfRightWidth = dx / valuesBeforeDrag.rightWidth;
+            return asAFractionOfRightWidth * valuesBeforeDrag.assumedLengthOfSequence;
+        };
+        const self = {
+            onRangeDragStart() {
+                noteValuesBeforeDrag();
+                return {
+                    onDrag(dx) {
+                        setBeingDragged('both');
+                        const deltaPosInUnitSpace = deltaXToDeltaPos(dx);
+                        const newRange = mapValues(valuesBeforeDrag.clippedSpaceRange, (p) => p + deltaPosInUnitSpace);
+                        val(layoutP.clippedSpace.setRange)(newRange);
+                    },
+                    onDragEnd() {
+                        setBeingDragged('nothing');
+                    },
+                };
+            },
+            onRangeStartDragStart() {
+                noteValuesBeforeDrag();
+                return {
+                    onDrag(dx) {
+                        setBeingDragged('start');
+                        const deltaPosInUnitSpace = deltaXToDeltaPos(dx);
+                        const newRange = {
+                            start: valuesBeforeDrag.clippedSpaceRange.start + deltaPosInUnitSpace,
+                            end: valuesBeforeDrag.clippedSpaceRange.end,
+                        };
+                        if (newRange.start > newRange.end - 1) {
+                            newRange.start = newRange.end - 1;
+                        }
+                        if (newRange.start <= 0) {
+                            newRange.start = 0;
+                        }
+                        val(layoutP.clippedSpace.setRange)(newRange);
+                    },
+                    onDragEnd() {
+                        setBeingDragged('nothing');
+                    },
+                };
+            },
+            onRangeEndDragStart() {
+                noteValuesBeforeDrag();
+                return {
+                    onDrag(dx) {
+                        setBeingDragged('end');
+                        const deltaPosInUnitSpace = deltaXToDeltaPos(dx);
+                        const newRange = {
+                            start: valuesBeforeDrag.clippedSpaceRange.start,
+                            end: valuesBeforeDrag.clippedSpaceRange.end + deltaPosInUnitSpace,
+                        };
+                        if (newRange.end < newRange.start + 1) {
+                            newRange.end = newRange.start + 1;
+                        }
+                        if (newRange.end >= valuesBeforeDrag.assumedLengthOfSequence) {
+                            newRange.end = valuesBeforeDrag.assumedLengthOfSequence;
+                        }
+                        val(layoutP.clippedSpace.setRange)(newRange);
+                    },
+                    onDragEnd() {
+                        setBeingDragged('nothing');
+                    },
+                };
+            },
+        };
+        return self;
+    }, [layoutP, relevantValuesD]);
+    const [rangeDragNode, setRangeDragNode] = useState(null);
+    useDrag(rangeDragNode, {
+        debugName: 'HorizontalScrollbar/onRangeDrag',
+        onDragStart: handles.onRangeDragStart,
+        lockCSSCursorTo: 'ew-resize',
+    });
+    const [rangeStartDragNode, setRangeStartDragNode] = useState(null);
+    useDrag(rangeStartDragNode, {
+        debugName: 'HorizontalScrollbar/onRangeStartDrag',
+        onDragStart: handles.onRangeStartDragStart,
+        lockCSSCursorTo: 'w-resize',
+    });
+    const [rangeEndDragNode, setRangeEndDragNode] = useState(null);
+    useDrag(rangeEndDragNode, {
+        debugName: 'HorizontalScrollbar/onRangeEndDrag',
+        onDragStart: handles.onRangeEndDragStart,
+        lockCSSCursorTo: 'e-resize',
+    });
+    return (React.createElement(Container, { style: { bottom: bottom + 8 + 'px' }, ...includeLockFrameStampAttrs('hide') },
+        React.createElement(TimeThread, null,
+            React.createElement(RangeBar, { ref: setRangeDragNode, style: {
+                    width: `${rangeEndX - rangeStartX}px`,
+                    transform: `translate3d(${rangeStartX}px, 0, 0)`,
+                } }),
+            React.createElement(RangeStartHandle, { ref: setRangeStartDragNode, style: { transform: `translate3d(${rangeStartX}px, 0, 0)` } },
+                React.createElement(Tooltip, { active: beingDragged === 'both' || beingDragged === 'start' }, unitPosToHumanReadablePos(clippedSpaceRange.start))),
+            React.createElement(RangeEndHandle, { ref: setRangeEndDragNode, style: { transform: `translate3d(${rangeEndX}px, 0, 0)` } },
+                React.createElement(Tooltip, { active: beingDragged === 'both' || beingDragged === 'end' }, unitPosToHumanReadablePos(clippedSpaceRange.end))))));
+};
+export default HorizontalScrollbar;

package/dist/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.d.ts

@@ -0,0 +1,11 @@
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { SequenceMarkerId } from '@tomorrowevening/theatre-shared/utils/ids';
+type IMarkerDotProps = {
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    markerId: SequenceMarkerId;
+};
+declare const MarkerDot: React.VFC<IMarkerDotProps>;
+export default MarkerDot;
+//# sourceMappingURL=MarkerDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerDot.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAU/D,OAAO,KAAwB,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,2CAA2C,CAAA;AAsF/E,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,QAAQ,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAqCzC,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,184 @@
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import { zIndexes } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import { absoluteDims } from '@tomorrowevening/theatre-studio/utils/absoluteDims';
+import { DopeSnapHitZoneUI } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI';
+import { snapToAll, snapToNone, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget';
+import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
+import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
+import MarkerEditorPopover from './MarkerEditorPopover';
+const MARKER_SIZE_W_PX = 12;
+const MARKER_SIZE_H_PX = 12;
+const MARKER_HOVER_SIZE_W_PX = MARKER_SIZE_W_PX * 2;
+const MARKER_HOVER_SIZE_H_PX = MARKER_SIZE_H_PX * 2;
+const MarkerDotContainer = styled.div `
+  position: absolute;
+  // below the sequence ruler "top bar"
+  top: 18px;
+  z-index: ${() => zIndexes.marker};
+`;
+const MarkerVisualDotSVGContainer = styled.div `
+  position: absolute;
+  ${absoluteDims(MARKER_SIZE_W_PX, MARKER_SIZE_H_PX)}
+  pointer-events: none;
+`;
+// Attempted to optimize via memo + inline svg rather than background-url
+const MarkerVisualDot = React.memo(() => (React.createElement(MarkerVisualDotSVGContainer, { children: React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M12 5H0V7H2.71973L5.96237 10.2426L9.20501 7H12V5Z", fill: "#40AAA4" })) })));
+const HitZone = styled.div `
+  z-index: 1;
+  cursor: ew-resize;
+
+  ${DopeSnapHitZoneUI.CSS}
+
+  // :not dragging marker to ensure that markers don't snap to other markers
+  // this works because only one marker track (so this technique is not used by keyframes...)
+  #pointer-root.draggingPositionInSequenceEditor:not(.draggingMarker) & {
+    ${DopeSnapHitZoneUI.CSS_WHEN_SOMETHING_DRAGGING}
+  }
+
+  // "All instances of this component <Mark/> inside #pointer-root when it has the .draggingPositionInSequenceEditor class"
+  // ref: https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
+  #pointer-root.draggingPositionInSequenceEditor:not(.draggingMarker) &,
+  #pointer-root.draggingPositionInSequenceEditor
+    &.${DopeSnapHitZoneUI.BEING_DRAGGED_CLASS} {
+    pointer-events: auto;
+    cursor: var(${lockedCursorCssVarName});
+  }
+
+  &:hover
+    + ${MarkerVisualDotSVGContainer},
+    // notice , "or" in CSS
+    &.${DopeSnapHitZoneUI.BEING_DRAGGED_CLASS}
+    + ${MarkerVisualDotSVGContainer} {
+    ${absoluteDims(MARKER_HOVER_SIZE_W_PX, MARKER_HOVER_SIZE_H_PX)}
+  }
+`;
+const MarkerDot = ({ layoutP, markerId }) => {
+    const sheetAddress = useVal(layoutP.sheet.address);
+    const marker = useVal(getStudio().atomP.historic.projects.stateByProjectId[sheetAddress.projectId]
+        .stateBySheetId[sheetAddress.sheetId].sequenceEditor.markerSet.byId[markerId]);
+    if (!marker) {
+        // 1/10 maybe this is normal if React tries to re-render this with
+        // out of date data. (e.g. Suspense / Transition stuff?)
+        return null;
+    }
+    // check marker in viewable bounds
+    const clippedSpaceWidth = useVal(layoutP.clippedSpace.width);
+    const clippedSpaceFromUnitSpace = useVal(layoutP.clippedSpace.fromUnitSpace);
+    const clippedSpaceMarkerX = clippedSpaceFromUnitSpace(marker.position);
+    const outsideClipDims = clippedSpaceMarkerX <= 0 || clippedSpaceMarkerX > clippedSpaceWidth;
+    // If outside the clip space, we want to hide the marker dot. We
+    // hide the dot by translating it far away and scaling it to 0.
+    // This method of hiding does not cause reflow/repaint.
+    const translateX = outsideClipDims ? -10000 : clippedSpaceMarkerX;
+    const scale = outsideClipDims ? 0 : 1;
+    return (React.createElement(MarkerDotContainer, { style: {
+            transform: `translateX(${translateX}px) scale(${scale})`,
+        } },
+        React.createElement(MarkerDotVisible, { marker: marker, layoutP: layoutP })));
+};
+export default MarkerDot;
+const MarkerDotVisible = ({ layoutP, marker, }) => {
+    const sheetAddress = useVal(layoutP.sheet.address);
+    const [markRef, markNode] = useRefAndState(null);
+    const [contextMenu] = useMarkerContextMenu(markNode, {
+        sheetAddress,
+        markerId: marker.id,
+    });
+    const [isDragging] = useDragMarker(markNode, {
+        layoutP,
+        marker,
+    });
+    const { node: popoverNode, toggle: togglePopover, close: closePopover, } = usePopover({ debugName: 'MarkerPopover' }, () => {
+        return (React.createElement(BasicPopover, null,
+            React.createElement(MarkerEditorPopover, { marker: marker, layoutP: layoutP, onRequestClose: closePopover })));
+    });
+    return (React.createElement(React.Fragment, null,
+        contextMenu,
+        popoverNode,
+        React.createElement(HitZone, { title: marker.label ? `Marker: ${marker.label}` : 'Marker', ref: markRef, onClick: (e) => {
+                togglePopover(e, markRef.current);
+            }, ...DopeSnapHitZoneUI.reactProps({
+                isDragging,
+                position: marker.position,
+            }) }),
+        React.createElement(MarkerVisualDot, null)));
+};
+function useMarkerContextMenu(node, options) {
+    return useContextMenu(node, {
+        menuItems() {
+            return [
+                {
+                    label: 'Remove marker',
+                    callback: () => {
+                        getStudio().transaction(({ stateEditors }) => {
+                            stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.removeMarker({
+                                sheetAddress: options.sheetAddress,
+                                markerId: options.markerId,
+                            });
+                        });
+                    },
+                },
+            ];
+        },
+    });
+}
+function useDragMarker(node, props) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const useDragOpts = useMemo(() => {
+        return {
+            debugName: `MarkerDot/useDragMarker (${props.marker.id})`,
+            onDragStart(_event) {
+                const markerAtStartOfDrag = propsRef.current.marker;
+                const toUnitSpace = val(props.layoutP.scaledSpace.toUnitSpace);
+                let tempTransaction;
+                snapToAll();
+                return {
+                    onDrag(dx, _dy, event) {
+                        const original = markerAtStartOfDrag;
+                        const newPosition = Math.max(
+                        // check if our event hoversover a [data-pos] element
+                        DopeSnap.checkIfMouseEventSnapToPos(event, {
+                            ignore: node,
+                        }) ??
+                            // if we don't find snapping target, check the distance dragged + original position
+                            original.position + toUnitSpace(dx), 
+                        // sanitize to minimum of zero
+                        0);
+                        tempTransaction?.discard();
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.replaceMarkers({
+                                sheetAddress: val(props.layoutP.sheet.address),
+                                markers: [{ ...original, position: newPosition }],
+                                snappingFunction: val(props.layoutP.sheet).getSequence()
+                                    .closestGridPosition,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        if (dragHappened)
+                            tempTransaction?.commit();
+                        else
+                            tempTransaction?.discard();
+                        snapToNone();
+                    },
+                };
+            },
+        };
+    }, []);
+    const [isDragging] = useDrag(node, useDragOpts);
+    useLockFrameStampPosition(isDragging, props.marker.position);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor draggingMarker', 'ew-resize');
+    return [isDragging];
+}

package/dist/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerEditorPopover.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerEditorPopover.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerEditorPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAC/D,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAMvH,OAAO,KAAK,EAAC,uCAAuC,EAAC,MAAM,sDAAsD,CAAA;AAkBjH,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,MAAM,EAAE,uCAAuC,CAAA;IAC/C;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CA8DA,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markers.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/Markers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAGvH,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAAC,CAiBrE,CAAA;AAED,eAAe,OAAO,CAAA"}

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

@@ -0,0 +1,13 @@
+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.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 Playhead: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default Playhead;
+//# sourceMappingURL=Playhead.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Playhead.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAMvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAAgB,MAAM,OAAO,CAAA;AAqLpC,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAAC,CAuHrE,CAAA;AAED,eAAe,QAAQ,CAAA"}