/** * Editing a composition (#417): items of a track may overlap, clips may not – a dropped clip lands in * the gap it falls into –, the edges of an item go where they are dragged, its video's edges marked * and snapped to, and an item that follows its media is fitted to it again – in the same undo step – * when an override gives it another video. */ import { describe, expect, it } from 'vitest'; import { CreateAssetCommand, CreateVideoCommand } from '../../src/core/commands/assetCommands'; import { addCompositionItem, FitMediaCommand, pasteCompositionItems, removeCompositionTrack, removeFromComposition, SetCompositionCommand, } from '../../src/core/commands/compositionCommands'; import { ClearOverrideCommand, SetOverrideCommand } from '../../src/core/commands/sceneObjectCommands'; import type { CompositionClip, CompositionItem } from '../../src/core/model/Asset'; import { clampedMove, droppedLength, droppedSpan, type ItemMedia, mediaEdges, mediaMarks, movedClips, movedItems, pastedItems, resizedItem, snappedToMedia, trimmedItem, } from '../../src/core/model/compositionEdit'; import { copyObjects } from '../../src/core/model/clipboard'; import { hitAt, overlaps, uncoveredEnd } from '../../src/editor/composition/compositionView'; import { placementRejection } from '../../src/core/model/placement'; import { findAsset, findAssetOf } from '../../src/core/model/Project'; import { makeProject } from '../helpers'; const FILE = `a1b2c3d4e5f6/${'c7'.repeat(32)}.mp4`; const item = ( id: string, track: string, start: number, length: number, extra: Partial = {}, ) => ({ id, track, start, length, offset: 0, ...extra }) satisfies CompositionItem; describe('a drop', () => { const taken = [ { start: 60, length: 60 }, { start: 200, length: 30 }, ]; it('lands where it is let go when that is free, as long as it is', () => { expect(droppedSpan(taken, 0, 50)).toEqual({ start: 0, length: 50 }); }); it('lands right after an item it falls on, and is cut short where the next begins', () => { expect(droppedSpan(taken, 90, 180)).toEqual({ start: 120, length: 80 }); }); it('is cut short before the item after the gap it lands in', () => { expect(droppedSpan(taken, 30, 180)).toEqual({ start: 30, length: 30 }); }); it('lands behind two items that touch when it falls on the first', () => { expect( droppedSpan( [ { start: 0, length: 10 }, { start: 10, length: 10 }, ], 5, 60, ), ).toEqual({ start: 20, length: 60 }); }); }); describe('moving', () => { const items = [item('a', 't1', 0, 60), item('b', 't1', 100, 60), item('c', 't2', 0, 60)]; const tracks = ['t1', 't2']; it('moves the picked items by frames and tracks', () => { expect(movedItems(items, new Set(['a']), tracks, 30, 0)?.find((i) => i.id === 'a')?.start).toBe(30); expect(movedItems(items, new Set(['b']), tracks, 0, 1)?.find((i) => i.id === 'b')?.track).toBe('t2'); }); it('lets an item onto another, and refuses one before 0 or off the tracks', () => { expect(movedItems(items, new Set(['a']), tracks, 50, 0)?.map((i) => i.start)).toEqual([50, 100, 0]); expect(movedItems(items, new Set(['a']), tracks, 0, 1)?.map((i) => i.track)).toEqual(['t2', 't1', 't2']); expect(movedItems(items, new Set(['b']), tracks, -150, 0)).toBeNull(); expect(movedItems(items, new Set(['c']), tracks, 0, 1)).toBeNull(); }); it('holds a move at frame 0 and the tracks there are, as far as the pointer goes', () => { expect(clampedMove(items, new Set(['b']), tracks, -150, 0)).toEqual({ frames: -100, tracks: 0 }); expect(clampedMove(items, new Set(['a', 'c']), tracks, 20, 1)).toEqual({ frames: 20, tracks: 0 }); expect(clampedMove(items, new Set(['a']), tracks, 0, -3)).toEqual({ frames: 0, tracks: 0 }); }); it('lets a picked item go where another picked one was', () => { const moved = movedItems(items, new Set(['a', 'b']), tracks, 40, 0); expect(moved?.map((i) => i.start)).toEqual([40, 140, 0]); }); it('keeps clips of a track apart by their own lengths', () => { const clips: CompositionClip[] = [ { id: 'x', track: 't1', animation: 'm', start: 0 }, { id: 'y', track: 't1', animation: 'm', start: 50 }, ]; const lengthOf = () => 40; expect(movedClips(clips, new Set(['x']), tracks, 5, 0, lengthOf)).not.toBeNull(); expect(movedClips(clips, new Set(['x']), tracks, 20, 0, lengthOf)).toBeNull(); }); }); describe('the edges of an item', () => { const b = item('b', 't1', 100, 60, { fitMedia: true, offset: 1 }); it('a dragged end goes where it is let go, at least a frame, and the length is the item’s own from then on', () => { expect(resizedItem(b, 500)).toEqual({ id: 'b', track: 't1', start: 100, length: 500, offset: 1 }); expect(resizedItem(b, 0).length).toBe(1); }); it('a dragged start moves where the video begins with it', () => { const trimmed = trimmedItem(b, 130, 60, true); expect([trimmed.start, trimmed.length, trimmed.offset, trimmed.fitMedia]).toEqual([ 130, 30, 1.5, undefined, ]); expect(trimmedItem(b, 10, 60, false)).toMatchObject({ start: 10, length: 150, offset: 1 }); expect(trimmedItem(b, 500, 60, false).start).toBe(159); }); it('with a video, a dragged start goes on before the video’s beginning, the offset below 0', () => { // One second into its video: back a second the video begins with the item, back 1.5 s half a second after it. expect(trimmedItem(b, 40, 60, true)).toMatchObject({ start: 40, length: 120, offset: 0 }); expect(trimmedItem(b, 10, 60, true)).toMatchObject({ start: 10, length: 150, offset: -0.5 }); expect(trimmedItem(b, -20, 60, true).start).toBe(0); }); }); describe('the video of an item on the timeline', () => { // A 2 s video at 60 fps that began at frame 40: the item from 100 is one second in. const once: ItemMedia = { begins: 40, length: 120, loops: false }; const round: ItemMedia = { ...once, loops: true }; it('has its edges where it begins and each pass ends, round only when it loops', () => { expect(mediaEdges(once, 0, 1000)).toEqual([40, 160]); expect(mediaEdges(round, 100, 500)).toEqual([160, 280, 400]); expect(mediaEdges(round, 0, 30)).toEqual([]); }); it('marks an end cutting into the video, and a line where the item reaches past it', () => { expect(mediaMarks(item('i', 't', 100, 30), once)).toEqual({ seams: [], cutStart: true, cutEnd: true }); expect(mediaMarks(item('i', 't', 40, 120), once)).toEqual({ seams: [], cutStart: false, cutEnd: false }); expect(mediaMarks(item('i', 't', 20, 200), once)).toEqual({ seams: [40, 160], cutStart: false, cutEnd: false, }); expect(mediaMarks(item('i', 't', 100, 200), round).seams).toEqual([160, 280]); }); it('pulls a dragged edge onto the video’s within reach, and leaves it alone further off', () => { expect(snappedToMedia(157, once, 4)).toBe(160); expect(snappedToMedia(150, once, 4)).toBe(150); expect(snappedToMedia(42, null, 4)).toBe(42); }); }); describe('overlapping items on the timeline', () => { const view = { panX: 0, pxPerTick: 2, panY: 0, trackHeight: 48 }; const tracks = [{ id: 't1', name: 'Track 1' }]; // `late` covers `early` from frame 50 on; on screen the overlap runs from x 100 to 120. const early = item('early', 't1', 0, 60); const late = item('late', 't1', 50, 60); const hit = (x: number) => hitAt(view, tracks, [late, early], [], () => 0, { x, y: 20 }); it('takes the end of the one covered, the body of the one on top', () => { expect(hit(119)).toEqual({ kind: 'item', id: 'early', part: 'end' }); expect(hit(110)).toEqual({ kind: 'item', id: 'late', part: 'body' }); expect(hit(101)).toEqual({ kind: 'item', id: 'late', part: 'start' }); expect(hit(40)).toEqual({ kind: 'item', id: 'early', part: 'body' }); }); it('knows where they overlap and how much of the earlier one is seen', () => { expect(overlaps([late, early])).toEqual([{ track: 't1', start: 50, end: 60 }]); expect(overlaps([early, item('other', 't2', 0, 60)])).toEqual([]); expect(uncoveredEnd([late, early], early)).toBe(50); expect(uncoveredEnd([late, early], late)).toBe(110); }); }); function makeCut() { const f = makeProject(); const comp = new CreateAssetCommand('composition', 'Cut'); const box = new CreateAssetCommand('sprite', 'Box'); const video = new CreateVideoCommand('Intro', FILE, { width: 320, height: 180, duration: 5, fps: 30, audio: false, }); f.stack.execute(comp); f.stack.execute(box); f.stack.execute(video); const current = () => findAssetOf(f.project, comp.asset.id, 'composition')!; const track = current().tracks[0]!.id; /** An item of the box, run through the stack as the timeline does it. */ const add = (start: number, length: number, assetId = box.asset.id) => { const { command, objectId } = addCompositionItem(f.project, comp.asset.id, assetId, { track, start, length, offset: 0, fitMedia: true, }); f.stack.execute(command); return objectId; }; return { ...f, compId: comp.asset.id, boxId: box.asset.id, videoId: video.asset.id, comp: current, track, add, }; } describe('items and their objects', () => { it('an item comes with its object in one undo step, and goes with it', () => { const cut = makeCut(); const id = cut.add(0, 180); expect(cut.comp().objects.map((o) => o.id)).toEqual([id]); expect(cut.comp().items.map((i) => i.id)).toEqual([id]); cut.stack.execute(removeFromComposition(cut.project, cut.compId, [id], [])); expect([cut.comp().objects, cut.comp().items]).toEqual([[], []]); cut.stack.undo(); expect(cut.comp().items.map((i) => i.id)).toEqual([id]); cut.stack.undo(); expect([cut.comp().objects, cut.comp().items]).toEqual([[], []]); }); it('a track goes with what lies on it, and the last track stays', () => { const cut = makeCut(); const second = { id: 't2', name: 'Track 2' }; cut.stack.execute(new SetCompositionCommand(cut.compId, { tracks: [...cut.comp().tracks, second] })); cut.add(0, 60); cut.stack.execute(removeCompositionTrack(cut.project, cut.compId, cut.track)); expect(cut.comp().tracks.map((t) => t.id)).toEqual(['t2']); expect([cut.comp().objects, cut.comp().items]).toEqual([[], []]); cut.stack.execute(removeCompositionTrack(cut.project, cut.compId, 't2')); expect(cut.comp().tracks).toHaveLength(1); }); it('a composition cannot be placed into a composition', () => { const cut = makeCut(); expect(placementRejection(cut.project, cut.comp(), findAsset(cut.project, cut.compId)!)).not.toBe(''); }); it('pasted items keep their timing from the frame they land at, on their tracks or shifted to a row', () => { const copied = [item('a', 't2', 30, 60, { offset: 1.5 }), item('b', 't3', 50, 20)]; const ids = new Map([ ['a', 'a2'], ['b', 'b2'], ]); const tracks = ['t1', 't2', 't3']; expect(pastedItems(copied, ids, 100, tracks)).toEqual([ item('a2', 't2', 100, 60, { offset: 1.5 }), item('b2', 't3', 120, 20), ]); expect(pastedItems(copied, ids, 0, tracks, 0).map((i) => i.track)).toEqual(['t1', 't2']); // As far as there are tracks: the bottom one may not fall off. expect(pastedItems(copied, ids, 0, tracks, 2).map((i) => i.track)).toEqual(['t2', 't3']); }); it('a copied item is pasted with its object and overrides under new ids, in one undo step', () => { const cut = makeCut(); const id = cut.add(10, 60); cut.stack.execute(new SetOverrideCommand(cut.compId, id, 'width', 42)); const clip = copyObjects(cut.project, cut.comp(), [id])!; const pasted = pasteCompositionItems(cut.project, cut.compId, clip, 100)!; cut.stack.execute(pasted.command); const [copy] = pasted.itemIds; expect(copy).not.toBe(id); expect(cut.comp().items.find((i) => i.id === copy)).toMatchObject({ track: cut.track, start: 100, length: 60, }); expect(cut.comp().objects.find((o) => o.id === copy)?.overrides).toMatchObject({ width: 42 }); cut.stack.undo(); expect(cut.comp().items.map((i) => i.id)).toEqual([id]); expect(cut.comp().objects.map((o) => o.id)).toEqual([id]); }); it('objects without their items, as a scene copies them, are not pasted into a composition', () => { const cut = makeCut(); const id = cut.add(0, 60); const { items, ...plain } = copyObjects(cut.project, cut.comp(), [id])!; expect(items).toHaveLength(1); expect(pasteCompositionItems(cut.project, cut.compId, plain, 0)).toBeNull(); }); it('a sprite wearing a video is dropped in as long as the video, anything else 3 s', () => { const cut = makeCut(); const screen = new CreateAssetCommand('sprite', 'Screen', { texture: cut.videoId }); cut.stack.execute(screen); expect(droppedLength(cut.project, cut.comp(), screen.asset)).toBe(300); expect(droppedLength(cut.project, cut.comp(), findAsset(cut.project, cut.boxId)!)).toBe(180); }); }); describe('an item that follows its media (fitMedia)', () => { const wear = (cut: ReturnType, id: string, texture: string) => cut.stack.execute(new FitMediaCommand(new SetOverrideCommand(cut.compId, id, 'texture', texture))); it('takes the length of a video an override gives it, in the same undo step', () => { const cut = makeCut(); const id = cut.add(0, 180); wear(cut, id, cut.videoId); expect(cut.comp().items[0]!.length).toBe(300); cut.stack.undo(); expect(cut.comp().items[0]!.length).toBe(180); expect(cut.comp().objects[0]!.overrides.texture).toBeUndefined(); cut.stack.redo(); expect(cut.comp().items[0]!.length).toBe(300); }); it('goes back to 3 s when the video is taken off again', () => { const cut = makeCut(); const id = cut.add(0, 180); wear(cut, id, cut.videoId); expect(cut.comp().items[0]!.length).toBe(300); cut.stack.execute(new FitMediaCommand(new ClearOverrideCommand(cut.compId, id, 'texture'))); expect(cut.comp().items[0]!.length).toBe(180); }); it('runs on over the next item of its track, which stays where it is', () => { const cut = makeCut(); const id = cut.add(0, 180); const next = cut.add(240, 60); wear(cut, id, cut.videoId); expect(cut.comp().items.map((i) => [i.id, i.start, i.length])).toEqual([ [id, 0, 300], [next, 240, 60], ]); }); it('is left alone once its length is its own', () => { const cut = makeCut(); const id = cut.add(0, 180); const items = cut.comp().items.map((i) => resizedItem(i, 90)); cut.stack.execute(new SetCompositionCommand(cut.compId, { items })); wear(cut, id, cut.videoId); expect(cut.comp().items[0]!.length).toBe(90); }); });