_handleMouseMove() — react Function Reference

Architecture documentation for the _handleMouseMove() function in SchedulingEventsView.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
  c595d935_d7b4_ffea_37fb_def998a35c5d["_handleMouseMove()"]
  b603a917_4a82_e943_1f8b_6d182bba008b["SchedulingEventsView"]
  c595d935_d7b4_ffea_37fb_def998a35c5d -->|defined in| b603a917_4a82_e943_1f8b_6d182bba008b
  f1973f0e_f579_1212_e145_55004bca6693["handleInteraction()"]
  f1973f0e_f579_1212_e145_55004bca6693 -->|calls| c595d935_d7b4_ffea_37fb_def998a35c5d
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  c595d935_d7b4_ffea_37fb_def998a35c5d -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp()"]
  c595d935_d7b4_ffea_37fb_def998a35c5d -->|calls| a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  25b9c762_593d_45b1_d8ca_eb9b3db001b9["widthToDuration()"]
  c595d935_d7b4_ffea_37fb_def998a35c5d -->|calls| 25b9c762_593d_45b1_d8ca_eb9b3db001b9
  style c595d935_d7b4_ffea_37fb_def998a35c5d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js lines 215–258

  _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: {schedulingEvents},
    } = 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 = schedulingEvents.length - 1; index >= 0; index--) {
      const event = schedulingEvents[index];
      const {timestamp} = event;

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

    onHover(null);
  }