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

ResizableView.js — react Source File

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

File javascript BabelCompiler 13 imports

Entity Profile

Dependency Diagram

graph LR
  6e3184c5_8737_3bc9_5c7e_598f40316d02["ResizableView.js"]
  c31109e4_56cc_8bde_2f0a_c3a35a729719["useCanvasInteraction.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> c31109e4_56cc_8bde_2f0a_c3a35a729719
  1d481b0c_03e1_6f28_eff1_74d4566b3dc8["geometry.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 1d481b0c_03e1_6f28_eff1_74d4566b3dc8
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  b6da9a74_cd56_c43e_377b_37156f7faf8c["ResizeBarView.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> b6da9a74_cd56_c43e_377b_37156f7faf8c
  bc0823a6_6e22_c24e_dcae_a58df082924b["ResizeBarView"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> bc0823a6_6e22_c24e_dcae_a58df082924b
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d["Surface"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> c369a97c_dd8c_2e92_cdce_84e8bb9a306d
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 82f60adf_9325_5735_ba06_dcbbfcf32cc9
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  967225f1_4dbc_efd7_073f_8182bb20aa4f["layouter.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 967225f1_4dbc_efd7_073f_8182bb20aa4f
  56865dce_3a89_276d_8772_69d4247b82d9["noopLayout"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 56865dce_3a89_276d_8772_69d4247b82d9
  adc3924b_f490_6a42_b89a_7b496d5a55de["clamp.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> adc3924b_f490_6a42_b89a_7b496d5a55de
  602ea433_ce95_7eee_6236_3ffd5c7bd98b["clamp"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> 602ea433_ce95_7eee_6236_3ffd5c7bd98b
  style 6e3184c5_8737_3bc9_5c7e_598f40316d02 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 {
  ClickInteraction,
  DoubleClickInteraction,
  Interaction,
  MouseDownInteraction,
  MouseMoveInteraction,
  MouseUpInteraction,
} from '../useCanvasInteraction';
import type {Rect} from '../geometry';
import type {ViewRefs} from '../Surface';
import type {ViewState} from '../../types';

import {ResizeBarView} from './ResizeBarView';
import {Surface} from '../Surface';
import {View} from '../View';
import {rectContainsPoint} from '../geometry';
import {noopLayout} from '../layouter';
import {clamp} from '../utils/clamp';

type ResizingState = $ReadOnly<{
  /** Distance between top of resize bar and mouseY */
  cursorOffsetInBarFrame: number,
  /** Mouse's vertical coordinates relative to canvas */
  mouseY: number,
}>;

type LayoutState = {
  /** Resize bar's vertical position relative to resize view's frame.origin.y */
  barOffsetY: number,
};

const RESIZE_BAR_HEIGHT = 8;
const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;

const HIDDEN_RECT = {
  origin: {x: 0, y: 0},
  size: {width: 0, height: 0},
};

export class ResizableView extends View {
  _canvasRef: {current: HTMLCanvasElement | null};
  _layoutState: LayoutState;
  _mutableViewStateKey: string;
  _resizeBar: ResizeBarView;
  _resizingState: ResizingState | null = null;
  _subview: View;
  _viewState: ViewState;

  constructor(
    surface: Surface,
    frame: Rect,
// ... (240 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does ResizableView.js do?
ResizableView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does ResizableView.js depend on?
ResizableView.js imports 13 module(s): ResizeBarView, ResizeBarView.js, Surface, Surface.js, View.js, clamp, clamp.js, geometry.js, and 5 more.
Where is ResizableView.js in the architecture?
ResizableView.js is located at packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js (domain: BabelCompiler, directory: packages/react-devtools-timeline/src/view-base/resizable).

Analyze Your Own Codebase

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

Try Supermodel Free