q5 4.8.0 → 4.8.2

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "4.8.0",
+	"version": "4.8.2",
 	"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.2",
 	"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

@@ -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;
 
@@ -3387,7 +3390,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 +3661,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 +3814,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 +8050,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 +8089,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 +8135,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			);
 
 			drawStack.push(videoPL, $._textureBindGroups.length - 1);
-
-			if (img.flipped) $.scale(-1, 1);
 		}
 	};