Delegate canvas resizing (#126)

* Delegate canvas resizing to renderers * Fix positionning of canvas inside SketchRenderer
raphaelameaume · Jul 6, 2024 · c8d771b · c8d771b
1 parent 9c71bdc
commit c8d771b
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 110 deletions.
diff --git a/src/cli/templates/blank/index.js b/src/cli/templates/blank/index.js
@@ -30,4 +30,9 @@ export let update = ({ width, height, time, deltaTime }) => {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height, pixelRatio }) => {};
+export let resize = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};
diff --git a/src/cli/templates/default/index.js b/src/cli/templates/default/index.js
@@ -23,8 +23,8 @@ export let init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ context, width, height, time, deltaTime }) => {
-	context.clearRect(0, 0, width, height);
+export let update = ({ context, width, height, pixelRatio }) => {
+	context.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
 };
 
 /**

diff --git a/src/client/app/lib/gl/Renderer.js b/src/client/app/lib/gl/Renderer.js
@@ -137,6 +137,9 @@ class Renderer {
 		this.canvas.width = this.state.width * this.state.pixelRatio;
 		this.canvas.height = this.state.height * this.state.pixelRatio;
 
+		this.canvas.style.width = `${this.state.width}px`;
+		this.canvas.style.height = `${this.state.height}px`;
+
 		this.setViewport();
 	}
 

diff --git a/src/client/app/renderers/2DRenderer.js b/src/client/app/renderers/2DRenderer.js
@@ -1,5 +1,34 @@
+/**
+ * @typedef {object} MountParams2DRenderer
+ * @property {CanvasRenderingContext2D} context
+ */
+
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParams2DRenderer}
+ */
 export let onMountPreview = ({ canvas }) => {
 	return {
 		context: canvas.getContext('2d'),
 	};
 };
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let onResizePreview = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};
diff --git a/src/client/app/renderers/P5GLRenderer.js b/src/client/app/renderers/P5GLRenderer.js
@@ -3,18 +3,51 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
+/**
+ * @typedef {object} PreviewP5GLRenderer
+ * @property {number} id
+ * @property {p5} p
+ * @property {boolean} rendered
+ */
+
+/**
+ * @typedef {object} MountParamsP5GLRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {p5} p
+ */
+
+/**
+ * @typedef {object} PreviewParamsP5GLRenderer
+ * @property {number} params.id
+ * @property {HTMLDivElement} params.container
+ * @property {HTMLCanvasElement} params.canvas
+ */
+
+/** @type {PreviewP5GLRenderer[]} */
 let previews = [];
 
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsP5GLRenderer}
+ */
 export let onMountPreview = ({ id, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
 			sketch.createCanvas(width, height, 'webgl');
 		};
 	});
 
+	/** @type {PreviewP5GLRenderer} */
 	const preview = {
 		id,
 		p,
+		rendered: false,
 	};
 
 	previews.push(preview);
@@ -25,6 +58,9 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -34,6 +70,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -49,15 +88,17 @@ export let onAfterUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((preview) => preview.id === id);
 	const preview = previews[previewIndex];

diff --git a/src/client/app/renderers/P5Renderer.js b/src/client/app/renderers/P5Renderer.js
@@ -30,13 +30,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
 export let onDestroyPreview = ({ id }) => {

diff --git a/src/client/app/renderers/THREERenderer.js b/src/client/app/renderers/THREERenderer.js
@@ -4,8 +4,11 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
-let renderer;
 let previews = [];
+
+/** @type {WebGLRenderer} */
+let renderer;
+
 let fragmentShader = /* glsl */ `
     precision highp float;
     uniform sampler2D uSampler;
@@ -66,7 +69,7 @@ export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
 	};
 };
 
-export let onDestroyPreview = ({ id, canvas }) => {
+export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];
 
@@ -107,9 +110,12 @@ export let onAfterUpdatePreview = ({ id }) => {
 export let resize = ({ width, height, pixelRatio }) => {
 	renderer.setPixelRatio(pixelRatio);
 	renderer.setSize(width, height);
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
 
-	for (let i = 0; i < previews.length; i++) {
-		const preview = previews[i];
+	if (preview) {
 		preview.resize({ width, height, pixelRatio });
 	}
 };