@mui/x-charts-pro 8.5.3 → 8.7.0

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.js";
+export const usePanOnDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+
+  // Add event for chart panning
+  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePanStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePanEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = rafThrottle((event, zoomData) => {
+      const newZoomData = translateZoom(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const panHandler = instance.addInteractionListener('pan', handlePan);
+    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    return () => {
+      panStartHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};

package/esm/internals/plugins/useChartProZoom/{useChartProZoom.utils.d.ts → gestureHooks/useZoom.utils.d.ts}

@@ -17,14 +17,6 @@ export declare function getWheelScaleRatio(event: WheelEvent, step: number): {
   scaleRatio: number;
   isZoomIn: boolean;
 };
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export declare function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number): {
-  scaleRatio: number;
-  isZoomIn: boolean;
-};
-export declare function getDiff(eventCache: PointerEvent[]): number;
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -35,11 +27,23 @@ export declare function getHorizontalCenterRatio(point: {
   left: number;
   width: number;
 }): number;
-export declare function preventDefault(event: TouchEvent): void;
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export declare function getVerticalCenterRatio(point: {
   x: number;
   y: number;
 }, area: {
   top: number;
   height: number;
-}): number;
+}): number;
+/**
+ * Translate the zoom data by a given movement.
+ */
+export declare function translateZoom(initialZoomData: readonly ZoomData[], movement: {
+  x: number;
+  y: number;
+}, drawingArea: {
+  width: number;
+  height: number;
+}, optionsLookup: Record<string | number, DefaultizedZoomOptions>): ZoomData[];

package/esm/internals/plugins/useChartProZoom/{useChartProZoom.utils.js → gestureHooks/useZoom.utils.js}

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 /**
  * Helper to get the range (in percents of a reference range) corresponding to a given scale.
  * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
@@ -76,34 +77,6 @@ export function getWheelScaleRatio(event, step) {
   };
 }
 
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export function getPinchScaleRatio(curDiff, prevDiff, step) {
-  const scaledStep = step / 1000;
-  let scaleRatio = 0;
-  let isZoomIn = false;
-  const hasMoved = prevDiff > 0;
-  if (hasMoved && curDiff > prevDiff) {
-    // The distance between the two pointers has increased
-    scaleRatio = 1 + scaledStep;
-    isZoomIn = true;
-  }
-  if (hasMoved && curDiff < prevDiff) {
-    // The distance between the two pointers has decreased
-    scaleRatio = 1 - scaledStep;
-    isZoomIn = false;
-  }
-  return {
-    scaleRatio,
-    isZoomIn
-  };
-}
-export function getDiff(eventCache) {
-  const [firstEvent, secondEvent] = eventCache;
-  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
-}
-
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -114,13 +87,50 @@ export function getHorizontalCenterRatio(point, area) {
   } = area;
   return (point.x - left) / width;
 }
-export function preventDefault(event) {
-  event.preventDefault();
-}
+
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export function getVerticalCenterRatio(point, area) {
   const {
     top,
     height
   } = area;
   return (point.y - top) / height * -1 + 1;
+}
+
+/**
+ * Translate the zoom data by a given movement.
+ */
+export function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
+  return initialZoomData.map(zoom => {
+    const options = optionsLookup[zoom.axisId];
+    if (!options || !options.panning) {
+      return zoom;
+    }
+    const min = zoom.start;
+    const max = zoom.end;
+    const span = max - min;
+    const MIN_PERCENT = options.minStart;
+    const MAX_PERCENT = options.maxEnd;
+    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+    let newMinPercent = min - displacement / dimension * span;
+    let newMaxPercent = max - displacement / dimension * span;
+    if (newMinPercent < MIN_PERCENT) {
+      newMinPercent = MIN_PERCENT;
+      newMaxPercent = newMinPercent + span;
+    }
+    if (newMaxPercent > MAX_PERCENT) {
+      newMaxPercent = MAX_PERCENT;
+      newMinPercent = newMaxPercent - span;
+    }
+    if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
+      return zoom;
+    }
+    return _extends({}, zoom, {
+      start: newMinPercent,
+      end: newMaxPercent
+    });
+  });
 }

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnPinch: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
+export const useZoomOnPinch = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+
+  // Zoom on pinch
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = rafThrottle(event => {
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const isZoomIn = event.detail.direction > 0;
+          const scaleRatio = 1 + event.detail.deltaScale;
+
+          // If the delta is 0, it means the pinch gesture is not valid.
+          if (event.detail.direction === 0) {
+            return zoom;
+          }
+          const point = getSVGPoint(element, {
+            clientX: event.detail.centroid.x,
+            clientY: event.detail.centroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('pinch', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnWheel: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
+export const useZoomOnWheel = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
+    const zoomOnWheelHandler = instance.addInteractionListener('turnWheel', event => {
+      const point = getSVGPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+
+      // This prevents a zoom event from being triggered when the mouse is outside the chart area.
+      // The timeout is used to prevent an weird behavior where if the mouse is outside but enters due to
+      // scrolling, then the zoom event is triggered.
+      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
+        startedOutsideRef.current = true;
+        if (startedOutsideTimeoutRef.current) {
+          clearTimeout(startedOutsideTimeoutRef.current);
+        }
+        startedOutsideTimeoutRef.current = setTimeout(() => {
+          startedOutsideRef.current = false;
+          startedOutsideTimeoutRef.current = null;
+        }, 100);
+        return;
+      }
+      event.detail.srcEvent.preventDefault();
+      rafThrottledSetZoomData(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getWheelScaleRatio(event.detail.srcEvent, option.step);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    return () => {
+      zoomOnWheelHandler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledSetZoomData.clear();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};

package/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -2,12 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
-import { useEventCallback } from '@mui/material/utils';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { useSelector, selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import debounce from '@mui/utils/debounce';
+import { useEventCallback } from '@mui/material/utils';
 import { calculateZoom } from "./calculateZoom.js";
-import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
+import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.js";
+import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.js";
+import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.js";
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 export function initializeZoomData(options, zoomData) {
@@ -43,10 +44,8 @@ export const useChartProZoom = ({
     zoomData: paramsZoomData,
     onZoomChange: onZoomChangeProp
   } = params;
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
   const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
 
   // Manage controlled state
   React.useEffect(() => {
@@ -142,228 +141,17 @@ export const useChartProZoom = ({
     return () => {
       removeIsInteracting.clear();
     };
-  }, [setZoomDataCallback, removeIsInteracting]);
+  }, [removeIsInteracting]);
 
   // Add events
-  const panningEventCacheRef = React.useRef([]);
-  const zoomEventCacheRef = React.useRef([]);
-  const eventPrevDiff = React.useRef(0);
-
-  // Add event for chart panning
-  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
-  const isDraggingRef = React.useRef(false);
-  const touchStartRef = React.useRef(null);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
-      return () => {};
-    }
-    const throttledHandlePan = rafThrottle((touchStart, point) => {
-      const movementX = point.x - touchStart.x;
-      const movementY = (point.y - touchStart.y) * -1;
-      const newZoomData = touchStart.zoomData.map(zoom => {
-        const options = optionsLookup[zoom.axisId];
-        if (!options || !options.panning) {
-          return zoom;
-        }
-        const min = zoom.start;
-        const max = zoom.end;
-        const span = max - min;
-        const MIN_PERCENT = options.minStart;
-        const MAX_PERCENT = options.maxEnd;
-        const movement = options.axisDirection === 'x' ? movementX : movementY;
-        const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
-        let newMinPercent = min - movement / dimension * span;
-        let newMaxPercent = max - movement / dimension * span;
-        if (newMinPercent < MIN_PERCENT) {
-          newMinPercent = MIN_PERCENT;
-          newMaxPercent = newMinPercent + span;
-        }
-        if (newMaxPercent > MAX_PERCENT) {
-          newMaxPercent = MAX_PERCENT;
-          newMinPercent = newMaxPercent - span;
-        }
-        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
-          return zoom;
-        }
-        return _extends({}, zoom, {
-          start: newMinPercent,
-          end: newMaxPercent
-        });
-      });
-      setZoomDataCallback(newZoomData);
-    });
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const touchStart = touchStartRef.current;
-      const point = getSVGPoint(element, event);
-      throttledHandlePan(touchStart, point);
-    };
-    const handleDown = event => {
-      panningEventCacheRef.current.push(event);
-      const point = getSVGPoint(element, event);
-      if (!instance.isPointInside(point.x, point.y)) {
-        return;
-      }
-      // If there is only one pointer, prevent selecting text
-      if (panningEventCacheRef.current.length === 1) {
-        event.preventDefault();
-      }
-      isDraggingRef.current = true;
-      touchStartRef.current = {
-        x: point.x,
-        y: point.y,
-        zoomData: store.getSnapshot().zoom.zoomData
-      };
-    };
-    const handleUp = event => {
-      panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      isDraggingRef.current = false;
-      touchStartRef.current = null;
-    };
-    element.addEventListener('pointerdown', handleDown);
-    document.addEventListener('pointermove', handlePan);
-    document.addEventListener('pointerup', handleUp);
-    document.addEventListener('pointercancel', handleUp);
-    document.addEventListener('pointerleave', handleUp);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      document.removeEventListener('pointermove', handlePan);
-      document.removeEventListener('pointerup', handleUp);
-      document.removeEventListener('pointercancel', handleUp);
-      document.removeEventListener('pointerleave', handleUp);
-      throttledHandlePan.clear();
-    };
-  }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
-
-  // Add event for chart zoom in/out
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
-      return () => {};
-    }
-    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
-    const wheelHandler = event => {
-      if (element === null) {
-        return;
-      }
-      const point = getSVGPoint(element, event);
-      if (!instance.isPointInside(point.x, point.y)) {
-        return;
-      }
-      event.preventDefault();
-
-      /*
-       * Need to throttle `setZoomDataCallback` instead of `wheelHandler` because we're calling `event.preventDefault()`.
-       * If we throttle the event, then some events' default behavior won't be prevented and the page will scroll while
-       * the user is trying to zoom in.
-       */
-      rafThrottledSetZoomData(prevZoomData => {
-        return prevZoomData.map(zoom => {
-          const option = optionsLookup[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
-          const {
-            scaleRatio,
-            isZoomIn
-          } = getWheelScaleRatio(event, option.step);
-          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
-          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-      });
-    };
-    function pointerDownHandler(event) {
-      zoomEventCacheRef.current.push(event);
-    }
-    const pointerMoveHandler = rafThrottle(function pointerMoveHandler(event) {
-      if (element === null) {
-        return;
-      }
-      const index = zoomEventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
-      zoomEventCacheRef.current[index] = event;
-
-      // Not a pinch gesture
-      if (zoomEventCacheRef.current.length !== 2) {
-        return;
-      }
-      const firstEvent = zoomEventCacheRef.current[0];
-      const curDiff = getDiff(zoomEventCacheRef.current);
-      setZoomDataCallback(prevZoomData => {
-        const newZoomData = prevZoomData.map(zoom => {
-          const option = optionsLookup[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const {
-            scaleRatio,
-            isZoomIn
-          } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
-
-          // If the scale ratio is 0, it means the pinch gesture is not valid.
-          if (scaleRatio === 0) {
-            return zoom;
-          }
-          const point = getSVGPoint(element, firstEvent);
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
-          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
-          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-        eventPrevDiff.current = curDiff;
-        return newZoomData;
-      });
-    });
-    function pointerUpHandler(event) {
-      zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      if (zoomEventCacheRef.current.length < 2) {
-        eventPrevDiff.current = 0;
-      }
-    }
-    element.addEventListener('wheel', wheelHandler);
-    element.addEventListener('pointerdown', pointerDownHandler);
-    element.addEventListener('pointermove', pointerMoveHandler);
-    element.addEventListener('pointerup', pointerUpHandler);
-    element.addEventListener('pointercancel', pointerUpHandler);
-    element.addEventListener('pointerout', pointerUpHandler);
-    element.addEventListener('pointerleave', pointerUpHandler);
-
-    // Prevent zooming the entire page on touch devices
-    element.addEventListener('touchstart', preventDefault);
-    element.addEventListener('touchmove', preventDefault);
-    return () => {
-      element.removeEventListener('wheel', wheelHandler);
-      element.removeEventListener('pointerdown', pointerDownHandler);
-      element.removeEventListener('pointermove', pointerMoveHandler);
-      element.removeEventListener('pointerup', pointerUpHandler);
-      element.removeEventListener('pointercancel', pointerUpHandler);
-      element.removeEventListener('pointerout', pointerUpHandler);
-      element.removeEventListener('pointerleave', pointerUpHandler);
-      element.removeEventListener('touchstart', preventDefault);
-      element.removeEventListener('touchmove', preventDefault);
-      pointerMoveHandler.clear();
-      rafThrottledSetZoomData.clear();
-    };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const pluginData = {
+    store,
+    instance,
+    svgRef
+  };
+  usePanOnDrag(pluginData, setZoomDataCallback);
+  useZoomOnWheel(pluginData, setZoomDataCallback);
+  useZoomOnPinch(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);

package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,12 +1,12 @@
 import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, any[]>;
-export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, []>;
 export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
-export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, boolean, any[]>;
-export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;