feuerwerk/tests/editor/song-edit.test.ts

import { describe, expect, it } from 'vitest';
import { newItem, type SongItem } from '../../src/core/music/song';
import { secondsOfTicks } from '../../src/core/music/time';
import {
  clampMove,
  draggedLength,
  droppedLength,
  duplicateOffset,
  moveDelta,
  moved,
  placedCopies,
  roundsOf,
  snapEdge,
  split,
  trimDelta,
  trimmed,
} from '../../src/editor/song/songEdit';
import {
  clampTracks,
  FIT_MARGIN,
  fitSong,
  HEAD_BOXES,
  headPartAt,
  itemAt,
  heldSongView,
  itemsWithin,
  loopSeams,
  MAX_TRACK_HEIGHT,
  MIN_TRACK_HEIGHT,
  peakOver,
  SLIDERS_MIN_HEIGHT,
  sliderValue,
  SONG_MAX_PX_PER_TICK,
  type SongView,
  TRACK_HEIGHT,
  trackAtY,
  zoomTracks,
} from '../../src/editor/song/songView';
import { MAX_PX_PER_TICK, tickToX, zoomTime } from '../../src/editor/music/timeView';

const BAR = 1920;
const TRACKS = ['t1', 't2', 't3'];
const rows = new Map(TRACKS.map((id, i) => [id, i]));
const tracks = TRACKS.map((id) => ({ id, name: id, volume: 0, pan: 0, mute: false, solo: false, fx: '' }));

function item(
  id: string,
  track: string,
  tick: number,
  length: number,
  extra: Partial<SongItem> = {},
): SongItem {
  return { ...newItem({ track, kind: 'pattern', asset: 'p', tick, length }), id, ...extra };
}

describe('moving and sizing items (#334)', () => {
  const items = [item('a', 't1', BAR, BAR), item('b', 't2', 3 * BAR, BAR)];
  const both = new Set(['a', 'b']);

  it('moves the picked items on the grid, across tracks, never before 0 or off the tracks', () => {
    expect(moveDelta(items, both, rows, 3, items[0]!, BAR + 700, 1, BAR, false)).toEqual({
      ticks: 0,
      tracks: 1,
    });
    expect(moveDelta(items, both, rows, 3, items[0]!, BAR + 1000, 2, BAR, false)).toEqual({
      ticks: BAR,
      tracks: 1,
    });
    expect(moveDelta(items, both, rows, 3, items[0]!, -5000, 0, BAR, false)).toEqual({
      ticks: -BAR,
      tracks: 0,
    });
    expect(moveDelta(items, both, rows, 3, items[0]!, BAR + 7, 0, BAR, true)).toEqual({
      ticks: 7,
      tracks: 0,
    });
    expect(clampMove(items, both, rows, 3, 0, -1)).toEqual({ ticks: 0, tracks: 0 });
    expect(moved(items, both, TRACKS, 480, 1).map((i) => [i.tick, i.track])).toEqual([
      [BAR + 480, 't2'],
      [3 * BAR + 480, 't3'],
    ]);
  });

  it('lengthens by the right end to the grid, and never back past its own start', () => {
    expect(draggedLength(items[0]!, 3 * BAR + 100, BAR, false)).toBe(2 * BAR);
    expect(draggedLength(items[0]!, 0, BAR, false)).toBe(BAR);
    expect(draggedLength(items[0]!, BAR + 5, BAR, true)).toBe(5);
  });

  it('cuts back by the left end what it plays with it, and pulls it out no further than its start', () => {
    const sound = item('s', 't1', BAR, BAR, { kind: 'sound', offset: 0.25 });
    const picked = new Set(['s']);
    // 0.25 s at 120 BPM is 240 ticks: that is as far back as the left end goes.
    expect(trimDelta([sound], picked, sound, 0, 120, false, 120)).toBe(-240);
    // Past its own end the left end stops on the last grid line before it.
    expect(trimDelta([sound], picked, sound, 5 * BAR, 120, false, 120)).toBe(BAR - 120);
    expect(trimDelta([sound], picked, sound, 5 * BAR, 120, true, 120)).toBe(BAR - 1);
    const [cut] = trimmed([sound], picked, 480, 120);
    expect([cut!.tick, cut!.length, cut!.offset]).toEqual([BAR + 480, BAR - 480, 0.75]);
    const pattern = item('p', 't1', BAR, BAR, { offset: 120 });
    expect(trimDelta([pattern], new Set(['p']), pattern, 0, 60, false, 120)).toBe(-120);
    expect(trimmed([pattern], new Set(['p']), -120, 120)[0]).toMatchObject({ tick: BAR - 120, offset: 0 });
  });

  it('pulls an item out left past what it plays, which then repeats from its end', () => {
    // 0.5 s at 120 BPM is 480 ticks; a pattern a bar long.
    const sound = item('s', 't1', BAR, BAR, { kind: 'sound', offset: 0 });
    const pattern = item('p', 't1', BAR, BAR);
    const period = (i: SongItem) => (i.kind === 'sound' ? 480 : BAR);
    expect(trimDelta([sound], new Set(['s']), sound, 0, 120, false, 120, period)).toBe(-BAR);
    expect(trimDelta([sound], new Set(['s']), sound, 0, 120, false, 120)).toBe(0);
    const [s] = trimmed([sound], new Set(['s']), -240, 120, period);
    expect([s!.tick, s!.length, s!.offset]).toEqual([BAR - 240, BAR + 240, 0.25]);
    const [p] = trimmed([pattern], new Set(['p']), -480, 120, period);
    expect([p!.tick, p!.length, p!.offset]).toEqual([BAR - 480, BAR + 480, BAR - 480]);
  });

  it('snaps an end to where what the item plays starts over, as well as to the grid', () => {
    // A sound 700.4 ticks long: its rounds end between two ticks.
    const sound = item('s', 't1', BAR, BAR, { kind: 'sound', offset: 0 });
    const rounds = roundsOf(sound, 700.4, 120)!;
    expect(rounds).toEqual({ base: BAR, period: 700.4 });
    expect(snapEdge(BAR + 1390, BAR, rounds)).toBeCloseTo(BAR + 1400.8);
    expect(snapEdge(BAR + 1900, BAR, rounds)).toBe(2 * BAR);
    expect(snapEdge(BAR + 1390, BAR, null)).toBe(2 * BAR);
    // The end is cut to the tick before, so nothing of the next round sounds.
    expect(draggedLength(sound, BAR + 1390, BAR, false, rounds)).toBe(1400);
    // The start put back on a round plays from the very beginning, not a hair into it.
    const cut = item('c', 't1', BAR + 100, 2000, { kind: 'sound', offset: 100 / 960 });
    const picked = new Set(['c']);
    const by = trimDelta([cut], picked, cut, BAR + 705, 480, false, 120, () => 700.4);
    expect(by).toBe(600);
    expect(trimmed([cut], picked, by, 120, () => 700.4)[0]!.offset).toBe(secondsOfTicks(700.4, 120));
    // A start dragged right up to a round that is its own end does not snap there, it would leave a
    // tick: it takes the grid line before.
    const two = item('t', 't1', BAR, 1400, { kind: 'sound', offset: 0 });
    expect(trimDelta([two], new Set(['t']), two, BAR + 1390, 480, false, 120, () => 700)).toBe(960);
    // An offset a whole pattern in stays so: the pattern may grow later.
    const far = item('f', 't1', BAR, 2 * BAR);
    expect(trimmed([far], new Set(['f']), BAR, 120, () => BAR)[0]!.offset).toBe(BAR);
  });

  it('splits the picked items the point falls inside, and gives the right-hand parts', () => {
    const cut = split(items, new Set(['a', 'b']), BAR + 480, 120);
    expect(cut.items.map((i) => [i.track, i.tick, i.length, i.offset])).toEqual([
      ['t1', BAR, 480, 0],
      ['t1', BAR + 480, BAR - 480, 480],
      ['t2', 3 * BAR, BAR, 0],
    ]);
    expect(cut.right).toEqual([cut.items[1]!.id]);
  });

  it('puts a duplicate right behind the picked items, and a paste on their tracks', () => {
    expect(duplicateOffset(items, both, BAR)).toBe(3 * BAR);
    const copies = placedCopies(items, 480, ['t2', 't3']);
    expect(copies.map((i) => [i.tick, i.track])).toEqual([
      [480, 't2'],
      [480 + 2 * BAR, 't2'],
    ]);
    expect(copies.every((c) => c.id !== 'a' && c.id !== 'b')).toBe(true);
    // Under the pointer: the topmost on its track, as far down as there are tracks.
    expect(placedCopies(items, 0, TRACKS, 2).map((i) => i.track)).toEqual(['t2', 't3']);
    expect(placedCopies(items, 0, TRACKS, 0).map((i) => i.track)).toEqual(['t1', 't2']);
  });

  it('makes a dropped pattern as long as it is, a sound as long as it plays at the tempo, else a bar', () => {
    expect(droppedLength(null, 3 * BAR, 120, BAR)).toBe(3 * BAR);
    expect(droppedLength(1.25, null, 120, BAR)).toBe(1200);
    expect(droppedLength(null, null, 120, BAR)).toBe(BAR);
  });
});

describe('where things are in the Song tab (#334)', () => {
  const view: SongView = { panX: 0, pxPerTick: 0.1, panY: 0, trackHeight: TRACK_HEIGHT };
  const items = [item('a', 't1', 0, BAR), item('b', 't2', BAR, BAR)];

  it('finds an item and which end of it is under the pointer', () => {
    expect(itemAt(view, items, tracks, { x: 96, y: TRACK_HEIGHT / 2 })).toEqual({ id: 'a', part: 'body' });
    expect(itemAt(view, items, tracks, { x: 190, y: TRACK_HEIGHT / 2 })).toEqual({ id: 'a', part: 'end' });
    expect(itemAt(view, items, tracks, { x: 194, y: TRACK_HEIGHT * 1.5 })).toEqual({
      id: 'b',
      part: 'start',
    });
    expect(itemAt(view, items, tracks, { x: 96, y: TRACK_HEIGHT * 1.5 })).toBeNull();
    expect(itemsWithin(view, items, tracks, { x: 150, y: 10 }, { x: 250, y: TRACK_HEIGHT + 10 })).toEqual([
      'a',
      'b',
    ]);
  });

  it('scrolls half the height past the first or the last track at most', () => {
    expect(clampTracks({ ...view, panY: 40 }, 3, 400).panY).toBe(40);
    expect(clampTracks({ ...view, panY: 900 }, 3, 400).panY).toBe(200);
    // Tracks that fit with room to spare are not pushed up off the top.
    expect(clampTracks({ ...view, panY: -40 }, 1, 400).panY).toBe(0);
    expect(clampTracks({ ...view, panY: -5000 }, 10, 400).panY).toBe(400 - 200 - 10 * TRACK_HEIGHT);
  });

  it('tells the parts of a head apart and reads a slider from left to right', () => {
    const { mute, solo, volume, pan } = HEAD_BOXES;
    expect(headPartAt(mute.x + 4, mute.y + 4)).toBe('mute');
    expect(headPartAt(solo.x + 4, solo.y + 4)).toBe('solo');
    expect(headPartAt(volume.x + 10, volume.y + 4)).toBe('volume');
    expect(headPartAt(pan.x + 10, pan.y + 4)).toBe('pan');
    expect(headPartAt(20, 8)).toBe('name');
    expect(sliderValue(volume.x, volume, -60, 6, 0.5)).toBe(-60);
    expect(sliderValue(volume.x + volume.w, volume, -60, 6, 0.5)).toBe(6);
    expect(sliderValue(pan.x + pan.w / 2, pan, -1, 1, 0.05)).toBe(0);
    // A head too low for its sliders has none to hit.
    expect(headPartAt(volume.x + 10, volume.y + 4, SLIDERS_MIN_HEIGHT - 1)).toBe('name');
    expect(headPartAt(mute.x + 4, mute.y + 4, MIN_TRACK_HEIGHT)).toBe('mute');
  });

  it('zooms the tracks about the pointer, within their bounds, and fills in an old saved view', () => {
    const zoomed = zoomTracks({ ...view, panY: -20 }, 2, 150);
    expect(zoomed.trackHeight).toBe(2 * TRACK_HEIGHT);
    expect(trackAtY(zoomed, 10, 150)).toBe(trackAtY({ ...view, panY: -20 }, 10, 150));
    expect(zoomTracks(view, 100, 0).trackHeight).toBe(MAX_TRACK_HEIGHT);
    expect(zoomTracks(view, 0.01, 0).trackHeight).toBe(MIN_TRACK_HEIGHT);
    expect(clampTracks({ ...zoomed, panY: -9999 }, 10, 400).panY).toBe(400 - 200 - 10 * 2 * TRACK_HEIGHT);
    expect(heldSongView({ panX: -5, pxPerTick: 0.3, panY: -10 })).toEqual({
      panX: -5,
      pxPerTick: 0.3,
      panY: -10,
      trackHeight: TRACK_HEIGHT,
    });
  });

  it('fits the song across and its tracks down with room around, and zooms in further than a pattern', () => {
    // 4 bars and 4 tracks in 1000 x 500: 90 pixels free left and right, 45 above and below.
    const fitted = fitSong(4 * BAR, 4, 1000, 500);
    expect(fitted.panX).toBeCloseTo(1000 * FIT_MARGIN);
    expect(fitted.panY).toBeCloseTo(500 * FIT_MARGIN);
    expect(tickToX(fitted, 4 * BAR)).toBeCloseTo(1000 * (1 - FIT_MARGIN));
    expect(fitted.panY + 4 * fitted.trackHeight).toBeCloseTo(500 * (1 - FIT_MARGIN));
    // A track keeps the heights it may have, however many or few there are.
    expect(fitSong(BAR, 1, 1000, 2000).trackHeight).toBe(MAX_TRACK_HEIGHT);
    expect(fitSong(BAR, 60, 1000, 500).trackHeight).toBe(MIN_TRACK_HEIGHT);
    // The wheel goes past where a pattern stops, up to the song's own bound.
    const deep = zoomTime({ panX: 0, pxPerTick: 1 }, 100, 0, SONG_MAX_PX_PER_TICK);
    expect(SONG_MAX_PX_PER_TICK).toBeGreaterThan(MAX_PX_PER_TICK);
    expect(deep.pxPerTick).toBe(SONG_MAX_PX_PER_TICK);
    expect(fitSong(1, 1, 1000, 500).pxPerTick).toBe(SONG_MAX_PX_PER_TICK);
  });

  it('marks where an item starts over inside it, from as far in as it starts', () => {
    expect(loopSeams({ tick: BAR, length: 3 * BAR }, BAR, 0)).toEqual([2 * BAR, 3 * BAR]);
    expect(loopSeams({ tick: BAR, length: 2 * BAR }, BAR, 480)).toEqual([2 * BAR - 480, 3 * BAR - 480]);
    expect(loopSeams({ tick: 0, length: BAR }, BAR, 0)).toEqual([]);
    expect(loopSeams({ tick: 0, length: 1000 }, 400.5, 0)).toEqual([400.5, 801]);
    expect(loopSeams({ tick: 0, length: BAR }, 0, 0)).toEqual([]);
  });

  it('draws a waveform column as the loudest of every bucket it covers', () => {
    const peaks = [0.1, 0.9, 0.2, 0.3];
    expect(peakOver(peaks, 0, 0.25)).toBe(0.1);
    expect(peakOver(peaks, 0.2, 0.3)).toBe(0.9);
    expect(peakOver(peaks, 0.5, 1)).toBe(0.3);
    expect(peakOver(peaks, 0.6, 0.61)).toBe(0.2);
    expect(peakOver(peaks, 0.99, 1.2)).toBe(0.3);
  });
});