@mui/x-charts/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useRegisterPointerInteractions = useRegisterPointerInteractions;
var React = _interopRequireWildcard(require("react"));
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _hooks = require("../../../../hooks");
var _useStore = require("../../../store/useStore");
var _ChartProvider = require("../../../../context/ChartProvider");
var _getSVGPoint = require("../../../getSVGPoint");
/**
 * Hook to get pointer interaction props for chart items.
 */
function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
  const {
    instance
  } = (0, _ChartProvider.useChartContext)();
  const svgRef = (0, _hooks.useSvgRef)();
  const store = (0, _useStore.useStore)();
  const interactionActive = React.useRef(false);
  const lastItemRef = React.useRef(undefined);
  const onItemEnterRef = (0, _useEventCallback.default)(() => onItemEnter?.());
  const onItemLeaveRef = (0, _useEventCallback.default)(() => onItemLeave?.());
  React.useEffect(() => {
    const svg = svgRef.current;
    if (!svg) {
      return undefined;
    }
    function onPointerEnter() {
      interactionActive.current = true;
    }
    function reset() {
      const lastItem = lastItemRef.current;
      if (lastItem) {
        lastItemRef.current = undefined;
        instance.removeTooltipItem(lastItem);
        instance.clearHighlight();
        onItemLeaveRef();
      }
    }
    function onPointerLeave() {
      interactionActive.current = false;
      reset();
    }
    const onPointerMove = function onPointerMove(event) {
      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svg, event);
      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
        reset();
        return;
      }
      const item = getItemAtPosition(store.state, svgPoint);
      if (item) {
        instance.setLastUpdateSource('pointer');
        instance.setTooltipItem(item);
        instance.setHighlight(item);
        onItemEnterRef();
        lastItemRef.current = item;
      } else {
        reset();
      }
    };
    svg.addEventListener('pointerleave', onPointerLeave);
    svg.addEventListener('pointermove', onPointerMove);
    svg.addEventListener('pointerenter', onPointerEnter);
    return () => {
      svg.removeEventListener('pointerenter', onPointerEnter);
      svg.removeEventListener('pointermove', onPointerMove);
      svg.removeEventListener('pointerleave', onPointerLeave);

      /* Clean up state if this item is unmounted while active. */
      if (interactionActive.current) {
        onPointerLeave();
      }
    };
  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, svgRef]);
}