diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx index e7bc5d4..a9cebeb 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx @@ -20,7 +20,7 @@ const Label = styled.div` padding: 1px 8px; font-variant-numeric: tabular-nums; pointer-events: none; - z-index: ${() => zIndexes.rightOverlay + 1}; + z-index: ${() => zIndexes.currentFrameStamp}; ` const Line = styled.div` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx index 86430cc..8acfdf9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx @@ -3,7 +3,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi import RoomToClick from '@theatre/studio/uiComponents/RoomToClick' import useDrag from '@theatre/studio/uiComponents/useDrag' import useRefAndState from '@theatre/studio/utils/useRefAndState' -import {usePrism} from '@theatre/dataverse-react' +import {usePrism, useVal} from '@theatre/dataverse-react' import type {$IntentionalAny} from '@theatre/shared/utils/types' import type {Pointer} from '@theatre/dataverse' import {val} from '@theatre/dataverse' @@ -11,7 +11,10 @@ import clamp from 'lodash-es/clamp' import React, {useMemo} from 'react' import styled from 'styled-components' import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' -import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider' +import { + attributeNameThatLocksFramestamp, + useLockFrameStampPosition, +} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider' const Container = styled.div<{isVisible: boolean}>` --thumbColor: #00e0ff; @@ -20,7 +23,7 @@ const Container = styled.div<{isVisible: boolean}>` left: 0; width: 5px; height: 100%; - z-index: ${() => zIndexes.seeker}; + z-index: ${() => zIndexes.playhead}; pointer-events: none; display: ${(props) => (props.isVisible ? 'block' : 'none')}; @@ -159,6 +162,9 @@ const Playhead: React.FC<{layoutP: Pointer}> = ({ useDrag(thumbNode, gestureHandlers) + // hide the frame stamp when seeking + useLockFrameStampPosition(useVal(layoutP.seeker.isSeeking), -1) + return usePrism(() => { const isSeeking = val(layoutP.seeker.isSeeking) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index f8c16c2..e2ab247 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -44,25 +44,25 @@ const LeftBackground = styled.div` ` export const zIndexes = (() => { - const scrollableArea = 0 - const rightOverlay = scrollableArea + 1 - const rightBackground = scrollableArea - 1 - const seeker = rightOverlay + 1 - const currentFrameStamp = seeker + 1 - const lengthIndicatorCover = currentFrameStamp + 1 - const lengthIndicatorStrip = lengthIndicatorCover + 1 - const horizontalScrollbar = lengthIndicatorStrip + 1 - - return { - scrollableArea, - rightOverlay, - rightBackground, - seeker, - horizontalScrollbar, - currentFrameStamp, - lengthIndicatorCover, - lengthIndicatorStrip, + const s = { + rightBackground: 0, + scrollableArea: 0, + rightOverlay: 0, + lengthIndicatorCover: 0, + lengthIndicatorStrip: 0, + playhead: 0, + currentFrameStamp: 0, + horizontalScrollbar: 0, } + + // sort the z-indexes + let i = -1 + for (const key of Object.keys(s)) { + s[key as unknown as keyof typeof s] = i + i++ + } + + return s })() const Header_Container = styled(PanelDragZone)`