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

ResizeBarView.js — react Source File

Architecture documentation for ResizeBarView.js, a javascript file in the react codebase. 11 imports, 1 dependents.

File javascript BabelCompiler Validation 11 imports 1 dependents 1 classes

Entity Profile

Dependency Diagram

graph LR
  b6da9a74_cd56_c43e_377b_37156f7faf8c["ResizeBarView.js"]
  c31109e4_56cc_8bde_2f0a_c3a35a729719["useCanvasInteraction.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> c31109e4_56cc_8bde_2f0a_c3a35a729719
  1d481b0c_03e1_6f28_eff1_74d4566b3dc8["geometry.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 1d481b0c_03e1_6f28_eff1_74d4566b3dc8
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 2fbafaf8_32f6_4129_38fc_89470d906d24
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 1d4e7b93_85d0_def6_42c9_e20824e49731
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d["Surface"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> c369a97c_dd8c_2e92_cdce_84e8bb9a306d
  82f60adf_9325_5735_ba06_dcbbfcf32cc9["View.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 82f60adf_9325_5735_ba06_dcbbfcf32cc9
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  967225f1_4dbc_efd7_073f_8182bb20aa4f["layouter.js"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 967225f1_4dbc_efd7_073f_8182bb20aa4f
  56865dce_3a89_276d_8772_69d4247b82d9["noopLayout"]
  b6da9a74_cd56_c43e_377b_37156f7faf8c --> 56865dce_3a89_276d_8772_69d4247b82d9
  6e3184c5_8737_3bc9_5c7e_598f40316d02["ResizableView.js"]
  6e3184c5_8737_3bc9_5c7e_598f40316d02 --> b6da9a74_cd56_c43e_377b_37156f7faf8c
  style b6da9a74_cd56_c43e_377b_37156f7faf8c 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,
  MouseDownInteraction,
  MouseMoveInteraction,
  MouseUpInteraction,
} from '../useCanvasInteraction';
import type {Rect, Size} from '../geometry';
import type {ViewRefs} from '../Surface';

import {BORDER_SIZE, COLORS} from '../../content-views/constants';
import {drawText} from '../../content-views/utils/text';
import {Surface} from '../Surface';
import {View} from '../View';
import {rectContainsPoint} from '../geometry';
import {noopLayout} from '../layouter';

type ResizeBarState = 'normal' | 'hovered' | 'dragging';

const RESIZE_BAR_DOT_RADIUS = 1;
const RESIZE_BAR_DOT_SPACING = 4;
const RESIZE_BAR_HEIGHT = 8;
const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;

export class ResizeBarView extends View {
  _interactionState: ResizeBarState = 'normal';
  _label: string;

  showLabel: boolean = false;

  constructor(surface: Surface, frame: Rect, label: string) {
    super(surface, frame, noopLayout);

    this._label = label;
  }

  desiredSize(): Size {
    return this.showLabel
      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
      : {height: RESIZE_BAR_HEIGHT, width: 0};
  }

  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
    const {frame} = this;
    const {x, y} = frame.origin;
    const {width, height} = frame.size;

    const isActive =
      this._interactionState === 'dragging' ||
      (this._interactionState === 'hovered' && viewRefs.activeView === null);

    context.fillStyle = isActive
// ... (134 more lines)

Domain

Subdomains

Classes

Dependencies

Imported By

Source

Frequently Asked Questions

What does ResizeBarView.js do?
ResizeBarView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What does ResizeBarView.js depend on?
ResizeBarView.js imports 11 module(s): Surface, Surface.js, View.js, constants.js, drawText, geometry.js, layouter.js, noopLayout, and 3 more.
What files import ResizeBarView.js?
ResizeBarView.js is imported by 1 file(s): ResizableView.js.
Where is ResizeBarView.js in the architecture?
ResizeBarView.js is located at packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js (domain: BabelCompiler, subdomain: Validation, 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