feuerwerk/tests/core/text-shader.test.ts

/**
 * A text wears a shader the way a sprite does (#169), over the rectangle of its rendered glyphs, and
 * a font asset says how its glyphs are magnified, the way a texture does.
 */
import { describe, expect, it } from 'vitest';
import { CreateAssetCommand, SetAssetPropertyCommand } from '../../src/core/commands/assetCommands';
import { AddNodeCommand } from '../../src/core/commands/graphCommands';
import { SetOverrideCommand } from '../../src/core/commands/sceneObjectCommands';
import { animatableDefsOf } from '../../src/core/model/animation';
import { fontSmoothOf } from '../../src/core/model/font';
import { findAssetOf } from '../../src/core/model/Project';
import { schemaFor, schemaForAsset, schemaForObject } from '../../src/core/properties/PropertySchema';
import { SHADER_KEY, SHADER_PROPERTY } from '../../src/core/properties/shaders';
import { sharpCoverage, textBox, textCut, textResolution } from '../../src/viewport/textPicture';
import { makeSpriteScene, place, roundTrip } from '../helpers';

function wearing(uniform = 'glow') {
  const f = makeSpriteScene();
  const text = new CreateAssetCommand('text', 'Title');
  const shader = new CreateAssetCommand('shader', 'Glow');
  f.stack.execute(text);
  f.stack.execute(shader);
  const declared = { name: uniform, default: 3, min: 0, max: 10 };
  f.stack.execute(new AddNodeCommand(shader.asset.id, SHADER_PROPERTY, 0, 0, declared));
  const textId = text.asset.id;
  const shaderId = shader.asset.id;
  const asset = () => findAssetOf(f.project, textId, 'text')!;
  const keys = () => schemaForAsset(f.project, asset()).map((d) => d.key);
  const wear = () => f.stack.execute(new SetAssetPropertyCommand(textId, SHADER_KEY, shaderId));
  return { ...f, textId, shaderId, asset, keys, wear };
}

describe('a text wearing a shader', () => {
  it('has the picker after its own rows, and the shader’s rows once one is picked', () => {
    const f = wearing();
    expect(schemaFor('text').at(-1)).toMatchObject({
      key: SHADER_KEY,
      kind: 'asset',
      assetTypes: ['shader'],
      default: '',
    });
    expect(f.keys()).not.toContain('glow');
    f.wear();
    expect(f.keys().at(-1)).toBe('glow');
    expect(schemaForAsset(f.project, f.asset()).at(-1)).toMatchObject({ kind: 'number', default: 3 });
  });

  it('keeps a name it already has: `fontSize` stays the text’s own row', () => {
    const f = wearing('fontSize');
    f.wear();
    expect(f.keys().filter((k) => k === 'fontSize')).toEqual(['fontSize']);
    expect(schemaForAsset(f.project, f.asset()).find((d) => d.key === 'fontSize')).toMatchObject({
      label: 'Font size',
      default: 32,
    });
  });

  it('gives a placed text the rows of the shader it overrides', () => {
    const f = wearing();
    const id = place(f, f.textId, { x: 0, y: 0 });
    f.stack.execute(new SetOverrideCommand(f.sceneId, id, SHADER_KEY, f.shaderId));
    f.stack.execute(new SetOverrideCommand(f.sceneId, id, 'glow', 99));
    expect(schemaForObject(f.project, f.asset(), f.object(id)).map((d) => d.key)).toContain('glow');
    // Through its row: clamped to the node's range.
    expect(f.object(id).overrides.glow).toBe(10);
  });

  it('carries the shader and its values through a save, on the asset and on an override', () => {
    const f = wearing();
    f.wear();
    f.stack.execute(new SetAssetPropertyCommand(f.textId, 'glow', 5));
    const id = place(f, f.textId, { x: 0, y: 0 });
    f.stack.execute(new SetOverrideCommand(f.sceneId, id, 'glow', 7));
    const loaded = roundTrip(f.project);
    expect(findAssetOf(loaded, f.textId, 'text')!.props).toMatchObject({ shader: f.shaderId, glow: 5 });
    const placed = findAssetOf(loaded, f.sceneId, 'scene')!.objects.find((o) => o.id === id)!;
    expect(placed.overrides).toEqual({ glow: 7 });
  });

  it('offers the shader’s parameters to an animation', () => {
    const f = wearing();
    f.wear();
    expect(animatableDefsOf(f.project, f.asset()).map((d) => d.key)).toContain('glow');
  });
});

describe('the filter of a font', () => {
  it('is a row of the font asset, smooth by default', () => {
    expect(schemaFor('font')).toEqual([expect.objectContaining({ key: 'filter', default: 'linear' })]);
  });

  it('tells whether the text wearing the font is drawn smooth', () => {
    const f = makeSpriteScene();
    const font = new CreateAssetCommand('font', 'Pixel');
    f.stack.execute(font);
    const id = font.asset.id;
    expect(fontSmoothOf(f.project, id)).toBe(true);
    f.stack.execute(new SetAssetPropertyCommand(id, 'filter', 'nearest'));
    expect(fontSmoothOf(f.project, id)).toBe(false);
    // The editor's own face, and one that is gone, stay smooth.
    expect(fontSmoothOf(f.project, '')).toBe(true);
    expect(fontSmoothOf(f.project, 'gone')).toBe(true);
    expect(findAssetOf(roundTrip(f.project), id, 'font')!.props.filter).toBe('nearest');
  });

  it('rasterises a sharp face at one pixel per unit, a smooth one with the zoom', () => {
    expect([0.5, 1, 1.37, 2, 3].map((scale) => textResolution(scale, false))).toEqual([1, 1, 1, 1, 1]);
    expect([0.5, 1, 1.37, 2, 3].map((scale) => textResolution(scale, true))).toEqual([1, 2, 3, 4, 4]);
  });

  it('cuts a finely rasterised face down to hard texels without half coverage', () => {
    // 4×2 source at factor 2 → 2×1: the left block carries a smoothed edge (Windows' DirectWrite look)
    // with 3/4 ink, the right one only a fringe of 1/4 – kept and dropped.
    const alpha = [255, 255, 96, 0, 255, 160, 0, 64];
    const src = new Uint8ClampedArray(alpha.flatMap((a) => [255, 255, 255, a]));
    const sharp = sharpCoverage(src, 4, 2, 2, 0x336699);
    expect([sharp.width, sharp.height]).toEqual([2, 1]);
    expect([...sharp.data]).toEqual([0x33, 0x66, 0x99, 255, 0, 0, 0, 0]);
  });

  it('counts the part of a border block beyond the source as empty', () => {
    // 3×1 at factor 2, fully inked: the first block holds two real texels of four (half – kept), the
    // second only one – under half, dropped.
    const src = new Uint8ClampedArray([0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255]);
    const sharp = sharpCoverage(src, 3, 1, 2, 0xffffff);
    expect([sharp.width, sharp.height]).toEqual([2, 1]);
    expect([...sharp.data].filter((_, i) => i % 4 === 3)).toEqual([255, 0]);
  });
});

describe('the box a text is drawn in', () => {
  // Manrope at 2000 units per em: Pixi's "|ÉqÅM" reaches 2019 up and 480 down, the face declares
  // 2132 and 600, and the tail of its "g" reaches 510 down.
  const pixi = { width: 812.4, lineHeight: 2499, lines: 1, ascent: 2019, descent: 480 };
  const face = { ascent: 2132, descent: 600 };

  it('is as tall as the face’s own line box, so the tail of a "g" is inside', () => {
    const box = textBox(pixi, face);
    expect(box).toEqual({ width: 813, height: 2732, top: -113, room: 120 });
    // The baseline lies `ascent - top` below the box's top edge, and the "g" ends 510 below that.
    expect(pixi.ascent - box.top + 510).toBeLessThanOrEqual(box.height);
  });

  it('keeps Pixi’s box wherever that one is the taller, and all of it without a face box', () => {
    expect(textBox(pixi, { ascent: 1800, descent: 700 })).toMatchObject({
      height: 2019 + 700,
      top: 0,
      room: 220,
    });
    expect(textBox(pixi, null)).toEqual({ width: 813, height: 2499, top: 0, room: 0 });
  });

  it('spaces lines as Pixi does and adds the face’s reach above the first and below the last', () => {
    expect(textBox({ ...pixi, lines: 3 }, face).height).toBe(2132 + 2 * 2499 + 600);
  });

  it('is cut out of the padded canvas on whole pixels, or on whole units for a sharp face', () => {
    const box = { width: 100, height: 10.4, top: -0.6, room: 1 };
    expect(textCut(box, 2, 2)).toEqual({ x: 2, y: 0, w: 200, h: 22 });
    expect(textCut({ ...box, top: -0.2 }, 2, 2)).toEqual({ x: 2, y: 1, w: 200, h: 22 });
    expect(textCut(box, 8, 1)).toEqual({ x: 8, y: 0, w: 800, h: 88 });
  });
});