drawWeb() — react Function Reference

Architecture documentation for the drawWeb() function in canvas.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ drawWeb() — react Function Reference

Dependency Diagram

graph TD
  cd104482_6ac8_360d_524b_b0d2af4ae627["drawWeb()"]
  2e686050_4065_de33_2d80_1361879d66c9["canvas.js"]
  cd104482_6ac8_360d_524b_b0d2af4ae627 -->|defined in| 2e686050_4065_de33_2d80_1361879d66c9
  0dbca917_b56d_be3e_65dd_4f8f3c37ea7f["initialize()"]
  cd104482_6ac8_360d_524b_b0d2af4ae627 -->|calls| 0dbca917_b56d_be3e_65dd_4f8f3c37ea7f
  style cd104482_6ac8_360d_524b_b0d2af4ae627 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js lines 45–86

function drawWeb(nodeToData: Map<HostInstance, Data>) {
  if (canvas === null) {
    initialize();
  }

  const dpr = window.devicePixelRatio || 1;
  const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);
  canvasFlow.width = window.innerWidth * dpr;
  canvasFlow.height = window.innerHeight * dpr;
  canvasFlow.style.width = `${window.innerWidth}px`;
  canvasFlow.style.height = `${window.innerHeight}px`;

  const context = canvasFlow.getContext('2d');
  context.scale(dpr, dpr);

  context.clearRect(0, 0, canvasFlow.width / dpr, canvasFlow.height / dpr);

  const mergedNodes = groupAndSortNodes(nodeToData);

  mergedNodes.forEach(group => {
    drawGroupBorders(context, group);
    drawGroupLabel(context, group);
  });

  if (canvas !== null) {
    if (nodeToData.size === 0 && canvas.matches(':popover-open')) {
      // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
      // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
      canvas.hidePopover();
      return;
    }
    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
    if (canvas.matches(':popover-open')) {
      // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
      // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
      canvas.hidePopover();
    }
    // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
    canvas.showPopover();
  }
}