feedback

Author: alexfauquette

packages/x-charts-pro/src/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.ts

@@ -8,7 +8,7 @@ import {
 import { type UseChartProZoomSignature } from '../useChartProZoom.types';
 import { translateZoom } from './useZoom.utils';
 import { selectorPanInteractionConfig } from '../ZoomInteractionConfig.selectors';
-import { usePanGesture } from '../../zoomGestures/usePanGesture';
+import { useDragGesture } from '../../zoomGestures/useDragGesture';
 
 export const usePanOnDrag = (
   {
@@ -24,7 +24,7 @@ export const usePanOnDrag = (
   const isPanOnDragEnabled: boolean =
     Object.values(optionsLookup).some((v) => v.panning) && Boolean(config);
 
-  usePanGesture(instance, {
+  useDragGesture(instance, {
     config: config ?? undefined,
     enabled: isPanOnDragEnabled,
     onPan: (delta) => {

packages/x-charts-pro/src/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.ts

@@ -8,7 +8,7 @@ import {
 import { type UseChartProZoomSignature } from '../useChartProZoom.types';
 import { translateZoom } from './useZoom.utils';
 import { selectorPanInteractionConfig } from '../ZoomInteractionConfig.selectors';
-import { usePanOnPressGesture } from '../../zoomGestures/usePanOnPressGesture';
+import { useDragOnPressGesture } from '../../zoomGestures/useDragOnPressGesture';
 
 export const usePanOnPressAndDrag = (
   {
@@ -24,7 +24,7 @@ export const usePanOnPressAndDrag = (
   const isPanOnPressAndDragEnabled: boolean =
     Object.values(optionsLookup).some((v) => v.panning) && Boolean(config);
 
-  usePanOnPressGesture(instance, {
+  useDragOnPressGesture(instance, {
     config: config ?? undefined,
     enabled: isPanOnPressAndDragEnabled,
     onPan: (delta) => {

packages/x-charts-pro/src/internals/plugins/zoomGestures/index.ts

@@ -1,4 +1,5 @@
-export { usePanGesture, type UsePanGestureOptions } from './usePanGesture';
+export { useDragGesture, type UseDragGestureOptions } from './useDragGesture';
+export { useDragOnPressGesture, type UseDragOnPressGestureOptions } from './useDragOnPressGesture';
 export { useWheelGesture, type UseWheelGestureOptions } from './useWheelGesture';
 export { usePinchGesture, type UsePinchGestureOptions } from './usePinchGesture';
 export type { GestureInstance, PanGestureConfig, ChartPoint } from './zoomGestures.types';

…ls/plugins/zoomGestures/usePanGesture.ts …s/plugins/zoomGestures/useDragGesture.tspackages/x-charts-pro/src/internals/plugins/zoomGestures/usePanGesture.ts renamed to packages/x-charts-pro/src/internals/plugins/zoomGestures/useDragGesture.ts packages/x-charts-pro/src/internals/plugins/zoomGestures/usePanGesture.ts renamed to packages/x-charts-pro/src/internals/plugins/zoomGestures/useDragGesture.ts

@@ -4,7 +4,7 @@ import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { type PanEvent } from '@mui/x-internal-gestures/core';
 import { type ChartPoint, type GestureInstance, type PanGestureConfig } from './zoomGestures.types';
 
-export interface UsePanGestureOptions {
+export interface UseDragGestureOptions {
   /** Whether the gesture is active. */
   enabled: boolean;
   /** Pointer/keyboard gating forwarded to the interaction listener. */
@@ -34,7 +34,7 @@ export interface UsePanGestureOptions {
  * the rAF throttling. What to do with the delta is entirely up to `onPan` — cartesian
  * zoom translates an axis range, a map translates the projection, etc.
  */
-export function usePanGesture(instance: GestureInstance, options: UsePanGestureOptions): void {
+export function useDragGesture(instance: GestureInstance, options: UseDragGestureOptions): void {
   const { enabled, config, onPanStart, onPan, onPanEnd } = options;
   const { chartsLayerContainerRef } = instance;
 

…ins/zoomGestures/usePanOnPressGesture.ts …ns/zoomGestures/useDragOnPressGesture.tspackages/x-charts-pro/src/internals/plugins/zoomGestures/usePanOnPressGesture.ts renamed to packages/x-charts-pro/src/internals/plugins/zoomGestures/useDragOnPressGesture.ts packages/x-charts-pro/src/internals/plugins/zoomGestures/usePanOnPressGesture.ts renamed to packages/x-charts-pro/src/internals/plugins/zoomGestures/useDragOnPressGesture.ts

@@ -4,7 +4,7 @@ import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import type { PanEvent } from '@mui/x-internal-gestures/core';
 import type { ChartPoint, GestureInstance, PanGestureConfig } from './zoomGestures.types';
 
-export interface UsePanOnPressGestureOptions {
+export interface UseDragOnPressGestureOptions {
   /** Whether the gesture is active. */
   enabled: boolean;
   /** Pointer/keyboard gating forwarded to the interaction listener. */
@@ -28,15 +28,13 @@ export interface UsePanOnPressGestureOptions {
 }
 
 /**
- * Generic drag-to-pan gesture binding, decoupled from any coordinate system.
+ * Generic drag-to-pan gesture binding.
  *
- * It owns the listener lifecycle, the per-frame accumulation of the pixel delta, and
- * the rAF throttling. What to do with the delta is entirely up to `onPan` — cartesian
- * zoom translates an axis range, a map translates the projection, etc.
+ * It owns the listener lifecycle, and allows the user to create their own interactions by providing the delta change of the interaction.
  */
-export function usePanOnPressGesture(
+export function useDragOnPressGesture(
   instance: GestureInstance,
-  options: UsePanOnPressGestureOptions,
+  options: UseDragOnPressGestureOptions,
 ): void {
   const { enabled, config, onPanStart, onPan, onPanEnd } = options;
   const { chartsLayerContainerRef } = instance;

packages/x-charts-pro/src/internals/plugins/zoomGestures/useWheelGesture.ts

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getChartPoint } from '@mui/x-charts/internals';
 import { type KeyboardKey } from '@mui/x-internal-gestures/core';
 import { type ChartPoint, type GestureInstance } from './zoomGestures.types';
@@ -45,6 +46,8 @@ export function useWheelGesture(instance: GestureInstance, options: UseWheelGest
       return () => {};
     }
 
+    const rafThrottledOnWheel = rafThrottle(onWheelRef.current);
+
     const handler = instance.addInteractionListener('zoomTurnWheel', (event) => {
       const point = getChartPoint(element, {
         clientX: event.detail.centroid.x,
@@ -67,7 +70,7 @@ export function useWheelGesture(instance: GestureInstance, options: UseWheelGest
 
       event.detail.srcEvent.preventDefault();
 
-      onWheelRef.current(point, event.detail.srcEvent as WheelEvent);
+      rafThrottledOnWheel(point, event.detail.srcEvent as WheelEvent);
     });
 
     return () => {
@@ -77,6 +80,7 @@ export function useWheelGesture(instance: GestureInstance, options: UseWheelGest
         startedOutsideTimeoutRef.current = null;
       }
       startedOutsideRef.current = false;
+      rafThrottledOnWheel.clear();
     };
   }, [chartsLayerContainerRef, enabled, instance]);
 }