refactor!: change onCanvasResize to useResizeObserver and provide…

… controls on the observer

lib/playground/src/pages/post-processing/bloom.astro

@@ -5,10 +5,10 @@ import Layout from "../../layouts/Layout.astro";
 <script>
 	import {
 		useEffectPass,
-		onCanvasResize,
 		useWebGLContext,
 		useCompositor,
 		useRenderPass,
+		useResizeObserver,
 	} from "usegl";
 	import {
 		fragmentShaderSource,
@@ -84,7 +84,7 @@ import Layout from "../../layouts/Layout.astro";
 		combinePass,
 	]);
 
-	onCanvasResize(canvas, ({ devicePixelSize }) => {
+	useResizeObserver(canvas, ({ devicePixelSize }) => {
 		resizeCanvas(devicePixelSize.width, devicePixelSize.height);
 
 		compositor.setSize(devicePixelSize);

lib/src/helpers/resize.ts → lib/src/hooks/useResizeObserver.ts

@@ -1,39 +1,55 @@
 /**
- * Listen for resize of the canvas itself instead of the whole window
+ * Listen for changes to the size of an element.
  */
-export function onCanvasResize(
-	canvas: HTMLCanvasElement,
+export function useResizeObserver(
+	target: HTMLElement,
 	callback: (args: {
 		/**
-		 * canvas size in CSS pixels
+		 * size of the observed element in CSS pixels
 		 */
 		size: { width: number; height: number };
 		/**
-		 * canvas size in device pixels
+		 * size of the observed element in device pixels
 		 */
 		devicePixelSize: { width: number; height: number };
+		/**
+		 * untouched, native observer entries
+		 */
+		entries: ResizeObserverEntry[];
 	}) => void,
 ) {
 	let size: ResizeObserverSize;
 	let devicePixelSize: ResizeObserverSize;
 
 	const observer = new ResizeObserver((entries) => {
-		const entry = entries.find((entry) => entry.target === canvas)!;
+		const entry = entries.find((entry) => entry.target === target)!;
 
 		size = entry.contentBoxSize[0];
 		devicePixelSize = entry.devicePixelContentBoxSize?.[0] || {
 			blockSize: Math.round(size.blockSize * window.devicePixelRatio),
 			inlineSize: Math.round(size.inlineSize * window.devicePixelRatio),
 		};
 
-		// resize after next paint, otherwise there are glitches if a render loop is active
+		// call the callback after the next paint, otherwise there are glitches when resizing a canvas
+		// with an active render loop
 		setTimeout(() => {
 			callback({
 				size: { width: size.inlineSize, height: size.blockSize },
 				devicePixelSize: { width: devicePixelSize.inlineSize, height: devicePixelSize.blockSize },
+				entries,
 			});
 		}, 0);
 	});
 
-	observer.observe(canvas);
+	observer.observe(target);
+
+	return {
+		disconnect: observer.disconnect,
+		observe: () => {
+			observer.observe(target);
+		},
+		unobserve: () => {
+			observer.unobserve(target);
+		},
+	};
 }

lib/src/hooks/useWebGLCanvas.ts

@@ -1,4 +1,4 @@
-import { onCanvasResize } from "../helpers/resize";
+import { useResizeObserver } from "./useResizeObserver";
 import type { Attribute, DrawMode, PostEffect, Uniforms } from "../types";
 import { useWebGLContext } from "./useWebGLContext";
 import { useQuadRenderPass } from "./useQuadRenderPass";
@@ -83,12 +83,12 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
 		));
 	}
 
-	if (canvas instanceof HTMLCanvasElement) {
-		// Don't listen for resize on an OffscreenCanvas (possibly in a worker)
-		onCanvasResize(canvas, ({ size }) => {
-			setSize({ width: size.width * dpr, height: size.height * dpr });
-		});
-	}
+	const resizeObserver =
+		canvas instanceof HTMLCanvasElement
+			? useResizeObserver(canvas, ({ size }) => {
+					setSize({ width: size.width * dpr, height: size.height * dpr });
+				})
+			: null; // Don't listen for resize on an OffscreenCanvas (possibly in a worker)
 
 	return {
 		gl,
@@ -102,5 +102,6 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
 		onUpdated: primaryPass.onUpdated,
 		onBeforeRender: primaryPass.onBeforeRender,
 		onAfterRender: primaryPass.onAfterRender,
+		resizeObserver,
 	};
 };

lib/src/index.ts

@@ -12,6 +12,6 @@ export { useRenderPass } from "./hooks/useRenderPass";
 export { useWebGLCanvas } from "./hooks/useWebGLCanvas";
 export { useWebGLContext } from "./hooks/useWebGLContext";
 export { useLoop, playAllLoops, pauseAllLoops } from "./hooks/useLoop";
+export { useResizeObserver } from "./hooks/useResizeObserver";
 
 export { onPointerEvents } from "./helpers/pointer";
-export { onCanvasResize } from "./helpers/resize";