@mui/x-charts/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useChartPolarAxis = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _warning = require("@mui/x-internals/warning");
var _useSelector = require("../../../store/useSelector");
var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
var _defaultizeAxis = require("./defaultizeAxis");
var _useChartInteraction = require("../useChartInteraction");
var _useChartPolarAxis = require("./useChartPolarAxis.selectors");
var _getSVGPoint = require("../../../getSVGPoint");
var _coordinateTransformation = require("./coordinateTransformation");
const useChartPolarAxis = ({
  params,
  store,
  seriesConfig,
  svgRef,
  instance
}) => {
  const {
    rotationAxis,
    radiusAxis,
    dataset
  } = params;
  if (process.env.NODE_ENV !== 'production') {
    const ids = [...(rotationAxis ?? []), ...(radiusAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
    if (duplicates.size > 0) {
      (0, _warning.warnOnce)([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
    }
  }
  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
  const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
  const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
  const {
    axis: rotationAxisWithScale,
    axisIds: rotationAxisIds
  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRotationAxis);
  const {
    axis: radiusAxisWithScale,
    axisIds: radiusAxisIds
  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRadiusAxis);

  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
  const isFirstRender = React.useRef(true);
  React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    store.update(prev => (0, _extends2.default)({}, prev, {
      polarAxis: (0, _extends2.default)({}, prev.polarAxis, {
        rotation: (0, _defaultizeAxis.defaultizeAxis)(rotationAxis, dataset, 'rotation'),
        radius: (0, _defaultizeAxis.defaultizeAxis)(radiusAxis, dataset, 'radius')
      })
    }));
  }, [seriesConfig, drawingArea, rotationAxis, radiusAxis, dataset, store]);
  const svg2rotation = React.useMemo(() => (0, _coordinateTransformation.generateSvg2rotation)({
    cx: center.cx,
    cy: center.cy
  }), [center.cx, center.cy]);
  const svg2polar = React.useMemo(() => (0, _coordinateTransformation.generateSvg2polar)({
    cx: center.cx,
    cy: center.cy
  }), [center.cx, center.cy]);
  const polar2svg = React.useMemo(() => (0, _coordinateTransformation.generatePolar2svg)({
    cx: center.cx,
    cy: center.cy
  }), [center.cx, center.cy]);
  const usedRotationAxisId = rotationAxisIds[0];
  const usedRadiusAxisId = radiusAxisIds[0];

  // Use a ref to avoid rerendering on every mousemove event.
  const mousePosition = React.useRef({
    isInChart: false,
    x: -1,
    y: -1
  });
  React.useEffect(() => {
    const element = svgRef.current;
    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
      return () => {};
    }
    const handleOut = () => {
      mousePosition.current = {
        isInChart: false,
        x: -1,
        y: -1
      };
      instance.cleanInteraction?.();
    };
    const handleMove = event => {
      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
      mousePosition.current.x = svgPoint.x;
      mousePosition.current.y = svgPoint.y;

      // Test if it's in the drawing area
      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
        if (mousePosition.current.isInChart) {
          instance?.cleanInteraction();
          mousePosition.current.isInChart = false;
        }
        return;
      }

      // Test if it's in the radar circle
      const radiusSquare = (center.cx - svgPoint.x) ** 2 + (center.cy - svgPoint.y) ** 2;
      const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
      if (radiusSquare > maxRadius ** 2) {
        if (mousePosition.current.isInChart) {
          instance?.cleanInteraction();
          mousePosition.current.isInChart = false;
        }
        return;
      }
      mousePosition.current.isInChart = true;
      instance.setPointerCoordinate?.(svgPoint);
    };
    const handleDown = event => {
      const target = event.currentTarget;
      if (!target) {
        return;
      }
      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, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation]);
  return {
    instance: {
      svg2polar,
      svg2rotation,
      polar2svg
    }
  };
};
exports.useChartPolarAxis = useChartPolarAxis;
useChartPolarAxis.params = {
  rotationAxis: true,
  radiusAxis: true,
  dataset: true,
  disableAxisListener: true
};
useChartPolarAxis.getInitialState = params => ({
  polarAxis: {
    rotation: (0, _defaultizeAxis.defaultizeAxis)(params.rotationAxis, params.dataset, 'rotation'),
    radius: (0, _defaultizeAxis.defaultizeAxis)(params.radiusAxis, params.dataset, 'radius')
  }
});