refactor: reuse bounding box calculation selector

elastic · Aug 3, 2021 · a54735c · a54735c
1 parent 1923805
commit a54735c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
@@ -75,6 +75,9 @@ export class Section implements Mark {
   }
 }
 
+/** @internal */
+export const initialBoundingBox = (): Rectangle => ({ x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity });
+
 /** @internal */
 export class Arc implements Mark {
   protected readonly x: number;
@@ -109,7 +112,7 @@ export class Arc implements Mark {
   boundingBoxes() {
     if (this.lineWidth === 0) return [];
 
-    const box = { x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity };
+    const box = initialBoundingBox();
 
     // instead of an analytical solution, we approximate with a GC-free grid sampler
 

diff --git a/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx b/packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx
@@ -10,6 +10,7 @@ import React, { MouseEvent, RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { Rectangle } from '../../../../common/geometry';
 import { GoalSemanticDescription, ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
@@ -21,10 +22,10 @@ import {
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
 import { BandViewModel, nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
-import { Mark } from '../../layout/viewmodel/geoms';
+import { initialBoundingBox, Mark } from '../../layout/viewmodel/geoms';
 import { geometries, getPrimitiveGeoms } from '../../state/selectors/geometries';
 import { getFirstTickValueSelector, getGoalChartSemanticDataSelector } from '../../state/selectors/get_goal_chart_data';
-import { fullBoundingBox } from '../../state/selectors/picked_shapes';
+import { getCaptureBoundingBox } from '../../state/selectors/picked_shapes';
 import { renderCanvas2d } from './canvas_renderers';
 
 interface ReactiveChartStateProps {
@@ -35,6 +36,7 @@ interface ReactiveChartStateProps {
   a11ySettings: A11ySettings;
   bandLabels: BandViewModel[];
   firstValue: number;
+  captureBoundingBox: Rectangle;
 }
 
 interface ReactiveChartDispatchProps {
@@ -90,6 +92,7 @@ class Component extends React.Component<Props> {
       chartContainerDimensions: { width, height },
       forwardStageRef,
       geometries,
+      captureBoundingBox: capture,
     } = this.props;
     if (!forwardStageRef.current || !this.ctx || !initialized || width === 0 || height === 0) {
       return;
@@ -99,7 +102,6 @@ class Component extends React.Component<Props> {
     const { chartCenter } = geometries;
     const x = e.clientX - box.left;
     const y = e.clientY - box.top;
-    const capture = fullBoundingBox(this.ctx, this.props.geoms);
     if (capture.x0 <= x && x <= capture.x1 && capture.y0 <= y && y <= capture.y1) {
       return picker(x - chartCenter.x, y - chartCenter.y);
     }
@@ -172,6 +174,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
   a11ySettings: DEFAULT_A11Y_SETTINGS,
   bandLabels: [],
   firstValue: 0,
+  captureBoundingBox: initialBoundingBox(),
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
@@ -186,6 +189,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     bandLabels: getGoalChartSemanticDataSelector(state),
     firstValue: getFirstTickValueSelector(state),
     geoms: getPrimitiveGeoms(state),
+    captureBoundingBox: getCaptureBoundingBox(state),
   };
 };
 

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts
@@ -11,16 +11,15 @@ import { LayerValue } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BulletViewModel } from '../../layout/types/viewmodel_types';
-import { Mark } from '../../layout/viewmodel/geoms';
+import { initialBoundingBox, Mark } from '../../layout/viewmodel/geoms';
 import { geometries, getPrimitiveGeoms } from './geometries';
 
 function getCurrentPointerPosition(state: GlobalChartState) {
   return state.interactions.pointer.current.position;
 }
 
-/** @internal */
-export function fullBoundingBox(ctx: CanvasRenderingContext2D | null, geoms: Mark[]) {
-  const box = { x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity };
+function fullBoundingBox(ctx: CanvasRenderingContext2D | null, geoms: Mark[]) {
+  const box = initialBoundingBox();
   if (ctx) {
     for (const g of geoms) {
       for (const { x0, y0, x1, y1 } of g.boundingBoxes(ctx)) {