import * as React from 'react' ; import { COLORBLIND_FRIENDLY_PALETTE } from '../../Constants' ; export interface Props extends React . Props < any > { clientInputs : { [ client ] : { [ id ] : number [ ] ; } ; } ; } export default class TouchIndicator extends React . Component < Props , { } > { public ctx : any ; public canvas : any ; public styles : any ; constructor ( props ) { super ( props ) ; this . styles = { center : { radius : 36 , } , ring : { color : '#FFFFFF' , radius : 44 , width : 5 , } , } ; } public shouldComponentUpdate ( ) { window . requestAnimationFrame ( ( ) => this . drawTouchPoints ( ) ) ; return false ; } public componentDidUpdate ( ) { this . drawTouchPoints ( ) ; } protected drawTouchPoint ( x , y , color ) { this . ctx . fillStyle = color ; this . ctx . beginPath ( ) ; this . ctx . arc ( x , y , this . styles . center . radius , 0 , 2 * Math . PI , false ) ; this . ctx . fill ( ) ; this . ctx . strokeStyle = this . styles . ring . color ; this . ctx . lineWidth = this . styles . ring . width ; this . ctx . beginPath ( ) ; this . ctx . arc ( x , y , this . styles . ring . radius , 0 , 2 * Math . PI , false ) ; this . ctx . stroke ( ) ; } private drawTouchPoints ( ) { this . ctx . clearRect ( 0 , 0 , this . ctx . canvas . width , this . ctx . canvas . height ) ; const keys = Object . keys ( this . props . clientInputs ) ; for ( let i = 0 ; i < keys . length && i < COLORBLIND_FRIENDLY_PALETTE . length ; i ++ ) { const color = COLORBLIND_FRIENDLY_PALETTE [ i ] ; const inputs = this . props . clientInputs [ keys [ i ] ] ; for ( const k of Object . keys ( inputs ) ) { this . drawTouchPoint ( inputs [ k ] [ 0 ] * this . ctx . canvas . width / 1000 , inputs [ k ] [ 1 ] * this . ctx . canvas . height / 1000 , color ) ; } } } public setupCanvas ( ref ) { if ( this . canvas === ref ) { return ; } this . canvas = ref ; if ( ! this . canvas ) { return ; } window . requestAnimationFrame ( ( ) => { this . ctx = this . canvas . getContext ( '2d' ) ; if ( ! this . canvas . parentElement ) { console . error ( 'Could not find canvas parent element' ) ; return ; } this . ctx . canvas . width = this . canvas . parentElement . offsetWidth ; this . ctx . canvas . height = this . canvas . parentElement . offsetHeight ; } ) ; } public render ( ) { return ( < canvas className = "base_multi_touch_trigger touch_indicator" ref = { ( ref ) => { this . setupCanvas ( ref ) ; } } />); } }