drawText() — react Function Reference

Architecture documentation for the drawText() function in text.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 4

Entity Profile

BabelCompiler→ Validation→ drawText() — react Function Reference

Dependency Diagram

graph TD
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText()"]
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  1d4e7b93_85d0_def6_42c9_e20824e49731 -->|defined in| 021281ec_8833_1644_b4c0_b06b07634697
  a2777e3e_5de8_64fd_2831_e7d1431e9806["draw()"]
  a2777e3e_5de8_64fd_2831_e7d1431e9806 -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  af21523b_b0f3_6208_d571_52ad547b495c["_drawSingleReactMeasure()"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  7898c7fb_c4a8_d5bd_a78e_878f99079dcc["draw()"]
  7898c7fb_c4a8_d5bd_a78e_878f99079dcc -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  a6f49775_80b0_82ed_3ce3_ec36aa443d4e["draw()"]
  a6f49775_80b0_82ed_3ce3_ec36aa443d4e -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  f48fe0f6_f3a8_290b_ed64_ae744f1c7286["trimText()"]
  1d4e7b93_85d0_def6_42c9_e20824e49731 -->|calls| f48fe0f6_f3a8_290b_ed64_ae744f1c7286
  style 1d4e7b93_85d0_def6_42c9_e20824e49731 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/utils/text.js lines 71–134

export function drawText(
  text: string,
  context: CanvasRenderingContext2D,
  fullRect: Rect,
  drawableRect: Rect,
  config?: TextConfig,
): void {
  const {
    fillStyle = COLORS.TEXT_COLOR,
    fontSize = FONT_SIZE,
    textAlign = 'left',
  } = config || {};

  if (fullRect.size.width > TEXT_PADDING * 2) {
    context.textAlign = textAlign;
    context.textBaseline = 'middle';
    context.font = `${fontSize}px sans-serif`;

    const {x, y} = fullRect.origin;

    const trimmedName = trimText(
      context,
      text,
      fullRect.size.width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
    );

    if (trimmedName !== null) {
      context.fillStyle = fillStyle;

      // Prevent text from visibly overflowing its container when clipped.
      const textOverflowsViewableArea = !rectEqualToRect(
        drawableRect,
        fullRect,
      );
      if (textOverflowsViewableArea) {
        context.save();
        context.beginPath();
        context.rect(
          drawableRect.origin.x,
          drawableRect.origin.y,
          drawableRect.size.width,
          drawableRect.size.height,
        );
        context.closePath();
        context.clip();
      }

      let textX;
      if (textAlign === 'center') {
        textX = x + fullRect.size.width / 2 + TEXT_PADDING - (x < 0 ? x : 0);
      } else {
        textX = x + TEXT_PADDING - (x < 0 ? x : 0);
      }

      const textY = y + fullRect.size.height / 2;

      context.fillText(trimmedName, textX, textY);

      if (textOverflowsViewableArea) {
        context.restore();
      }
    }
  }
}