Method draw

packages/2d/src/lib/components/CodeBlock.ts:336–435

(context: CanvasRenderingContext2D)

  }

  protected override async draw(context: CanvasRenderingContext2D) {
    if (!CodeBlock.initialized()) return;

    this.requestFontUpdate();
    this.applyStyle(context);
    context.font = this.styles.font;
    context.textBaseline = 'top';
    const lh = parseFloat(this.styles.lineHeight);
    const w = context.measureText('X').width;
    const size = this.computedSize();
    const progress = this.codeProgress();
    const unselectedOpacity = this.unselectedOpacity();
    const globalAlpha = context.globalAlpha;

    const getSelectionAlpha = (x: number, y: number) =>
      map(unselectedOpacity, 1, this.selectionStrength(x, y));

    const drawToken = (
      code: string,
      position: SerializedVector2,
      alpha = 1,
    ) => {
      for (let i = 0; i < code.length; i++) {
        const char = code.charAt(i);
        if (char === '\n') {
          position.y++;
          position.x = 0;
          continue;
        }
        context.globalAlpha =
          globalAlpha * alpha * getSelectionAlpha(position.x, position.y);
        context.fillText(char, position.x * w, position.y * lh);
        position.x++;
      }
    };

    context.translate(size.x / -2, size.y / -2);
    if (progress == null) {
      const parsed = this.parsed();
      const position = {x: 0, y: 0};
      for (const token of parsed) {
        context.save();
        context.fillStyle = token.color ?? '#c9d1d9';
        drawToken(token.code, position);
        context.restore();
      }
    } else {
      const diffed = this.diffed!;
      const beginning = 0.2;
      const ending = 0.8;
      const overlap = 0.15;
      for (const token of diffed) {
        context.save();
        context.fillStyle = token.color ?? '#c9d1d9';

        if (token.morph === 'delete') {
          drawToken(
            token.code,