import { Colors } from '../../../../common/colors' ; import { Rect } from '../../../../geoms/types' ; import { clearCanvas , isCanvasRenderer , renderLayers , withContext } from '../../../../renderers/canvas' ; import { renderAnnotations } from './annotations' ; import { renderAreas } from './areas' ; import { renderBars } from './bars' ; import { renderBubbles } from './bubbles' ; import { renderGrids } from './grids' ; import { renderLines } from './lines' ; import { renderGridPanels , renderPanelSubstrates } from './panels/panels' ; import { renderDebugRect } from './utils/debug' ; import { renderBarValues } from './values/bar' ; import { ReactiveChartStateProps } from './xy_chart' ; internal export function renderXYChartCanvas2d ( ctx , dpr , clippings , props ) { const imgCanvas = document . createElement ( 'canvas' ) ; withContext ( ctx , ( ) => { ctx . scale ( dpr , dpr ) ; const { renderingArea , chartTransform , rotation , geometries , geometriesIndex , theme : { axes : sharedAxesStyle , sharedStyle , barSeriesStyle , background } , highlightedLegendItem , annotationDimensions , annotationSpecs , perPanelAxisGeoms , perPanelGridLines , axesSpecs , axesStyles , debug , panelGeoms , } = props ; const transform = { x : renderingArea . left + chartTransform . x , y : renderingArea . top + chartTransform . y } ; renderLayers ( ctx , [ ( ) => clearCanvas ( ctx , 'transparent' ) , ( ) => debug && renderGridPanels ( ctx , transform , panelGeoms ) , ( ) => renderGrids ( ctx , { axesSpecs , renderingArea , perPanelGridLines , axesStyles , sharedAxesStyle , } ) , ( ) => renderPanelSubstrates ( ctx , { axesSpecs , perPanelAxisGeoms , renderingArea , debug , axesStyles , sharedAxesStyle , } ) , ( ) => renderAnnotations ( ctx , { rotation , renderingArea , annotationDimensions , annotationSpecs } , true ) , ( ) => renderBars ( ctx , imgCanvas , geometries . bars , sharedStyle , clippings , renderingArea , highlightedLegendItem , rotation ) , ( ) => renderAreas ( ctx , imgCanvas , { areas : geometries . areas , clippings , renderingArea , rotation , highlightedLegendItem , sharedStyle , } ) , ( ) => renderLines ( ctx , { lines : geometries . lines , clippings , renderingArea , rotation , highlightedLegendItem , sharedStyle , } ) , ( ) => renderBubbles ( ctx , { bubbles : geometries . bubbles , clippings , highlightedLegendItem , sharedStyle , rotation , renderingArea , } ) , ( ) => geometries . bars . forEach ( ( { value : bars , panel } ) => renderBarValues ( ctx , { bars , panel , renderingArea , rotation , debug , barSeriesStyle , background , } ) ) , ( ) => renderAnnotations ( ctx , { annotationDimensions , annotationSpecs , rotation , renderingArea } , false ) , ( ) => debug && withContext ( ctx , ( ) => { const { left , top , width , height } = renderingArea ; renderDebugRect ( ctx , { x : left , y : top , width , height } , 0 , { color : Colors . Transparent . rgba } , { color : Colors . Red . rgba , width : 4 , dash : [ 4 , 4 ] } ) ; const renderer = geometriesIndex . triangulation ( [ 0 , 0 , width , height ] ) ?. render ; if ( isCanvasRenderer ( renderer ) ) { ctx . beginPath ( ) ; ctx . translate ( left , top ) ; ctx . setLineDash ( [ 5 , 5 ] ) ; renderer ( ctx ) ; ctx . lineWidth = 1 ; ctx . strokeStyle = 'blue' ; ctx . stroke ( ) ; } } ) , ] ) ; } ) ; }