Merge pull request #50 from diffusionstudio/konstantin/feat/resize

added resize method

Author: k9p5

package.json

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

src/composition/composition.spec.ts

@@ -454,6 +454,31 @@ describe('The composition', () => {
 		expect(computeMock).toBeCalledTimes(5);
 	});
 
+	it('should be able to resize the canvas', () => {
+		const div = document.createElement('div');
+		composition.attachPlayer(div);
+
+		const resizeMock = vi.spyOn(composition.renderer!, 'resize');
+		const resizeFn = vi.fn();
+		composition.on('resize', resizeFn);
+		
+		expect(composition.settings.width).toBe(1920);
+		expect(composition.settings.height).toBe(1080);
+		expect(composition.canvas?.width).toBe(1920);
+		expect(composition.canvas?.height).toBe(1080);
+
+		computeMock.mockClear();
+		composition.resize(100, 100);
+
+		expect(composition.settings.width).toBe(100);
+		expect(composition.settings.height).toBe(100);
+		expect(composition.canvas?.width).toBe(100);
+		expect(composition.canvas?.height).toBe(100);
+		expect(resizeMock).toBeCalledTimes(1);
+		expect(computeMock).toBeCalledTimes(1);
+		expect(resizeFn).toBeCalledTimes(1);
+	});
+
 	afterEach(() => {
 		frameMock.mockClear();
 		playMock.mockClear();

src/composition/composition.ts

@@ -167,6 +167,20 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		this.trigger('frame', this.fixedDuration?.frames ?? 0);
 	}
 
+	public resize(width: number, height: number) {
+		this.settings.width = width;
+		this.settings.height = height;
+		this.renderer?.resize(width, height);
+
+		if (this.canvas) {
+			this.canvas.height = height;
+			this.canvas.width = width;
+		}
+
+		this.trigger('resize', undefined);
+		this.computeFrame();
+	}
+
 	/**
 	 * Set the player as a child of the given html div element
 	 */

src/composition/composition.types.ts

@@ -54,6 +54,7 @@ export type CompositionEvents = {
 	attach: undefined;
 	detach: undefined;
 	load: undefined;
+	resize: undefined;
 };
 
 export type CompositionState = 'IDLE' | 'RENDER' | 'PLAY';

vitest.setup.ts

@@ -23,6 +23,8 @@ Object.assign(globalThis, {
 });
 vi.mock('pixi.js', async (importOriginal) => {
   class Renderer {
+    private _canvas = document.createElement('canvas');
+
     height: undefined | number;
     width: undefined | number;
 
@@ -32,7 +34,12 @@ vi.mock('pixi.js', async (importOriginal) => {
     }
 
     get canvas() {
-      return document.createElement('canvas');
+      return this._canvas;
+    }
+
+    resize(width: number, height: number) {
+      this._canvas.width = width;
+      this._canvas.height = height;
     }
 
     render = vi.fn();