react Architecture Docs
Home / Class/ OverlayTip Class — react Architecture

OverlayTip Class — react Architecture

Architecture documentation for the OverlayTip class in Overlay.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  408e1017_1239_4514_a7fe_1640babfc1dd["OverlayTip"]
  5b39fc3a_1731_1aaf_f727_b3222027f445["Overlay.js"]
  408e1017_1239_4514_a7fe_1640babfc1dd -->|defined in| 5b39fc3a_1731_1aaf_f727_b3222027f445
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999["constructor()"]
  408e1017_1239_4514_a7fe_1640babfc1dd -->|method| c2019f0a_3ee0_14a2_1ebd_537aa80bb999
  1dc6a7e0_71c7_1875_18b4_34ee1dcb960f["remove()"]
  408e1017_1239_4514_a7fe_1640babfc1dd -->|method| 1dc6a7e0_71c7_1875_18b4_34ee1dcb960f
  efd600ea_16fe_ceff_8507_560b279c8d93["updateText()"]
  408e1017_1239_4514_a7fe_1640babfc1dd -->|method| efd600ea_16fe_ceff_8507_560b279c8d93
  ab13de00_6746_2dd9_e898_ab5ca4196895["updatePosition()"]
  408e1017_1239_4514_a7fe_1640babfc1dd -->|method| ab13de00_6746_2dd9_e898_ab5ca4196895

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 88–148

class OverlayTip {
  tip: HTMLElement;
  nameSpan: HTMLElement;
  dimSpan: HTMLElement;

  constructor(doc: Document, container: HTMLElement) {
    this.tip = doc.createElement('div');
    assign(this.tip.style, {
      display: 'flex',
      flexFlow: 'row nowrap',
      backgroundColor: '#333740',
      borderRadius: '2px',
      fontFamily:
        '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
      fontWeight: 'bold',
      padding: '3px 5px',
      pointerEvents: 'none',
      position: 'fixed',
      fontSize: '12px',
      whiteSpace: 'nowrap',
    });

    this.nameSpan = doc.createElement('span');
    this.tip.appendChild(this.nameSpan);
    assign(this.nameSpan.style, {
      color: '#ee78e6',
      borderRight: '1px solid #aaaaaa',
      paddingRight: '0.5rem',
      marginRight: '0.5rem',
    });
    this.dimSpan = doc.createElement('span');
    this.tip.appendChild(this.dimSpan);
    assign(this.dimSpan.style, {
      color: '#d7d7d7',
    });

    this.tip.style.zIndex = '10000000';
    container.appendChild(this.tip);
  }

  remove() {
    if (this.tip.parentNode) {
      this.tip.parentNode.removeChild(this.tip);
    }
  }

  updateText(name: string, width: number, height: number) {
    this.nameSpan.textContent = name;
    this.dimSpan.textContent =
      Math.round(width) + 'px × ' + Math.round(height) + 'px';
  }

  updatePosition(dims: Box, bounds: Box) {
    const tipRect = this.tip.getBoundingClientRect();
    const tipPos = findTipPos(dims, bounds, {
      width: tipRect.width,
      height: tipRect.height,
    });
    assign(this.tip.style, tipPos.style);
  }
}

Domain

Defined In

Source

Frequently Asked Questions

What is the OverlayTip class?
OverlayTip is a class in the react codebase, defined in packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js.
Where is OverlayTip defined?
OverlayTip is defined in packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js at line 88.

Analyze Your Own Codebase

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

Try Supermodel Free