HorizontalPanAndZoomView Class — react Architecture

Source Code

packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js lines 39–245

export class HorizontalPanAndZoomView extends View {
  _contentView: View;
  _intrinsicContentWidth: number;
  _isPanning: boolean = false;
  _viewState: ViewState;

  constructor(
    surface: Surface,
    frame: Rect,
    contentView: View,
    intrinsicContentWidth: number,
    viewState: ViewState,
  ) {
    super(surface, frame);

    this._contentView = contentView;
    this._intrinsicContentWidth = intrinsicContentWidth;
    this._viewState = viewState;

    viewState.onHorizontalScrollStateChange(scrollState => {
      this.zoomToRange(scrollState.offset, scrollState.length);
    });

    this.addSubview(contentView);
  }

  /**
   * Just sets scroll state.
   * Use `_setStateAndInformCallbacksIfChanged` if this view's callbacks should also be called.
   *
   * @returns Whether state was changed
   * @private
   */
  setScrollState(proposedState: ScrollState) {
    const clampedState = clampState({
      state: proposedState,
      minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
      maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
      containerLength: this.frame.size.width,
    });
    if (
      !areScrollStatesEqual(clampedState, this._viewState.horizontalScrollState)
    ) {
      this.setNeedsDisplay();
    }
  }

  /**
   * Zoom to a specific range of the content specified as a range of the
   * content view's intrinsic content size.
   *
   * Does not inform callbacks of state change since this is a public API.
   */
  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);
  }

  desiredSize(): Size | IntrinsicSize {
    return this._contentView.desiredSize();
  }

  layoutSubviews() {
    const {offset, length} = this._viewState.horizontalScrollState;
    const proposedFrame = {
      origin: {
        x: this.frame.origin.x + offset,
        y: this.frame.origin.y,
      },
      size: {
        width: length,
        height: this.frame.size.height,