ghostty/src/font/sprite/underline.zig

//! This file renders underline sprites. To draw underlines, we render the
//! full cell-width as a sprite and then draw it as a separate pass to the
//! text.
//!
//! We used to render the underlines directly in the GPU shaders but its
//! annoying to support multiple types of underlines and its also annoying
//! to maintain and debug another set of shaders for each renderer instead of
//! just relying on the glyph system we already need to support for text
//! anyways.
//!
//! This also renders strikethrough, so its really more generally a
//! "horizontal line" renderer.
const std = @import("std");
const builtin = @import("builtin");
const assert = std.debug.assert;
const Allocator = std.mem.Allocator;
const font = @import("../main.zig");
const Sprite = font.sprite.Sprite;

/// Draw an underline.
pub fn renderGlyph(
    alloc: Allocator,
    atlas: *font.Atlas,
    sprite: Sprite,
    width: u32,
    height: u32,
    line_pos: u32,
    line_thickness: u32,
) !font.Glyph {
    // Draw the appropriate sprite
    var canvas: font.sprite.Canvas, const offset_y: i32 = switch (sprite) {
        .underline => try drawSingle(alloc, width, line_thickness),
        .underline_double => try drawDouble(alloc, width, line_thickness),
        .underline_dotted => try drawDotted(alloc, width, line_thickness),
        .underline_dashed => try drawDashed(alloc, width, line_thickness),
        .underline_curly => try drawCurly(alloc, width, line_thickness),
        .strikethrough => try drawSingle(alloc, width, line_thickness),
        else => unreachable,
    };
    defer canvas.deinit(alloc);

    // Write the drawing to the atlas
    const region = try canvas.writeAtlas(alloc, atlas);

    return font.Glyph{
        .width = width,
        .height = @intCast(region.height),
        .offset_x = 0,
        // Glyph.offset_y is the distance between the top of the glyph and the
        // bottom of the cell. We want the top of the glyph to be at line_pos
        // from the TOP of the cell, and then offset by the offset_y from the
        // draw function.
        .offset_y = @as(i32, @intCast(height -| line_pos)) - offset_y,
        .atlas_x = region.x,
        .atlas_y = region.y,
        .advance_x = @floatFromInt(width),
    };
}

/// A tuple with the canvas that the desired sprite was drawn on and
/// a recommended offset (+Y = down) to shift its Y position by, to
/// correct for underline styles with additional thickness.
const CanvasAndOffset = struct { font.sprite.Canvas, i32 };

/// Draw a single underline.
fn drawSingle(alloc: Allocator, width: u32, thickness: u32) !CanvasAndOffset {
    const height: u32 = thickness;
    var canvas = try font.sprite.Canvas.init(alloc, width, height);

    canvas.rect(.{
        .x = 0,
        .y = 0,
        .width = width,
        .height = thickness,
    }, .on);

    const offset_y: i32 = 0;

    return .{ canvas, offset_y };
}

/// Draw a double underline.
fn drawDouble(alloc: Allocator, width: u32, thickness: u32) !CanvasAndOffset {
    // Our gap between lines will be at least 2px.
    // (i.e. if our thickness is 1, we still have a gap of 2)
    const gap = @max(2, thickness);

    const height: u32 = thickness * 2 * gap;
    var canvas = try font.sprite.Canvas.init(alloc, width, height);

    canvas.rect(.{
        .x = 0,
        .y = 0,
        .width = width,
        .height = thickness,
    }, .on);

    canvas.rect(.{
        .x = 0,
        .y = @intCast(thickness + gap),
        .width = width,
        .height = thickness,
    }, .on);

    const offset_y: i32 = -@as(i32, @intCast(thickness));

    return .{ canvas, offset_y };
}

/// Draw a dotted underline.
fn drawDotted(alloc: Allocator, width: u32, thickness: u32) !CanvasAndOffset {
    const height: u32 = thickness;
    var canvas = try font.sprite.Canvas.init(alloc, width, height);

    const dot_width = @max(thickness, 3);
    const dot_count = @max((width / dot_width) / 2, 1);
    const gap_width = try std.math.divCeil(u32, width -| (dot_count * dot_width), dot_count);
    var i: u32 = 0;
    while (i < dot_count) : (i += 1) {
        // Ensure we never go out of bounds for the rect
        const x = @min(i * (dot_width + gap_width), width - 1);
        const rect_width = @min(width - x, dot_width);
        canvas.rect(.{
            .x = @intCast(x),
            .y = 0,
            .width = rect_width,
            .height = thickness,
        }, .on);
    }

    const offset_y: i32 = 0;

    return .{ canvas, offset_y };
}

/// Draw a dashed underline.
fn drawDashed(alloc: Allocator, width: u32, thickness: u32) !CanvasAndOffset {
    const height: u32 = thickness;
    var canvas = try font.sprite.Canvas.init(alloc, width, height);

    const dash_width = width / 3 + 1;
    const dash_count = (width / dash_width) + 1;
    var i: u32 = 0;
    while (i < dash_count) : (i += 2) {
        // Ensure we never go out of bounds for the rect
        const x = @min(i * dash_width, width - 1);
        const rect_width = @min(width - x, dash_width);
        canvas.rect(.{
            .x = @intCast(x),
            .y = 0,
            .width = rect_width,
            .height = thickness,
        }, .on);
    }

    const offset_y: i32 = 0;

    return .{ canvas, offset_y };
}

/// Draw a curly underline. Thanks to Wez Furlong for providing
/// the basic math structure for this since I was lazy with the
/// geometry.
fn drawCurly(alloc: Allocator, width: u32, thickness: u32) !CanvasAndOffset {
    const float_width: f64 = @floatFromInt(width);
    const float_thick: f64 = @floatFromInt(thickness);

    // Calculate the wave period for a single character
    //   `2 * pi...` = 1 peak per character
    //   `4 * pi...` = 2 peaks per character
    const wave_period = 2 * std.math.pi / float_width;

    // The full amplitude of the wave can be from the bottom to the
    // underline position. We also calculate our mid y point of the wave
    const half_amplitude = 1.0 / wave_period;
    const y_mid: f64 = half_amplitude + float_thick * 0.5 + 1;

    // This is used in calculating the offset curve estimate below.
    const offset_factor = @min(1.0, float_thick * 0.5 * wave_period) * @min(1.0, half_amplitude * wave_period);

    const height: u32 = @intFromFloat(@ceil(half_amplitude + float_thick + 1) * 2);

    var canvas = try font.sprite.Canvas.init(alloc, width, height);

    // follow Xiaolin Wu's antialias algorithm to draw the curve
    var x: u32 = 0;
    while (x < width) : (x += 1) {
        const t: f64 = @as(f64, @floatFromInt(x)) * wave_period;
        // Use the slope at this location to add thickness to
        // the line on this column, counteracting the thinning
        // caused by the slope.
        //
        // This is not the exact offset curve for a sine wave,
        // but it's a decent enough approximation.
        //
        // How did I derive this? I stared at Desmos and fiddled
        // with numbers for an hour until it was good enough.
        const t_u: f64 = t + std.math.pi;
        const slope_factor_u: f64 = (@sin(t_u) * @sin(t_u) * offset_factor) / ((1.0 + @cos(t_u / 2) * @cos(t_u / 2) * 2) * wave_period);
        const slope_factor_l: f64 = (@sin(t) * @sin(t) * offset_factor) / ((1.0 + @cos(t / 2) * @cos(t / 2) * 2) * wave_period);

        const cosx: f64 = @cos(t);
        // This will be the center of our stroke.
        const y: f64 = y_mid + half_amplitude * cosx;

        // The upper pixel and lower pixel are
        // calculated relative to the center.
        const y_u: f64 = y - float_thick * 0.5 - slope_factor_u;
        const y_l: f64 = y + float_thick * 0.5 + slope_factor_l;
        const y_upper: u32 = @intFromFloat(@floor(y_u));
        const y_lower: u32 = @intFromFloat(@ceil(y_l));
        const alpha_u: u8 = @intFromFloat(@round(255 * (1.0 - @abs(y_u - @floor(y_u)))));
        const alpha_l: u8 = @intFromFloat(@round(255 * (1.0 - @abs(y_l - @ceil(y_l)))));

        // upper and lower bounds
        canvas.pixel(x, @min(y_upper, height - 1), @enumFromInt(alpha_u));
        canvas.pixel(x, @min(y_lower, height - 1), @enumFromInt(alpha_l));

        // fill between upper and lower bound
        var y_fill: u32 = y_upper + 1;
        while (y_fill < y_lower) : (y_fill += 1) {
            canvas.pixel(x, @min(y_fill, height - 1), .on);
        }
    }

    const offset_y: i32 = @intFromFloat(-@round(half_amplitude));

    return .{ canvas, offset_y };
}

test "single" {
    const testing = std.testing;
    const alloc = testing.allocator;

    var atlas_grayscale = try font.Atlas.init(alloc, 512, .grayscale);
    defer atlas_grayscale.deinit(alloc);

    _ = try renderGlyph(
        alloc,
        &atlas_grayscale,
        .underline,
        36,
        18,
        9,
        2,
    );
}

test "strikethrough" {
    const testing = std.testing;
    const alloc = testing.allocator;

    var atlas_grayscale = try font.Atlas.init(alloc, 512, .grayscale);
    defer atlas_grayscale.deinit(alloc);

    _ = try renderGlyph(
        alloc,
        &atlas_grayscale,
        .strikethrough,
        36,
        18,
        9,
        2,
    );
}

test "single large thickness" {
    const testing = std.testing;
    const alloc = testing.allocator;

    var atlas_grayscale = try font.Atlas.init(alloc, 512, .grayscale);
    defer atlas_grayscale.deinit(alloc);

    // unrealistic thickness but used to cause a crash
    // https://github.com/mitchellh/ghostty/pull/1548
    _ = try renderGlyph(
        alloc,
        &atlas_grayscale,
        .underline,
        36,
        18,
        9,
        200,
    );
}

test "curly" {
    const testing = std.testing;
    const alloc = testing.allocator;

    var atlas_grayscale = try font.Atlas.init(alloc, 512, .grayscale);
    defer atlas_grayscale.deinit(alloc);

    _ = try renderGlyph(
        alloc,
        &atlas_grayscale,
        .underline_curly,
        36,
        18,
        9,
        2,
    );
}