import React from 'react' ; import { TIMELINE_TRACK_HEIGHT } from "../lib/helpers" ; const HEIGHT_OVER_WIDTH = 0.52 ; const SHEET_STROKE_WIDTH = 0.2 ; function renderCenteredSheet ( width , y , fill , strokeWidth ) { return ( < ellipse cx = { 0 } cy = { y } rx = { width / 2 } ry = { HEIGHT_OVER_WIDTH * width / 2 } fill = { fill } stroke = "black" strokeWidth = { strokeWidth } / > ) ; } function renderMaskedSheet ( width , y , fill ) { return ( < > { renderCenteredSheet ( width , y , fill , SHEET_STROKE_WIDTH ) } < g transform = { `translate(0 -1)` } > { renderCenteredSheet ( width , y , "#fff" , 0 ) } < /g> < />); } function ensureEnoughFills ( fills , desiredLength ) { const ret = [ ] ; let index = 0 ; while ( ret . length < desiredLength ) { ret . push ( fills [ index ] ) ; index = ( index + 1 ) % fills . length ; } return ret ; } function renderCustomStack ( width , y , fills ) { if ( fills . length === 2 ) { return ( < g > { renderMaskedSheet ( width , y + width / 8 , fills [ 1 ] ) } { renderCenteredSheet ( width , y - width / 8 , fills [ 0 ] , SHEET_STROKE_WIDTH ) } < /g>); } else { fills = ensureEnoughFills ( fills , 3 ) ; return ( < g > { renderMaskedSheet ( width , y + width / 4 , fills [ 2 ] ) } { renderMaskedSheet ( width , y , fills [ 1 ] ) } { renderCenteredSheet ( width , y - width / 4 , fills [ 0 ] , SHEET_STROKE_WIDTH ) } < /g>); } } export function renderStack ( fills ) { return renderCustomStack ( 9 , TIMELINE_TRACK_HEIGHT / 2 , fills ) ; }