feat(brush): disable drag overlay (#1744)

* feat: add disable drag overlay * refactor: remove `<Group />` * refactor: remove type imports from `BaseBrush` * chore: remove console.logs * fix: remove reset on double click * refactor: rename `disableDragOverlay` to `disableDraggingOverlay` * refactor: adjust import placement
airbnb · Dec 7, 2023 · bf2a2f3 · bf2a2f3
1 parent fdb40c4
commit bf2a2f3
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 47 deletions.
diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Group } from '@visx/group';
-import { Bar } from '@visx/shape';
 import Drag, { HandlerArgs as DragArgs } from '@visx/drag/lib/Drag';
 
 import BrushHandle, { BrushHandleRenderProps } from './BrushHandle';
 import BrushCorner from './BrushCorner';
 import BrushSelection from './BrushSelection';
+import BrushOverlay from './BrushOverlay';
 import {
   MarginShape,
   Point,
@@ -17,8 +17,6 @@ import {
 } from './types';
 import { getPageCoordinates } from './utils';
 
-const BRUSH_OVERLAY_STYLES = { cursor: 'crosshair' };
-
 type PointerHandlerEvent = React.PointerEvent<SVGRectElement>;
 
 export type BaseBrushProps = {
@@ -41,6 +39,7 @@ export type BaseBrushProps = {
   onClick?: (event: PointerHandlerEvent) => void;
   clickSensitivity: number;
   disableDraggingSelection: boolean;
+  disableDraggingOverlay?: boolean;
   resetOnEnd?: boolean;
   useWindowMoveEvents?: boolean;
   renderBrushHandle?: (props: BrushHandleRenderProps) => React.ReactNode;
@@ -106,6 +105,7 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
     onMouseMove: null,
     onClick: null,
     disableDraggingSelection: false,
+    disableDraggingOverlay: false,
     clickSensitivity: 200,
     resetOnEnd: false,
     initialBrushPosition: null,
@@ -115,7 +115,6 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
 
   componentDidUpdate(prevProps: BaseBrushProps) {
     if (this.props.width !== prevProps.width || this.props.height !== prevProps.height) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState((prevBrush: BaseBrushState) => {
         let { start, end, extent } = prevBrush;
 
@@ -571,6 +570,7 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
       resizeTriggerAreas,
       selectedBoxStyle,
       disableDraggingSelection,
+      disableDraggingOverlay,
       clickSensitivity,
       useWindowMoveEvents,
       renderBrushHandle,
@@ -586,49 +586,57 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
 
     return (
       <Group className="visx-brush" top={top} left={left}>
-        {/* stage drag detection */}
-        <Drag
-          width={stageWidth}
-          height={stageHeight}
-          resetOnStart
-          onDragStart={this.handleDragStart}
-          onDragMove={this.handleDragMove}
-          onDragEnd={this.handleDragEnd}
-          isDragging={useWindowMoveEvents ? brushingType === 'select' : undefined}
-        >
-          {({ dragStart, isDragging, dragMove, dragEnd }) => (
-            <Bar
-              className="visx-brush-overlay"
-              fill="transparent"
-              x={0}
-              y={0}
-              width={stageWidth}
-              height={stageHeight}
-              onDoubleClick={() => this.reset()}
-              onClick={(event: PointerHandlerEvent) => {
-                const duration = this.mouseUpTime - this.mouseDownTime;
-                if (onClick && duration < clickSensitivity) onClick(event);
-              }}
-              onPointerDown={(event: PointerHandlerEvent) => {
-                this.mouseDownTime = Date.now();
-                dragStart(event);
-              }}
-              onPointerLeave={(event: PointerHandlerEvent) => {
-                if (onMouseLeave) onMouseLeave(event);
-              }}
-              onPointerMove={(event: PointerHandlerEvent) => {
-                if (!isDragging && onMouseMove) onMouseMove(event);
-                if (isDragging) dragMove(event);
-              }}
-              onPointerUp={(event: PointerHandlerEvent) => {
-                this.mouseUpTime = Date.now();
-                if (onMouseUp) onMouseUp(event);
-                dragEnd(event);
-              }}
-              style={BRUSH_OVERLAY_STYLES}
-            />
-          )}
-        </Drag>
+        {disableDraggingOverlay ? (
+          <BrushOverlay
+            width={stageWidth}
+            height={stageHeight}
+            onClick={(event) => {
+              const duration = this.mouseUpTime - this.mouseDownTime;
+              if (onClick && duration < clickSensitivity) onClick(event);
+            }}
+            style={{ cursor: 'default' }}
+          />
+        ) : (
+          <Drag
+            width={stageWidth}
+            height={stageHeight}
+            resetOnStart
+            onDragStart={this.handleDragStart}
+            onDragMove={this.handleDragMove}
+            onDragEnd={this.handleDragEnd}
+            isDragging={useWindowMoveEvents ? brushingType === 'select' : undefined}
+          >
+            {({ dragStart, isDragging, dragMove, dragEnd }) => (
+              <BrushOverlay
+                width={stageWidth}
+                height={stageHeight}
+                onDoubleClick={() => this.reset()}
+                onClick={(event: PointerHandlerEvent) => {
+                  const duration = this.mouseUpTime - this.mouseDownTime;
+                  if (onClick && duration < clickSensitivity) onClick(event);
+                }}
+                onPointerDown={(event: PointerHandlerEvent) => {
+                  this.mouseDownTime = Date.now();
+                  dragStart(event);
+                }}
+                onPointerLeave={(event: PointerHandlerEvent) => {
+                  if (onMouseLeave) onMouseLeave(event);
+                }}
+                onPointerMove={(event: PointerHandlerEvent) => {
+                  if (!isDragging && onMouseMove) onMouseMove(event);
+                  if (isDragging) dragMove(event);
+                }}
+                onPointerUp={(event: PointerHandlerEvent) => {
+                  this.mouseUpTime = Date.now();
+                  if (onMouseUp) onMouseUp(event);
+                  dragEnd(event);
+                }}
+                style={{ cursor: 'crosshair' }}
+              />
+            )}
+          </Drag>
+        )}
+
         {/* selection */}
         {start && end && (
           <BrushSelection

diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx
@@ -53,6 +53,8 @@ export type BrushProps = {
   xAxisOrientation?: 'top' | 'bottom';
   /** Whether movement of Brush should be disabled. */
   disableDraggingSelection: boolean;
+  /** Whether changing Brush size and position by clicking overlay should be disabled. */
+  disableDraggingOverlay?: boolean;
   /** Whether to reset the Brush on drag end. */
   resetOnEnd?: boolean;
   /** Size of Brush handles, applies to all `resizeTriggerAreas`. */
@@ -182,6 +184,7 @@ class Brush extends Component<BrushProps> {
       xAxisOrientation,
       selectedBoxStyle,
       disableDraggingSelection,
+      disableDraggingOverlay,
       resetOnEnd,
       onMouseLeave,
       onMouseMove,
@@ -236,6 +239,7 @@ class Brush extends Component<BrushProps> {
         top={top}
         brushDirection={brushDirection}
         disableDraggingSelection={disableDraggingSelection}
+        disableDraggingOverlay={disableDraggingOverlay}
         handleSize={handleSize}
         inheritedMargin={margin}
         initialBrushPosition={initialBrushPosition}

diff --git a/packages/visx-brush/src/BrushOverlay.tsx b/packages/visx-brush/src/BrushOverlay.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Bar } from '@visx/shape';
+
+type BrushOverlayProps = {
+  width: number;
+  height: number;
+  style?: React.CSSProperties;
+  onClick?: (event: React.PointerEvent<SVGRectElement>) => void;
+  onDoubleClick?: (event: React.PointerEvent<SVGRectElement>) => void;
+  onPointerDown?: (event: React.PointerEvent<SVGRectElement>) => void;
+  onPointerLeave?: (event: React.PointerEvent<SVGRectElement>) => void;
+  onPointerMove?: (event: React.PointerEvent<SVGRectElement>) => void;
+  onPointerUp?: (event: React.PointerEvent<SVGRectElement>) => void;
+};
+
+export default function BrushOverlay(props: BrushOverlayProps) {
+  return <Bar className="visx-brush-overlay" fill="transparent" x={0} y={0} {...props} />;
+}