Home / File/ positioning.js — react Source File

positioning.js — react Source File

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

File javascript BabelCompiler Validation 1 imports 11 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3["positioning.js"]
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3 --> bbc225e1_d450_ae58_6679_9240ebe54628
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f["ComponentMeasuresView.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  d08702f1_e022_2394_00ee_ac0a9c33e2de["FlamechartView.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73["NativeEventsView.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  13604060_cb94_5e01_9368_0ead23d3891e["NetworkMeasuresView.js"]
  13604060_cb94_5e01_9368_0ead23d3891e --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  7a7af6eb_0683_8d73_95cc_81cc7b37dc33["ReactMeasuresView.js"]
  7a7af6eb_0683_8d73_95cc_81cc7b37dc33 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  25e4583e_f456_f560_39a0_cd2c2a2ed857["SchedulingEventsView.js"]
  25e4583e_f456_f560_39a0_cd2c2a2ed857 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  db34ae2a_e9d8_b6b8_047c_808e38392dec["SnapshotsView.js"]
  db34ae2a_e9d8_b6b8_047c_808e38392dec --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac["SuspenseEventsView.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  54164963_cd24_4adc_3d98_1f5b00aa9db1["ThrownErrorsView.js"]
  54164963_cd24_4adc_3d98_1f5b00aa9db1 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  349c9f88_b0e3_7db5_ca62_e5f635fd40f2["TimeAxisMarkersView.js"]
  349c9f88_b0e3_7db5_ca62_e5f635fd40f2 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  f2ccabf0_51db_bb1d_d1c0_68e969b44b5f["UserTimingMarksView.js"]
  f2ccabf0_51db_bb1d_d1c0_68e969b44b5f --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  style e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3 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 {Rect} from '../../view-base';

export function positioningScaleFactor(
  intrinsicWidth: number,
  frame: Rect,
): number {
  return frame.size.width / intrinsicWidth;
}

export function timestampToPosition(
  timestamp: number,
  scaleFactor: number,
  frame: Rect,
): number {
  return frame.origin.x + timestamp * scaleFactor;
}

export function positionToTimestamp(
  position: number,
  scaleFactor: number,
  frame: Rect,
): number {
  return (position - frame.origin.x) / scaleFactor;
}

export function durationToWidth(duration: number, scaleFactor: number): number {
  return duration * scaleFactor;
}

export function widthToDuration(width: number, scaleFactor: number): number {
  return width / scaleFactor;
}

Domain

Subdomains

Dependencies

Frequently Asked Questions

What does positioning.js do?
positioning.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 positioning.js?
positioning.js defines 5 function(s): durationToWidth, positionToTimestamp, positioningScaleFactor, timestampToPosition, widthToDuration.
What does positioning.js depend on?
positioning.js imports 1 module(s): index.js.
What files import positioning.js?
positioning.js is imported by 11 file(s): ComponentMeasuresView.js, FlamechartView.js, NativeEventsView.js, NetworkMeasuresView.js, ReactMeasuresView.js, SchedulingEventsView.js, SnapshotsView.js, SuspenseEventsView.js, and 3 more.
Where is positioning.js in the architecture?
positioning.js is located at packages/react-devtools-timeline/src/content-views/utils/positioning.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src/content-views/utils).

Analyze Your Own Codebase

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

Try Supermodel Free