@octanejs/visx 0.1.0

package/src/brush/Brush.tsrx

@@ -0,0 +1,217 @@
+import type { ReactNode, SVGProps } from 'react';
+import BaseBrush from './BaseBrush.tsrx';
+import type { BaseBrushProps, BaseBrushState } from './BaseBrush.tsrx';
+import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
+import type {
+	Bounds,
+	PartialBrushStartEnd,
+	MarginShape,
+	Point,
+	ResizeTriggerAreas,
+	Scale,
+} from './types';
+import { scaleInvert, getDomainFromExtent } from './utils';
+
+const SAFE_PIXEL = 2;
+const DEFAULT_COLOR = 'steelblue';
+const DEFAULT_MARGIN = { top: 0, left: 0, right: 0, bottom: 0 };
+const DEFAULT_RESIZE_TRIGGER_AREAS: ResizeTriggerAreas[] = ['left', 'right'];
+const DEFAULT_SELECTED_BOX_STYLE = {
+	fill: DEFAULT_COLOR,
+	fillOpacity: 0.2,
+	stroke: DEFAULT_COLOR,
+	strokeWidth: 1,
+	strokeOpacity: 0.8,
+};
+
+export type BrushProps = {
+	/** Style object for the Brush selection rect. */
+	selectedBoxStyle: SVGProps<SVGRectElement>;
+	/** x-coordinate scale. */
+	xScale: Scale;
+	/** y-coordinate scale. */
+	yScale: Scale;
+	/** Brush stage height. */
+	height: number;
+	/** Brush stage width. */
+	width: number;
+	/** Callback invoked on a change in Brush bounds. */
+	onChange?: (bounds: Bounds | null) => void;
+	/** Callback invoked on initialization of a Brush (not Brush move). */
+	onBrushStart?: BaseBrushProps['onBrushStart'];
+	/** Callback invoked on mouse up when a Brush size is being updated. */
+	onBrushEnd?: (bounds: Bounds | null) => void;
+	/** Callback invoked on mouse move in Brush stage when *not* dragging. */
+	onMouseMove?: BaseBrushProps['onMouseMove'];
+	/** Callback invoked on mouse leave from Brush stage when *not* dragging. */
+	onMouseLeave?: BaseBrushProps['onMouseLeave'];
+	/** Callback invoked on Brush stage click. */
+	onClick?: BaseBrushProps['onClick'];
+	/** Margin subtracted from Brush stage dimensions. */
+	margin?: MarginShape;
+	/** Allowed directions for Brush dimensional change. */
+	brushDirection?: 'vertical' | 'horizontal' | 'both';
+	/** Initial start and end position of the Brush. */
+	initialBrushPosition?: PartialBrushStartEnd;
+	/** Array of rect sides and corners which should be resizeable / can trigger a Brush size change. */
+	resizeTriggerAreas?: ResizeTriggerAreas[];
+	/** What is being brushed, used for margin subtraction. */
+	brushRegion?: 'xAxis' | 'yAxis' | 'chart';
+	/** Orientation of yAxis if `brushRegion=yAxis`. */
+	yAxisOrientation?: 'left' | 'right';
+	/** Orientation of xAxis if `brushRegion=xAxis`. */
+	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`. */
+	handleSize: number;
+	/** Prevent drag end on mouse leaving from brush stage. */
+	useWindowMoveEvents?: boolean;
+	/** Render function for custom brush handles. */
+	renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+};
+
+export default function Brush({
+	xScale,
+	yScale,
+	height = 0,
+	width = 0,
+	onChange,
+	onBrushStart,
+	onBrushEnd,
+	onMouseMove,
+	onMouseLeave,
+	onClick,
+	margin = DEFAULT_MARGIN,
+	brushDirection = 'horizontal',
+	initialBrushPosition,
+	resizeTriggerAreas = DEFAULT_RESIZE_TRIGGER_AREAS,
+	brushRegion = 'chart',
+	yAxisOrientation = 'right',
+	xAxisOrientation = 'bottom',
+	disableDraggingSelection = false,
+	disableDraggingOverlay = false,
+	resetOnEnd = false,
+	handleSize = 4,
+	selectedBoxStyle = DEFAULT_SELECTED_BOX_STYLE,
+	useWindowMoveEvents = false,
+	renderBrushHandle,
+}: BrushProps) {
+	function convertRangeToDomain(brush: BaseBrushState): Bounds {
+		const { x0, x1, y0, y1 } = brush.extent;
+		const xDomain = getDomainFromExtent(xScale, x0 || 0, x1 || 0, SAFE_PIXEL);
+		const yDomain = getDomainFromExtent(yScale, y0 || 0, y1 || 0, SAFE_PIXEL);
+		return {
+			x0: xDomain.start || 0,
+			x1: xDomain.end || 0,
+			xValues: xDomain.values,
+			y0: yDomain.start || 0,
+			y1: yDomain.end || 0,
+			yValues: yDomain.values,
+		};
+	}
+
+	function handleChange(brush: BaseBrushState) {
+		if (!onChange) return;
+		const { x0 } = brush.extent;
+		if (typeof x0 === 'undefined' || x0 < 0) {
+			onChange(null);
+			return;
+		}
+		onChange(convertRangeToDomain(brush));
+	}
+
+	function handleBrushStart(point: Point) {
+		if (!onBrushStart) return;
+		const invertedX = scaleInvert(xScale, point.x);
+		const invertedY = scaleInvert(yScale, point.y);
+		onBrushStart({
+			x:
+				'invert' in xScale && typeof xScale.invert !== 'undefined'
+					? invertedX
+					: xScale.domain()[invertedX],
+			y:
+				'invert' in yScale && typeof yScale.invert !== 'undefined'
+					? invertedY
+					: yScale.domain()[invertedY],
+		});
+	}
+
+	function handleBrushEnd(brush: BaseBrushState) {
+		if (!onBrushEnd) return;
+		const { x0 } = brush.extent;
+		if (typeof x0 === 'undefined' || x0 < 0) {
+			onBrushEnd(null);
+			return;
+		}
+		onBrushEnd(convertRangeToDomain(brush));
+	}
+
+	if (!xScale || !yScale) return null;
+
+	let brushRegionWidth;
+	let brushRegionHeight;
+	let left;
+	let top;
+	const marginLeft = margin.left || 0;
+	const marginTop = margin.top || 0;
+	const marginRight = margin.right || 0;
+	const marginBottom = margin.bottom || 0;
+
+	if (brushRegion === 'chart') {
+		left = 0;
+		top = 0;
+		brushRegionWidth = width;
+		brushRegionHeight = height;
+	} else if (brushRegion === 'yAxis') {
+		top = 0;
+		brushRegionHeight = height;
+		if (yAxisOrientation === 'right') {
+			left = width;
+			brushRegionWidth = marginRight;
+		} else {
+			left = -marginLeft;
+			brushRegionWidth = marginLeft;
+		}
+	} else {
+		left = 0;
+		brushRegionWidth = width;
+		if (xAxisOrientation === 'bottom') {
+			top = height;
+			brushRegionHeight = marginBottom;
+		} else {
+			top = -marginTop;
+			brushRegionHeight = marginTop;
+		}
+	}
+
+	return (
+		<BaseBrush
+			width={brushRegionWidth}
+			height={brushRegionHeight}
+			left={left}
+			top={top}
+			brushDirection={brushDirection}
+			disableDraggingSelection={disableDraggingSelection}
+			disableDraggingOverlay={disableDraggingOverlay}
+			handleSize={handleSize}
+			inheritedMargin={margin}
+			initialBrushPosition={initialBrushPosition}
+			resetOnEnd={resetOnEnd}
+			resizeTriggerAreas={resizeTriggerAreas}
+			selectedBoxStyle={selectedBoxStyle}
+			onBrushEnd={handleBrushEnd}
+			onBrushStart={handleBrushStart}
+			onChange={handleChange}
+			onClick={onClick}
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove}
+			useWindowMoveEvents={useWindowMoveEvents}
+			renderBrushHandle={renderBrushHandle}
+		/>
+	);
+}

package/src/brush/Brush.tsrx.d.ts

@@ -0,0 +1,56 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { BaseBrushProps } from './BaseBrush.tsrx';
+import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
+import type { Bounds, PartialBrushStartEnd, MarginShape, ResizeTriggerAreas, Scale } from './types';
+export type BrushProps = {
+    /** Style object for the Brush selection rect. */
+    selectedBoxStyle: SVGProps<SVGRectElement>;
+    /** x-coordinate scale. */
+    xScale: Scale;
+    /** y-coordinate scale. */
+    yScale: Scale;
+    /** Brush stage height. */
+    height: number;
+    /** Brush stage width. */
+    width: number;
+    /** Callback invoked on a change in Brush bounds. */
+    onChange?: (bounds: Bounds | null) => void;
+    /** Callback invoked on initialization of a Brush (not Brush move). */
+    onBrushStart?: BaseBrushProps['onBrushStart'];
+    /** Callback invoked on mouse up when a Brush size is being updated. */
+    onBrushEnd?: (bounds: Bounds | null) => void;
+    /** Callback invoked on mouse move in Brush stage when *not* dragging. */
+    onMouseMove?: BaseBrushProps['onMouseMove'];
+    /** Callback invoked on mouse leave from Brush stage when *not* dragging. */
+    onMouseLeave?: BaseBrushProps['onMouseLeave'];
+    /** Callback invoked on Brush stage click. */
+    onClick?: BaseBrushProps['onClick'];
+    /** Margin subtracted from Brush stage dimensions. */
+    margin?: MarginShape;
+    /** Allowed directions for Brush dimensional change. */
+    brushDirection?: 'vertical' | 'horizontal' | 'both';
+    /** Initial start and end position of the Brush. */
+    initialBrushPosition?: PartialBrushStartEnd;
+    /** Array of rect sides and corners which should be resizeable / can trigger a Brush size change. */
+    resizeTriggerAreas?: ResizeTriggerAreas[];
+    /** What is being brushed, used for margin subtraction. */
+    brushRegion?: 'xAxis' | 'yAxis' | 'chart';
+    /** Orientation of yAxis if `brushRegion=yAxis`. */
+    yAxisOrientation?: 'left' | 'right';
+    /** Orientation of xAxis if `brushRegion=xAxis`. */
+    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`. */
+    handleSize: number;
+    /** Prevent drag end on mouse leaving from brush stage. */
+    useWindowMoveEvents?: boolean;
+    /** Render function for custom brush handles. */
+    renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+};
+export default function Brush({ xScale, yScale, height, width, onChange, onBrushStart, onBrushEnd, onMouseMove, onMouseLeave, onClick, margin, brushDirection, initialBrushPosition, resizeTriggerAreas, brushRegion, yAxisOrientation, xAxisOrientation, disableDraggingSelection, disableDraggingOverlay, resetOnEnd, handleSize, selectedBoxStyle, useWindowMoveEvents, renderBrushHandle, }: BrushProps): import("react").JSX.Element | null;

package/src/brush/BrushCorner.tsrx

@@ -0,0 +1,173 @@
+/* eslint react/jsx-handler-names: 0 */
+import type { CSSProperties } from 'react';
+import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
+import { Drag } from '@octanejs/visx/drag';
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { ResizeTriggerAreas } from './types';
+import { normalizeBrushStartEnd } from './utils';
+
+export type BrushCornerProps = {
+	stageWidth: number;
+	stageHeight: number;
+	brush: BrushState;
+	updateBrush: (update: UpdateBrush) => void;
+	onBrushEnd?: (brush: BrushState) => void;
+	type: ResizeTriggerAreas;
+	style?: CSSProperties;
+	corner: { x: number; y: number; width: number; height: number };
+};
+
+export type BrushCornerState = {};
+
+export default function BrushCorner(props: BrushCornerProps) {
+	function cornerDragMove(drag: DragArgs) {
+		const { updateBrush, type } = props;
+		if (!drag.isDragging) return;
+
+		updateBrush((prevBrush: Readonly<BrushState>) => {
+			const { start, end } = prevBrush;
+
+			const xMax = Math.max(start.x, end.x);
+			const xMin = Math.min(start.x, end.x);
+			const yMax = Math.max(start.y, end.y);
+			const yMin = Math.min(start.y, end.y);
+
+			let moveX = 0;
+			let moveY = 0;
+
+			switch (type) {
+				case 'topRight':
+					moveX = xMax + drag.dx;
+					moveY = yMin + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.max(Math.min(moveX, start.x), prevBrush.bounds.x0),
+							x1: Math.min(Math.max(moveX, start.x), prevBrush.bounds.x1),
+							y0: Math.max(Math.min(moveY, end.y), prevBrush.bounds.y0),
+							y1: Math.min(Math.max(moveY, end.y), prevBrush.bounds.y1),
+						},
+					};
+
+				case 'topLeft':
+					moveX = xMin + drag.dx;
+					moveY = yMin + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.max(Math.min(moveX, end.x), prevBrush.bounds.x0),
+							x1: Math.min(Math.max(moveX, end.x), prevBrush.bounds.x1),
+							y0: Math.max(Math.min(moveY, end.y), prevBrush.bounds.y0),
+							y1: Math.min(Math.max(moveY, end.y), prevBrush.bounds.y1),
+						},
+					};
+
+				case 'bottomLeft':
+					moveX = xMin + drag.dx;
+					moveY = yMax + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.max(Math.min(moveX, end.x), prevBrush.bounds.x0),
+							x1: Math.min(Math.max(moveX, end.x), prevBrush.bounds.x1),
+							y0: Math.max(Math.min(moveY, start.y), prevBrush.bounds.y0),
+							y1: Math.min(Math.max(moveY, start.y), prevBrush.bounds.y1),
+						},
+					};
+				case 'bottomRight':
+					moveX = xMax + drag.dx;
+					moveY = yMax + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.max(Math.min(moveX, start.x), prevBrush.bounds.x0),
+							x1: Math.min(Math.max(moveX, start.x), prevBrush.bounds.x1),
+							y0: Math.max(Math.min(moveY, start.y), prevBrush.bounds.y0),
+							y1: Math.min(Math.max(moveY, start.y), prevBrush.bounds.y1),
+						},
+					};
+				// BrushCorner skips edges use BrushHandle for those
+				case 'top':
+				case 'right':
+				case 'bottom':
+				case 'left':
+				default:
+					return prevBrush;
+			}
+		});
+	}
+
+	function cornerDragEnd() {
+		const { updateBrush, onBrushEnd } = props;
+
+		updateBrush((prevBrush: Readonly<BrushState>) => {
+			const { start, end, extent } = prevBrush;
+			normalizeBrushStartEnd(start, end, extent);
+			const nextBrush = {
+				...prevBrush,
+				start,
+				end,
+				activeHandle: null,
+				domain: {
+					x0: Math.min(start.x, end.x),
+					x1: Math.max(start.x, end.x),
+					y0: Math.min(start.y, end.y),
+					y1: Math.max(start.y, end.y),
+				},
+			};
+			if (onBrushEnd) {
+				onBrushEnd(nextBrush);
+			}
+
+			return nextBrush;
+		});
+	}
+
+	const { type, brush, stageWidth, stageHeight, style: styleProp = {}, corner } = props;
+	const cursor =
+		styleProp?.cursor ||
+		(type === 'topLeft' || type === 'bottomRight' ? 'nwse-resize' : 'nesw-resize');
+	const pointerEvents = brush.activeHandle || brush.isBrushing ? 'none' : 'all';
+
+	return (
+		<Drag
+			width={stageWidth}
+			height={stageHeight}
+			onDragMove={cornerDragMove}
+			onDragEnd={cornerDragEnd}
+			resetOnStart
+		>
+			{({ dragMove, dragEnd, dragStart, isDragging }) => (
+				<g>
+					{isDragging && (
+						<rect
+							fill="transparent"
+							width={stageWidth}
+							height={stageHeight}
+							style={{ cursor }}
+							onPointerMove={dragMove}
+							onPointerUp={dragEnd}
+						/>
+					)}
+					<rect
+						fill="transparent"
+						onPointerDown={dragStart}
+						onPointerMove={dragMove}
+						onPointerUp={dragEnd}
+						className={`visx-brush-corner-${type}`}
+						style={{ cursor, pointerEvents, ...styleProp }}
+						{...corner}
+					/>
+				</g>
+			)}
+		</Drag>
+	);
+}

package/src/brush/BrushCorner.tsrx.d.ts

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties } from 'react';
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { ResizeTriggerAreas } from './types';
+export type BrushCornerProps = {
+    stageWidth: number;
+    stageHeight: number;
+    brush: BrushState;
+    updateBrush: (update: UpdateBrush) => void;
+    onBrushEnd?: (brush: BrushState) => void;
+    type: ResizeTriggerAreas;
+    style?: CSSProperties;
+    corner: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type BrushCornerState = {};
+export default function BrushCorner(props: BrushCornerProps): import("react").JSX.Element;

package/src/brush/BrushHandle.tsrx

@@ -0,0 +1,222 @@
+/* eslint react/jsx-handler-names: 0 */
+import type { ReactNode } from 'react';
+import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
+import { Drag } from '@octanejs/visx/drag';
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { BrushPageOffset, BrushingType, ResizeTriggerAreas } from './types';
+import { getPageCoordinates, normalizeBrushStartEnd } from './utils';
+
+type HandleProps = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+export type BrushHandleProps = {
+	stageWidth: number;
+	stageHeight: number;
+	brush: BrushState;
+	updateBrush: (update: UpdateBrush) => void;
+	onBrushStart?: (brush: DragArgs) => void;
+	onBrushEnd?: (brush: BrushState) => void;
+	type: ResizeTriggerAreas;
+	handle: HandleProps;
+	isControlled?: boolean;
+	isDragInProgress?: boolean;
+	onBrushHandleChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
+	renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+};
+
+export type BrushHandleRenderProps = HandleProps & {
+	/** if brush extent is not active this prop is set to false */
+	isBrushActive: boolean;
+	className: string;
+};
+
+/** BrushHandle's are placed along the bounds of the brush and handle Drag events which update the passed brush. */
+export default function BrushHandle(props: BrushHandleProps) {
+	function handleDragStart(drag: DragArgs) {
+		const { onBrushHandleChange, type, onBrushStart } = props;
+
+		if (onBrushHandleChange) {
+			onBrushHandleChange(type, getPageCoordinates(drag.event));
+		}
+		if (onBrushStart) {
+			onBrushStart(drag);
+		}
+	}
+
+	function handleDragMove(drag: DragArgs) {
+		const { updateBrush, type, isControlled } = props;
+		if (!drag.isDragging || isControlled) return;
+
+		updateBrush((prevBrush: BrushState) => {
+			const { start, end } = prevBrush;
+			let move = 0;
+			const xMax = Math.max(start.x, end.x);
+			const xMin = Math.min(start.x, end.x);
+			const yMax = Math.max(start.y, end.y);
+			const yMin = Math.min(start.y, end.y);
+			switch (type) {
+				case 'right':
+					move = xMax + drag.dx;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.max(Math.min(move, start.x), prevBrush.bounds.x0),
+							x1: Math.min(Math.max(move, start.x), prevBrush.bounds.x1),
+						},
+					};
+				case 'left':
+					move = xMin + drag.dx;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							x0: Math.min(move, end.x),
+							x1: Math.max(move, end.x),
+						},
+					};
+				case 'bottom':
+					move = yMax + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							y0: Math.min(move, start.y),
+							y1: Math.max(move, start.y),
+						},
+					};
+				case 'top':
+					move = yMin + drag.dy;
+					return {
+						...prevBrush,
+						activeHandle: type,
+						extent: {
+							...prevBrush.extent,
+							y0: Math.min(move, end.y),
+							y1: Math.max(move, end.y),
+						},
+					};
+				// BrushHandle skips corners use BrushCorner for those
+				case 'topLeft':
+				case 'topRight':
+				case 'bottomLeft':
+				case 'bottomRight':
+				default:
+					return prevBrush;
+			}
+		});
+	}
+
+	function handleDragEnd() {
+		const { updateBrush, onBrushEnd, onBrushHandleChange, isControlled } = props;
+
+		if (!isControlled) {
+			updateBrush((prevBrush: BrushState) => {
+				const { start, end, extent } = prevBrush;
+				normalizeBrushStartEnd(start, end, extent);
+				const nextBrush: BrushState = {
+					...prevBrush,
+					start,
+					end,
+					activeHandle: null,
+					isBrushing: false,
+					extent: {
+						x0: Math.min(start.x, end.x),
+						x1: Math.max(start.x, end.x),
+						y0: Math.min(start.y, end.y),
+						y1: Math.max(start.y, end.y),
+					},
+				};
+				if (onBrushEnd) {
+					onBrushEnd(nextBrush);
+				}
+
+				return nextBrush;
+			});
+		}
+
+		if (onBrushHandleChange) {
+			onBrushHandleChange();
+		}
+	}
+
+	const {
+		stageWidth,
+		stageHeight,
+		brush,
+		type,
+		handle,
+		isControlled,
+		isDragInProgress,
+		renderBrushHandle,
+	} = props;
+	const { x, y, width, height } = handle;
+	const cursor = type === 'right' || type === 'left' ? 'ew-resize' : 'ns-resize';
+	return (
+		<Drag
+			width={stageWidth}
+			height={stageHeight}
+			onDragStart={handleDragStart}
+			onDragMove={handleDragMove}
+			onDragEnd={handleDragEnd}
+			resetOnStart
+			isDragging={isControlled ? isDragInProgress : undefined}
+		>
+			{({ dragStart, dragEnd, dragMove, isDragging }) => (
+				<g>
+					{/** capture mouse events while dragging */}
+					{isDragging && (
+						<rect
+							fill="transparent"
+							width={stageWidth}
+							height={stageHeight}
+							style={{ cursor }}
+							onPointerMove={dragMove}
+							onPointerUp={isControlled ? undefined : dragEnd}
+							onPointerLeave={isControlled ? undefined : dragEnd}
+						/>
+					)}
+					{!renderBrushHandle && (
+						<rect
+							x={x}
+							y={y}
+							width={width}
+							height={height}
+							fill="transparent"
+							className={`visx-brush-handle-${type}`}
+							onPointerDown={dragStart}
+							onPointerMove={dragMove}
+							onPointerUp={isControlled ? undefined : dragEnd}
+							style={{
+								cursor,
+								pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all',
+							}}
+						/>
+					)}
+					{renderBrushHandle && (
+						<g
+							onPointerDown={dragStart}
+							onPointerMove={dragMove}
+							onPointerUp={isControlled ? undefined : dragEnd}
+						>
+							{renderBrushHandle({
+								...props.handle,
+								height: stageHeight,
+								className: `visx-brush-handle-${type}`,
+
+								isBrushActive: brush.extent.x0 !== -1 && brush.extent.x1 !== -1,
+							})}
+						</g>
+					)}
+				</g>
+			)}
+		</Drag>
+	);
+}