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

CanvasPageContextMenu.js — react Source File

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

File javascript BabelCompiler Validation 11 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  e0a3b260_ea80_6b59_5c7d_18081c4333a6["CanvasPageContextMenu.js"]
  8fb21ca8_170b_4b4c_4dd4_5e259db0c418["getBatchRange.js"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 8fb21ca8_170b_4b4c_4dd4_5e259db0c418
  d0e34df5_54e0_bd63_7394_3bfe61a4c376["scrollState.js"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> d0e34df5_54e0_bd63_7394_3bfe61a4c376
  73b69eb1_1def_ae18_854c_a93b29fe5e7d["moveStateToRange"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 73b69eb1_1def_ae18_854c_a93b29fe5e7d
  d587018b_e3d9_bf04_a734_058fe7e6a39c["constants.js"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> d587018b_e3d9_bf04_a734_058fe7e6a39c
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  1e290487_2c6f_fbaf_7be9_e14d5df52457["clipboard-js"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 1e290487_2c6f_fbaf_7be9_e14d5df52457
  65e567e3_019e_417b_4fbd_5664e20f8b65["pretty-ms"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 65e567e3_019e_417b_4fbd_5664e20f8b65
  40d37623_f618_af18_bf41_59b7ec3ea435["ContextMenuContainer"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> 40d37623_f618_af18_bf41_59b7ec3ea435
  b69d8d17_a331_bd78_20f6_a9cb90ca08bf["withPermissionsCheck"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> b69d8d17_a331_bd78_20f6_a9cb90ca08bf
  bdc8c8c8_856f_275b_7f07_c7484f8436f6["types"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6 --> bdc8c8c8_856f_275b_7f07_c7484f8436f6
  d5e5a241_0d88_22ae_6561_9211ad78e796["CanvasPage.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> e0a3b260_ea80_6b59_5c7d_18081c4333a6
  style e0a3b260_ea80_6b59_5c7d_18081c4333a6 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 * as React from 'react';
import {useMemo} from 'react';
import {copy} from 'clipboard-js';
import prettyMilliseconds from 'pretty-ms';

import ContextMenuContainer from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import {getBatchRange} from './utils/getBatchRange';
import {moveStateToRange} from './view-base/utils/scrollState';
import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';

import type {
  ContextMenuItem,
  ContextMenuRef,
} from 'react-devtools-shared/src/devtools/ContextMenu/types';
import type {
  ReactEventInfo,
  ReactMeasure,
  TimelineData,
  ViewState,
} from './types';

function zoomToBatch(
  data: TimelineData,
  measure: ReactMeasure,
  viewState: ViewState,
  width: number,
) {
  const {batchUID} = measure;
  const [rangeStart, rangeEnd] = getBatchRange(batchUID, data);

  // Convert from time range to ScrollState
  const scrollState = moveStateToRange({
    state: viewState.horizontalScrollState,
    rangeStart,
    rangeEnd,
    contentLength: data.duration,

    minContentLength: data.duration * MIN_ZOOM_LEVEL,
    maxContentLength: data.duration * MAX_ZOOM_LEVEL,
    containerLength: width,
  });

  viewState.updateHorizontalScrollState(scrollState);
}

function copySummary(data: TimelineData, measure: ReactMeasure) {
  const {batchUID, duration, timestamp, type} = measure;

  const [startTime, stopTime] = getBatchRange(batchUID, data);
// ... (123 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does CanvasPageContextMenu.js do?
CanvasPageContextMenu.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 CanvasPageContextMenu.js?
CanvasPageContextMenu.js defines 3 function(s): CanvasPageContextMenu, copySummary, zoomToBatch.
What does CanvasPageContextMenu.js depend on?
CanvasPageContextMenu.js imports 11 module(s): ContextMenuContainer, clipboard-js, constants.js, getBatchRange.js, moveStateToRange, pretty-ms, react, scrollState.js, and 3 more.
What files import CanvasPageContextMenu.js?
CanvasPageContextMenu.js is imported by 1 file(s): CanvasPage.js.
Where is CanvasPageContextMenu.js in the architecture?
CanvasPageContextMenu.js is located at packages/react-devtools-timeline/src/CanvasPageContextMenu.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src).

Analyze Your Own Codebase

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

Try Supermodel Free