zoomState() — react Function Reference

Architecture documentation for the zoomState() function in scrollState.js from the react codebase.

Function javascript CompilerCore Gating calls 2 called by 1

Entity Profile

CompilerCore→ Gating→ zoomState() — react Function Reference

Dependency Diagram

graph TD
  58a69636_2363_37b0_d485_ddd21b8e3bc9["zoomState()"]
  37d9438e_2082_5e4c_b384_9d51dad9086d["scrollState.js"]
  58a69636_2363_37b0_d485_ddd21b8e3bc9 -->|defined in| 37d9438e_2082_5e4c_b384_9d51dad9086d
  0f15c11c_3672_191a_e2a8_1a7a26ab1b4f["_handleWheel()"]
  0f15c11c_3672_191a_e2a8_1a7a26ab1b4f -->|calls| 58a69636_2363_37b0_d485_ddd21b8e3bc9
  c2d1a75c_495e_c1ce_b29e_962645e102a8["clampLength()"]
  58a69636_2363_37b0_d485_ddd21b8e3bc9 -->|calls| c2d1a75c_495e_c1ce_b29e_962645e102a8
  e24f404f_92c3_9d70_b4dd_75b0c3d36b06["clampOffset()"]
  58a69636_2363_37b0_d485_ddd21b8e3bc9 -->|calls| e24f404f_92c3_9d70_b4dd_75b0c3d36b06
  style 58a69636_2363_37b0_d485_ddd21b8e3bc9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/utils/scrollState.js lines 114–156

export function zoomState({
  state,
  multiplier,
  fixedPoint,

  minContentLength,
  maxContentLength,
  containerLength,
}: {
  state: ScrollState,
  multiplier: number,
  fixedPoint: number,

  minContentLength: number,
  maxContentLength: number,
  containerLength: number,
}): ScrollState {
  // Length and offset must be computed separately, so that if the length is
  // clamped the offset will still be correct (unless it gets clamped too).

  const zoomedState = clampLength({
    state: {
      offset: state.offset,
      length: state.length * multiplier,
    },
    minContentLength,
    maxContentLength,
    containerLength,
  });

  // Adjust offset so that distance between containerStart<->fixedPoint is fixed
  const fixedPointFromContainer = fixedPoint + state.offset;
  const scaledFixedPoint = fixedPoint * (zoomedState.length / state.length);
  const offsetAdjustedState = clampOffset(
    {
      offset: fixedPointFromContainer - scaledFixedPoint,
      length: zoomedState.length,
    },
    containerLength,
  );

  return offsetAdjustedState;
}