@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

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

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

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

@@ -1,184 +0,0 @@
-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];
-}