added click support

williaster · Sep 7, 2018 · 4cc4a7d · 4cc4a7d
1 parent e8f5e27
commit 4cc4a7d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/packages/demo/examples/01-xy-chart/LineSeriesExample.jsx b/packages/demo/examples/01-xy-chart/LineSeriesExample.jsx
@@ -4,7 +4,7 @@ import { Button } from '@data-ui/forms';
 import { LegendOrdinal } from '@vx/legend';
 import { scaleOrdinal } from '@vx/scale';
 
-import { CrossHair, LineSeries, WithTooltip, XAxis, YAxis } from '@data-ui/xy-chart';
+import { CrossHair, LineSeries, WithTooltip, XAxis, YAxis, Brush } from '@data-ui/xy-chart';
 
 import ResponsiveXYChart, { formatYear } from './ResponsiveXYChart';
 import { timeSeriesData } from './data';
@@ -316,6 +316,7 @@ class LineSeriesExample extends React.PureComponent {
                         showCircle={useVoronoiTrigger || !this.state.programmaticTrigger}
                         showMultipleCircles={!useVoronoiTrigger && showMultipleCircles}
                       />
+                      <Brush disableDraggingSelection />
                     </ResponsiveXYChart>
                   )}
                 </WithTooltip>

diff --git a/packages/xy-chart/src/selection/Brush.jsx b/packages/xy-chart/src/selection/Brush.jsx
@@ -18,6 +18,7 @@ export const propTypes = {
   onBrushEnd: PropTypes.func,
   onMouseMove: PropTypes.func,
   onMouseLeave: PropTypes.func,
+  onClick: PropTypes.func,
   margin: marginShape,
   brushDirection: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
   resizeTriggerAreas: PropTypes.arrayOf(
@@ -69,6 +70,7 @@ const defaultProps = {
   disableDraggingSelection: false,
   onMouseMove: null,
   onMouseLeave: null,
+  onClick: null,
 };
 
 class Brush extends React.Component {
@@ -152,6 +154,7 @@ class Brush extends React.Component {
       disableDraggingSelection,
       onMouseLeave,
       onMouseMove,
+      onClick,
       handleSize,
     } = this.props;
     if (!xScale || !yScale) return null;
@@ -205,6 +208,7 @@ class Brush extends React.Component {
         disableDraggingSelection={disableDraggingSelection}
         onMouseLeave={onMouseLeave}
         onMouseMove={onMouseMove}
+        onClick={onClick}
         ref={this.BaseBrush}
       />
     );

diff --git a/packages/xy-chart/src/utils/brush/Brush.jsx b/packages/xy-chart/src/utils/brush/Brush.jsx
@@ -36,6 +36,8 @@ const propTypes = {
   onMouseLeave: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseMove: PropTypes.func,
+  onClick: PropTypes.func,
+  clickSensitivity: PropTypes.number,
   disableDraggingSelection: PropTypes.bool,
 };
 
@@ -55,7 +57,9 @@ const defaultProps = {
   onMouseLeave: null,
   onMouseUp: null,
   onMouseMove: null,
+  onClick: null,
   disableDraggingSelection: false,
+  clickSensitivity: 200,
 };
 
 export default class Brush extends React.Component {
@@ -88,6 +92,8 @@ export default class Brush extends React.Component {
     this.handleDragMove = this.handleDragMove.bind(this);
     this.handleDragEnd = this.handleDragEnd.bind(this);
     this.getExtent = this.getExtent.bind(this);
+    this.mouseUpTime = 0;
+    this.mouseDownTime = 0;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -309,9 +315,11 @@ export default class Brush extends React.Component {
       onMouseUp,
       onMouseMove,
       onBrushEnd,
+      onClick,
       resizeTriggerAreas,
       selectedBoxStyle,
       disableDraggingSelection,
+      clickSensitivity,
     } = this.props;
 
     const handles = this.handles();
@@ -340,7 +348,14 @@ export default class Brush extends React.Component {
               width={stageWidth}
               height={stageHeight}
               onDoubleClick={() => event => this.reset(event)}
-              onMouseDown={() => event => draw.dragStart(event)}
+              onClick={() => event => {
+                const duration = this.mouseUpTime - this.mouseDownTime;
+                if (onClick && duration < clickSensitivity) onClick(event);
+              }}
+              onMouseDown={() => event => {
+                this.mouseDownTime = new Date();
+                draw.dragStart(event);
+              }}
               onMouseLeave={() => event => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
@@ -349,6 +364,7 @@ export default class Brush extends React.Component {
                 if (draw.isDragging) draw.dragMove(event);
               }}
               onMouseUp={() => event => {
+                this.mouseUpTime = new Date();
                 if (onMouseUp) onMouseUp(event);
                 draw.dragEnd(event);
               }}
@@ -368,6 +384,10 @@ export default class Brush extends React.Component {
               brush={{ ...this.state }}
               disableDraggingSelection={disableDraggingSelection}
               onBrushEnd={onBrushEnd}
+              onMouseLeave={onMouseLeave}
+              onMouseMove={onMouseMove}
+              onMouseUp={onMouseUp}
+              onClick={onClick}
               {...selectedBoxStyle}
             />
           )}

diff --git a/packages/xy-chart/src/utils/brush/BrushSelection.jsx b/packages/xy-chart/src/utils/brush/BrushSelection.jsx
@@ -13,6 +13,10 @@ const propTypes = {
   updateBrush: PropTypes.func.isRequired,
   onBrushEnd: PropTypes.func.isRequired,
   disableDraggingSelection: PropTypes.bool.isRequired,
+  onMouseLeave: PropTypes.func.isRequired,
+  onMouseMove: PropTypes.func.isRequired,
+  onMouseUp: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default class BrushSelection extends React.Component {
@@ -86,6 +90,10 @@ export default class BrushSelection extends React.Component {
       updateBrush,
       disableDraggingSelection,
       onBrushEnd,
+      onMouseLeave,
+      onMouseMove,
+      onMouseUp,
+      onClick,
       ...restProps
     } = this.props;
 
@@ -119,8 +127,20 @@ export default class BrushSelection extends React.Component {
               height={height}
               className="vx-brush-selection"
               onMouseDown={disableDraggingSelection ? null : selection.dragStart}
-              onMouseMove={selection.dragMove}
-              onMouseUp={selection.dragEnd}
+              onMouseLeave={event => {
+                if (onMouseLeave) onMouseLeave(event);
+              }}
+              onMouseMove={event => {
+                selection.dragMove(event);
+                if (onMouseMove) onMouseMove(event);
+              }}
+              onMouseUp={event => {
+                selection.dragEnd(event);
+                if (onMouseUp) onMouseUp(event);
+              }}
+              onClick={event => {
+                if (onClick) onClick(event);
+              }}
               style={{
                 pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',
                 cursor: disableDraggingSelection ? null : 'move',