_handleMouseMove() — react Function Reference

Architecture documentation for the _handleMouseMove() function in ThrownErrorsView.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ _handleMouseMove() — react Function Reference

Dependency Diagram

graph TD
  b54f8f29_d27e_011a_c427_25d53fdaa0d6["_handleMouseMove()"]
  2c3a6a4e_0c73_35ac_af62_6070bfc10612["ThrownErrorsView"]
  b54f8f29_d27e_011a_c427_25d53fdaa0d6 -->|defined in| 2c3a6a4e_0c73_35ac_af62_6070bfc10612
  1bfdb03c_42d6_0382_3024_7047540f0e44["handleInteraction()"]
  1bfdb03c_42d6_0382_3024_7047540f0e44 -->|calls| b54f8f29_d27e_011a_c427_25d53fdaa0d6
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  b54f8f29_d27e_011a_c427_25d53fdaa0d6 -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp()"]
  b54f8f29_d27e_011a_c427_25d53fdaa0d6 -->|calls| a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  25b9c762_593d_45b1_d8ca_eb9b3db001b9["widthToDuration()"]
  b54f8f29_d27e_011a_c427_25d53fdaa0d6 -->|calls| 25b9c762_593d_45b1_d8ca_eb9b3db001b9
  style b54f8f29_d27e_011a_c427_25d53fdaa0d6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js lines 189–232

  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
    const {frame, onHover, visibleArea} = this;
    if (!onHover) {
      return;
    }

    const {location} = interaction.payload;
    if (!rectContainsPoint(location, visibleArea)) {
      onHover(null);
      return;
    }

    const {
      _profilerData: {thrownErrors},
    } = this;
    const scaleFactor = positioningScaleFactor(
      this._intrinsicSize.width,
      frame,
    );
    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
    const eventTimestampAllowance = widthToDuration(
      REACT_EVENT_DIAMETER / 2,
      scaleFactor,
    );

    // Because data ranges may overlap, we want to find the last intersecting item.
    // This will always be the one on "top" (the one the user is hovering over).
    for (let index = thrownErrors.length - 1; index >= 0; index--) {
      const event = thrownErrors[index];
      const {timestamp} = event;

      if (
        timestamp - eventTimestampAllowance <= hoverTimestamp &&
        hoverTimestamp <= timestamp + eventTimestampAllowance
      ) {
        this.currentCursor = 'context-menu';
        viewRefs.hoveredView = this;
        onHover(event);
        return;
      }
    }

    onHover(null);
  }