@mui/x-charts 8.0.0-beta.0 → 8.0.0-beta.2

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -9,9 +9,9 @@ import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/u
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
-import { getAxisValue } from "./getAxisValue.js";
+import { getAxisIndex } from "./getAxisValue.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
-import { selectorChartsInteractionAxis, selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
+import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -33,7 +33,6 @@ export const useChartCartesianAxis = ({
   }
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const processedSeries = useSelector(store, selectorChartSeriesProcessed);
-  const interactionAxis = useSelector(store, selectorChartsInteractionAxis);
   const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
@@ -75,58 +74,31 @@ export const useChartCartesianAxis = ({
       if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
-        store.update(prev => _extends({}, prev, {
-          interaction: {
-            item: null,
-            axis: {
-              x: null,
-              y: null
-            }
-          }
-        }));
+        instance.cleanInteraction?.();
         return;
       }
-      instance.setAxisInteraction?.({
-        x: getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x),
-        y: getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)
-      });
+      instance.setPointerCoordinate?.(svgPoint);
     };
     const handleDown = event => {
       const target = event.currentTarget;
       if (!target) {
         return;
       }
-      if (target.hasPointerCapture(event.pointerId)) {
+      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
         target.releasePointerCapture(event.pointerId);
       }
     };
     element.addEventListener('pointerdown', handleDown);
     element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointerout', handleOut);
     element.addEventListener('pointercancel', handleOut);
     element.addEventListener('pointerleave', handleOut);
     return () => {
       element.removeEventListener('pointerdown', handleDown);
       element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointerout', handleOut);
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
-  const axisInteractionRef = React.useRef({
-    x: null,
-    y: null
-  });
-
-  // This avoids re-attaching the event listener on mouse move.
-  React.useEffect(() => {
-    const {
-      x,
-      y
-    } = interactionAxis;
-    axisInteractionRef.current.x = x;
-    axisInteractionRef.current.y = y;
-  }, [interactionAxis]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;
@@ -137,15 +109,10 @@ export const useChartCartesianAxis = ({
       event.preventDefault();
       let dataIndex = null;
       let isXAxis = false;
-      if (axisInteractionRef.current.x === null && axisInteractionRef.current.y === null) {
-        const svgPoint = getSVGPoint(element, event);
-        const xIndex = getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
-        isXAxis = xIndex !== null && xIndex !== -1;
-        dataIndex = isXAxis ? xIndex : getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
-      } else {
-        isXAxis = axisInteractionRef.current.x !== null && axisInteractionRef.current.x.index !== -1;
-        dataIndex = isXAxis ? axisInteractionRef.current.x && axisInteractionRef.current.x.index : axisInteractionRef.current.y && axisInteractionRef.current.y.index;
-      }
+      const svgPoint = getSVGPoint(element, event);
+      const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
       const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
       if (dataIndex == null || dataIndex === -1) {
         return;
@@ -175,7 +142,7 @@ export const useChartCartesianAxis = ({
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, axisInteractionRef, usedXAxis, usedYAxis]);
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
   return {};
 };
 useChartCartesianAxis.params = {