diff --git a/src/core/music/song.ts b/src/core/music/song.ts index a6d417ec..a1220600 100644 --- a/src/core/music/song.ts +++ b/src/core/music/song.ts @@ -56,7 +56,7 @@ export const SONG_GRID_KEY = 'grid'; export const DEFAULT_SONG_GRID = 'bar'; export const SONG_GRID_OPTIONS = [{ value: 'bar', label: 'Bar' }, ...GRID_OPTIONS]; /** A new song has this many tracks. */ -export const DEFAULT_TRACKS = 4; +export const DEFAULT_TRACKS = 1; /** A song is never shorter than this many bars, on the ruler or when it plays. */ export const MIN_BARS = 1; diff --git a/src/editor/debug/songHooks.ts b/src/editor/debug/songHooks.ts index 0950e276..ea2d0f9f 100644 --- a/src/editor/debug/songHooks.ts +++ b/src/editor/debug/songHooks.ts @@ -27,7 +27,6 @@ export function songHooks({ state, editor }: HookContext) { laneAt: (tick: number, track: number) => timeline.lanePoint(tick, track), itemAt: (itemId: string, part?: 'start' | 'body' | 'end') => timeline.itemPoint(itemId, part), headAt: (track: number, part: HeadPart, share?: number) => timeline.headPoint(track, part, share), - addTrackAt: () => timeline.addTrackPoint(), rulerAt: (tick: number) => timeline.rulerPoint(tick), loopAt: (tick: number) => timeline.loopPoint(tick), view: () => timeline.viewInfo(), diff --git a/src/editor/music/TimeRuler.ts b/src/editor/music/TimeRuler.ts index 14b34de6..7fdbc413 100644 --- a/src/editor/music/TimeRuler.ts +++ b/src/editor/music/TimeRuler.ts @@ -44,6 +44,9 @@ export class TimeRuler extends Container { const x1 = Math.min(width, tickToX(view, marks.loop.end)); if (x1 > x0) g.rect(x0, 1, x1 - x0, LOOP_STRIP - 2).fill({ color: c.accent, alpha: 0.75 }); } + // Before tick 0 there is nothing to play: it reads darker. + const zero = Math.min(width, tickToX(view, 0)); + if (zero > 0) g.rect(0, 0, zero, RULER_HEIGHT).fill({ color: 0x000000, alpha: 0.3 }); g.rect(0, LOOP_STRIP, width, 1).fill(c.border); g.rect(0, RULER_HEIGHT - 1, width, 1).fill(c.border); diff --git a/src/editor/music/timeView.ts b/src/editor/music/timeView.ts index 31c479d4..6e8069e8 100644 --- a/src/editor/music/timeView.ts +++ b/src/editor/music/timeView.ts @@ -37,9 +37,16 @@ export function zoomTime(view: TimeView, factor: number, x: number): TimeView { return { panX: x - tick * pxPerTick, pxPerTick }; } -/** Time starts at 0: nothing to look at left of it. */ -export function clampTimePan(view: V): V { - return view.panX > 0 ? { ...view, panX: 0 } : view; +/** How far right of the area's left edge tick 0 can be panned, as a share of the area's width. */ +export const TIME_LEAD = 0.5; + +/** + * Time starts at 0, but it need not stand at the left edge: a pan can take it up to half the area in, + * to look at, with nothing to place left of it. + */ +export function clampTimePan(view: V, width: number): V { + const most = Math.max(0, width * TIME_LEAD); + return view.panX > most ? { ...view, panX: most } : view; } /** `length` ticks across `width` pixels, from tick 0. */ diff --git a/src/editor/pattern/PianoRoll.ts b/src/editor/pattern/PianoRoll.ts index 5eb32fdf..8ff4a9db 100644 --- a/src/editor/pattern/PianoRoll.ts +++ b/src/editor/pattern/PianoRoll.ts @@ -38,6 +38,7 @@ import type { EditorState } from '../state'; import { clampShift, draggedLength, + draggedStart, drawnNote, duplicateOffset, moveDelta, @@ -46,12 +47,16 @@ import { shifted, snapDown, snapNear, + trimmed, withVelocity, } from './rollEdit'; import { centreRows, clampRows, DEFAULT_ROW_HEIGHT, + END_GRIP, + type NoteBox, + type NoteHit, noteAt, noteAtY, noteBox, @@ -106,6 +111,7 @@ type Gesture = pointer: Vec2; } | { kind: 'resize'; anchor: PatternNote; by: number; moved: boolean } + | { kind: 'trim'; anchor: PatternNote; by: number } | { kind: 'erase'; erased: Set } | { kind: 'velocity'; anchor: PatternNote; value: number }; @@ -121,8 +127,8 @@ function mix(a: number, b: number, t: number): number { /** * The Pattern tab's canvas (#333): the keys down the left, a ruler along the top, the notes in a grid * between them and their velocities in a lane below. A click into the grid draws a note, a drag spans - * a band that picks notes; a note is dragged by its body, lengthened by its right end, and goes with a - * right-click or Delete. A press or a drag on the ruler moves where playing starts, one on the strip + * a band that picks notes; a note is dragged by its body, sized by either end, which lights up under + * the pointer, and goes with a right-click or Delete. A press or a drag on the ruler moves where playing starts, one on the strip * along its top sets the loop. The wheel zooms: the time over the grid, the rows over the keys. */ export class PianoRoll extends Widget { @@ -149,6 +155,8 @@ export class PianoRoll extends Widget { private needsFit = true; private assetId = ''; private gesture: Gesture | null = null; + /** The part of a note under the pointer while nothing is held. */ + private hover: NoteHit | null = null; /** The notes picked, by id; only this tab knows them. */ private picked = new Set(); /** Where playing starts and a paste lands, in ticks. */ @@ -217,6 +225,7 @@ export class PianoRoll extends Widget { if (this.assetId === assetId) return; this.endGesture(); this.assetId = assetId; + this.hover = null; this.picked.clear(); this.startTick = 0; this.needsFit = true; @@ -419,6 +428,8 @@ export class PianoRoll extends Widget { playhead: number | null; loop: LoopRange | null; keys: number | null; + hover: NoteHit | null; + cursor: string; } { const g = this.gesture; return { @@ -427,6 +438,8 @@ export class PianoRoll extends Widget { playhead: this.playhead, loop: this.shownLoop(), keys: g?.kind === 'key' ? g.note : null, + hover: this.hover, + cursor: String(this.cursor ?? ''), }; } @@ -531,6 +544,10 @@ export class PianoRoll extends Widget { this.gesture = { kind: 'resize', anchor, by: 0, moved: false }; return; } + if (hit.part === 'start') { + this.gesture = { kind: 'trim', anchor, by: 0 }; + return; + } const grab = xToTick(this.view, g.x) - anchor.tick; this.gesture = { kind: 'move', anchor, grab, ticks: 0, notes: 0, moved: false, pointer: g }; this.onPreview(anchor.note, false); @@ -539,20 +556,27 @@ export class PianoRoll extends Widget { private onPointerMove(e: FederatedPointerEvent): void { const gesture = this.gesture; const asset = this.asset(); - if (!gesture || !asset) return; + if (!asset) return; const local = this.toLocal(e.global); const g = this.inGrid({ x: local.x, y: local.y }); + if (!gesture) { + this.followHover(asset, local, g); + return; + } const tick = xToTick(this.view, g.x); const grid = patternGrid(asset.props); const free = e.altKey; switch (gesture.kind) { case 'pan': this.view = clampRows( - clampTimePan({ - ...this.view, - panX: gesture.panX + (local.x - gesture.pointer.x), - panY: gesture.panY + (local.y - gesture.pointer.y), - }), + clampTimePan( + { + ...this.view, + panX: gesture.panX + (local.x - gesture.pointer.x), + panY: gesture.panY + (local.y - gesture.pointer.y), + }, + this.gridWidth, + ), this.gridHeight, ); break; @@ -596,6 +620,9 @@ export class PianoRoll extends Widget { gesture.moved = true; gesture.by = draggedLength(gesture.anchor, tick, grid, free) - gesture.anchor.length; break; + case 'trim': + gesture.by = draggedStart(gesture.anchor, tick, grid, free) - gesture.anchor.tick; + break; case 'erase': this.erase(asset, g); break; @@ -650,6 +677,16 @@ export class PianoRoll extends Widget { this.lastLength = gesture.anchor.length + gesture.by; } break; + case 'trim': + if (gesture.by !== 0) { + this.commit( + asset, + trimmed(asset.notes, this.picked, gesture.by), + this.picked.size === 1 ? 'Resize note' : 'Resize notes', + ); + this.lastLength = gesture.anchor.length - gesture.by; + } + break; case 'erase': if (gesture.erased.size > 0) { this.commit( @@ -680,7 +717,8 @@ export class PianoRoll extends Widget { private draw(asset: PatternAsset, at: Vec2, grid: number, free: boolean): void { const note = noteAtY(this.view, at.y); - if (note === null) return; + // Left of tick 0 is there to look at, not to draw on. + if (note === null || xToTick(this.view, at.x) < 0) return; const drawn = drawnNote( xToTick(this.view, at.x), note, @@ -702,9 +740,19 @@ export class PianoRoll extends Widget { if (hit) this.gesture.erased.add(hit.id); } - /** Where a press or a drag on the ruler puts the start: on the grid line before it, with Alt on the tick. */ + /** The part of a note under the pointer: an end it can be dragged by shows a resize cursor and lights up. */ + private followHover(asset: PatternAsset, local: Vec2, g: Vec2): void { + const hit = this.areaAt(local) === 'grid' && local.x <= this.w ? noteAt(this.view, asset.notes, g) : null; + const cursor = hit && hit.part !== 'body' ? 'ew-resize' : 'default'; + if (this.cursor !== cursor) this.cursor = cursor; + if (JSON.stringify(hit) === JSON.stringify(this.hover)) return; + this.hover = hit; + this.invalidate(); + } + + /** Where a press or a drag on the ruler puts the start: on the nearest grid line, with Alt on the tick. */ private cursorTick(tick: number, grid: number, free: boolean): number { - return Math.max(0, free ? Math.round(tick) : snapDown(tick, grid)); + return Math.max(0, free ? Math.round(tick) : snapNear(tick, grid)); } private setStart(tick: number): void { @@ -745,7 +793,7 @@ export class PianoRoll extends Widget { else if (area === 'ruler' || area === 'grid' || area === 'lane') view = { ...this.view, ...zoomTime(this.view, factor, g.x) }; else return; - this.view = clampRows(clampTimePan(view), this.gridHeight); + this.view = clampRows(clampTimePan(view, this.gridWidth), this.gridHeight); this.needsFit = false; this.redraw(); e.preventDefault(); @@ -758,6 +806,7 @@ export class PianoRoll extends Widget { const g = this.gesture; if (g?.kind === 'move' && g.moved) return shifted(asset.notes, this.picked, g.ticks, g.notes); if (g?.kind === 'resize') return resized(asset.notes, this.picked, g.by); + if (g?.kind === 'trim') return trimmed(asset.notes, this.picked, g.by); if (g?.kind === 'velocity') return withVelocity(asset.notes, this.picked, g.anchor, g.value); if (g?.kind === 'erase') return asset.notes.filter((n) => !g.erased.has(n.id)); return asset.notes; @@ -898,6 +947,11 @@ export class PianoRoll extends Widget { .rect(Math.max(0, end), 0, gw - Math.max(0, end), VELOCITY_HEIGHT) .fill({ color: 0x000000, alpha: 0.25 }); } + const zero = Math.min(gw, tickToX(this.view, 0)); + if (zero > 0) { + this.gridG.rect(0, 0, zero, gh).fill({ color: 0x000000, alpha: 0.5 }); + this.laneG.rect(0, 0, zero, VELOCITY_HEIGHT).fill({ color: 0x000000, alpha: 0.35 }); + } } private drawNotes(notes: readonly PatternNote[], length: number, gw: number, gh: number): void { @@ -912,9 +966,22 @@ export class PianoRoll extends Widget { .rect(box.x, box.y + 1, w, Math.max(1, box.h - 1)) .fill({ color: picked ? mix(HARD, 0xffffff, 0.35) : mix(SOFT, HARD, note.velocity), alpha }) .stroke({ width: 1, color: picked ? c.accentText : c.viewport, alpha, alignment: 1 }); + if (this.hover?.id === note.id && this.hover.part !== 'body') + this.drawGrip({ ...box, w: Math.max(4, box.w) }, this.hover.part); } } + /** The end of a note the pointer would drag, lit, as on an item of the Song tab. */ + private drawGrip(box: NoteBox, part: 'start' | 'end'): void { + const reach = Math.min(END_GRIP, box.w / 3); + const y = box.y + 1; + const h = Math.max(1, box.h - 1); + this.gridG + .rect(part === 'end' ? box.x + box.w - reach : box.x, y, reach, h) + .fill({ color: 0xffffff, alpha: 0.35 }); + this.gridG.rect(part === 'end' ? box.x + box.w - 2 : box.x, y, 2, h).fill(Theme.colors.accentText); + } + private drawLane(notes: readonly PatternNote[], length: number, gw: number): void { const c = Theme.colors; this.laneG.rect(0, VELOCITY_HEIGHT / 2, gw, 1).fill({ color: c.border, alpha: 0.5 }); diff --git a/src/editor/pattern/rollEdit.ts b/src/editor/pattern/rollEdit.ts index e2fc4856..90c3e735 100644 --- a/src/editor/pattern/rollEdit.ts +++ b/src/editor/pattern/rollEdit.ts @@ -95,6 +95,32 @@ export function resized( return notes.map((n) => (picked.has(n.id) ? { ...n, length: Math.max(1, n.length + by) } : n)); } +/** + * Where the grabbed note starts when its start is dragged to a tick: on the grid line nearest the + * pointer, its end staying put. Never up to its end – then on the last grid line before it – and + * never before tick 0. + */ +export function draggedStart(anchor: PatternNote, pointerTick: number, grid: number, free: boolean): number { + const end = anchor.tick + anchor.length; + if (free) return clamp(Math.round(pointerTick), 0, end - 1); + const start = snapNear(pointerTick, grid); + return Math.max(0, start < end ? start : snapDown(end - 1, grid)); +} + +/** Every picked note's start moved by what the grabbed one's was, its end kept, none shorter than a tick. */ +export function trimmed( + notes: readonly PatternNote[], + picked: ReadonlySet, + by: number, +): PatternNote[] { + return notes.map((n) => { + if (!picked.has(n.id)) return n; + const end = n.tick + n.length; + const tick = clamp(n.tick + by, 0, end - 1); + return { ...n, tick, length: end - tick }; + }); +} + /** How far right a copy of the picked notes goes so it stands right behind them: whole grid steps. */ export function duplicateOffset( notes: readonly PatternNote[], diff --git a/src/editor/pattern/rollView.ts b/src/editor/pattern/rollView.ts index e20d72e2..d9c07eb4 100644 --- a/src/editor/pattern/rollView.ts +++ b/src/editor/pattern/rollView.ts @@ -19,8 +19,8 @@ export const ROWS = HIGHEST_NOTE - LOWEST_NOTE + 1; export const MIN_ROW_HEIGHT = 6; export const MAX_ROW_HEIGHT = 28; export const DEFAULT_ROW_HEIGHT = 14; -/** How far in from a note's right end a press takes its length rather than the note. */ -const END_GRIP = 6; +/** How far in from an end of a note a press takes that end rather than the note. */ +export const END_GRIP = 6; /** A note narrower than this is still this wide to the pointer. */ const MIN_HIT_WIDTH = 4; /** How close to a bar of the velocity lane a press must be to take it. */ @@ -73,10 +73,12 @@ export function noteBox(view: RollView, note: Pick= 0; i--) { @@ -85,7 +87,8 @@ export function noteAt(view: RollView, notes: readonly PatternNote[], point: Vec const w = Math.max(box.w, MIN_HIT_WIDTH); if (point.x < box.x || point.x >= box.x + w || point.y < box.y || point.y >= box.y + box.h) continue; const grip = Math.min(END_GRIP, w / 3); - return { id: note.id, part: point.x >= box.x + w - grip ? 'end' : 'body' }; + const part = point.x >= box.x + w - grip ? 'end' : point.x < box.x + grip ? 'start' : 'body'; + return { id: note.id, part }; } return null; } diff --git a/src/editor/song/SongTimeline.ts b/src/editor/song/SongTimeline.ts index 02846e26..f5f9c668 100644 --- a/src/editor/song/SongTimeline.ts +++ b/src/editor/song/SongTimeline.ts @@ -73,7 +73,6 @@ import { trimmed, } from './songEdit'; import { - ADD_ROW_HEIGHT, type Box, clampTracks, HEAD_BOXES, @@ -182,7 +181,6 @@ export class SongTimeline extends Widget { private readonly ruler = new TimeRuler(); private readonly clips = { lanes: new Graphics(), heads: new Graphics(), ruler: new Graphics() }; private readonly hint = crispText({ text: '', style: textStyle('muted') }); - private readonly addLabel = crispText({ text: '+ Track', style: textStyle('muted') }); private view: SongView = { panX: 0, pxPerTick: 0.02, panY: 0, trackHeight: TRACK_HEIGHT }; private needsFit = true; private assetId = ''; @@ -210,7 +208,7 @@ export class SongTimeline extends Widget { super(); this.focusable = true; this.lanesLayer.addChild(this.lanesG, this.itemsG, this.itemLabels, this.overlay); - this.headsLayer.addChild(this.headsG, this.headLabels, this.addLabel); + this.headsLayer.addChild(this.headsG, this.headLabels); this.addChild(this.bg, this.lanesLayer, this.headsLayer, this.ruler, this.hint); for (const clip of Object.values(this.clips)) this.addChild(clip); this.lanesLayer.mask = this.clips.lanes; @@ -219,7 +217,6 @@ export class SongTimeline extends Widget { this.hint.eventMode = 'none'; this.itemLabels.eventMode = 'none'; this.headLabels.eventMode = 'none'; - this.addLabel.eventMode = 'none'; this.on('pointerdown', (e: FederatedPointerEvent) => this.onPointerDown(e)); this.on('globalpointermove', (e: FederatedPointerEvent) => this.onPointerMove(e)); @@ -489,13 +486,6 @@ export class SongTimeline extends Widget { }; } - addTrackPoint(): Vec2 { - const asset = this.asset(); - const at = this.getGlobalPosition(); - const top = trackTop(this.view, asset?.tracks.length ?? 0); - return { x: at.x + HEAD_WIDTH / 2, y: at.y + RULER_HEIGHT + top + ADD_ROW_HEIGHT / 2 }; - } - rulerPoint(tick: number): Vec2 { const at = this.getGlobalPosition(); return { x: at.x + HEAD_WIDTH + tickToX(this.view, tick), y: at.y + RULER_HEIGHT - 6 }; @@ -621,11 +611,7 @@ export class SongTimeline extends Widget { private pressHead(asset: SongAsset, e: FederatedPointerEvent, y: number, x: number): void { const row = trackAtY(this.view, asset.tracks.length, y); - if (row === null) { - const below = y - trackTop(this.view, asset.tracks.length); - if (e.button === 0 && below >= 0 && below < ADD_ROW_HEIGHT) this.addTrack(); - return; - } + if (row === null) return; const track = asset.tracks[row]!; if (e.button === 2) { this.openTrackMenu(asset, row, e.global); @@ -711,11 +697,14 @@ export class SongTimeline extends Widget { switch (gesture.kind) { case 'pan': this.view = clampTracks( - clampTimePan({ - ...this.view, - panX: gesture.panX + (local.x - gesture.pointer.x), - panY: gesture.panY + (local.y - gesture.pointer.y), - }), + clampTimePan( + { + ...this.view, + panX: gesture.panX + (local.x - gesture.pointer.x), + panY: gesture.panY + (local.y - gesture.pointer.y), + }, + this.lanesWidth, + ), asset.tracks.length, this.lanesHeight, ); @@ -851,7 +840,13 @@ export class SongTimeline extends Widget { /** Follows an asset dragged in from the panel: a pattern or a sound lands on the lane under the pointer. */ private trackDrop(asset: SongAsset, assetId: string, local: Vec2, g: Vec2): void { const dragged = findAsset(this.state.project, assetId); - const inside = local.x >= HEAD_WIDTH && local.x <= this.w && local.y >= RULER_HEIGHT && local.y <= this.h; + // Left of tick 0 is there to look at: nothing lands there. + const inside = + local.x >= HEAD_WIDTH && + local.x <= this.w && + local.y >= RULER_HEIGHT && + local.y <= this.h && + xToTick(this.view, g.x) >= 0; const row = trackAtY(this.view, asset.tracks.length, g.y); if (!inside || row === null || !dragged || (dragged.type !== 'pattern' && dragged.type !== 'sound')) { if (this.drop) { @@ -885,9 +880,9 @@ export class SongTimeline extends Widget { this.invalidate(); } - /** Where a press or a drag on the ruler puts the start: on the grid line before it, with Alt on the tick. */ + /** Where a press or a drag on the ruler puts the start: on the nearest grid line, with Alt on the tick. */ private cursorTick(tick: number, grid: number, free: boolean): number { - return Math.max(0, free ? Math.round(tick) : snapDown(tick, grid)); + return Math.max(0, free ? Math.round(tick) : snapNear(tick, grid)); } private setStart(tick: number): void { @@ -969,7 +964,7 @@ export class SongTimeline extends Widget { else if (area === 'ruler' || area === 'lanes') view = { ...this.view, ...zoomTime(this.view, factor, g.x) }; else return; - this.view = clampTracks(clampTimePan(view), asset.tracks.length, this.lanesHeight); + this.view = clampTracks(clampTimePan(view, this.lanesWidth), asset.tracks.length, this.lanesHeight); this.needsFit = false; this.redraw(); e.preventDefault(); @@ -1085,7 +1080,6 @@ export class SongTimeline extends Widget { if (!asset) { this.syncTexts(this.itemTexts, this.itemLabels, []); this.syncTexts(this.headTexts, this.headLabels, []); - this.addLabel.visible = false; this.ruler.visible = false; this.hint.text = 'No song selected – pick one in the Assets panel or create one.'; this.hint.position.set(HEAD_WIDTH + Theme.padding * 2, RULER_HEIGHT + Theme.padding * 2); @@ -1161,6 +1155,8 @@ export class SongTimeline extends Widget { this.lanesG .rect(Math.max(0, end), 0, lw - Math.max(0, end), bottom) .fill({ color: 0x000000, alpha: 0.2 }); + const zero = Math.min(lw, tickToX(this.view, 0)); + if (zero > 0) this.lanesG.rect(0, 0, zero, bottom).fill({ color: 0x000000, alpha: 0.4 }); } private drawItems(asset: SongAsset, lw: number, lh: number): void { @@ -1287,7 +1283,7 @@ export class SongTimeline extends Widget { } } - /** The heads: name, mute and solo, the volume and pan sliders, and the row that adds a track. */ + /** The heads: name, mute and solo, the volume and pan sliders. A track is added from a head's menu. */ private drawHeads(tracks: readonly SongTrack[]): void { const c = Theme.colors; const labels: Placed[] = []; @@ -1328,10 +1324,6 @@ export class SongTimeline extends Widget { this.headsG.rect(centre, y + pan.y - 2, 1, pan.h + 4).fill({ color: c.text, alpha: 0.5 }); }); this.syncTexts(this.headTexts, this.headLabels, labels); - const addTop = trackTop(this.view, tracks.length); - this.headsG.rect(0, addTop, HEAD_WIDTH - 1, ADD_ROW_HEIGHT).fill({ color: 0xffffff, alpha: 0.02 }); - this.addLabel.visible = true; - this.addLabel.position.set(Theme.padding, addTop + (ADD_ROW_HEIGHT - this.addLabel.height) / 2); } private toggle(box: Box, y: number, on: boolean, color: number): void { diff --git a/src/editor/song/songView.ts b/src/editor/song/songView.ts index f156c14d..0940bf3e 100644 --- a/src/editor/song/songView.ts +++ b/src/editor/song/songView.ts @@ -19,8 +19,6 @@ export const MIN_TRACK_HEIGHT = 28; export const MAX_TRACK_HEIGHT = 160; /** A track lower than this has no room for the volume and pan sliders in its head. */ export const SLIDERS_MIN_HEIGHT = 46; -/** The row under the last track that adds one. */ -export const ADD_ROW_HEIGHT = 28; /** How close to an end of an item a press takes that end. */ export const EDGE_REACH = 6; const INSET = 2; @@ -149,9 +147,9 @@ export function peakOver(peaks: ArrayLike, from: number, to: number): nu return peak; } -/** Keeps the tracks and the row that adds one in reach: nothing to scroll to above or far below. */ +/** Keeps the tracks in reach: nothing to scroll to above the first or below the last. */ export function clampTracks(view: V, count: number, height: number): V { - const content = count * view.trackHeight + ADD_ROW_HEIGHT; + const content = count * view.trackHeight; const panY = clamp(view.panY, Math.min(0, height - content), 0); return panY === view.panY ? view : { ...view, panY }; } diff --git a/tests/core/song-play.test.ts b/tests/core/song-play.test.ts index c0faaeaa..d6918ed4 100644 --- a/tests/core/song-play.test.ts +++ b/tests/core/song-play.test.ts @@ -13,7 +13,7 @@ import { SetSongCommand, SetSongLoopCommand } from '../../src/core/commands/song import type { InstrumentAsset, SongAsset } from '../../src/core/model/Asset'; import { goesBy, Playbacks, type SequencePlay } from '../../src/core/music/playbacks'; import { INTERVAL, LEAD, type ScheduledClip, type ScheduledNote } from '../../src/core/music/Scheduler'; -import { newItem, trackBus } from '../../src/core/music/song'; +import { newItem, newTrack, trackBus } from '../../src/core/music/song'; import { type AudioSink, type ClipTiming, SILENT_AUDIO } from '../../src/runtime/systems/Audio'; import { graphEditor, makeBehavior, makeSpriteScene, place, startWorld } from '../helpers'; @@ -197,13 +197,14 @@ function playingSong(params: Record = {}) { const id = create.asset.id; const asset = () => f.project.assets.find((a) => a.id === id) as SongAsset; f.stack.execute(new SetAssetPropertyCommand(id, 'tempo', 90)); - const [one, two, three] = asset().tracks; + // A new song has one track: two more to lay things out on. + const [one, two, three] = [...asset().tracks, newTrack(2), newTrack(3)]; f.stack.execute( new SetSongCommand(id, { - tracks: asset().tracks.map((t, i) => (i === 1 ? { ...t, volume: -6, pan: -1 } : t)), + tracks: [one, { ...two, volume: -6, pan: -1 }, three!], items: [ - newItem({ track: one!.id, kind: 'pattern', asset: pattern.asset.id, tick: 0, length: BAR }), - newItem({ track: two!.id, kind: 'sound', asset: sound.asset.id, tick: BAR, length: BAR }), + newItem({ track: one.id, kind: 'pattern', asset: pattern.asset.id, tick: 0, length: BAR }), + newItem({ track: two.id, kind: 'sound', asset: sound.asset.id, tick: BAR, length: BAR }), ], }), ); @@ -215,7 +216,7 @@ function playingSong(params: Record = {}) { const start = edit.addNode('OnStart'); const play = edit.addNode('PlaySong', { song: id, volume: 0.8, fadeIn: 2, ...params }); edit.connect(start, 'exec', play, 'exec'); - return { ...f, songId: id, tracks: [one!.id, two!.id, three!.id], lead, edit, play }; + return { ...f, songId: id, tracks: [one.id, two.id, three!.id], lead, edit, play }; } function recordingAudio() { @@ -265,7 +266,6 @@ describe('Play song', () => { [trackBus(f.songId, f.tracks[0]!), 1, 0], [trackBus(f.songId, f.tracks[1]!), 0.501, -1], [trackBus(f.songId, f.tracks[2]!), 1, 0], - [expect.any(String), 1, 0], ]); }); diff --git a/tests/core/song.test.ts b/tests/core/song.test.ts index 682f2f18..2b7176ac 100644 --- a/tests/core/song.test.ts +++ b/tests/core/song.test.ts @@ -8,6 +8,7 @@ import { heldSongTracks, itemFrom, newItem, + newTrack, type SongItem, songGrid, songLength, @@ -24,14 +25,17 @@ import { makeProject, roundTrip } from '../helpers'; const BAR = 1920; -/** A song with its four tracks, a one-bar pattern of two notes played by "Piano", and a sound. */ -function makeSong() { +/** A song with four tracks, a one-bar pattern of two notes played by "Piano", and a sound. */ +function makeSong(tracks = 4) { const f = makeProject(); const create = new CreateAssetCommand('song', 'Tune'); const pattern = new CreateAssetCommand('pattern', 'Riff'); const piano = new CreateAssetCommand('instrument', 'Piano'); const organ = new CreateAssetCommand('instrument', 'Organ'); for (const command of [create, pattern, piano, organ]) f.stack.execute(command); + // A new song has one track; the tests lay things out on more, without an undo step of their own. + const created = f.project.assets.find((a) => a.id === create.asset.id) as SongAsset; + for (let i = created.tracks.length; i < tracks; i++) created.tracks.push(newTrack(i + 1)); f.stack.execute(new SetAssetPropertyCommand(pattern.asset.id, 'bars', 1)); f.stack.execute(new SetAssetPropertyCommand(pattern.asset.id, 'instrument', piano.asset.id)); f.stack.execute( @@ -61,9 +65,9 @@ function makeSong() { } describe('the song asset (#334)', () => { - it('starts with four tracks, nothing on them, at 120 BPM in 4/4 on a grid of a bar', () => { - const f = makeSong(); - expect(f.song().tracks.map((t) => t.name)).toEqual(['Track 1', 'Track 2', 'Track 3', 'Track 4']); + it('starts with one track, nothing on it, at 120 BPM in 4/4 on a grid of a bar', () => { + const f = makeSong(1); + expect(f.song().tracks.map((t) => t.name)).toEqual(['Track 1']); expect(f.song().items).toEqual([]); expect(schemaForAsset(f.project, f.song()).map((d) => d.key)).toEqual(['tempo', 'beats', 'beat', 'grid']); expect(songGrid(f.song().props)).toBe(BAR); diff --git a/tests/editor/piano-roll.test.ts b/tests/editor/piano-roll.test.ts index 94244ef5..7e007202 100644 --- a/tests/editor/piano-roll.test.ts +++ b/tests/editor/piano-roll.test.ts @@ -14,12 +14,14 @@ import { import { clampShift, draggedLength, + draggedStart, drawnNote, duplicateOffset, moveDelta, placedCopies, resized, shifted, + trimmed, withVelocity, } from '../../src/editor/pattern/rollEdit'; import { @@ -48,10 +50,12 @@ const VIEW: RollView = { panX: 0, pxPerTick: 0.1, panY: -(127 - 60) * 10, rowHei const COMMON = { beats: 4, unit: 4 }; describe('time view of the piano roll (#333)', () => { - it('zooms about the pointer and never shows time before 0', () => { + it('zooms about the pointer and pans tick 0 at most half the width in', () => { const zoomed = zoomTime({ panX: -100, pxPerTick: 0.1 }, 2, 300); expect(xToTick(zoomed, 300)).toBeCloseTo(4000); - expect(clampTimePan({ panX: 40, pxPerTick: 0.1 }).panX).toBe(0); + expect(clampTimePan({ panX: 40, pxPerTick: 0.1 }, 600).panX).toBe(40); + expect(clampTimePan({ panX: 400, pxPerTick: 0.1 }, 600).panX).toBe(300); + expect(clampTimePan({ panX: -50, pxPerTick: 0.1 }, 600).panX).toBe(-50); expect(fitTime(7680, 768)).toEqual({ panX: 0, pxPerTick: 0.1 }); }); @@ -117,11 +121,12 @@ describe('rows of the piano roll (#333)', () => { expect(centreRows(0, 127, 200).rowHeight).toBe(6); }); - it('tells a note body from its right end, and takes the one drawn last', () => { + it('tells a note body from its ends, and takes the one drawn last', () => { const notes = [note('a', 0, 480), note('b', 240, 480)]; expect(noteAt(VIEW, notes, { x: 10, y: 5 })).toEqual({ id: 'a', part: 'body' }); expect(noteAt(VIEW, notes, { x: 30, y: 5 })).toEqual({ id: 'b', part: 'body' }); expect(noteAt(VIEW, notes, { x: 70, y: 5 })).toEqual({ id: 'b', part: 'end' }); + expect(noteAt(VIEW, notes, { x: 25, y: 5 })).toEqual({ id: 'b', part: 'start' }); expect(noteAt(VIEW, notes, { x: 10, y: 15 })).toBeNull(); // A note of a tick is still 4 px to the pointer. expect(noteAt(VIEW, [note('c', 1000, 1)], { x: 102, y: 5 })?.id).toBe('c'); @@ -185,6 +190,21 @@ describe('editing in the piano roll (#333)', () => { ]); }); + it('drags a start to the nearest grid line, its end kept, never up to the end or before 0', () => { + const anchor = note('a', 240, 240); + expect(draggedStart(anchor, 130, 120, false)).toBe(120); + expect(draggedStart(anchor, 470, 120, false)).toBe(360); + expect(draggedStart(anchor, -300, 120, false)).toBe(0); + expect(draggedStart(anchor, 479.6, 120, true)).toBe(479); + const notes = trimmed([anchor, note('b', 60, 60), note('c', 0, 60)], new Set(['a', 'b']), -120); + expect(notes.map((n) => [n.tick, n.length])).toEqual([ + [120, 360], + [0, 120], + [0, 60], + ]); + expect(trimmed([anchor], new Set(['a']), 999).map((n) => [n.tick, n.length])).toEqual([[479, 1]]); + }); + it('puts a duplicate right behind the picked notes, in whole grid steps', () => { const notes = [note('a', 0, 120), note('b', 240, 60), note('c', 960, 120)]; expect(duplicateOffset(notes, new Set(['a', 'b']), 120)).toBe(360); diff --git a/tests/editor/song-edit.test.ts b/tests/editor/song-edit.test.ts index ffbc8616..801292d2 100644 --- a/tests/editor/song-edit.test.ts +++ b/tests/editor/song-edit.test.ts @@ -138,9 +138,9 @@ describe('where things are in the Song tab (#334)', () => { ]); }); - it('scrolls no further than the tracks and the row that adds one', () => { + it('scrolls no further than the tracks', () => { expect(clampTracks({ ...view, panY: 40 }, 3, 400).panY).toBe(0); - expect(clampTracks({ ...view, panY: -500 }, 10, 400).panY).toBe(400 - 10 * TRACK_HEIGHT - 28); + expect(clampTracks({ ...view, panY: -500 }, 10, 400).panY).toBe(400 - 10 * TRACK_HEIGHT); }); it('tells the parts of a head apart and reads a slider from left to right', () => { @@ -164,7 +164,7 @@ describe('where things are in the Song tab (#334)', () => { 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 - 10 * 2 * TRACK_HEIGHT - 28); + expect(clampTracks({ ...zoomed, panY: -9999 }, 10, 400).panY).toBe(400 - 10 * 2 * TRACK_HEIGHT); expect(heldSongView({ panX: -5, pxPerTick: 0.3, panY: -10 })).toEqual({ panX: -5, pxPerTick: 0.3, diff --git a/tools/e2e/64-pattern.mjs b/tools/e2e/64-pattern.mjs index 90b4dea9..1c77f49d 100644 --- a/tools/e2e/64-pattern.mjs +++ b/tools/e2e/64-pattern.mjs @@ -3,8 +3,8 @@ import { LANES, pickAssetType, scaffoldBehavior } from './lib/scaffold.mjs'; /** * Patterns and their piano roll (#333). "+ → Pattern" opens the tab; with an instrument picked its - * keys sound where the instrument plays. A click draws a note on the grid, its right end lengthens - * it, its body moves it – with Alt off the grid –, a band picks notes, Ctrl+D puts a copy behind + * keys sound where the instrument plays. A click draws a note on the grid, either end sizes it and + * lights up under the pointer, its body moves it – with Alt off the grid –, a band picks notes, Ctrl+D puts a copy behind * them, the arrows transpose, Delete and a right-click take notes away, Ctrl+C/V copies them to the * start set on the ruler, the lane sets a velocity, a drag on the ruler moves the start and one on * the strip above it sets the loop, the wheel zooms the time or the rows. Space plays the @@ -148,6 +148,30 @@ export async function pattern(t) { ); const second = lengths.find((n) => n.id !== first)?.id; + // 64c'. Its left end lights up under the pointer and takes its start to the nearest grid line, the + // end staying put; Ctrl+Z takes it back. + const startEdge = await json('__gm.pattern.gridAt(960, 64)'); + await t.mouse('mouseMoved', startEdge.x + 2, startEdge.y); + await sleep(100); + const hovered = await json('__gm.pattern.view()'); + const earlier = await json('__gm.pattern.gridAt(850, 64)'); + await drag(startEdge.x + 2, startEdge.y, earlier.x, earlier.y); + await sleep(300); + const trimmedNote = (await notes()).find((n) => n.id === second); + await press('z', { ctrl: true }); + const untrimmed = (await notes()).find((n) => n.id === second); + check( + 'the left end of a note lights up with a resize cursor and takes its start to the nearest grid line, the end kept', + hovered.hover?.id === second && + hovered.hover?.part === 'start' && + hovered.cursor === 'ew-resize' && + trimmedNote?.tick === 840 && + trimmedNote?.length === 600 && + untrimmed?.tick === 960 && + untrimmed?.length === 480, + JSON.stringify({ hover: hovered.hover, cursor: hovered.cursor, trimmedNote, untrimmed }), + ); + // 64d. Its body moves it onto the grid and to another key, silent with Audition off; with Alt it // lands on the tick. await sleep(500); @@ -283,6 +307,23 @@ export async function pattern(t) { keysWheel.panX === gridWheel.panX, JSON.stringify({ scrubbed, wheelFrom, gridWheel, keysWheel }), ); + // A middle-drag far to the right pans tick 0 in from the left edge, but only half the grid in; a + // click left of it draws nothing. Fit takes the view back. + const area = await json('__gm.pattern.rect()'); + p = await json('__gm.pattern.gridAt(960, 62)'); + for (let i = 0; i < 4; i++) await drag(area.x + 120, p.y, area.x + area.w - 20, p.y, { button: 'middle' }); + const panned = await json('__gm.pattern.view()'); + const zero = await json('__gm.pattern.gridAt(0, 62)'); + const countPanned = (await notes()).length; + await click(zero.x - 20, zero.y); + const countLeft = (await notes()).length; + p = await json('__gm.pattern.fitAt()'); + await click(p.x, p.y); + check( + 'a middle-drag pans bar 1 in from the left edge, half the grid at most, and a click left of it draws nothing', + Math.abs(panned.panX - (area.w - 84) / 2) < 1 && countLeft === countPanned, + JSON.stringify({ panned, area, countPanned, countLeft }), + ); p = await json('__gm.pattern.loopAt(1920)'); to = await json('__gm.pattern.loopAt(2880)'); await drag(p.x, p.y, to.x, to.y); diff --git a/tools/e2e/65-song.mjs b/tools/e2e/65-song.mjs index c9d07dea..5cfa9c3e 100644 --- a/tools/e2e/65-song.mjs +++ b/tools/e2e/65-song.mjs @@ -2,13 +2,14 @@ import { edge, node } from '../lib/builders.mjs'; import { LANES, pickAssetType, scaffoldBehavior } from './lib/scaffold.mjs'; /** - * Songs and their tracks (#334). "+ → Song" opens the tab on four empty tracks. A pattern and a + * Songs and their tracks (#334). "+ → Song" opens the tab on one empty track, a head's menu adds + * three more. A pattern and a * sound dragged in from the Assets panel land as items where the preview showed them; an item's * right end lengthens it, its body moves it across tracks, its left end cuts it back, Ctrl+D puts a * copy behind it, Ctrl+E splits it where playing starts, Delete or its menu takes it away. A click * on nothing picks the song, an end under the pointer lights up, a long item marks its rounds, the * wheel zooms tracks or time, the strip above the ruler sets the loop. A head mutes, solos and sets - * the volume of its track, "+ Track" adds one. Space plays the song through the scheduler: + * the volume of its track, its menu adds one. Space plays the song through the scheduler: * the pattern round and round at the song's tempo, the sound as a clip, each track on its own bus. * A pattern started meanwhile takes over, and a double-click opens a pattern item in its tab. * Nothing is heard in CI (muted browser): the witnesses are the model, the planned notes and clips @@ -109,7 +110,7 @@ export async function song(t) { );`); const seconds = await evaluate(`__gm.sound.load(${JSON.stringify(blip?.file ?? '')})`); - // 65a. "+ → Song" makes a song of four empty tracks and opens its tab. + // 65a. "+ → Song" makes a song of one empty track and opens its tab; a head's menu adds the rest. await clickText('+'); await pickAssetType(t, 'Song'); const created = await json(`{ @@ -119,16 +120,26 @@ export async function song(t) { songs: __gm.state.project.assets.filter((a) => a.type === 'song').map((a) => ({ id: a.id, tracks: a.tracks.length })), }`); check( - 'the + menu creates a song of four empty tracks and opens its tab', + 'the + menu creates a song of one empty track and opens its tab', created.tab === 'song' && created.songs.length === 1 && created.current === created.songs[0].id && - created.songs[0].tracks === 4 && - created.info === '4 tracks · 0 items', + created.songs[0].tracks === 1 && + created.info === '1 track · 0 items', JSON.stringify(created), ); const id = created.songs[0]?.id; const model = () => json(`__gm.song.model(${JSON.stringify(id)})`); + /** Adds a track under the last one through its head's menu: there is no other way to. */ + const addTrackBelowLast = async () => { + const count = (await model()).tracks.length; + const head = await json(`__gm.song.headAt(${count - 1}, 'name')`); + await click(head.x, head.y, 'right'); + await sleep(150); + await clickText('Add track below'); + await sleep(100); + }; + for (let i = 0; i < 3; i++) await addTrackBelowLast(); const tracks = (await model()).tracks.map((track) => track.id); // 65b. An empty song is a bar long and fits it across; the wheel takes the view out to eight bars. @@ -237,13 +248,14 @@ export async function song(t) { ); p = await json('__gm.song.fitAt()'); await click(p.x, p.y); - p = await json(`__gm.song.rulerAt(${6 * BAR + 300})`); + // Three quarters into a bar: the start goes to the nearest bar line, the next one, not back. + p = await json(`__gm.song.rulerAt(${5 * BAR + 1500})`); await click(p.x, p.y); await press('e', { ctrl: true }); items = (await model()).items; const parts = items.filter((item) => item.tick >= 5 * BAR).sort((a, b) => a.tick - b.tick); check( - 'a click on the ruler sets where playing starts, and Ctrl+E splits the picked item there', + 'a click on the ruler sets the start on the nearest bar line, and Ctrl+E splits the picked item there', (await json('__gm.song.view()')).start === 6 * BAR && parts.length === 2 && parts[0].length === BAR && @@ -341,18 +353,17 @@ export async function song(t) { JSON.stringify({ unzoomed, taller, wider, songLoop }), ); - // 65g. The heads: mute and solo toggle, the volume slider sets decibels, "+ Track" adds a track. + // 65g. The heads: mute and solo toggle, the volume slider sets decibels, the menu adds a track. await click(...Object.values(await json("__gm.song.headAt(0, 'mute')"))); await click(...Object.values(await json("__gm.song.headAt(2, 'solo')"))); p = await json("__gm.song.headAt(2, 'volume', 0.5)"); to = await json("__gm.song.headAt(2, 'volume', 0)"); await drag(p.x, p.y, to.x + 1, to.y); await sleep(150); - p = await json('__gm.song.addTrackAt()'); - await click(p.x, p.y); + await addTrackBelowLast(); const heads = await model(); check( - 'a head mutes, solos and turns down its track, "+ Track" adds a fifth and picks it', + 'a head mutes, solos and turns down its track, its menu adds a fifth below and picks it', heads.tracks.length === 5 && heads.tracks[0].mute && heads.tracks[2].solo &&