_handleMouseMove() — react Function Reference

Architecture documentation for the _handleMouseMove() function in HorizontalPanAndZoomView.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
  34d782a2_e7cd_4614_a385_810a1041f544["_handleMouseMove()"]
  286a732c_79f8_d4a2_284e_8f3ea43c6d7d["HorizontalPanAndZoomView"]
  34d782a2_e7cd_4614_a385_810a1041f544 -->|defined in| 286a732c_79f8_d4a2_284e_8f3ea43c6d7d
  6153f3f9_e7cd_ad34_9d0a_89b5424a4b64["handleInteraction()"]
  6153f3f9_e7cd_ad34_9d0a_89b5424a4b64 -->|calls| 34d782a2_e7cd_4614_a385_810a1041f544
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint()"]
  34d782a2_e7cd_4614_a385_810a1041f544 -->|calls| 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  94cfe42d_2d3d_5da3_cd07_23705b8b0ec6["translateState()"]
  34d782a2_e7cd_4614_a385_810a1041f544 -->|calls| 94cfe42d_2d3d_5da3_cd07_23705b8b0ec6
  style 34d782a2_e7cd_4614_a385_810a1041f544 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js lines 154–185

  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
    const isHovered = rectContainsPoint(
      interaction.payload.location,
      this.frame,
    );
    if (isHovered && viewRefs.hoveredView === null) {
      viewRefs.hoveredView = this;
    }

    if (viewRefs.activeView === this) {
      this.currentCursor = 'grabbing';
    } else if (isHovered) {
      this.currentCursor = 'grab';
    }

    if (!this._isPanning) {
      return;
    }

    // Don't prevent mouse-move events from bubbling if they are vertical drags.
    const {movementX, movementY} = interaction.payload.event;
    if (Math.abs(movementX) < Math.abs(movementY)) {
      return;
    }

    const newState = translateState({
      state: this._viewState.horizontalScrollState,
      delta: movementX,
      containerLength: this.frame.size.width,
    });
    this._viewState.updateHorizontalScrollState(newState);
  }