zoomToRange() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2 called by 1

Entity Profile

BabelCompiler→ Validation→ zoomToRange() — react Function Reference

Dependency Diagram

graph TD
  3fecd1d6_3b0e_08d7_18fe_cef444b6228a["zoomToRange()"]
  286a732c_79f8_d4a2_284e_8f3ea43c6d7d["HorizontalPanAndZoomView"]
  3fecd1d6_3b0e_08d7_18fe_cef444b6228a -->|defined in| 286a732c_79f8_d4a2_284e_8f3ea43c6d7d
  480f5b5e_d754_4ab1_da57_71bc19357caf["constructor()"]
  480f5b5e_d754_4ab1_da57_71bc19357caf -->|calls| 3fecd1d6_3b0e_08d7_18fe_cef444b6228a
  a56c87e4_5abf_4094_4e1a_cc6225040263["setScrollState()"]
  3fecd1d6_3b0e_08d7_18fe_cef444b6228a -->|calls| a56c87e4_5abf_4094_4e1a_cc6225040263
  73b69eb1_1def_ae18_854c_a93b29fe5e7d["moveStateToRange()"]
  3fecd1d6_3b0e_08d7_18fe_cef444b6228a -->|calls| 73b69eb1_1def_ae18_854c_a93b29fe5e7d
  style 3fecd1d6_3b0e_08d7_18fe_cef444b6228a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js lines 92–104

  zoomToRange(rangeStart: number, rangeEnd: number) {
    const newState = moveStateToRange({
      state: this._viewState.horizontalScrollState,
      rangeStart,
      rangeEnd,
      contentLength: this._intrinsicContentWidth,

      minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
      maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
      containerLength: this.frame.size.width,
    });
    this.setScrollState(newState);
  }