react Architecture Docs
Home / Class/ OverlayRect Class — react Architecture

OverlayRect Class — react Architecture

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

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  c07ce908_6e01_63cf_eb0b_03f500e4af54["OverlayRect"]
  5b39fc3a_1731_1aaf_f727_b3222027f445["Overlay.js"]
  c07ce908_6e01_63cf_eb0b_03f500e4af54 -->|defined in| 5b39fc3a_1731_1aaf_f727_b3222027f445
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83["constructor()"]
  c07ce908_6e01_63cf_eb0b_03f500e4af54 -->|method| 398fbed3_a71d_efb3_1425_8c5f9e4bcf83
  9a7dd298_b7c7_4c0b_f647_f4a765da2a7b["remove()"]
  c07ce908_6e01_63cf_eb0b_03f500e4af54 -->|method| 9a7dd298_b7c7_4c0b_f647_f4a765da2a7b
  9e063716_c791_abaa_dcb9_deeb564103d2["update()"]
  c07ce908_6e01_63cf_eb0b_03f500e4af54 -->|method| 9e063716_c791_abaa_dcb9_deeb564103d2

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 23–86

class OverlayRect {
  node: HTMLElement;
  border: HTMLElement;
  padding: HTMLElement;
  content: HTMLElement;

  constructor(doc: Document, container: HTMLElement) {
    this.node = doc.createElement('div');
    this.border = doc.createElement('div');
    this.padding = doc.createElement('div');
    this.content = doc.createElement('div');

    this.border.style.borderColor = overlayStyles.border;
    this.padding.style.borderColor = overlayStyles.padding;
    this.content.style.backgroundColor = overlayStyles.background;

    assign(this.node.style, {
      borderColor: overlayStyles.margin,
      pointerEvents: 'none',
      position: 'fixed',
    });

    this.node.style.zIndex = '10000000';

    this.node.appendChild(this.border);
    this.border.appendChild(this.padding);
    this.padding.appendChild(this.content);
    container.appendChild(this.node);
  }

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

  update(box: Rect, dims: any) {
    boxWrap(dims, 'margin', this.node);
    boxWrap(dims, 'border', this.border);
    boxWrap(dims, 'padding', this.padding);

    assign(this.content.style, {
      height:
        box.height -
        dims.borderTop -
        dims.borderBottom -
        dims.paddingTop -
        dims.paddingBottom +
        'px',
      width:
        box.width -
        dims.borderLeft -
        dims.borderRight -
        dims.paddingLeft -
        dims.paddingRight +
        'px',
    });

    assign(this.node.style, {
      top: box.top - dims.marginTop + 'px',
      left: box.left - dims.marginLeft + 'px',
    });
  }
}

Domain

Defined In

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free