react Architecture Docs
Home / File/ HorizontalPanAndZoomView.js — react Source File

HorizontalPanAndZoomView.js — react Source File

Architecture documentation for HorizontalPanAndZoomView.js, a javascript file in the react codebase. 14 imports, 0 dependents.

File javascript BabelCompiler Validation 14 imports 1 classes

Entity Profile

Dependency Diagram

graph LR
  651fe3e5_90b9_93e1_39f6_c335dae25ac7["HorizontalPanAndZoomView.js"]
  1d481b0c_03e1_6f28_eff1_74d4566b3dc8["geometry.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 1d481b0c_03e1_6f28_eff1_74d4566b3dc8
  c31109e4_56cc_8bde_2f0a_c3a35a729719["useCanvasInteraction.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> c31109e4_56cc_8bde_2f0a_c3a35a729719
  d0e34df5_54e0_bd63_7394_3bfe61a4c376["scrollState.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> d0e34df5_54e0_bd63_7394_3bfe61a4c376
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d["Surface"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> c369a97c_dd8c_2e92_cdce_84e8bb9a306d
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 82f60adf_9325_5735_ba06_dcbbfcf32cc9
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  f077803e_adfb_e522_43d4_7b720fa272fa["clampState"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> f077803e_adfb_e522_43d4_7b720fa272fa
  73b69eb1_1def_ae18_854c_a93b29fe5e7d["moveStateToRange"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 73b69eb1_1def_ae18_854c_a93b29fe5e7d
  7d8994ae_c610_bfe7_54d3_0ee2e2bf3ec1["areScrollStatesEqual"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 7d8994ae_c610_bfe7_54d3_0ee2e2bf3ec1
  94cfe42d_2d3d_5da3_cd07_23705b8b0ec6["translateState"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 94cfe42d_2d3d_5da3_cd07_23705b8b0ec6
  c31f920d_f533_0f23_d62e_7fc940a06959["zoomState"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> c31f920d_f533_0f23_d62e_7fc940a06959
  d587018b_e3d9_bf04_a734_058fe7e6a39c["constants.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> d587018b_e3d9_bf04_a734_058fe7e6a39c
  style 651fe3e5_90b9_93e1_39f6_c335dae25ac7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * 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);
    });
// ... (186 more lines)

Domain

Subdomains

Classes

Dependencies

Source

Frequently Asked Questions

What does HorizontalPanAndZoomView.js do?
HorizontalPanAndZoomView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What does HorizontalPanAndZoomView.js depend on?
HorizontalPanAndZoomView.js imports 14 module(s): Surface, Surface.js, View.js, areScrollStatesEqual, clampState, constants.js, geometry.js, moveStateToRange, and 6 more.
Where is HorizontalPanAndZoomView.js in the architecture?
HorizontalPanAndZoomView.js is located at packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src/view-base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free