Viewing github.com/facebook/react/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.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,
```
```
  WheelPlainInteraction,
```
```
  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,
```
```
  moveStateToRange,
```
```
  areScrollStatesEqual,
```
```
  translateState,
```
```
  zoomState,
```
```
} from './utils/scrollState';
```
```
import {
```
```
  MAX_ZOOM_LEVEL,
```
```
  MIN_ZOOM_LEVEL,
```
```
  MOVE_WHEEL_DELTA_THRESHOLD,
```
```
} from './constants';
```

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,

```
      },
```
```
    };
```

    this._contentView.setFrame(proposedFrame);

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

  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {

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

        this._handleMouseDown(interaction, viewRefs);

```
        break;
```
```
      case 'mousemove':
```

        this._handleMouseMove(interaction, viewRefs);

```
        break;
```
```
      case 'mouseup':
```

        this._handleMouseUp(interaction, viewRefs);

```
        break;
```
```
      case 'wheel-plain':
```
```
      case 'wheel-shift':
```

        this._handleWheel(interaction);

```
        break;
```
```
    }
```
```
  }
```

  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {

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

```
      this._isPanning = true;
```
```
      viewRefs.activeView = this;
```
```
      this.currentCursor = 'grabbing';
```
```
    }
```
```
  }
```

  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {

    const isHovered = rectContainsPoint(

```
      interaction.payload.location,
```
```
      this.frame,
```
```
    );
```

    if (isHovered && viewRefs.hoveredView === null) {

```
      viewRefs.hoveredView = this;
```
```
    }
```

    if (viewRefs.activeView === this) {

```
      this.currentCursor = 'grabbing';
```
```
    } else if (isHovered) {
```
```
      this.currentCursor = 'grab';
```
```
    }
```
```
    if (!this._isPanning) {
```
```
      return;
```
```
    }
```

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

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

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

```
      return;
```
```
    }
```
```
    const newState = translateState({
```

      state: this._viewState.horizontalScrollState,

```
      delta: movementX,
```

      containerLength: this.frame.size.width,

```
    });
```

    this._viewState.updateHorizontalScrollState(newState);

```
  }
```

  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {

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

    if (viewRefs.activeView === this) {

```
      viewRefs.activeView = null;
```
```
    }
```
```
  }
```

  _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);

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