import type { SequenceEditorPanelLayout } from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' ; import { usePrism , useVal } from '@theatre/react' ; import type { Pointer } from '@theatre/dataverse' ; import { val } from '@theatre/dataverse' ; import React from 'react' ; import styled from 'styled-components' ; import { stampsGridTheme } from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid' ; import { zIndexes } from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' ; import { topStripTheme } from './TopStrip' ; import { FrameStampPositionType , useFrameStampPositionD , } from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider' ; 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 < { posType : FrameStampPositionType ; } > `
  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 < > < />; } const snappedPosInUnitSpace = posType === FrameStampPositionType . free ? sequence . closestGridPosition ( posInUnitSpace ) : posInUnitSpace ; const posInClippedSpace = unitSpaceToClippedSpace ( snappedPosInUnitSpace ) ; const isVisible = posInClippedSpace >= 0 && posInClippedSpace <= clippedSpaceWidth ; return ( < > < Label style = { { opacity : isVisible ? 1 : 0 , transform : `translate3d(calc(${ posInClippedSpace }px - 50%), 0, 0)` , } } > { formatter . formatForPlayhead ( snappedPosInUnitSpace ) } < /Label> < Line posType = { posType } style = { { opacity : isVisible ? 1 : 0 , transform : `translate3d(${ posInClippedSpace }px, 0, 0)` , } } /> < />); } ) ; export default FrameStamp ;