recharts/lib/util/getRelativeCoordinate.js

React charts

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getRelativeCoordinate = getRelativeCoordinate;
/**
 * Type guard to check if the pointer event is from an SVG element.
 */
function isSvgPointer(pointer) {
  return 'getBBox' in pointer.currentTarget && typeof pointer.currentTarget.getBBox === 'function';
}

/**
 * Computes relative element coordinates from mouse or touch event.
 *
 * The output coordinates are relative to the top-left corner of the active element (= currentTarget),
 * where the top-left corner is (0, 0).
 * Moving right, the x-coordinate increases, and moving down, the y-coordinate increases.
 *
 * The coordinates are rounded to the nearest integer and account for CSS transform scale.
 * So element that's scaled will return the same coordinates as element that's not scaled.
 *
 * In other words: you zoom in or out, numbers stay the same.
 *
 * This function works with both HTML elements and SVG elements.
 *
 * It works with both Mouse and Touch events.
 * For Touch events, it returns an array of coordinates, one for each touch point.
 * For Mouse events, it returns a single coordinate object.
 *
 * @example
 * ```tsx
 * // In an HTML element event handler. Legend passes the native event as the 3rd argument.
 * <Legend onMouseMove={(_data, _i, e) => {
 *   // These coordinates are relative to the top-left corner of the Legend element
 *   const { relativeX, relativeY } = getRelativeCoordinate(e);
 *   console.log(`Mouse at Legend position: (${relativeX}, ${relativeY})`);
 * }}>
 * ```
 *
 * @example
 * ```tsx
 * // In an SVG element event handler. Area is an SVG element, and passes the event as second argument.
 * <Area onMouseMove={(_, e) => {
 *   const { relativeX, relativeY } = getRelativeCoordinate(e);
 *   console.log(`Mouse at Area position: (${relativeX}, ${relativeY})`);
 *   // Here you can call usePlotArea to convert to chart coordinates
 * }}>
 * ```
 *
 * @example
 * ```tsx
 * // In a chart root touch handler. Chart root passes the event as second argument.
 * <LineChart onTouchMove={(_, e) => {
 *   const touchPoints = getRelativeCoordinate(e);
 *   touchPoints.forEach(({ relativeX, relativeY }, index) => {
 *     console.log(`Touch point ${index} at LineChart position: (${relativeX}, ${relativeY})`);
 *   });
 * }}>
 * ```
 *
 * @since 3.8
 * @param event The mouse or touch event from React event handlers (works with both HTML and SVG elements)
 * @returns Coordinates relative to the top-left corner of the element. Single object for Mouse events, array of objects for Touch events.
 */

function getRelativeCoordinate(event) {
  var rect = event.currentTarget.getBoundingClientRect();
  var scaleX, scaleY;
  if (isSvgPointer(event)) {
    // For SVG elements, use getBBox() to get the intrinsic size in SVG coordinates
    var bbox = event.currentTarget.getBBox();
    scaleX = bbox.width > 0 ? rect.width / bbox.width : 1;
    scaleY = bbox.height > 0 ? rect.height / bbox.height : 1;
  } else {
    // For HTML elements, use offsetWidth/offsetHeight
    var element = event.currentTarget;
    scaleX = element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1;
    scaleY = element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1;
  }
  var getCoordinates = (clientX, clientY) => ({
    /*
     * Here it's important to use:
     * - event.clientX and event.clientY to get the mouse position relative to the viewport, including scroll.
     * - pageX and pageY are not used because they are relative to the whole document, and ignore scroll.
     * - rect.left and rect.top are used to get the position of the chart relative to the viewport.
     * - offsetX and offsetY are not used because they are relative to the offset parent
     *  which may or may not be the same as the clientX and clientY, depending on the position of the chart in the DOM
     *  and surrounding element styles. CSS position: relative, absolute, fixed, will change the offset parent.
     * - scaleX and scaleY are necessary for when the chart element is scaled using CSS `transform: scale(N)`.
     */
    relativeX: Math.round((clientX - rect.left) / scaleX),
    relativeY: Math.round((clientY - rect.top) / scaleY)
  });
  if ('touches' in event) {
    return Array.from(event.touches).map(touch => getCoordinates(touch.clientX, touch.clientY));
  }
  return getCoordinates(event.clientX, event.clientY);
}