draw() — react Function Reference

Source Code

packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js lines 205–298

  draw(context: CanvasRenderingContext2D): void {
    const {frame, _hoveredMeasure, _lanesToRender, _profilerData, visibleArea} =
      this;

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

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

    for (let i = 0; i < _lanesToRender.length; i++) {
      const lane = _lanesToRender[i];
      const baseY = frame.origin.y + i * REACT_LANE_HEIGHT;
      const measuresForLane = _profilerData.laneToReactMeasureMap.get(lane);

      if (!measuresForLane) {
        throw new Error(
          'No measures found for a React lane! This is a bug in this profiler tool. Please file an issue.',
        );
      }

      // Render lane labels
      const label = _profilerData.laneToLabelMap.get(lane);
      if (label == null) {
        console.warn(`Could not find label for lane ${lane}.`);
      } else {
        const labelRect = {
          origin: {
            x: visibleArea.origin.x,
            y: baseY,
          },
          size: {
            width: visibleArea.size.width,
            height: REACT_LANE_HEIGHT,
          },
        };

        drawText(label, context, labelRect, visibleArea, {
          fillStyle: COLORS.TEXT_DIM_COLOR,
        });
      }

      // Draw measures
      for (let j = 0; j < measuresForLane.length; j++) {
        const measure = measuresForLane[j];
        const showHoverHighlight = _hoveredMeasure === measure;
        const showGroupHighlight =
          !!_hoveredMeasure && _hoveredMeasure.batchUID === measure.batchUID;

        this._drawSingleReactMeasure(
          context,
          visibleArea,
          measure,
          measuresForLane[j + 1] || null,
          baseY,
          scaleFactor,
          showGroupHighlight,
          showHoverHighlight,
        );
      }

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