Viewing github.com/facebook/react/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js

```
/**
```

 * Copyright (c) Meta Platforms, Inc. and affiliates.

```
 *
```

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

```
 *
```
```
 * @flow
```
```
 */
```

import type {Size, IntrinsicSize, Rect} from './geometry';

```
import type {
```
```
  Interaction,
```
```
  MouseDownInteraction,
```
```
  MouseMoveInteraction,
```
```
  MouseUpInteraction,
```
```
  WheelWithShiftInteraction,
```
```
} from './useCanvasInteraction';
```

import type {ScrollState} from './utils/scrollState';

import type {ViewRefs} from './Surface';

import type {ViewState} from '../types';

```
import {Surface} from './Surface';
```
```
import {View} from './View';
```

import {rectContainsPoint} from './geometry';

```
import {
```
```
  clampState,
```
```
  areScrollStatesEqual,
```
```
  translateState,
```
```
} from './utils/scrollState';
```

import {MOVE_WHEEL_DELTA_THRESHOLD} from './constants';

import {COLORS} from '../content-views/constants';

```
const CARET_MARGIN = 3;
```
```
const CARET_WIDTH = 5;
```
```
const CARET_HEIGHT = 3;
```
```
type OnChangeCallback = (
```
```
  scrollState: ScrollState,
```
```
  containerLength: number,
```
```
) => void;
```

export class VerticalScrollView extends View {

```
  _contentView: View;
```
```
  _isPanning: boolean;
```
```
  _mutableViewStateKey: string;
```

  _onChangeCallback: OnChangeCallback | null;

```
  _scrollState: ScrollState;
```
```
  _viewState: ViewState;
```
```
  constructor(
```
```
    surface: Surface,
```
```
    frame: Rect,
```
```
    contentView: View,
```
```
    viewState: ViewState,
```
```
    label: string,
```
```
  ) {
```
```
    super(surface, frame);
```
```
    this._contentView = contentView;
```
```
    this._isPanning = false;
```

    this._mutableViewStateKey = label + ':VerticalScrollView';

```
    this._onChangeCallback = null;
```
```
    this._scrollState = {
```
```
      offset: 0,
```
```
      length: 0,
```
```
    };
```
```
    this._viewState = viewState;
```
```
    this.addSubview(contentView);
```
```
    this._restoreMutableViewState();
```
```
  }
```
```
  setFrame(newFrame: Rect) {
```
```
    super.setFrame(newFrame);
```
```
    // Revalidate scrollState
```

    this._setScrollState(this._scrollState);

```
  }
```

  desiredSize(): Size | IntrinsicSize {

    return this._contentView.desiredSize();

```
  }
```

  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {

```
    super.draw(context, viewRefs);
```

    // Show carets if there's scroll overflow above or below the viewable area.

    if (this.frame.size.height > CARET_HEIGHT * 2 + CARET_MARGIN * 3) {

      const offset = this._scrollState.offset;

      const desiredSize = this._contentView.desiredSize();

```
      const above = offset;
```

      const below = this.frame.size.height - desiredSize.height - offset;

```
      if (above < 0 || below < 0) {
```
```
        const {visibleArea} = this;
```

        const {x, y} = visibleArea.origin;

        const {width, height} = visibleArea.size;

        const horizontalCenter = x + width / 2;

```
        const halfWidth = CARET_WIDTH;
```

        const left = horizontalCenter + halfWidth;

        const right = horizontalCenter - halfWidth;

```
        if (above < 0) {
```

          const topY = y + CARET_MARGIN;

```
          context.beginPath();
```

          context.moveTo(horizontalCenter, topY);

          context.lineTo(left, topY + CARET_HEIGHT);

          context.lineTo(right, topY + CARET_HEIGHT);

```
          context.closePath();
```

          context.fillStyle = COLORS.SCROLL_CARET;

```
          context.fill();
```
```
        }
```
```
        if (below < 0) {
```

          const bottomY = y + height - CARET_MARGIN;

```
          context.beginPath();
```

          context.moveTo(horizontalCenter, bottomY);

          context.lineTo(left, bottomY - CARET_HEIGHT);

          context.lineTo(right, bottomY - CARET_HEIGHT);

```
          context.closePath();
```

          context.fillStyle = COLORS.SCROLL_CARET;

```
          context.fill();
```
```
        }
```
```
      }
```
```
    }
```
```
  }
```
```
  layoutSubviews() {
```

    const {offset} = this._scrollState;

    const desiredSize = this._contentView.desiredSize();

    const minimumHeight = this.frame.size.height;

    const desiredHeight = desiredSize ? desiredSize.height : 0;

    // Force view to take up at least all remaining vertical space.

    const height = Math.max(desiredHeight, minimumHeight);

```
    const proposedFrame = {
```
```
      origin: {
```
```
        x: this.frame.origin.x,
```

        y: this.frame.origin.y + offset,

```
      },
```
```
      size: {
```
```
        width: this.frame.size.width,
```
```
        height,
```
```
      },
```
```
    };
```

    this._contentView.setFrame(proposedFrame);

```
    super.layoutSubviews();
```
```
  }
```

  handleInteraction(interaction: Interaction): ?boolean {

```
    switch (interaction.type) {
```
```
      case 'mousedown':
```

        return this._handleMouseDown(interaction);

```
      case 'mousemove':
```

        return this._handleMouseMove(interaction);

```
      case 'mouseup':
```

        return this._handleMouseUp(interaction);

```
      case 'wheel-shift':
```

        return this._handleWheelShift(interaction);

```
    }
```
```
  }
```

  onChange(callback: OnChangeCallback) {

```
    this._onChangeCallback = callback;
```
```
  }
```
```
  scrollBy(deltaY: number): boolean {
```
```
    const newState = translateState({
```
```
      state: this._scrollState,
```
```
      delta: -deltaY,
```

      containerLength: this.frame.size.height,

```
    });
```

    // If the state is updated by this wheel scroll,

    // return true to prevent the interaction from bubbling.

    // For instance, this prevents the outermost container from also scrolling.

    return this._setScrollState(newState);

```
  }
```

  _handleMouseDown(interaction: MouseDownInteraction) {

    if (rectContainsPoint(interaction.payload.location, this.frame)) {

      const frameHeight = this.frame.size.height;

      const contentHeight = this._contentView.desiredSize().height;

      // Don't claim drag operations if the content is not tall enough to be scrollable.

      // This would block any outer scroll views from working.

      if (frameHeight < contentHeight) {

```
        this._isPanning = true;
```
```
      }
```
```
    }
```
```
  }
```

  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {

```
    if (!this._isPanning) {
```
```
      return;
```
```
    }
```

    // Don't prevent mouse-move events from bubbling if they are horizontal drags.

    const {movementX, movementY} = interaction.payload.event;

    if (Math.abs(movementX) > Math.abs(movementY)) {

```
      return;
```
```
    }
```
```
    const newState = translateState({
```
```
      state: this._scrollState,
```

      delta: interaction.payload.event.movementY,

      containerLength: this.frame.size.height,

```
    });
```
```
    this._setScrollState(newState);
```
```
    return true;
```
```
  }
```

  _handleMouseUp(interaction: MouseUpInteraction) {

```
    if (this._isPanning) {
```
```
      this._isPanning = false;
```
```
    }
```
```
  }
```

  _handleWheelShift(interaction: WheelWithShiftInteraction): boolean {

```
    const {
```
```
      location,
```
```
      delta: {deltaX, deltaY},
```
```
    } = interaction.payload;
```

    if (!rectContainsPoint(location, this.frame)) {

      return false; // Not scrolling on view

```
    }
```

    const absDeltaX = Math.abs(deltaX);

    const absDeltaY = Math.abs(deltaY);

```
    if (absDeltaX > absDeltaY) {
```

      return false; // Scrolling horizontally

```
    }
```

    if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {

      return false; // Movement was too small and should be ignored.

```
    }
```
```
    return this.scrollBy(deltaY);
```
```
  }
```
```
  _restoreMutableViewState() {
```
```
    if (
```

      this._viewState.viewToMutableViewStateMap.has(this._mutableViewStateKey)

```
    ) {
```

      this._scrollState = ((this._viewState.viewToMutableViewStateMap.get(

```
        this._mutableViewStateKey,
```
```
      ): any): ScrollState);
```
```
    } else {
```

      this._viewState.viewToMutableViewStateMap.set(

```
        this._mutableViewStateKey,
```
```
        this._scrollState,
```
```
      );
```
```
    }
```
```
    this.setNeedsDisplay();
```
```
  }
```

  _setScrollState(proposedState: ScrollState): boolean {

    const contentHeight = this._contentView.frame.size.height;

    const containerHeight = this.frame.size.height;

```
    const clampedState = clampState({
```
```
      state: proposedState,
```
```
      minContentLength: contentHeight,
```
```
      maxContentLength: contentHeight,
```

      containerLength: containerHeight,

```
    });
```

    if (!areScrollStatesEqual(clampedState, this._scrollState)) {

      this._scrollState.offset = clampedState.offset;

      this._scrollState.length = clampedState.length;

```
      this.setNeedsDisplay();
```

      if (this._onChangeCallback !== null) {

        this._onChangeCallback(clampedState, this.frame.size.height);

```
      }
```
```
      return true;
```
```
    }
```

    // Don't allow wheel events to bubble past this view even if we've scrolled to the edge.

    // It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page.

    // The only exception is when the container fits the content (no scrolling).

    if (contentHeight === containerHeight) {

```
      return false;
```
```
    }
```
```
    return true;
```
```
  }
```
```
}
```