@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,57 +0,0 @@
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { lockedCursorCssVarName } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import { css } from 'styled-components';
-import SnapCursor from './SnapCursor.svg';
-import { absoluteDims } from '@tomorrowevening/theatre-studio/utils/absoluteDims';
-import DopeSnap from './DopeSnap';
-import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
-const HIT_ZONE_SIZE_PX = 12;
-const SNAP_CURSOR_SIZE_PX = 34;
-const BEING_DRAGGED_CLASS = 'beingDragged';
-/**
- * Helper CSS for consistent display of the `⸢⸤⸣⸥` thing
- */
-export const DopeSnapHitZoneUI = {
-    BEING_DRAGGED_CLASS,
-    CSS: css `
-    position: absolute;
-    ${absoluteDims(HIT_ZONE_SIZE_PX)};
-    ${pointerEventsAutoInNormalMode};
-
-    &.${BEING_DRAGGED_CLASS} {
-      pointer-events: none !important;
-    }
-  `,
-    CSS_WHEN_SOMETHING_DRAGGING: css `
-    pointer-events: auto;
-    cursor: var(${lockedCursorCssVarName});
-
-    // ⸢⸤⸣⸥ thing
-    // This box extends the hitzone so the user does not
-    // accidentally leave the hitzone
-    &:hover:after {
-      position: absolute;
-      top: calc(50% - ${SNAP_CURSOR_SIZE_PX / 2}px);
-      left: calc(50% - ${SNAP_CURSOR_SIZE_PX / 2}px);
-      width: ${SNAP_CURSOR_SIZE_PX}px;
-      height: ${SNAP_CURSOR_SIZE_PX}px;
-      display: block;
-      content: ' ';
-      background: url(${SnapCursor}) no-repeat 100% 100%;
-      // This icon might also fit: GiConvergenceTarget
-    }
-  `,
-    /** Intrinsic element props for `<HitZone/>`s */
-    reactProps(config) {
-        return {
-            // `data-pos` and `includeLockFrameStampAttrs` are used by FrameStampPositionProvider
-            // in order to handle snapping the playhead. Adding these props effectively
-            // causes the playhead to "snap" to the marker on mouse over.
-            // `pointerEventsAutoInNormalMode` and `lockedCursorCssVarName` in the CSS above are also
-            // used to make this behave correctly.
-            ...includeLockFrameStampAttrs(config.position),
-            ...DopeSnap.includePositionSnapAttrs(config.position),
-            className: config.isDragging ? DopeSnapHitZoneUI.BEING_DRAGGED_CLASS : '',
-        };
-    },
-};

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

@@ -1,233 +0,0 @@
-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.js

@@ -1,217 +0,0 @@
-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;