_handleWheel() — react Function Reference

Architecture documentation for the _handleWheel() function in HorizontalPanAndZoomView.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ _handleWheel() — react Function Reference

Dependency Diagram

graph TD
  fd7bd265_3613_50c6_41d6_401ef40af331["_handleWheel()"]
  286a732c_79f8_d4a2_284e_8f3ea43c6d7d["HorizontalPanAndZoomView"]
  fd7bd265_3613_50c6_41d6_401ef40af331 -->|defined in| 286a732c_79f8_d4a2_284e_8f3ea43c6d7d
  6153f3f9_e7cd_ad34_9d0a_89b5424a4b64["handleInteraction()"]
  6153f3f9_e7cd_ad34_9d0a_89b5424a4b64 -->|calls| fd7bd265_3613_50c6_41d6_401ef40af331
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint()"]
  fd7bd265_3613_50c6_41d6_401ef40af331 -->|calls| 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  c31f920d_f533_0f23_d62e_7fc940a06959["zoomState()"]
  fd7bd265_3613_50c6_41d6_401ef40af331 -->|calls| c31f920d_f533_0f23_d62e_7fc940a06959
  94cfe42d_2d3d_5da3_cd07_23705b8b0ec6["translateState()"]
  fd7bd265_3613_50c6_41d6_401ef40af331 -->|calls| 94cfe42d_2d3d_5da3_cd07_23705b8b0ec6
  style fd7bd265_3613_50c6_41d6_401ef40af331 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js lines 197–244

  _handleWheel(interaction: WheelPlainInteraction | WheelWithShiftInteraction) {
    const {
      location,
      delta: {deltaX, deltaY},
    } = interaction.payload;

    if (!rectContainsPoint(location, this.frame)) {
      return; // Not scrolling on view
    }

    const absDeltaX = Math.abs(deltaX);
    const absDeltaY = Math.abs(deltaY);

    // Vertical scrolling zooms in and out (unless the SHIFT modifier is used).
    // Horizontal scrolling pans.
    if (absDeltaY > absDeltaX) {
      if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
        return;
      }

      if (interaction.type === 'wheel-shift') {
        // Shift modifier is for scrolling, not zooming.
        return;
      }

      const newState = zoomState({
        state: this._viewState.horizontalScrollState,
        multiplier: 1 + 0.005 * -deltaY,
        fixedPoint: location.x - this._viewState.horizontalScrollState.offset,

        minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
        maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
        containerLength: this.frame.size.width,
      });
      this._viewState.updateHorizontalScrollState(newState);
    } else {
      if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
        return;
      }

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