import React from 'react' ; import { observer } from 'mobx-react' ; import { Group } from './group' ; import { editor , player , interactions , layout } from '../core' ; import { COLOR_TIMELINE_RANGE , COLOR_TIMELINE_HANDLE } from '../core/theme' ; export interface Props { width : number ; height : number ; } function toSVGPoints ( coordinates ) { return coordinates . map ( coord => { return coord . join ( ',' ) ; } ) . join ( ' ' ) ; } @ observer export class LoopHandles extends React . Component < Props > { render ( ) { const { width , height } = this . props ; const startX = ( width / editor . totalSixteenths ) * player . loopStart ; const endX = ( width / editor . totalSixteenths ) * player . loopEnd ; const caretWidth = layout . sixteenthWidth / 2 ; const lineHeight = 3 ; const startHandleCoordinates = [ [ startX , 0 ] , [ startX + caretWidth , height / 2 ] , [ startX , height ] , ] ; const endHandleCoordinates = [ [ endX , 0 ] , [ endX - caretWidth , height / 2 ] , [ endX , height ] , ] ; return ( < Group > < rect key = "loopRegion" x = { startX } y = { height / 2 - 1 } height = { lineHeight } width = { endX - startX } fill = { COLOR_TIMELINE_RANGE } / > < polygon key = "loopStart" points = { toSVGPoints ( startHandleCoordinates ) } fill = { COLOR_TIMELINE_HANDLE } onMouseDown = { interactions . handleLoopStartMouseDown } / > < polygon key = "loopEnd" points = { toSVGPoints ( endHandleCoordinates ) } fill = { COLOR_TIMELINE_HANDLE } onMouseDown = { interactions . handleLoopEndMouseDown } / > < /Group>); } }