import React , { FC } from 'react' ; import { Dimensions } from '../../../../utils/dimensions' ; import { LIGHT_THEME } from '../../../../utils/themes/light_theme' ; import { HeatmapStyle } from '../../../../utils/themes/theme' ; import { DragShape , nullShapeViewModel , ShapeViewModel } from '../../layout/types/viewmodel_types' ; internal export interface HighlighterCellsProps { chartId : string ; initialized : boolean ; canvasDimension : Dimensions ; geometries : ShapeViewModel ; dragShape : DragShape | null ; brushMask : HeatmapStyle [ 'brushMask' ] ; brushArea : HeatmapStyle [ 'brushArea' ] ; } internal export const HighlighterCellsComponent = ( { initialized , dragShape , chartId , canvasDimension , brushArea , brushMask , } ) => { if ( ! initialized || dragShape === null ) return null ; return ( < svg className = "echHighlighter" width = "100%" height = "100%" > < defs > < mask id = { `echHighlighterMask__${ chartId }` } > { } { brushMask . visible && ( < rect x = { 0 } y = { 0 } width = { canvasDimension . width + canvasDimension . left } height = { canvasDimension . height } fill = "#eee" / > ) } { brushArea . visible && ( < > { } < rect x = { dragShape . x } y = { dragShape . y } width = { dragShape . width } height = { dragShape . height } fill = { brushArea . fill } / > { } < rect x = { 0 } y = { dragShape . y } width = { canvasDimension . left } height = { dragShape . height } fill = { brushArea . fill } / > < />)} < /mask> < /defs> < g > { } { brushMask . visible && ( < rect x = { 0 } y = { 0 } width = { canvasDimension . width + canvasDimension . left } height = { canvasDimension . height } mask = { `url(#echHighlighterMask__${ chartId })` } fill = { brushMask . fill } / > ) } { brushArea . visible && ( < > { } < line x1 = { dragShape . x } y1 = { dragShape . y } x2 = { dragShape . x + dragShape . width } y2 = { dragShape . y } stroke = { brushArea . stroke } strokeWidth = { brushArea . strokeWidth } / > { } < line x1 = { dragShape . x } y1 = { dragShape . y + dragShape . height } x2 = { dragShape . x + dragShape . width } y2 = { dragShape . y + dragShape . height } stroke = { brushArea . stroke } strokeWidth = { brushArea . strokeWidth } / > { } < line x1 = { dragShape . x } y1 = { dragShape . y } x2 = { dragShape . x } y2 = { dragShape . y + dragShape . height } stroke = { brushArea . stroke } strokeWidth = { brushArea . strokeWidth } / > { } < line x1 = { dragShape . x + dragShape . width } y1 = { dragShape . y } x2 = { dragShape . x + dragShape . width } y2 = { dragShape . y + dragShape . height } stroke = { brushArea . stroke } strokeWidth = { brushArea . strokeWidth } / > < />)} < /g> < /svg>); } ; internal export const DEFAULT_PROPS = { chartId : 'empty' , initialized : false , canvasDimension : { width : 0 , height : 0 , left : 0 , top : 0 , } , geometries : nullShapeViewModel ( ) , dragShape : { x : 0 , y : 0 , height : 0 , width : 0 } , brushArea : LIGHT_THEME . heatmap . brushArea , brushMask : LIGHT_THEME . heatmap . brushMask , } ;