[charts-pro] Zoom pointer improvements

docs/data/charts/zoom-and-pan/ExternalZoomManagement.tsx

@@ -14,7 +14,7 @@ const initialZoomData: ZoomData[] = [
   },
 ];
 export default function ExternalZoomManagement() {
-  const apiRef = React.useRef(undefined) as React.MutableRefObject<
+  const apiRef = React.useRef(undefined) as React.RefObject<
     ChartPublicAPI<[any]> | undefined
   >;
   const [zoomData, setZoomData] = React.useState(initialZoomData);

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

@@ -0,0 +1,85 @@
+'use client';
+import * as React from 'react';
+import {
+  ChartPlugin,
+  useSelector,
+  getSVGPoint,
+  selectorChartDrawingArea,
+  ZoomData,
+  selectorChartZoomOptionsLookup,
+} from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from '../useChartProZoom.types';
+import { translateZoom } from './useZoom.utils';
+
+export const usePanOnDrag = (
+  {
+    store,
+    instance,
+    svgRef,
+  }: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], 'store' | 'instance' | 'svgRef'>,
+  setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>,
+) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+
+  // 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 panHandler = instance.addInteractionListener<readonly ZoomData[]>('drag', (state) => {
+      if (state.pinching) {
+        state.cancel();
+        return undefined;
+      }
+
+      if (!state.memo) {
+        state.memo = store.getSnapshot().zoom.zoomData;
+      }
+
+      const point = getSVGPoint(element, {
+        clientX: state.xy[0],
+        clientY: state.xy[1],
+      });
+      const originalPoint = getSVGPoint(element, {
+        clientX: state.initial[0],
+        clientY: state.initial[1],
+      });
+      const movementX = point.x - originalPoint.x;
+      const movementY = (point.y - originalPoint.y) * -1;
+      const newZoomData = translateZoom(
+        state.memo,
+        { x: movementX, y: movementY },
+        {
+          width: drawingArea.width,
+          height: drawingArea.height,
+        },
+        optionsLookup,
+      );
+
+      setZoomDataCallback(newZoomData);
+      return state.memo;
+    });
+
+    return () => {
+      panHandler.cleanup();
+    };
+  }, [
+    instance,
+    svgRef,
+    isPanEnabled,
+    optionsLookup,
+    drawingArea.width,
+    drawingArea.height,
+    setZoomDataCallback,
+    store,
+  ]);
+};

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.utils.ts → packages/x-charts-pro/src/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.ts

@@ -102,35 +102,6 @@ export function getWheelScaleRatio(event: WheelEvent, step: number) {
   return { scaleRatio, isZoomIn };
 }
 
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number) {
-  const scaledStep = step / 1000;
-  let scaleRatio: number = 0;
-  let isZoomIn: boolean = 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: PointerEvent[]) {
-  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.
  */
@@ -142,14 +113,60 @@ export function getHorizontalCenterRatio(
   return (point.x - left) / width;
 }
 
-export function preventDefault(event: TouchEvent) {
-  event.preventDefault();
-}
-
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export function getVerticalCenterRatio(
   point: { x: number; y: number },
   area: { top: number; height: number },
 ) {
   const { top, height } = area;
   return ((point.y - top) / height) * -1 + 1;
 }
+
+/**
+ * Translate the zoom data by a given movement.
+ */
+export function translateZoom(
+  initialZoomData: readonly ZoomData[],
+  movement: { x: number; y: number },
+  drawingArea: { width: number; height: number },
+  optionsLookup: Record<string | number, DefaultizedZoomOptions>,
+) {
+  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 {
+      ...zoom,
+      start: newMinPercent,
+      end: newMaxPercent,
+    };
+  });
+}

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

@@ -0,0 +1,80 @@
+'use client';
+import * as React from 'react';
+import {
+  ChartPlugin,
+  useSelector,
+  getSVGPoint,
+  selectorChartDrawingArea,
+  ZoomData,
+  selectorChartZoomOptionsLookup,
+} from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from '../useChartProZoom.types';
+import {
+  getHorizontalCenterRatio,
+  getVerticalCenterRatio,
+  isSpanValid,
+  zoomAtPoint,
+} from './useZoom.utils';
+
+export const useZoomOnPinch = (
+  {
+    store,
+    instance,
+    svgRef,
+  }: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], 'store' | 'instance' | 'svgRef'>,
+  setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>,
+) => {
+  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 zoomHandler = instance.addInteractionListener('pinch', (state) => {
+      setZoomDataCallback((prevZoomData) => {
+        const newZoomData = prevZoomData.map((zoom) => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+
+          const scaledStep = option.step / 1000;
+          const isZoomIn = state.direction[0] > 0;
+          const scaleRatio = 1 + (isZoomIn ? scaledStep : -scaledStep);
+
+          // If the delta is 0, it means the pinch gesture is not valid.
+          if (state.delta[0] === 0) {
+            return zoom;
+          }
+
+          const point = getSVGPoint(element, {
+            clientX: state.origin[0],
+            clientY: state.origin[1],
+          });
+
+          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 };
+        });
+        return newZoomData;
+      });
+    });
+
+    return () => {
+      zoomHandler.cleanup();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+};

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

@@ -0,0 +1,80 @@
+'use client';
+import * as React from 'react';
+import {
+  ChartPlugin,
+  useSelector,
+  getSVGPoint,
+  selectorChartDrawingArea,
+  ZoomData,
+  selectorChartZoomOptionsLookup,
+} from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from '../useChartProZoom.types';
+import {
+  getHorizontalCenterRatio,
+  getVerticalCenterRatio,
+  getWheelScaleRatio,
+  isSpanValid,
+  zoomAtPoint,
+} from './useZoom.utils';
+
+export const useZoomOnWheel = (
+  {
+    store,
+    instance,
+    svgRef,
+  }: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], 'store' | 'instance' | 'svgRef'>,
+  setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>,
+) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+
+    const zoomOnWheelHandler = instance.addInteractionListener<readonly ZoomData[]>(
+      'wheel',
+      (state) => {
+        const point = getSVGPoint(element, state.event);
+
+        if (!instance.isPointInside(point)) {
+          return;
+        }
+
+        if (!state.memo) {
+          state.memo = store.getSnapshot().zoom.zoomData;
+        }
+
+        const newZoomData = state.memo.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(state.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 };
+        });
+
+        setZoomDataCallback(newZoomData);
+      },
+    );
+
+    return () => {
+      zoomOnWheelHandler.cleanup();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};