@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

@@ -0,0 +1,233 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { topStripHeight } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+export const focusRangeStripTheme = {
+    enabled: {
+        backgroundColor: '#2C2F34',
+        stroke: '#646568',
+    },
+    disabled: {
+        backgroundColor: '#282a2cc5',
+        stroke: '#595a5d',
+    },
+    hover: {
+        backgroundColor: '#34373D',
+        stroke: '#C8CAC0',
+    },
+    dragging: {
+        backgroundColor: '#3F444A',
+        stroke: '#C8CAC0',
+    },
+    thumbWidth: 9,
+    hitZoneWidth: 26,
+    rangeStripMinWidth: 30,
+};
+const stripWidth = 1000;
+export const RangeStrip = styled.div `
+  position: absolute;
+  height: ${() => topStripHeight - 1}px;
+  background-color: ${(props) => props.enabled
+    ? focusRangeStripTheme.enabled.backgroundColor
+    : focusRangeStripTheme.disabled.backgroundColor};
+  cursor: grab;
+  top: 0;
+  left: 0;
+  width: ${stripWidth}px;
+  transform-origin: left top;
+  &:hover {
+    background-color: ${focusRangeStripTheme.hover.backgroundColor};
+  }
+  &.dragging {
+    background-color: ${focusRangeStripTheme.dragging.backgroundColor};
+    cursor: grabbing !important;
+  }
+  ${pointerEventsAutoInNormalMode};
+
+  /* covers the one pixel space between the focus range strip and the top strip
+  of the sequence editor panel, which would have caused that one pixel to act
+  like a panel drag zone */
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    bottom: -1px;
+    height: 1px;
+    left: 0;
+    right: 0;
+    background: transparent;
+    pointer-events: normal;
+    z-index: -1;
+  }
+`;
+/**
+ * Clamps the lower and upper bounds of a range to the lower and upper bounds of the reference range, while maintaining the original width of the range. If the range to be clamped has a greater width than the reference range, then the reference range is returned.
+ *
+ * @param range - The range bounds to be clamped
+ * @param referenceRange - The reference range
+ *
+ * @returns The clamped bounds.
+ *
+ * @example
+ * ```ts
+ * clampRange([-1, 4], [2, 3]) // returns [2, 3]
+ * clampRange([-1, 2.5], [2, 3]) // returns [2, 2.5]
+ * ```
+ */
+function clampRange(range, referenceRange) {
+    let overflow = 0;
+    const [start, end] = range;
+    const [lower, upper] = referenceRange;
+    if (end - start > upper - lower)
+        return [lower, upper];
+    if (start < lower) {
+        overflow = 0 - start;
+    }
+    if (end > upper) {
+        overflow = upper - end;
+    }
+    return [start + overflow, end + overflow];
+}
+const FocusRangeStrip = ({ 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]);
+    const [rangeStripRef, rangeStripNode] = useRefAndState(null);
+    const [contextMenu] = useContextMenu(rangeStripNode, {
+        menuItems: () => {
+            const sheet = val(layoutP.sheet);
+            const existingRange = existingRangeD.getValue();
+            return [
+                {
+                    label: 'Delete focus range',
+                    callback: () => {
+                        getStudio()
+                            .tempTransaction(({ stateEditors }) => {
+                            stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.focusRange.unset({
+                                ...sheet.address,
+                            });
+                        })
+                            .commit();
+                    },
+                },
+                {
+                    label: existingRange?.enabled
+                        ? 'Disable focus range'
+                        : 'Enable focus range',
+                    callback: () => {
+                        if (existingRange !== undefined) {
+                            getStudio()
+                                .tempTransaction(({ stateEditors }) => {
+                                stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.focusRange.set({
+                                    ...sheet.address,
+                                    range: existingRange.range,
+                                    enabled: !existingRange.enabled,
+                                });
+                            })
+                                .commit();
+                        }
+                    },
+                },
+            ];
+        },
+    });
+    const scaledSpaceToUnitSpace = useVal(layoutP.scaledSpace.toUnitSpace);
+    const sheet = useVal(layoutP.sheet);
+    const gestureHandlers = useMemo(() => {
+        let newStartPosition, newEndPosition;
+        return {
+            debugName: 'FocusRangeStrip',
+            onDragStart(event) {
+                let tempTransaction;
+                let existingRange = existingRangeD.getValue();
+                if (!existingRange)
+                    return false;
+                const startPosBeforeDrag = existingRange.range.start;
+                const endPosBeforeDrag = existingRange.range.end;
+                let dragHappened = false;
+                const sequence = val(layoutP.sheet).getSequence();
+                return {
+                    onDrag(dx) {
+                        existingRange = existingRangeD.getValue();
+                        if (existingRange) {
+                            dragHappened = true;
+                            const deltaPos = scaledSpaceToUnitSpace(dx);
+                            const start = startPosBeforeDrag + deltaPos;
+                            let end = endPosBeforeDrag + deltaPos;
+                            if (end < start) {
+                                end = start;
+                            }
+                            ;
+                            [newStartPosition, newEndPosition] = clampRange([start, end], [0, sequence.length]).map((pos) => sequence.closestGridPosition(pos));
+                            if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                                stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.focusRange.set({
+                                    ...sheet.address,
+                                    range: {
+                                        start: newStartPosition,
+                                        end: newEndPosition,
+                                    },
+                                    enabled: existingRange?.enabled ?? true,
+                                });
+                            });
+                        }
+                    },
+                    onDragEnd() {
+                        if (existingRange) {
+                            if (dragHappened && tempTransaction !== undefined) {
+                                tempTransaction.commit();
+                            }
+                            else if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                        }
+                    },
+                };
+            },
+            lockCSSCursorTo: 'grabbing',
+        };
+    }, [sheet, scaledSpaceToUnitSpace]);
+    const [isDragging] = useDrag(rangeStripNode, gestureHandlers);
+    useLockFrameStampPosition(isDragging, -1);
+    return usePrism(() => {
+        const existingRange = existingRangeD.getValue();
+        const range = existingRange?.range || { start: 0, end: 0 };
+        let startX = val(layoutP.clippedSpace.fromUnitSpace)(range.start);
+        let endX = val(layoutP.clippedSpace.fromUnitSpace)(range.end);
+        let scaleX, translateX;
+        if (startX < 0) {
+            startX = 0;
+        }
+        if (endX > val(layoutP.clippedSpace.width)) {
+            endX = val(layoutP.clippedSpace.width);
+        }
+        if (startX > endX) {
+            translateX = 0;
+            scaleX = 0;
+        }
+        else {
+            translateX = startX;
+            scaleX = (endX - startX) / stripWidth;
+        }
+        if (!existingRange)
+            return React.createElement(React.Fragment, null);
+        return (React.createElement(React.Fragment, null,
+            contextMenu,
+            React.createElement(RangeStrip, { id: "range-strip", enabled: existingRange.enabled, className: `${isDragging ? 'dragging' : ''} ${existingRange.enabled ? 'enabled' : ''}`, ref: rangeStripRef, style: {
+                    transform: `translateX(${translateX}px) scale(${scaleX}, 1)`,
+                } })));
+    }, [layoutP, rangeStripRef, existingRangeD, contextMenu, isDragging]);
+};
+export default FocusRangeStrip;

package/dist/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRangeThumb.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAAK,EAAkB,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAExF,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAYvH,OAAO,KAAgB,MAAM,OAAO,CAAA;AA4HpC,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,MAAM,CAAA;CACxB,CAoJA,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,217 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { topStripHeight, topStripTheme, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
+import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { includeLockFrameStampAttrs, useLockFrameStampPosition, } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { focusRangeStripTheme, RangeStrip } from './FocusRangeStrip';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+const TheDiv = styled.div `
+  position: absolute;
+  top: 0;
+  // the right handle has to be pulled back by its width since its right side indicates its position, not its left side
+  left: ${(props) => props.type === 'start' ? 0 : -focusRangeStripTheme.thumbWidth}px;
+  transform-origin: left top;
+  width: ${focusRangeStripTheme.thumbWidth}px;
+  height: ${() => topStripHeight - 1}px;
+  z-index: 3;
+
+  --bg: ${({ enabled }) => enabled
+    ? focusRangeStripTheme.enabled.backgroundColor
+    : focusRangeStripTheme.disabled.backgroundColor};
+
+  stroke: ${focusRangeStripTheme.enabled.stroke};
+  user-select: none;
+
+  cursor: ${(props) => (props.type === 'start' ? 'w-resize' : 'e-resize')};
+
+  // no pointer events unless pointer-root is in normal mode _and_ the
+  // focus range is enabled
+  #pointer-root & {
+    pointer-events: none;
+  }
+
+  #pointer-root.normal & {
+    pointer-events: auto;
+  }
+
+  #pointer-root.draggingPositionInSequenceEditor & {
+    pointer-events: auto;
+    cursor: var(${lockedCursorCssVarName});
+  }
+
+  &.dragging {
+    pointer-events: none !important;
+  }
+
+  // highlight the handle if it's hovered, or the whole strip is hovverd
+  ${() => RangeStrip}:hover ~ &, &:hover {
+    --bg: ${focusRangeStripTheme.hover.backgroundColor};
+    stroke: ${focusRangeStripTheme.hover.stroke};
+  }
+
+  // highlight the handle when it's being dragged or the whole strip is being dragged.
+  // using dragging.dragging to give this selector priority, as it seems to be overridden
+  // by the hover selector above
+  &.dragging,
+  ${() => RangeStrip}.dragging.dragging ~ & {
+    --bg: ${focusRangeStripTheme.dragging.backgroundColor};
+    stroke: ${focusRangeStripTheme.dragging.stroke};
+  }
+
+  #pointer-root.draggingPositionInSequenceEditor &:hover {
+    --bg: ${focusRangeStripTheme.dragging.backgroundColor};
+    stroke: #40aaa4;
+  }
+
+  background-color: var(--bg);
+
+  // a larger hit zone
+  &:before {
+    display: block;
+    content: ' ';
+    position: absolute;
+    inset: -8px;
+  }
+`;
+/**
+ * This acts as a bit of a horizontal shadow that covers the frame numbers that show up
+ * right next to the thumb, making the appearance of the focus range more tidy.
+ */
+const ColoredMargin = styled.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  background: linear-gradient(
+    ${(props) => (props.type === 'start' ? 90 : -90)}deg,
+    var(--bg) 0%,
+    #ffffff00 100%
+  );
+
+  width: 12px;
+  left: ${(props) => props.type === 'start'
+    ? focusRangeStripTheme.thumbWidth
+    : // pushing the right-side thumb's margin 1px to the right to make sure there is no space
+        // between it and the thumb
+        -focusRangeStripTheme.thumbWidth + 1}px;
+`;
+const OuterColoredMargin = styled.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  background: linear-gradient(
+    ${(props) => (props.type === 'start' ? -90 : 90)}deg,
+    ${() => topStripTheme.backgroundColor} 0%,
+    #ffffff00 100%
+  );
+
+  width: 12px;
+  left: ${(props) => props.type === 'start' ? -12 : focusRangeStripTheme.thumbWidth}px;
+`;
+const FocusRangeThumb = ({ layoutP, thumbType }) => {
+    const [hitZoneRef, hitZoneNode] = useRefAndState(null);
+    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]);
+    const gestureHandlers = useMemo(() => {
+        return {
+            debugName: 'FocusRangeThumb',
+            onDragStart() {
+                let tempTransaction;
+                let range;
+                const sheet = val(layoutP.sheet);
+                const sequence = sheet.getSequence();
+                const defaultRange = { start: 0, end: sequence.length };
+                let existingRange = existingRangeD.getValue() || {
+                    range: defaultRange,
+                    enabled: false,
+                };
+                const focusRangeEnabled = existingRange.enabled;
+                const posBeforeDrag = existingRange.range[thumbType];
+                const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
+                const minFocusRangeStripWidth = scaledSpaceToUnitSpace(focusRangeStripTheme.rangeStripMinWidth);
+                return {
+                    onDrag(dx, _, event) {
+                        let newPosition;
+                        const snapPos = DopeSnap.checkIfMouseEventSnapToPos(event, {
+                            ignore: hitZoneNode,
+                        });
+                        if (snapPos == null) {
+                            const deltaPos = scaledSpaceToUnitSpace(dx);
+                            const oldPosPlusDeltaPos = posBeforeDrag + deltaPos;
+                            newPosition = oldPosPlusDeltaPos;
+                        }
+                        else {
+                            newPosition = snapPos;
+                        }
+                        range = existingRangeD.getValue()?.range || defaultRange;
+                        // Make sure that the focus range has a minimal width
+                        if (thumbType === 'start') {
+                            // Prevent the start thumb from going below 0
+                            newPosition = Math.max(Math.min(newPosition, range['end'] - minFocusRangeStripWidth), 0);
+                        }
+                        else {
+                            // Prevent the start thumb from going over the length of the sequence
+                            newPosition = Math.min(Math.max(newPosition, range['start'] + minFocusRangeStripWidth), sheet.getSequence().length);
+                        }
+                        const newPositionInFrame = sheet
+                            .getSequence()
+                            .closestGridPosition(newPosition);
+                        if (tempTransaction !== undefined) {
+                            tempTransaction.discard();
+                        }
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.focusRange.set({
+                                ...sheet.address,
+                                range: { ...range, [thumbType]: newPositionInFrame },
+                                enabled: focusRangeEnabled,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        if (dragHappened)
+                            tempTransaction?.commit();
+                        else
+                            tempTransaction?.discard();
+                    },
+                };
+            },
+        };
+    }, [layoutP]);
+    const [isDragging] = useDrag(hitZoneNode, gestureHandlers);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', thumbType === 'start' ? 'w-resize' : 'e-resize');
+    const existingRange = useVal(existingRangeD);
+    useLockFrameStampPosition(isDragging, existingRange?.range[thumbType] ?? 0);
+    return usePrism(() => {
+        const existingRange = existingRangeD.getValue();
+        if (!existingRange)
+            return null;
+        const { enabled } = existingRange;
+        const position = existingRange.range[thumbType];
+        let posInClippedSpace = val(layoutP.clippedSpace.fromUnitSpace)(position);
+        if (posInClippedSpace < 0 ||
+            val(layoutP.clippedSpace.width) < posInClippedSpace) {
+            posInClippedSpace = -10000;
+        }
+        return (React.createElement(TheDiv, { ref: hitZoneRef, ...DopeSnap.includePositionSnapAttrs(position), ...includeLockFrameStampAttrs(position), className: `${isDragging && 'dragging'} ${enabled && 'enabled'}`, enabled: enabled, type: thumbType, style: {
+                transform: `translate3d(${posInClippedSpace}px, 0, 0)`,
+            } },
+            React.createElement(ColoredMargin, { type: thumbType, enabled: enabled }),
+            React.createElement(OuterColoredMargin, { type: thumbType }),
+            React.createElement("svg", { viewBox: "0 0 9 18", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("line", { x1: "4", y1: "6", x2: "4", y2: "12" }),
+                React.createElement("line", { x1: "6", y1: "6", x2: "6", y2: "12" }))));
+    }, [layoutP, hitZoneRef, existingRangeD, isDragging]);
+};
+export default FocusRangeThumb;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRangeZone.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAS/D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AASvH,OAAO,KAA6C,MAAM,OAAO,CAAA;AAgBjE,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CA+CA,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,181 @@
+import { prism, val } from '@tomorrowevening/theatre-dataverse';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { panelDimsToPanelPosition, usePanel, } from '@tomorrowevening/theatre-studio/panels/BasePanel/BasePanel';
+import { topStripHeight } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/TopStrip';
+import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useHoverWithoutDescendants from '@tomorrowevening/theatre-studio/uiComponents/useHoverWithoutDescendants';
+import useKeyDown from '@tomorrowevening/theatre-studio/uiComponents/useKeyDown';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { clamp } from 'lodash-es';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import FocusRangeStrip, { focusRangeStripTheme } from './FocusRangeStrip';
+import FocusRangeThumb from './FocusRangeThumb';
+import { minVisibleSize } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
+const Container = styled.div `
+  position: absolute;
+  height: ${() => topStripHeight}px;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  /* Use the "grab" cursor if the shift key is up, which is the one used on the top strip of the sequence editor */
+  cursor: ${(props) => (props.isShiftDown ? 'ew-resize' : 'move')};
+`;
+const FocusRangeZone = ({ layoutP }) => {
+    const [containerRef, containerNode] = useRefAndState(null);
+    const panelStuff = usePanel();
+    const panelStuffRef = useRef(panelStuff);
+    panelStuffRef.current = panelStuff;
+    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]);
+    useDrag(containerNode, usePanelDragZoneGestureHandlers(layoutP, panelStuffRef));
+    const isShiftDown = useKeyDown('Shift');
+    const isPointerHovering = useHoverWithoutDescendants(containerNode);
+    useEffect(() => {
+        if (!isShiftDown && isPointerHovering) {
+            const unlock = panelStuffRef.current.addBoundsHighlightLock();
+            return unlock;
+        }
+    }, [!isShiftDown && isPointerHovering]);
+    return usePrism(() => {
+        return (React.createElement(Container, { ref: containerRef, isShiftDown: isShiftDown },
+            React.createElement(FocusRangeStrip, { layoutP: layoutP }),
+            React.createElement(FocusRangeThumb, { thumbType: "start", layoutP: layoutP }),
+            React.createElement(FocusRangeThumb, { thumbType: "end", layoutP: layoutP })));
+    }, [layoutP, existingRangeD, isShiftDown]);
+};
+export default FocusRangeZone;
+function usePanelDragZoneGestureHandlers(layoutP, panelStuffRef) {
+    const [mode, setMode] = useState('none');
+    useCssCursorLock(mode !== 'none', 'dragging', mode === 'creating' ? 'ew-resize' : 'move');
+    return useMemo(() => {
+        const focusRangeCreationGestureHandlers = () => {
+            return {
+                debugName: 'FocusRangeZone/focusRangeCreationGestureHandlers',
+                onDragStart(event) {
+                    let tempTransaction;
+                    const clippedSpaceToUnitSpace = val(layoutP.clippedSpace.toUnitSpace);
+                    const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace);
+                    const sheet = val(layoutP.sheet);
+                    const sequence = sheet.getSequence();
+                    const targetElement = event.target;
+                    const rect = targetElement.getBoundingClientRect();
+                    const startPosInUnitSpace = clippedSpaceToUnitSpace(event.clientX - rect.left);
+                    const minFocusRangeStripWidth = scaledSpaceToUnitSpace(focusRangeStripTheme.rangeStripMinWidth);
+                    return {
+                        onDrag(dx) {
+                            const deltaPos = scaledSpaceToUnitSpace(dx);
+                            let start = startPosInUnitSpace;
+                            let end = startPosInUnitSpace + deltaPos;
+                            [start, end] = [
+                                clamp(start, 0, sequence.length),
+                                clamp(end, 0, sequence.length),
+                            ].map((pos) => sequence.closestGridPosition(pos));
+                            if (end < start) {
+                                ;
+                                [start, end] = [
+                                    Math.max(Math.min(end, start - minFocusRangeStripWidth), 0),
+                                    start,
+                                ];
+                            }
+                            else if (dx > 0) {
+                                end = Math.min(Math.max(end, start + minFocusRangeStripWidth), sequence.length);
+                            }
+                            if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                                stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.focusRange.set({
+                                    ...sheet.address,
+                                    range: { start, end },
+                                    enabled: true,
+                                });
+                            });
+                        },
+                        onDragEnd(dragHappened) {
+                            if (dragHappened && tempTransaction !== undefined) {
+                                tempTransaction.commit();
+                            }
+                            else if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                        },
+                    };
+                },
+                lockCSSCursorTo: 'ew-resize',
+            };
+        };
+        const panelMoveGestureHandlers = () => {
+            return {
+                debugName: 'FocusRangeZone/panelMoveGestureHandlers',
+                onDragStart() {
+                    let tempTransaction;
+                    const stuffBeforeDrag = panelStuffRef.current;
+                    const unlock = panelStuffRef.current.addBoundsHighlightLock();
+                    return {
+                        onDrag(dx, dy) {
+                            const newDims = {
+                                ...stuffBeforeDrag.dims,
+                                top: clamp(stuffBeforeDrag.dims.top + dy, 0, window.innerHeight - minVisibleSize),
+                                left: clamp(stuffBeforeDrag.dims.left + dx, -stuffBeforeDrag.dims.width + minVisibleSize, window.innerWidth - minVisibleSize),
+                            };
+                            const position = panelDimsToPanelPosition(newDims, {
+                                width: window.innerWidth,
+                                height: window.innerHeight,
+                            });
+                            tempTransaction?.discard();
+                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                                stateEditors.studio.historic.panelPositions.setPanelPosition({
+                                    position,
+                                    panelId: stuffBeforeDrag.panelId,
+                                });
+                            });
+                        },
+                        onDragEnd(dragHappened) {
+                            unlock();
+                            if (dragHappened) {
+                                tempTransaction?.commit();
+                            }
+                            else {
+                                tempTransaction?.discard();
+                            }
+                        },
+                    };
+                },
+                lockCSSCursorTo: 'move',
+            };
+        };
+        return {
+            debugName: 'FocusRangeZone',
+            onDragStart(event) {
+                const [_mode, currentGestureHandlers] = event.shiftKey
+                    ? [
+                        'creating',
+                        focusRangeCreationGestureHandlers().onDragStart(event),
+                    ]
+                    : [
+                        'moving-panel',
+                        panelMoveGestureHandlers().onDragStart(event),
+                    ];
+                setMode(_mode);
+                if (currentGestureHandlers === false)
+                    return false;
+                return {
+                    onDrag(dx, dy, event, ddx, ddy) {
+                        currentGestureHandlers.onDrag(dx, dy, event, ddx, ddy);
+                    },
+                    onDragEnd(dragHappened) {
+                        setMode('none');
+                        currentGestureHandlers.onDragEnd?.(dragHappened);
+                    },
+                };
+            },
+        };
+    }, [layoutP, panelStuffRef]);
+}

package/dist/panels/SequenceEditorPanel/RightOverlay/FrameStamp.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 FrameStamp: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default FrameStamp;
+//# sourceMappingURL=FrameStamp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FrameStamp.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAEvH,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAyCzB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CA4CC,CAAA;AAEF,eAAe,UAAU,CAAA"}