[charts] Disable animations while zooming (#13807)

Signed-off-by: Jose C Quintas Jr <[email protected]>
mui · Jul 12, 2024 · 6c67a09 · 6c67a09
1 parent 37fae37
commit 6c67a09
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import {
  AreaPlot,
+ AreaPlotProps,
  LineChartProps,
  LineHighlightPlot,
  LinePlot,
+ LinePlotProps,
  MarkPlot,
 } from '@mui/x-charts/LineChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
@@ -56,8 +58,8 @@ const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProP
  {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
  {props.grid && <ChartsGrid {...gridProps} />}
  <g {...clipPathGroupProps}>
- <AreaPlot {...areaPlotProps} />
- <LinePlot {...linePlotProps} />
+ <AreaPlotZoom {...areaPlotProps} />
+ <LinePlotZoom {...linePlotProps} />
  <ChartsOverlay {...overlayProps} />
  </g>
  <ChartsAxis {...chartsAxisProps} />
@@ -78,4 +80,14 @@ function MarkPlotZoom(props: MarkPlotProps) {
  return <MarkPlot {...props} skipAnimation={isInteracting ? true : props.skipAnimation} />;
 }
 
+function LinePlotZoom(props: LinePlotProps) {
+ const { isInteracting } = useZoom();
+ return <LinePlot {...props} skipAnimation={isInteracting ? true : props.skipAnimation} />;
+}
+
+function AreaPlotZoom(props: AreaPlotProps) {
+ const { isInteracting } = useZoom();
+ return <AreaPlot {...props} skipAnimation={isInteracting ? true : props.skipAnimation} />;
+}
+
 export { LineChartPro };
diff --git a/packages/x-charts-pro/src/context/ZoomProvider/useSetupZoom.ts b/packages/x-charts-pro/src/context/ZoomProvider/useSetupZoom.ts
@@ -64,12 +64,13 @@ const isPointOutside = (
 };
 
 export const useSetupZoom = () => {
- const { zoomData, setZoomData, isZoomEnabled, options } = useZoom();
+ const { zoomData, setZoomData, isZoomEnabled, options, setIsInteracting } = useZoom();
  const area = useDrawingArea();
 
  const svgRef = useSvgRef();
  const eventCacheRef = React.useRef<PointerEvent[]>([]);
  const eventPrevDiff = React.useRef<number>(0);
+ const interactionTimeoutRef = React.useRef<number | undefined>(undefined);
 
  React.useEffect(() => {
  const element = svgRef.current;
@@ -89,6 +90,15 @@ export const useSetupZoom = () => {
  }
 
  event.preventDefault();
+ if (interactionTimeoutRef.current) {
+ clearTimeout(interactionTimeoutRef.current);
+ }
+ setIsInteracting(true);
+ // Debounce transition to `isInteractive=false`.
+ // Useful because wheel events don't have an "end" event.
+ interactionTimeoutRef.current = window.setTimeout(() => {
+ setIsInteracting(false);
+ }, 166);
 
  const newZoomData = zoomData.map((zoom) => {
  const option = options[zoom.axisId];
@@ -112,6 +122,7 @@ export const useSetupZoom = () => {
 
  function pointerDownHandler(event: PointerEvent) {
  eventCacheRef.current.push(event);
+ setIsInteracting(true);
  }
 
  function pointerMoveHandler(event: PointerEvent) {
@@ -176,6 +187,10 @@ export const useSetupZoom = () => {
  if (eventCacheRef.current.length < 2) {
  eventPrevDiff.current = 0;
  }
+
+ if (event.type === 'pointerup' || event.type === 'pointercancel') {
+ setIsInteracting(false);
+ }
  }
 
  element.addEventListener('wheel', wheelHandler);
@@ -200,8 +215,11 @@ export const useSetupZoom = () => {
  element.removeEventListener('pointerleave', pointerUpHandler);
  element.removeEventListener('touchstart', preventDefault);
  element.removeEventListener('touchmove', preventDefault);
+ if (interactionTimeoutRef.current) {
+ clearTimeout(interactionTimeoutRef.current);
+ }
  };
- }, [svgRef, setZoomData, zoomData, area, isZoomEnabled, options]);
+ }, [svgRef, setZoomData, zoomData, area, isZoomEnabled, options, setIsInteracting]);
 };
 
 /**