q5 4.8.0 → 4.8.3

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "4.8.0",
+	"version": "4.8.3",
 	"license": "LGPL-3.0-only",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "4.8.0",
+	"version": "4.8.3",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",
 	"license": "LGPL-3.0-only",

package/q5.d.ts

@@ -4586,6 +4586,10 @@ declare global {
 		interface Image {
 			width: number;
 			height: number;
+			defaultWidth: number;
+			defaultHeight: number;
+			mirrorX: boolean;
+			mirrorY: boolean;
 			copy(): Q5.Image;
 			get(x: number, y: number, w?: number, h?: number): Q5.Image | number[];
 			set(x: number, y: number, val: any): void;

package/q5.js

@@ -180,11 +180,11 @@ function Q5(scope, parent, renderer) {
 		}
 		$._redraw = false;
 	};
-	$.remove = async () => {
+	$.remove = () => {
 		$._removed = true;
 		$.noLoop();
 		if ($.canvas.remove) $.canvas.remove();
-		await runHooks('remove');
+		return runHooks('remove');
 	};
 
 	$.frameRate = (hz) => {
@@ -1551,14 +1551,15 @@ Q5.renderers.c2d.image = ($, q) => {
 			drawable = img._tintImg.canvas;
 		}
 
-		if (img.flipped) {
+		let mirrored = img.mirrorX || img.mirrorY;
+		if (mirrored) {
 			$.ctx.save();
 			$.ctx.translate(dx + dw, 0);
-			$.ctx.scale(-1, 1);
+			$.ctx.scale(img.mirrorX ? -1 : 1, img.mirrorY ? -1 : 1);
 			dx = 0;
 		}
 		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
-		if (img.flipped) $.ctx.restore();
+		if (mirrored) $.ctx.restore();
 	};
 
 	$.filter = (type, value) => {
@@ -1800,6 +1801,8 @@ Q5.Image = class {
 		let scale = $._pixelDensity * $._defaultImageScale;
 		$.defaultWidth = w * scale;
 		$.defaultHeight = h * scale;
+		$.mirrorX = false;
+		$.mirrorY = false;
 		delete $.createCanvas;
 		$._loop = false;
 
@@ -2496,6 +2499,7 @@ Q5.modules.color = ($, q) => {
 
 	$._namedColors = {
 		aqua: [0, 255, 255],
+		beige: [245, 245, 220],
 		black: [0, 0, 0],
 		blue: [0, 0, 255],
 		brown: [165, 42, 42],
@@ -3387,7 +3391,7 @@ Q5.modules.dom = ($, q) => {
 		function extendVideo(vid) {
 			vid.playsinline = vid.autoplay = true;
 			if (flipped) {
-				vid.flipped = true;
+				vid.mirrorX = true;
 				vid.style.transform = 'scale(-1, 1)';
 			}
 			vid.loadPixels = () => {
@@ -3658,9 +3662,20 @@ Q5.modules.input = ($, q) => {
 			$._updateMouse(e);
 			$.mouseReleased(e);
 		}
-		if (e.pointerType == 'touch' || e.pointerType == 'pen') {
-			let p = $.pointers.find((p) => p.id === e.pointerId);
-			if (p) p._ended = true;
+		// if pointer is a touch or the event type is pointercancel or mousecancel
+		if (e.pointerType == 'touch' || e.type.at(-1) == 'l') {
+			removePointer(e);
+		}
+	};
+
+	function removePointer(e) {
+		let p = $.pointers.find((p) => p.id === e.pointerId);
+		if (p) p._ended = true;
+	}
+
+	$._onpointerleave = (e) => {
+		if (e.pointerType == 'pen') {
+			removePointer(e);
 		}
 	};
 
@@ -3800,6 +3815,7 @@ Q5.modules.input = ($, q) => {
 		l(pointer + 'move', (e) => $._onpointermove(e), false);
 		l(pointer + 'up', (e) => $._onpointerup(e));
 		l(pointer + 'cancel', (e) => $._onpointerup(e));
+		l(pointer + 'leave', (e) => $._onpointerleave(e));
 		l('touchstart', (e) => $._updateTouches(e));
 		l('touchmove', (e) => $._updateTouches(e));
 		l('touchend', (e) => $._updateTouches(e));
@@ -8035,7 +8051,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		if (img._texture == undefined) {
 			isVideo = img.tagName == 'VIDEO';
 			if (!isVideo || !img.currentTime) return;
-			if (img.flipped) $.scale(-1, 1);
 		}
 
 		if (matrixDirty) saveMatrix();
@@ -8075,6 +8090,18 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			u1 = (sx + sw) / w,
 			v1 = (sy + sh) / h;
 
+		if (img.mirrorX) {
+			let temp = u0;
+			u0 = u1;
+			u1 = temp;
+		}
+
+		if (img.mirrorY) {
+			let temp = v0;
+			v0 = v1;
+			v1 = temp;
+		}
+
 		let ti = matrixIdx,
 			ci = tintIdx,
 			ia = globalAlpha;
@@ -8109,8 +8136,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			);
 
 			drawStack.push(videoPL, $._textureBindGroups.length - 1);
-
-			if (img.flipped) $.scale(-1, 1);
 		}
 	};
 
@@ -8996,7 +9021,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		for (let b of $._buffers) b.destroy();
 		$._buffers = [];
 
-		_remove();
+		return _remove();
 	};
 };
 
@@ -9060,8 +9085,14 @@ Q5._requestGPU = async () => {
 		Q5.MAX_TEXTS = min(Q5.MAX_TEXTS, floor(maxStorage / 32));
 
 		device.lost.then((e) => {
-			console.error('WebGPU crashed!');
+			// if purposefully destroyed, do nothing.
+			if (e.reason == 'destroyed') return;
+			// else attempt restart
 			console.error(e);
+			requestAnimationFrame(async () => {
+				Q5.device = Q5._gpuTask = null;
+				await Q5.initWebGPU();
+			});
 		});
 
 		Q5.device = device;