Method drawToken

packages/2d/src/lib/code/CodeCursor.ts:228–375

(
    fragment: CodeFragment,
    scope: CodeScope,
    offset: SerializedVector2,
    alpha: number,
  )

  }

  private drawToken(
    fragment: CodeFragment,
    scope: CodeScope,
    offset: SerializedVector2,
    alpha: number,
  ) {
    const progress = unwrap(scope.progress);
    const currentProgress = this.currentProgress();
    if (progress > 0) {
      this.globalProgress.push(progress);
    }

    const code = progress < 0.5 ? fragment.before : fragment.after;

    let hasOffset = true;
    let width = 0;
    let stringLength = 0;
    let y = 0;
    for (let i = 0; i < code.content.length; i++) {
      let color = this.fallbackFill.serialize();
      let char = code.content.charAt(i);
      const selection: {before: number | null; after: number | null} = {
        before: null,
        after: null,
      };

      if (char === '\n') {
        y++;
        hasOffset = false;
        width = 0;
        stringLength = 0;
        selection.before = null;
        selection.after = null;
        continue;
      }

      const beforeHighlight =
        this.caches &&
        this.highlighter?.highlight(this.beforeIndex + i, this.caches.before);
      const afterHighlight =
        this.caches &&
        this.highlighter?.highlight(this.afterIndex + i, this.caches.after);

      const highlight = progress < 0.5 ? beforeHighlight : afterHighlight;
      if (highlight) {
        // Handle edge cases where the highlight style changes despite the
        // content being the same. The code doesn't fade in and out so the color
        // has to be interpolated to avoid jarring changes.
        if (
          fragment.before.content === fragment.after.content &&
          beforeHighlight?.color !== afterHighlight?.color
        ) {
          highlight.color = Color.lerp(
            beforeHighlight?.color ?? this.fallbackFill,
            afterHighlight?.color ?? this.fallbackFill,
            progress,
          ).serialize();
        }