findTipPos() — react Function Reference

Architecture documentation for the findTipPos() function in Overlay.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ findTipPos() — react Function Reference

Dependency Diagram

graph TD
  27b5d491_c8bd_065d_271e_bc41a1c63d73["findTipPos()"]
  5b39fc3a_1731_1aaf_f727_b3222027f445["Overlay.js"]
  27b5d491_c8bd_065d_271e_bc41a1c63d73 -->|defined in| 5b39fc3a_1731_1aaf_f727_b3222027f445
  ab13de00_6746_2dd9_e898_ab5ca4196895["updatePosition()"]
  ab13de00_6746_2dd9_e898_ab5ca4196895 -->|calls| 27b5d491_c8bd_065d_271e_bc41a1c63d73
  style 27b5d491_c8bd_065d_271e_bc41a1c63d73 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 273–312

function findTipPos(
  dims: Box,
  bounds: Box,
  tipSize: {height: number, width: number},
) {
  const tipHeight = Math.max(tipSize.height, 20);
  const tipWidth = Math.max(tipSize.width, 60);
  const margin = 5;

  let top: number | string;
  if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {
    if (dims.top + dims.height < bounds.top + 0) {
      top = bounds.top + margin;
    } else {
      top = dims.top + dims.height + margin;
    }
  } else if (dims.top - tipHeight <= bounds.top + bounds.height) {
    if (dims.top - tipHeight - margin < bounds.top + margin) {
      top = bounds.top + margin;
    } else {
      top = dims.top - tipHeight - margin;
    }
  } else {
    top = bounds.top + bounds.height - tipHeight - margin;
  }

  let left: number | string = dims.left + margin;
  if (dims.left < bounds.left) {
    left = bounds.left + margin;
  }
  if (dims.left + tipWidth > bounds.left + bounds.width) {
    left = bounds.left + bounds.width - tipWidth - margin;
  }

  top += 'px';
  left += 'px';
  return {
    style: {top, left},
  };
}