Implemented and tested functional parameters

Author: k9p5

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diffusionstudio/core",
   "private": false,
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "type": "module",
   "description": "Build bleeding edge video processing applications",
   "files": [

playground/main.ts

@@ -106,3 +106,26 @@ await composition.add(
     }]
   })
 );
+
+await composition.add(
+  new core.ImageClip(
+    await core.ImageSource.from('/dvd_logo.svg'),
+    {
+      stop: composition.duration,
+      x(this: core.TextClip, time: core.Timestamp) {
+        const width = typeof this.width == 'number' ? this.width : 0;
+        const range = composition.width - width;
+        const x = (time.seconds * 500) % (range * 2);
+
+        return x > range ? range * 2 - x : x;
+      },
+      y(this: core.TextClip, time: core.Timestamp) {
+        const height = typeof this.height == 'number' ? this.height : 0;
+        const range = composition.height - height;
+        const y = (time.seconds * 200) % (range * 2);
+
+        return y > range ? range * 2 - y : y;
+      },
+    }
+  )
+);

public/dvd_logo.svg

@@ -61,7 +61,7 @@ describe('The visualize decorator', () => {
 		expect(renderSpy).toHaveBeenCalledTimes(3);
 	});
 
-	it('should center the clip when position center is set', async () => {
+	it("should center the clip when position 'center' is set", async () => {
 		const clip = new TestClip();
 		clip.container.addChild(new Sprite());
 		const renderer = new WebGPURenderer();
@@ -83,7 +83,7 @@ describe('The visualize decorator', () => {
 		expect(posSpy).toHaveBeenCalledOnce();
 	});
 
-	it('should set the position on render', async () => {
+	it('should set the position on render - number', async () => {
 		const clip = new TestClip();
 		const renderer = new WebGPURenderer();
 
@@ -101,6 +101,48 @@ describe('The visualize decorator', () => {
 		expect(clip.container.x).toBe(5);
 		expect(clip.container.y).toBe(7);
 		expect(posSpy).toHaveBeenCalledOnce();
+	});
+
+	it('should set the position on render - function', async () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+
+		await new Composition({ width: 1000, height: 2000 })
+			.createTrack('base')
+			.add(clip);
+
+		const posSpy = vi.spyOn(clip.container.position, 'set');
+
+		clip.position = {
+			x(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+
+				return time.millis;
+			},
+			y(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+
+				return time.millis * 2;
+			},
+		};
+
+		posSpy.mockClear()
+		clip.render(renderer, new Timestamp(1000));
+
+		expect(clip.container.x).toBe(1000);
+		expect(clip.container.y).toBe(2000);
+		expect(posSpy).toHaveBeenCalledOnce();
+	});
+
+	it('should set the position on render - keyframe', async () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+
+		await new Composition({ width: 1000, height: 2000 })
+			.createTrack('base')
+			.add(clip);
+
+		const posSpy = vi.spyOn(clip.container.position, 'set');
 
 		clip.position = {
 			x: new Keyframe([0, 60], [100, 200]),
@@ -113,8 +155,24 @@ describe('The visualize decorator', () => {
 		expect(clip.container.x).toBe(150);
 		expect(clip.container.y).toBe(50);
 		expect(posSpy).toHaveBeenCalledOnce();
+	});
+
+	it('should set the position on render - keyframe relative', async () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
 
-		// offset start
+		await new Composition({ width: 1000, height: 2000 })
+			.createTrack('base')
+			.add(clip);
+
+		const posSpy = vi.spyOn(clip.container.position, 'set');
+
+		clip.position = {
+			x: new Keyframe([0, 60], [100, 200]),
+			y: new Keyframe([0, 60], [0, 100])
+		};
+
+		// Make sure the relative time is used
 		clip.stop = 100;
 		clip.start = 30;
 
@@ -124,12 +182,27 @@ describe('The visualize decorator', () => {
 		expect(clip.container.x).toBe(100);
 		expect(clip.container.y).toBe(0);
 		expect(posSpy).toHaveBeenCalledOnce();
+	});
+
+	it('should set the position on render - number relative', async () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+
+		await new Composition({ width: 1000, height: 2000 })
+			.createTrack('base')
+			.add(clip);
+
+		const posSpy = vi.spyOn(clip.container.position, 'set');
 
 		clip.position = {
 			x: '20%',
 			y: '30%',
 		}
 
+		// Make sure the relative time is used
+		clip.stop = 100;
+		clip.start = 30;
+
 		posSpy.mockClear();
 		clip.render(renderer, new Timestamp(1000));
 
@@ -138,6 +211,32 @@ describe('The visualize decorator', () => {
 		expect(posSpy).toHaveBeenCalledOnce();
 	});
 
+	it('should set the position on render - function relative', async () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+
+		await new Composition({ width: 1000, height: 2000 })
+			.createTrack('base')
+			.add(clip);
+
+		const posSpy = vi.spyOn(clip.container.position, 'set');
+
+
+		clip.position = {
+			x: (time: Timestamp) => time.millis,
+			y: (time: Timestamp) => time.millis * 2,
+		};
+
+		// Make sure the relative time is used
+		clip.start = 30;
+
+		posSpy.mockClear();
+		clip.render(renderer, new Timestamp(2000));
+
+		expect(clip.container.x).toBe(1000);
+		expect(clip.container.y).toBe(2000);
+	});
+
 	it('should add the translate values on render', () => {
 		const clip = new TestClip();
 		const renderer = new WebGPURenderer();
@@ -162,6 +261,25 @@ describe('The visualize decorator', () => {
 		expect(clip.container.x).toBe(150 + 20);
 		expect(clip.container.y).toBe(50 + 60);
 		expect(posSpy).toHaveBeenCalledTimes(2);
+
+		clip.position = { x: 50, y: 70 };
+		clip.translate = {
+			x(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+
+				return time.millis;
+			},
+			y(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+
+				return time.millis;
+			},
+		};
+
+		clip.render(renderer, new Timestamp(80));
+		expect(clip.container.x).toBe(130);
+		expect(clip.container.y).toBe(150);
+		expect(posSpy).toHaveBeenCalledTimes(3);
 	});
 
 	it('should set the height on render', async () => {
@@ -210,6 +328,22 @@ describe('The visualize decorator', () => {
 		expect(clip.container.scale.y).toBe(0.25);
 		expect(clip.container.scale.x).toBe(0.25);
 
+		clip.height = function(this: TestClip, time: Timestamp) {
+			expect(this).instanceOf(TestClip);
+
+			return time.millis;
+		}
+
+		vi.clearAllMocks();
+		clip.render(renderer, new Timestamp(200));
+
+		expect(heightSpy).toHaveBeenCalledOnce();
+		expect(scaleSpy).toHaveBeenCalledOnce();
+
+		expect(clip.container.height).toBe(200);
+		expect(clip.container.width).toBe(250);
+		expect(clip.container.scale.y).toBe(0.5);
+		expect(clip.container.scale.x).toBe(0.5);
 
 		clip.height = 800;
 
@@ -258,6 +392,23 @@ describe('The visualize decorator', () => {
 		expect(clip.container.scale.y).toBe(2);
 		expect(clip.container.scale.x).toBe(2);
 
+		clip.width = function(this: TestClip, time: Timestamp) {
+			expect(this).instanceOf(TestClip);
+
+			return time.millis;
+		}
+
+		vi.clearAllMocks();
+		clip.render(renderer, new Timestamp(250));
+
+		expect(widthSpy).toHaveBeenCalledOnce();
+		expect(scaleSpy).toHaveBeenCalledOnce();
+
+		expect(clip.container.height).toBe(200);
+		expect(clip.container.width).toBe(250);
+		expect(clip.container.scale.y).toBe(0.5);
+		expect(clip.container.scale.x).toBe(0.5);
+
 		clip.width = new Keyframe([0, 12], [0, 200]);
 
 		vi.clearAllMocks();
@@ -342,6 +493,53 @@ describe('The visualize decorator', () => {
 		expect(scaleSpy).toHaveBeenCalledOnce();
 	});
 
+	it('should be able to scale as a Function', () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+		const scaleSpy = vi.spyOn(clip.container.scale, 'set');
+
+		clip.scale =  function (this: TestClip, time: Timestamp) {
+			expect(this).instanceOf(TestClip);
+
+			return time.millis;
+		}
+
+		clip.render(renderer, new Timestamp(50));
+
+		expect(clip.scale.x).toBeTypeOf('function');
+		expect(clip.scale.y).toBeTypeOf('function');
+		expect(clip.container.scale._x).toBe(50);
+		expect(clip.container.scale._y).toBe(50);
+		expect(scaleSpy.mock.calls[0][0]).toBe(50);
+	});
+
+	it('should be able to scale x and y as a Function', () => {
+		const clip = new TestClip();
+		const renderer = new WebGPURenderer();
+		const scaleSpy = vi.spyOn(clip.container.scale, 'set');
+
+		clip.scale = {
+			x(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+	
+				return time.millis;
+			},
+			y(this: TestClip, time: Timestamp) {
+				expect(this).instanceOf(TestClip);
+	
+				return time.millis;
+			},
+		};
+
+		clip.render(renderer, new Timestamp(50));
+
+		expect(clip.scale.x).toBeTypeOf('function');
+		expect(clip.scale.y).toBeTypeOf('function');
+		expect(clip.container.scale._x).toBe(50);
+		expect(clip.container.scale._y).toBe(50);
+		expect(scaleSpy.mock.calls[0][0]).toBe(50);
+	});
+
 	it('should set scale x any y independently on render', () => {
 		const clip = new TestClip();
 		const renderer = new WebGPURenderer();
@@ -414,6 +612,16 @@ describe('The visualize decorator', () => {
 		clip.render(renderer, new Timestamp(1000));
 		expect(clip.container.angle).toBe(90);
 		expect(angleSpy).toHaveBeenCalledTimes(2);
+
+		clip.rotation = function(this: TestClip, time: Timestamp) {
+			expect(this).instanceOf(TestClip);
+
+			return time.millis;
+		}
+
+		clip.render(renderer, new Timestamp(6));
+		expect(Math.round(clip.container.angle)).toBe(6);
+		expect(angleSpy).toHaveBeenCalledTimes(3);
 	});
 
 	it('should set the opacity on render', () => {
@@ -433,5 +641,15 @@ describe('The visualize decorator', () => {
 		clip.render(renderer, new Timestamp(1000));
 		expect(clip.container.alpha).toBe(0.3);
 		expect(alphaSpy).toHaveBeenCalledTimes(2);
+
+		clip.alpha = function(this: TestClip, time: Timestamp) {
+			expect(this).instanceOf(TestClip);
+
+			return time.millis / 2;
+		}
+
+		clip.render(renderer, new Timestamp(1));
+		expect(clip.container.alpha).toBe(0.5);
+		expect(alphaSpy).toHaveBeenCalledTimes(3);
 	});
 });