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

View.js — react Source File

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

File javascript BabelCompiler Validation 14 imports 9 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  c31109e4_56cc_8bde_2f0a_c3a35a729719["useCanvasInteraction.js"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> c31109e4_56cc_8bde_2f0a_c3a35a729719
  1d481b0c_03e1_6f28_eff1_74d4566b3dc8["geometry.js"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 1d481b0c_03e1_6f28_eff1_74d4566b3dc8
  967225f1_4dbc_efd7_073f_8182bb20aa4f["layouter.js"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 967225f1_4dbc_efd7_073f_8182bb20aa4f
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d["Surface"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> c369a97c_dd8c_2e92_cdce_84e8bb9a306d
  fded0f25_5cd2_d798_b8aa_4355c4344173["rectEqualToRect"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> fded0f25_5cd2_d798_b8aa_4355c4344173
  9ca9174f_303e_0f6b_0371_0eaf35e67cb8["intersectionOfRects"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 9ca9174f_303e_0f6b_0371_0eaf35e67cb8
  ee345723_5d2c_09fe_13aa_8bc6e840e369["rectIntersectsRect"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> ee345723_5d2c_09fe_13aa_8bc6e840e369
  a7130a11_ed5e_dbc4_2ed2_a41628c43f8c["sizeIsEmpty"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> a7130a11_ed5e_dbc4_2ed2_a41628c43f8c
  6ff899dd_2b02_6c39_6e99_5dd10b9c9b5b["sizeIsValid"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 6ff899dd_2b02_6c39_6e99_5dd10b9c9b5b
  4f0df6ba_57ab_cc88_9a94_1bc63bfad061["unionOfRects"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 4f0df6ba_57ab_cc88_9a94_1bc63bfad061
  56865dce_3a89_276d_8772_69d4247b82d9["noopLayout"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 56865dce_3a89_276d_8772_69d4247b82d9
  b9f174c8_13ff_cc7d_68e7_071ede0cf2c2["viewsToLayout"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> b9f174c8_13ff_cc7d_68e7_071ede0cf2c2
  467da506_9c55_9974_5a08_b396bf477027["collapseLayoutIntoViews"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 467da506_9c55_9974_5a08_b396bf477027
  style 82f60adf_9325_5735_ba06_dcbbfcf32cc9 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 {Interaction} from './useCanvasInteraction';
import type {IntrinsicSize, Rect, Size} from './geometry';
import type {Layouter} from './layouter';
import type {ViewRefs} from './Surface';

import {Surface} from './Surface';
import {
  rectEqualToRect,
  intersectionOfRects,
  rectIntersectsRect,
  sizeIsEmpty,
  sizeIsValid,
  unionOfRects,
  zeroRect,
} from './geometry';
import {noopLayout, viewsToLayout, collapseLayoutIntoViews} from './layouter';

/**
 * Base view class that can be subclassed to draw custom content or manage
 * subclasses.
 */
export class View {
  _backgroundColor: string | null;

  currentCursor: string | null = null;

  surface: Surface;

  frame: Rect;
  visibleArea: Rect;

  superview: ?View;
  subviews: View[] = [];

  /**
   * An injected function that lays out our subviews.
   * @private
   */
  _layouter: Layouter;

  /**
   * Whether this view needs to be drawn.
   *
   * NOTE: Do not set directly! Use `setNeedsDisplay`.
   *
   * @see setNeedsDisplay
   * @private
   */
  _needsDisplay: boolean = true;

  /**
// ... (286 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does View.js do?
View.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in View.js?
View.js defines 1 function(s): frames.
What does View.js depend on?
View.js imports 14 module(s): Surface, Surface.js, collapseLayoutIntoViews, geometry.js, intersectionOfRects, layouter.js, noopLayout, rectEqualToRect, and 6 more.
What files import View.js?
View.js is imported by 9 file(s): BackgroundColorView.js, HorizontalPanAndZoomView.js, ResizableView.js, ResizeBarView.js, Surface.js, VerticalScrollBarView.js, VerticalScrollOverflowView.js, VerticalScrollView.js, and 1 more.
Where is View.js in the architecture?
View.js is located at packages/react-devtools-timeline/src/view-base/View.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