q5 4.7.5 → 4.8.2

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "4.7.5",
+	"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.7.5",
+	"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-deno-server.js

@@ -28,6 +28,8 @@ Q5._createServerCanvas = function () {
 	let skiaCanvas = createCanvas(...arguments);
 	let domCanvas = document.createElement('canvas');
 
+	skiaCanvas.save = skiaCanvas.toFileSync;
+
 	return new Proxy(skiaCanvas, {
 		get: function (target, prop) {
 			let t = prop in target ? target : domCanvas;

package/q5-server.js

@@ -1,6 +1,6 @@
 /**
  * @module q5-server
- * @description Run q5 with node.js using node-canvas and jsdom
+ * @description Run q5 with node.js using skia-canvas and jsdom
  */
 
 let depsLoaded = false;
@@ -36,7 +36,7 @@ if (depsLoaded) {
 		let skiaCanvas = new SkiaCanvas.Canvas(...arguments);
 		let domCanvas = document.createElement('canvas');
 
-		skiaCanvas.save = skiaCanvas.saveAsSync;
+		skiaCanvas.save = skiaCanvas.toFileSync;
 
 		return new Proxy(skiaCanvas, {
 			get: function (target, prop) {

package/q5.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @module q5
+ */
+
 declare global {
 
 	// ⭐ core
@@ -4582,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

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 4.7
+ * @version 4.8
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, keturn, ormaq, bertubi, RedWilly, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -494,7 +494,7 @@ if (typeof window == 'object') {
 	window.addEventListener('pagehide', cleanup);
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '4.7';
+Q5.version = Q5.VERSION = '4.8';
 
 if (typeof document == 'object') {
 	function init() {
@@ -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);
 		}
 	};