getMousePosition() — react Function Reference

Architecture documentation for the getMousePosition() function in Tooltip.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ getMousePosition() — react Function Reference

Dependency Diagram

graph TD
  e1a80482_d7ac_0192_bf17_6fcfe8a2bed9["getMousePosition()"]
  67a53ff5_5364_e0e2_039c_5bb44dfc1bd6["Tooltip.js"]
  e1a80482_d7ac_0192_bf17_6fcfe8a2bed9 -->|defined in| 67a53ff5_5364_e0e2_039c_5bb44dfc1bd6
  18091250_4636_e404_3b72_076fbd80ff67["Tooltip()"]
  18091250_4636_e404_3b72_076fbd80ff67 -->|calls| e1a80482_d7ac_0192_bf17_6fcfe8a2bed9
  style e1a80482_d7ac_0192_bf17_6fcfe8a2bed9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js lines 96–126

function getMousePosition(
  relativeContainer: null,
  mouseEvent: SyntheticMouseEvent,
) {
  if (relativeContainer !== null) {
    // Position within the nearest position:relative container.
    let targetContainer = relativeContainer;
    while (targetContainer.parentElement != null) {
      if (targetContainer.style.position === 'relative') {
        break;
      } else {
        targetContainer = targetContainer.parentElement;
      }
    }

    const {height, left, top, width} =
      targetContainer.getBoundingClientRect() as {
        height: number,
        left: number,
        top: number,
        width: number,
      };

    const mouseX = mouseEvent.clientX - left;
    const mouseY = mouseEvent.clientY - top;

    return {height, mouseX, mouseY, width};
  } else {
    return initialTooltipState;
  }
}