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

Surface.js — react Source File

Architecture documentation for Surface.js, a javascript file in the react codebase. 5 imports, 7 dependents.

File javascript BabelCompiler Validation 5 imports 7 dependents 3 functions 1 classes

Entity Profile

Dependency Diagram

graph LR
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  c31109e4_56cc_8bde_2f0a_c3a35a729719["useCanvasInteraction.js"]
  2fbafaf8_32f6_4129_38fc_89470d906d24 --> c31109e4_56cc_8bde_2f0a_c3a35a729719
  1d481b0c_03e1_6f28_eff1_74d4566b3dc8["geometry.js"]
  2fbafaf8_32f6_4129_38fc_89470d906d24 --> 1d481b0c_03e1_6f28_eff1_74d4566b3dc8
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  2fbafaf8_32f6_4129_38fc_89470d906d24 --> 82f60adf_9325_5735_ba06_dcbbfcf32cc9
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  2fbafaf8_32f6_4129_38fc_89470d906d24 --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  d9faf0f1_af19_38f0_e86f_e255452e0539["memoize-one"]
  2fbafaf8_32f6_4129_38fc_89470d906d24 --> d9faf0f1_af19_38f0_e86f_e255452e0539
  651fe3e5_90b9_93e1_39f6_c335dae25ac7["HorizontalPanAndZoomView.js"]
  651fe3e5_90b9_93e1_39f6_c335dae25ac7 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  be7fceed_f363_2288_8ab1_9e46ccc7de65["VerticalScrollView.js"]
  be7fceed_f363_2288_8ab1_9e46ccc7de65 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  82f60adf_9325_5735_ba06_dcbbfcf32cc9 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  6e3184c5_8737_3bc9_5c7e_598f40316d02["ResizableView.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  b6da9a74_cd56_c43e_377b_37156f7faf8c["ResizeBarView.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  4a10df0d_a8e2_1549_3912_4d2e6db4d890["VerticalScrollBarView.js"]
  4a10df0d_a8e2_1549_3912_4d2e6db4d890 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  9576b70a_cfcb_5729_1030_479df0856820["VerticalScrollOverflowView.js"]
  9576b70a_cfcb_5729_1030_479df0856820 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  style 2fbafaf8_32f6_4129_38fc_89470d906d24 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 {Size} from './geometry';

import memoize from 'memoize-one';

import {View} from './View';
import {zeroPoint} from './geometry';
import {DPR} from '../content-views/constants';

export type ViewRefs = {
  activeView: View | null,
  hoveredView: View | null,
};

// hidpi canvas: https://web.dev/articles/canvas-hidipi
function configureRetinaCanvas(
  canvas: HTMLCanvasElement,
  height: number,
  width: number,
) {
  canvas.width = width * DPR;
  canvas.height = height * DPR;
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
}

const getCanvasContext = memoize(
  (
    canvas: HTMLCanvasElement,
    height: number,
    width: number,
    scaleCanvas: boolean = true,
  ): CanvasRenderingContext2D => {
    const context = canvas.getContext('2d', {alpha: false});
    if (scaleCanvas) {
      configureRetinaCanvas(canvas, height, width);

      // Scale all drawing operations by the dpr, so you don't have to worry about the difference.
      context.scale(DPR, DPR);
    }
    return context;
  },
);

type ResetHoveredEventFn = () => void;

/**
 * Represents the canvas surface and a view heirarchy. A surface is also the
 * place where all interactions enter the view heirarchy.
 */
export class Surface {
// ... (95 more lines)

Domain

Subdomains

Functions

Classes

Dependencies

Imported By

Source

Frequently Asked Questions

What does Surface.js do?
Surface.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 Surface.js?
Surface.js defines 3 function(s): ResetHoveredEventFn, configureRetinaCanvas, getCanvasContext.
What does Surface.js depend on?
Surface.js imports 5 module(s): View.js, constants.js, geometry.js, memoize-one, useCanvasInteraction.js.
What files import Surface.js?
Surface.js is imported by 7 file(s): HorizontalPanAndZoomView.js, ResizableView.js, ResizeBarView.js, VerticalScrollBarView.js, VerticalScrollOverflowView.js, VerticalScrollView.js, View.js.
Where is Surface.js in the architecture?
Surface.js is located at packages/react-devtools-timeline/src/view-base/Surface.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