improved track/clip removal

Author: k9p5

src/clips/clip/clip.spec.ts

@@ -108,13 +108,7 @@ describe('The Clip Object', () => {
 		expect(track.clips.findIndex((n) => n.id == clip.id)).toBe(-1);
 		expect(track.clips.findIndex((n) => n.id == clip1.id)).toBe(0);
 		expect(clip.state).toBe('READY');
-		expect(detachFn).toBeCalledTimes(1);
 		expect(track.view.children.length).toBe(0);
-
-		// try again
-		clip.detach();
-		expect(clip.state).toBe('READY');
-		expect(detachFn).toBeCalledTimes(1);
 	});
 
 	it('should not remove error state on detach', async () => {

src/clips/clip/clip.ts

@@ -196,20 +196,7 @@ export class Clip<Props extends ClipProps = ClipProps> extends EventEmitterMixin
 	 * Remove the clip from the track
 	 */
 	public detach(): this {
-		const index = this.track?.clips.findIndex((n) => n.id == this.id);
-
-		if (this.state == 'ATTACHED') {
-			this.state = 'READY';
-		}
-
-		if (this.view.parent && this.track) {
-			this.track.view.removeChild(this.view);
-		}
-
-		if (index != undefined && index >= 0) {
-			this.track?.clips.splice(index, 1);
-			this.trigger('detach', undefined);
-		}
+		this.track?.remove(this);
 
 		return this;
 	}

src/composition/composition.spec.ts

@@ -317,6 +317,71 @@ describe('The composition', () => {
 		expect(composition.tracks[0].clips[0]).toBeInstanceOf(TextClip);
 	});
 
+	it('should be able to remove tracks', () => {
+		const track0 = composition.createTrack('video');
+		const track1 = composition.createTrack('text');
+		const track2 = composition.createTrack('image');
+
+		expect(composition.tracks.length).toBe(3)
+		expect(composition.stage.children.length).toBe(3);
+
+		const detachFn = vi.fn();
+		composition.on('detach', detachFn);
+
+		let res = composition.removeTrack(track1);
+
+		expect(detachFn).toBeCalledTimes(1);
+		expect(res).toBeInstanceOf(TextTrack);
+
+		expect(composition.tracks.length).toBe(2);
+		expect(composition.stage.children.length).toBe(2);
+		expect(composition.tracks[0]).toBeInstanceOf(ImageTrack);
+		expect(composition.tracks[1]).toBeInstanceOf(VideoTrack);
+		expect(composition.tracks.findIndex((l) => l.id == track1.id)).toBe(-1);
+		expect(composition.stage.children.findIndex(c => c.uid == track0.view.uid)).toBe(0);
+		expect(composition.stage.children.findIndex(c => c.uid == track2.view.uid)).toBe(1);
+
+		// try again
+		res = composition.removeTrack(track1);
+
+		expect(res).toBeUndefined();
+		expect(composition.tracks.length).toBe(2);
+		expect(composition.stage.children.length).toBe(2);
+	});
+
+	it('should be able to remove clips', async () => {
+		const track0 = composition.createTrack('base');
+		const track1 = composition.createTrack('base');
+
+		const clip = new Clip({ stop: 10 });
+
+		await track0.add(clip);
+		await track0.add(new Clip({ stop: 20, start: 10 }));
+		await track1.add(new Clip({ stop: 9 }));
+		await track1.add(new Clip({ stop: 12, start: 9 }));
+
+		expect(track0.clips.length).toBe(2);
+		expect(track1.clips.length).toBe(2);
+
+		// clip that does not exist
+		let res = composition.remove(new Clip());
+
+		expect(res).toBe(undefined);
+		expect(track0.clips.length).toBe(2);
+		expect(track1.clips.length).toBe(2);
+
+		res = composition.remove(clip);
+
+		expect(res?.id).toBe(clip.id);
+		expect(track0.clips.length).toBe(1);
+		expect(track1.clips.length).toBe(2);
+
+		res = composition.remove(clip);
+
+		expect(res).toBe(undefined);
+		expect(track0.clips.length).toBe(1);
+		expect(track1.clips.length).toBe(2);
+	});
 
 	afterEach(() => {
 		frameMock.mockClear();

src/composition/composition.ts

@@ -240,6 +240,18 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		return clip;
 	}
 
+	/**
+	 * Remove a given clip from the composition
+	 * @returns `Clip` when it has been successfully removed `undefined` otherwise
+	 */
+	public remove<L extends Clip>(clip: L): L | undefined {
+		for (const track of this.tracks) {
+			if (track.clips.find(c => c.id == clip.id)) {
+				return track.remove(clip);
+			}
+		}
+	}
+
 	/**
 	 * Remove all tracks that are of the specified type
 	 * @param track type to be removed
@@ -306,7 +318,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 */
 	public computeFrame(): void {
 		if (!this.renderer) return;
-		
+
 		for (let i = 0; i < this.tracks.length; i++) {
 			this.tracks[i].update(Timestamp.fromFrames(this.frame));
 		}
@@ -461,6 +473,24 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		);
 	}
 
+	/**
+	 * Remove a given track from the composition
+	 * @returns `Track` when it has been successfully removed `undefined` otherwise
+	 */
+	public removeTrack<T extends Track<Clip>>(track: T): T | undefined {
+		const index = this.tracks.findIndex((t) => t.id == track.id);
+
+		if (track.view.parent) {
+			this.stage.removeChild(track.view);
+		}
+
+		if (index != undefined && index >= 0) {
+			this.tracks.splice(index, 1);
+			this.trigger('detach', undefined);
+			return track;
+		}
+	}
+
 	private async ticker() {
 		const interval = 1000 / FPS_DEFAULT;
 

src/tracks/track/track.spec.ts

@@ -201,20 +201,56 @@ describe('The Track Object', () => {
 		expect(updateSpy2).not.toHaveBeenCalled();
 	});
 
-	it('should be able to detach clips', () => {
+	it('should be able to detach itself from the composition', () => {
 		const comp1 = new Composition();
 		const track1 = comp1.createTrack('base');
 
 		expect(comp1.stage.children.length).toBe(1);
 
-		const detachFn = vi.fn();
-		track1.on('detach', detachFn);
 		track1.detach();
 		expect(comp1.tracks.findIndex((l) => l.id == track1.id)).toBe(-1);
-		expect(detachFn).toBeCalledTimes(1);
 		expect(comp1.stage.children.length).toBe(0);
 	});
 
+	it('should be remove clips from the track', async () => {
+		const clip0 = new Clip({ stop: 300 });
+		const clip1 = new Clip({ stop: 600, start: 300 });
+
+		const composition = new Composition();
+		const track = composition.createTrack('base');
+
+		await track.add(clip0);
+		await track.add(clip1);
+		
+		expect(track.clips.length).toBe(2);
+
+		composition.computeFrame();
+
+		// clip is currently getting rendered
+		expect(track.view.children.length).toBe(1);
+
+		const detachFn = vi.fn();
+		track.on('detach', detachFn);
+
+		track.remove(clip0);
+
+		expect(track.clips.length).toBe(1);
+		expect(track.clips.findIndex((n) => n.id == clip0.id)).toBe(-1);
+		expect(track.clips.findIndex((n) => n.id == clip1.id)).toBe(0);
+
+		expect(clip0.state).toBe('READY');
+		expect(clip1.state).toBe('ATTACHED');
+
+		expect(detachFn).toBeCalledTimes(1);
+		expect(track.view.children.length).toBe(0);
+
+		// try again
+		track.remove(clip0);
+		expect(clip0.state).toBe('READY');
+		expect(detachFn).toBeCalledTimes(1);
+		expect(track.clips.length).toBe(1);
+	});
+
 	it('should realign the clips when stacked', async () => {
 		track.stacked();
 

src/tracks/track/track.ts

@@ -178,9 +178,6 @@ export class Track<Clp extends Clip> extends EventEmitterMixin(Serializer) {
 		clip.on('frame', () => {
 			this.strategy.update(clip, this);
 		});
-		clip.on('detach', () => {
-			this.strategy.update(clip, this);
-		});
 
 		this.bubble('frame', clip);
 		this.bubble('update', clip);
@@ -194,6 +191,30 @@ export class Track<Clp extends Clip> extends EventEmitterMixin(Serializer) {
 		return this;
 	}
 
+	/**
+	 * Remove a given clip from the track
+	 * @returns `Track` when it has been successfully removed `undefined` otherwise
+	 */
+	public remove<L extends Clp>(clip: L): L | undefined {
+		const index = this.clips.findIndex((c) => c.id == clip.id);
+
+		if (clip.state == 'ATTACHED') {
+			clip.state = 'READY';
+		}
+
+		if (clip.view.parent) {
+			this.view.removeChild(clip.view);
+		}
+
+		if (index != undefined && index >= 0) {
+			this.clips.splice(index, 1);
+			this.strategy.update(clip, this);
+			this.trigger('detach', undefined);
+
+			return clip;
+		}
+	}
+
 	/**
 	 * Get the first visible frame of the clip
 	 */
@@ -219,16 +240,7 @@ export class Track<Clp extends Clip> extends EventEmitterMixin(Serializer) {
 	 * Remove the track from the composition
 	 */
 	public detach(): this {
-		const index = this.composition?.tracks.findIndex((n) => n.id == this.id);
-
-		if (this.view.parent && this.composition) {
-			this.composition.stage.removeChild(this.view);
-		}
-
-		if (index != undefined && index >= 0) {
-			this.composition?.tracks.splice(index, 1);
-			this.trigger('detach', undefined);
-		}
+		this.composition?.removeTrack(this);
 
 		return this;
 	}