draw() — react Function Reference

Source Code

packages/react-devtools-timeline/src/content-views/FlamechartView.js lines 128–217

  draw(context: CanvasRenderingContext2D) {
    const {
      frame,
      _stackLayer,
      _hoveredStackFrame,
      _intrinsicSize,
      visibleArea,
    } = this;

    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
    context.fillRect(
      visibleArea.origin.x,
      visibleArea.origin.y,
      visibleArea.size.width,
      visibleArea.size.height,
    );

    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);

    for (let i = 0; i < _stackLayer.length; i++) {
      const stackFrame = _stackLayer[i];
      const {name, timestamp, duration} = stackFrame;

      const width = durationToWidth(duration, scaleFactor);
      if (width < 1) {
        continue; // Too small to render at this zoom level
      }

      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
      const nodeRect: Rect = {
        origin: {x, y: frame.origin.y},
        size: {
          width: Math.floor(width - BORDER_SIZE),
          height: Math.floor(FLAMECHART_FRAME_HEIGHT - BORDER_SIZE),
        },
      };
      if (!rectIntersectsRect(nodeRect, visibleArea)) {
        continue; // Not in view
      }

      const showHoverHighlight = _hoveredStackFrame === _stackLayer[i];

      let textFillStyle;
      if (isInternalModule(this._internalModuleSourceToRanges, stackFrame)) {
        context.fillStyle = showHoverHighlight
          ? COLORS.INTERNAL_MODULE_FRAME_HOVER
          : COLORS.INTERNAL_MODULE_FRAME;
        textFillStyle = COLORS.INTERNAL_MODULE_FRAME_TEXT;
      } else {
        context.fillStyle = showHoverHighlight
          ? hoverColorForStackFrame(stackFrame)
          : defaultColorForStackFrame(stackFrame);
        textFillStyle = COLORS.TEXT_COLOR;
      }

      const drawableRect = intersectionOfRects(nodeRect, visibleArea);
      context.fillRect(
        drawableRect.origin.x,
        drawableRect.origin.y,
        drawableRect.size.width,
        drawableRect.size.height,
      );

      drawText(name, context, nodeRect, drawableRect, {
        fillStyle: textFillStyle,
      });
    }

    // Render bottom border.
    const borderFrame: Rect = {
      origin: {
        x: frame.origin.x,
        y: frame.origin.y + FLAMECHART_FRAME_HEIGHT - BORDER_SIZE,
      },
      size: {
        width: frame.size.width,
        height: BORDER_SIZE,
      },
    };
    if (rectIntersectsRect(borderFrame, visibleArea)) {
      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);