feat!: change onPointerEvents to usePointerEvents and add more events

Author: jsulpis

lib/playground/src/pages/pointer/blob.astro

@@ -4,7 +4,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { onPointerEvents, useLoop, useWebGLCanvas, useBoundingRect } from "usegl";
+	import { usePointerEvents, useLoop, useWebGLCanvas } from "usegl";
 	import { fragment, vertex } from "../../shaders/blob";
 	import { incrementRenderCount } from "../../components/renderCount";
 
@@ -20,13 +20,12 @@ import Layout from "../../layouts/Layout.astro";
 		immediate: false,
 	});
 
-	const { center, rect } = useBoundingRect(canvas);
 	const targetPointer = { x: 0, y: 0 };
 
-	onPointerEvents(canvas, {
-		move: ({ x, y }) => {
-			targetPointer.x = (x - center.x) / (rect.width / 2);
-			targetPointer.y = (center.y - y) / (rect.height / 2);
+	usePointerEvents(canvas, {
+		move: ({ pointer, canvasRect, canvasCenter }) => {
+			targetPointer.x = (pointer.x - canvasCenter.x) / (canvasRect.width / 2);
+			targetPointer.y = (canvasCenter.y - pointer.y) / (canvasRect.height / 2);
 		},
 		leave: () => {
 			targetPointer.x = targetPointer.y = 0;

lib/playground/src/pages/pointer/pointer.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { useBoundingRect, onPointerEvents, useWebGLCanvas } from "usegl";
+	import { usePointerEvents, useWebGLCanvas } from "usegl";
 	import { incrementRenderCount } from "../../components/renderCount";
 
 	const canvas = document.querySelector("canvas");
@@ -14,29 +14,35 @@ import Layout from "../../layouts/Layout.astro";
 			varying vec2 vUv;
 			uniform vec2 uPointerPosition;
 			uniform vec2 uResolution;
+			uniform vec3 uCircleColor;
 
 			void main() {
 				vec2 uv = (vUv - .5) * uResolution / min(uResolution.x, uResolution.y);
 				float dist = distance(uv, uPointerPosition);
-				float circle = 1. - smoothstep(.099, .101, dist);
-				gl_FragColor = vec4(vec3(circle), 1.);
+				float circleMask = 1. - smoothstep(.099, .101, dist);
+				vec3 circle = mix(vec3(0.), uCircleColor, circleMask);
+				gl_FragColor = vec4(circle, 1.);
 			}
 		`,
 		uniforms: {
 			uPointerPosition: [0, 0],
+			uCircleColor: [1, 1, 1],
 		},
 	});
 
-	const { rect } = useBoundingRect(canvas);
-
-	onPointerEvents(canvas, {
-		move: ({ clientX, clientY }) => {
-			const { left, bottom, width, height } = rect;
+	usePointerEvents(canvas, {
+		move: ({ pointer, canvasCenter, canvasRect }) => {
 			uniforms.uPointerPosition = [
-				(clientX - (left + width / 2)) / Math.min(width, height),
-				(bottom - height / 2 - clientY) / Math.min(width, height),
+				(pointer.x - canvasCenter.x) / Math.min(canvasRect.width, canvasRect.height),
+				(canvasCenter.y - pointer.y) / Math.min(canvasRect.width, canvasRect.height),
 			];
 		},
+		down: () => {
+			uniforms.uCircleColor = [1, 0, 0];
+		},
+		up: () => {
+			uniforms.uCircleColor = [1, 1, 1];
+		},
 	});
 
 	onAfterRender(incrementRenderCount);

lib/src/helpers/pointer.ts

@@ -15,6 +15,17 @@ export interface UseBoundingRectOptions {
 	windowScroll?: boolean;
 }
 
+export interface BoundingRect {
+	width: number;
+	height: number;
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+	x: number;
+	y: number;
+}
+
 /**
  * Dynamically get the bounding rectangle of an HTML element
  */
@@ -24,7 +35,7 @@ export function useBoundingRect(target: HTMLElement, options: UseBoundingRectOpt
 		windowScroll = typeof window !== "undefined",
 	} = options;
 
-	const rect = {
+	const rect: BoundingRect = {
 		width: 0,
 		height: 0,
 		top: 0,

lib/src/hooks/useBoundingRect.ts

@@ -0,0 +1,62 @@
+import type { BoundingRect } from "./useBoundingRect";
+import { useBoundingRect } from "./useBoundingRect";
+
+type HandlerArgs = {
+	pointer: {
+		x: number;
+		y: number;
+	};
+	canvasRect: BoundingRect;
+	canvasCenter: {
+		x: number;
+		y: number;
+	};
+};
+
+type PointerEventsHandlers = {
+	enter?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	move?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	leave?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	down?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	up?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+};
+
+/**
+ * Listen to common pointer events and provide additional infos about the canvas
+ */
+export function usePointerEvents(canvas: HTMLCanvasElement, handlers: PointerEventsHandlers) {
+	const { rect: canvasRect, center: canvasCenter } = useBoundingRect(canvas);
+
+	const activeHandlers = Object.fromEntries(
+		Object.entries(handlers)
+			.filter(([, handler]) => typeof handler === "function")
+			.map(([handlerName, handlerFunction]) => [
+				handlerName,
+				(e: PointerEvent) => {
+					handlerFunction({
+						pointer: { x: e.clientX, y: e.clientY },
+						canvasRect,
+						canvasCenter,
+					});
+				},
+			]),
+	);
+
+	function listen() {
+		for (const [event, handler] of Object.entries(activeHandlers)) {
+			canvas.addEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler, {
+				passive: true,
+			});
+		}
+	}
+
+	function stop() {
+		for (const [event, handler] of Object.entries(activeHandlers)) {
+			canvas.removeEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler);
+		}
+	}
+
+	listen();
+
+	return { stop, listen };
+}

lib/src/hooks/usePointerEvents.ts

@@ -14,5 +14,4 @@ export { useWebGLContext } from "./hooks/useWebGLContext";
 export { useLoop, playAllLoops, pauseAllLoops } from "./hooks/useLoop";
 export { useResizeObserver } from "./hooks/useResizeObserver";
 export { useBoundingRect } from "./hooks/useBoundingRect";
-
-export { onPointerEvents } from "./helpers/pointer";
+export { usePointerEvents } from "./hooks/usePointerEvents";