import type { SequenceEditorPanelLayout } from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' ; import { zIndexes } from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' ; import { usePrism } from '@theatre/react' ; import type { Pointer } from '@theatre/dataverse' ; import { val } from '@theatre/dataverse' ; import React from 'react' ; import styled from 'styled-components' ; import LengthIndicator from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator' ; import FrameStamp from './FrameStamp' ; import HorizontalScrollbar from './HorizontalScrollbar' ; import Playhead from './Playhead' ; import TopStrip from './TopStrip' ; const Container = styled . div `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: ${ ( ) => zIndexes . rightOverlay };
  overflow: visible;
  pointer-events: none;
` ; const RightOverlay = ( { layoutP } ) => { return usePrism ( ( ) => { const width = val ( layoutP . rightDims . width ) ; return ( < Container style = { { width : width + 'px' } } > < Playhead layoutP = { layoutP } / > < HorizontalScrollbar layoutP = { layoutP } / > < FrameStamp layoutP = { layoutP } / > < TopStrip layoutP = { layoutP } / > < LengthIndicator layoutP = { layoutP } / > < /Container>); } , [ layoutP ] ) ; } ; export default RightOverlay ;