_handleMouseMove() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2 called by 1

Entity Profile

BabelCompiler→ Validation→ _handleMouseMove() — react Function Reference

Dependency Diagram

graph TD
  81aa7ce8_ea82_55e8_c236_fdad49700b6a["_handleMouseMove()"]
  ef3af242_6989_01f2_141b_b5ae3fce4bc5["ReactMeasuresView"]
  81aa7ce8_ea82_55e8_c236_fdad49700b6a -->|defined in| ef3af242_6989_01f2_141b_b5ae3fce4bc5
  97de3d65_b18d_2369_7ff0_ed91c54a1633["handleInteraction()"]
  97de3d65_b18d_2369_7ff0_ed91c54a1633 -->|calls| 81aa7ce8_ea82_55e8_c236_fdad49700b6a
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  81aa7ce8_ea82_55e8_c236_fdad49700b6a -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp()"]
  81aa7ce8_ea82_55e8_c236_fdad49700b6a -->|calls| a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  style 81aa7ce8_ea82_55e8_c236_fdad49700b6a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js lines 303–361

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

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

    // Identify the lane being hovered over
    const adjustedCanvasMouseY = location.y - frame.origin.y;
    const renderedLaneIndex = Math.floor(
      adjustedCanvasMouseY / REACT_LANE_HEIGHT,
    );
    if (renderedLaneIndex < 0 || renderedLaneIndex >= _lanesToRender.length) {
      onHover(null);
      return;
    }
    const lane = _lanesToRender[renderedLaneIndex];

    // Find the measure in `lane` being hovered over.
    //
    // 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).
    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
    const measures = _profilerData.laneToReactMeasureMap.get(lane);
    if (!measures) {
      onHover(null);
      return;
    }

    for (let index = measures.length - 1; index >= 0; index--) {
      const measure = measures[index];
      const {duration, timestamp} = measure;

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

    onHover(null);
  }