q5 2.0.17 → 2.1.0

package/src/q5-canvas.js

@@ -0,0 +1,200 @@
+Q5.modules.canvas = ($, q) => {
+	$._OffscreenCanvas =
+		window.OffscreenCanvas ||
+		function () {
+			return document.createElement('canvas');
+		};
+
+	if (Q5._nodejs) {
+		if (Q5._createNodeJSCanvas) {
+			q.canvas = Q5._createNodeJSCanvas(100, 100);
+		}
+	} else if ($._scope == 'image' || $._scope == 'graphics') {
+		q.canvas = new $._OffscreenCanvas(100, 100);
+	}
+
+	if (!$.canvas) {
+		if (typeof document == 'object') {
+			q.canvas = document.createElement('canvas');
+			$.canvas.id = 'q5Canvas' + Q5._instanceCount;
+			$.canvas.classList.add('q5Canvas');
+		} else $.noCanvas();
+	}
+
+	let c = $.canvas;
+	c.width = $.width = 100;
+	c.height = $.height = 100;
+	if ($._scope != 'image') {
+		c.renderer = $._renderer;
+		c[$._renderer] = true;
+	}
+	$._pixelDensity = 1;
+
+	$._adjustDisplay = () => {
+		if (c.style) {
+			c.style.width = c.w + 'px';
+			c.style.height = c.h + 'px';
+		}
+	};
+
+	$.createCanvas = function (w, h, options) {
+		options ??= arguments[3];
+
+		let opt = Object.assign({}, Q5.canvasOptions);
+		if (typeof options == 'object') Object.assign(opt, options);
+
+		if ($._scope != 'image') {
+			let pd = $.displayDensity();
+			if ($._scope == 'graphics') pd = this._pixelDensity;
+			else if (window.IntersectionObserver) {
+				new IntersectionObserver((e) => {
+					c.visible = e[0].isIntersecting;
+				}).observe(c);
+			}
+			$._pixelDensity = Math.ceil(pd);
+		}
+
+		$._setCanvasSize(w, h);
+
+		Object.assign(c, opt);
+		let rend = $._createCanvas(c.w, c.h, opt);
+
+		if ($._hooks) {
+			for (let m of $._hooks.postCanvas) m();
+		}
+		return rend;
+	};
+
+	$._save = async (data, name, ext) => {
+		name = name || 'untitled';
+		ext = ext || 'png';
+		if (ext == 'jpg' || ext == 'png' || ext == 'webp') {
+			if (data instanceof OffscreenCanvas) {
+				const blob = await data.convertToBlob({ type: 'image/' + ext });
+				data = await new Promise((resolve) => {
+					const reader = new FileReader();
+					reader.onloadend = () => resolve(reader.result);
+					reader.readAsDataURL(blob);
+				});
+			} else {
+				data = data.toDataURL('image/' + ext);
+			}
+		} else {
+			let type = 'text/plain';
+			if (ext == 'json') {
+				if (typeof data != 'string') data = JSON.stringify(data);
+				type = 'text/json';
+			}
+			data = new Blob([data], { type });
+			data = URL.createObjectURL(data);
+		}
+		let a = document.createElement('a');
+		a.href = data;
+		a.download = name + '.' + ext;
+		a.click();
+		URL.revokeObjectURL(a.href);
+	};
+	$.save = (a, b, c) => {
+		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
+			c = b;
+			b = a;
+			a = $.canvas;
+		}
+		if (c) return $._save(a, b, c);
+		if (b) {
+			b = b.split('.');
+			$._save(a, b[0], b.at(-1));
+		} else $._save(a);
+	};
+
+	$._setCanvasSize = (w, h) => {
+		w ??= window.innerWidth;
+		h ??= window.innerHeight;
+		c.w = w = Math.ceil(w);
+		c.h = h = Math.ceil(h);
+		c.hw = w / 2;
+		c.hh = h / 2;
+		c.width = Math.ceil(w * $._pixelDensity);
+		c.height = Math.ceil(h * $._pixelDensity);
+
+		if (!$._da) {
+			q.width = w;
+			q.height = h;
+		} else $.flexibleCanvas($._dau);
+
+		if ($.displayMode && !c.displayMode) $.displayMode();
+		else $._adjustDisplay();
+	};
+
+	if ($._scope == 'image') return;
+
+	if (c && $._scope != 'graphics') {
+		c.parent = (el) => {
+			if (c.parentElement) c.parentElement.removeChild(c);
+
+			if (typeof el == 'string') el = document.getElementById(el);
+			el.append(c);
+
+			function parentResized() {
+				if ($.frameCount > 1) {
+					$._shouldResize = true;
+					$._adjustDisplay();
+				}
+			}
+			if (typeof ResizeObserver == 'function') {
+				if ($._ro) $._ro.disconnect();
+				$._ro = new ResizeObserver(parentResized);
+				$._ro.observe(el);
+			} else if (!$.frameCount) {
+				window.addEventListener('resize', parentResized);
+			}
+		};
+
+		function addCanvas() {
+			let el = $._parent;
+			el ??= document.getElementsByTagName('main')[0];
+			if (!el) {
+				el = document.createElement('main');
+				document.body.append(el);
+			}
+			c.parent(el);
+		}
+		if (document.body) addCanvas();
+		else document.addEventListener('DOMContentLoaded', addCanvas);
+	}
+
+	$.resizeCanvas = (w, h) => {
+		if (!$.ctx) return $.createCanvas(w, h);
+		if (w == c.w && h == c.h) return;
+
+		$._resizeCanvas(w, h);
+	};
+
+	$.canvas.resize = $.resizeCanvas;
+	$.canvas.save = $.saveCanvas = $.save;
+
+	$.displayDensity = () => window.devicePixelRatio;
+	$.pixelDensity = (v) => {
+		if (!v || v == $._pixelDensity) return $._pixelDensity;
+		$._pixelDensity = v;
+		$._setCanvasSize(c.w, c.h);
+		return v;
+	};
+
+	$.flexibleCanvas = (unit = 400) => {
+		if (unit) {
+			$._da = c.width / (unit * $._pixelDensity);
+			q.width = $._dau = unit;
+			q.height = (c.h / c.w) * unit;
+		} else $._da = 0;
+	};
+};
+
+Q5.canvasOptions = {
+	alpha: false,
+	colorSpace: 'display-p3'
+};
+
+if (!window.matchMedia || !matchMedia('(dynamic-range: high) and (color-gamut: p3)').matches) {
+	Q5.canvasOptions.colorSpace = 'srgb';
+} else Q5.supportsHDR = true;

package/src/q5-color.js

@@ -1,19 +1,21 @@
-Q5.modules.color = ($, p) => {
+Q5.modules.color = ($, q) => {
 	$.RGB = $.RGBA = $._colorMode = 'rgb';
 	$.OKLCH = 'oklch';
 
-	if (Q5.supportsHDR) $.Color = Q5.ColorRGBA_P3;
-	else $.Color = Q5.ColorRGBA;
-
-	$.colorMode = (mode) => {
+	$.colorMode = (mode, format) => {
 		$._colorMode = mode;
+		let srgb = $.canvas.colorSpace == 'srgb' || mode == 'srgb';
+		format ??= srgb ? 'integer' : 'float';
+		$._colorFormat = format;
 		if (mode == 'oklch') {
-			p.Color = Q5.ColorOKLCH;
-		} else if (mode == 'rgb') {
-			if ($.canvas.colorSpace == 'srgb') p.Color = Q5.ColorRGBA;
-			else p.Color = Q5.ColorRGBA_P3;
-		} else if (mode == 'srgb') {
-			p.Color = Q5.ColorRGBA;
+			q.Color = Q5.ColorOKLCH;
+		} else {
+			let srgb = $.canvas.colorSpace == 'srgb';
+			if ($._colorFormat == 'integer') {
+				q.Color = srgb ? Q5.ColorRGBA_8 : Q5.ColorRGBA_P3_8;
+			} else {
+				q.Color = srgb ? Q5.ColorRGBA : Q5.ColorRGBA_P3;
+			}
 			$._colorMode = 'rgb';
 		}
 	};
@@ -58,27 +60,33 @@ Q5.modules.color = ($, p) => {
 		let args = arguments;
 		if (args.length == 1) {
 			if (typeof c0 == 'string') {
+				let r, g, b, a;
 				if (c0[0] == '#') {
 					if (c0.length <= 5) {
-						return new C(
-							parseInt(c0[1] + c0[1], 16),
-							parseInt(c0[2] + c0[2], 16),
-							parseInt(c0[3] + c0[3], 16),
-							c0.length == 4 ? null : parseInt(c0[4] + c0[4], 16)
-						);
+						r = parseInt(c0[1] + c0[1], 16);
+						g = parseInt(c0[2] + c0[2], 16);
+						b = parseInt(c0[3] + c0[3], 16);
+						a = c0.length == 4 ? null : parseInt(c0[4] + c0[4], 16);
+					} else {
+						r = parseInt(c0.slice(1, 3), 16);
+						g = parseInt(c0.slice(3, 5), 16);
+						b = parseInt(c0.slice(5, 7), 16);
+						a = c0.length == 7 ? null : parseInt(c0.slice(7, 9), 16);
 					}
-					return new C(
-						parseInt(c0.slice(1, 3), 16),
-						parseInt(c0.slice(3, 5), 16),
-						parseInt(c0.slice(5, 7), 16),
-						c0.length == 7 ? null : parseInt(c0.slice(7, 9), 16)
+				} else if ($._namedColors[c0]) [r, g, b] = $._namedColors[c0];
+				else {
+					console.error(
+						"q5 can't parse color: " + c0 + '\nOnly numeric input, hex, and common named colors are supported.'
 					);
+					return new C(0, 0, 0);
 				}
-				if ($._namedColors[c0]) return new C(...$._namedColors[c0]);
-				console.error(
-					"q5 can't parse color: " + c0 + '\nOnly numeric input, hex, and common named colors are supported.'
-				);
-				return new C(0, 0, 0);
+				if ($._colorFormat != 'integer') {
+					r /= 255;
+					g /= 255;
+					b /= 255;
+					if (a != null) a /= 255;
+				}
+				return new C(r, g, b, a);
 			}
 			if (Array.isArray(c0)) return new C(...c0);
 		}
@@ -148,7 +156,24 @@ Q5.ColorRGBA = class extends Q5.Color {
 		this.r = r;
 		this.g = g;
 		this.b = b;
-		this.a = a ?? 255;
+		this.a = a ?? 1;
+	}
+	get levels() {
+		return [this.r, this.g, this.b, this.a];
+	}
+	toString() {
+		return `color(srgb ${this.r} ${this.g} ${this.b} / ${this.a})`;
+	}
+};
+Q5.ColorRGBA_P3 = class extends Q5.ColorRGBA {
+	toString() {
+		return `color(display-p3 ${this.r} ${this.g} ${this.b} / ${this.a})`;
+	}
+};
+// legacy 8-bit (0-255) integer color format
+Q5.ColorRGBA_8 = class extends Q5.ColorRGBA {
+	constructor(r, g, b, a) {
+		super(r, g, b, a ?? 255);
 	}
 	setRed(v) {
 		this.r = v;
@@ -169,9 +194,10 @@ Q5.ColorRGBA = class extends Q5.Color {
 		return `rgb(${this.r} ${this.g} ${this.b} / ${this.a / 255})`;
 	}
 };
-Q5.ColorRGBA_P3 = class extends Q5.ColorRGBA {
+// p3 10-bit color in integer color format, for backwards compatibility
+Q5.ColorRGBA_P3_8 = class extends Q5.ColorRGBA {
 	constructor(r, g, b, a) {
-		super(r, g, b, a);
+		super(r, g, b, a ?? 255);
 		this._edited = true;
 	}
 	get r() {

package/src/q5-core.js

@@ -1,15 +1,15 @@
 /**
  * q5.js
- * @version 2.0
+ * @version 2.1
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
  */
-function Q5(scope, parent) {
+function Q5(scope, parent, renderer) {
 	let $ = this;
 	$._q5 = true;
-	$._scope = scope;
 	$._parent = parent;
+	$._renderer = renderer || 'q2d';
 	$._preloadCount = 0;
 
 	scope ??= 'global';
@@ -17,13 +17,14 @@ function Q5(scope, parent) {
 		if (!(window.setup || window.draw)) return;
 		scope = 'global';
 	}
+	$._scope = scope;
 	let globalScope;
 	if (scope == 'global') {
 		Q5._hasGlobal = $._isGlobal = true;
 		globalScope = !Q5._nodejs ? window : global;
 	}
 
-	let p = new Proxy($, {
+	let q = new Proxy($, {
 		set: (t, p, v) => {
 			$[p] = v;
 			if ($._isGlobal) globalScope[p] = v;
@@ -41,6 +42,10 @@ function Q5(scope, parent) {
 	$._targetFrameDuration = 16.666666666666668;
 	$._frameRate = $._fps = 60;
 	$._loop = true;
+	$._hooks = {
+		postCanvas: [],
+		preRender: []
+	};
 
 	let millisStart = 0;
 	$.millis = () => performance.now() - millisStart;
@@ -48,7 +53,7 @@ function Q5(scope, parent) {
 	$.noCanvas = () => {
 		if ($.canvas?.remove) $.canvas.remove();
 		$.canvas = 0;
-		p.ctx = p.drawingContext = 0;
+		q.ctx = q.drawingContext = 0;
 	};
 
 	if (window) {
@@ -57,10 +62,10 @@ function Q5(scope, parent) {
 		$.deviceOrientation = window.screen?.orientation?.type;
 	}
 
-	$._incrementPreload = () => p._preloadCount++;
-	$._decrementPreload = () => p._preloadCount--;
+	$._incrementPreload = () => q._preloadCount++;
+	$._decrementPreload = () => q._preloadCount--;
 
-	function _draw(timestamp) {
+	$._draw = (timestamp) => {
 		let ts = timestamp || performance.now();
 		$._lastFrameTime ??= ts - $._targetFrameDuration;
 
@@ -69,44 +74,43 @@ function Q5(scope, parent) {
 			$._shouldResize = false;
 		}
 
-		if ($._loop) looper = raf(_draw);
+		if ($._loop) looper = raf($._draw);
 		else if ($.frameCount && !$._redraw) return;
 
 		if (looper && $.frameCount) {
 			let time_since_last = ts - $._lastFrameTime;
-			if (time_since_last < $._targetFrameDuration - 1) return;
+			if (time_since_last < $._targetFrameDuration - 4) return;
 		}
-		p.deltaTime = ts - $._lastFrameTime;
+		q.deltaTime = ts - $._lastFrameTime;
 		$._frameRate = 1000 / $.deltaTime;
-		p.frameCount++;
+		q.frameCount++;
 		let pre = performance.now();
-		for (let m of Q5.prototype._methods.pre) m.call($);
-		if ($.ctx) $.ctx.save();
+		if ($._beginRender) $._beginRender();
+		if ($.ctx) $.resetMatrix();
+		for (let m of Q5.methods.pre) m.call($);
 		$.draw();
-		for (let m of Q5.prototype._methods.post) m.call($);
-		if ($.ctx) {
-			$.ctx.restore();
-			$.resetMatrix();
-		}
-		p.pmouseX = $.mouseX;
-		p.pmouseY = $.mouseY;
+		if ($._render) $._render();
+		for (let m of Q5.methods.post) m.call($);
+		if ($._finishRender) $._finishRender();
+		q.pmouseX = $.mouseX;
+		q.pmouseY = $.mouseY;
 		$._lastFrameTime = ts;
 		let post = performance.now();
 		$._fps = Math.round(1000 / (post - pre));
-	}
+	};
 	$.noLoop = () => {
 		$._loop = false;
 		looper = null;
 	};
 	$.loop = () => {
 		$._loop = true;
-		if (looper == null) _draw();
+		if (looper == null) $._draw();
 	};
 	$.isLooping = () => $._loop;
 	$.redraw = (n = 1) => {
 		$._redraw = true;
 		for (let i = 0; i < n; i++) {
-			_draw();
+			$._draw();
 		}
 		$._redraw = false;
 	};
@@ -136,7 +140,12 @@ function Q5(scope, parent) {
 	$.describe = () => {};
 
 	for (let m in Q5.modules) {
-		Q5.modules[m]($, p);
+		Q5.modules[m]($, q);
+	}
+
+	let r = Q5.renderers[$._renderer];
+	for (let m in r) {
+		r[m]($, q);
 	}
 
 	// INIT
@@ -147,12 +156,14 @@ function Q5(scope, parent) {
 		}
 	}
 
+	if (scope == 'graphics') return;
+
 	if (scope == 'global') {
 		Object.assign(Q5, $);
 		delete Q5.Q5;
 	}
 
-	for (let m of Q5.prototype._methods.init) {
+	for (let m of Q5.methods.init) {
 		m.call($);
 	}
 
@@ -169,8 +180,6 @@ function Q5(scope, parent) {
 
 	if (typeof scope == 'function') scope($);
 
-	if (scope == 'graphics') return;
-
 	Q5._instanceCount++;
 
 	let raf =
@@ -218,8 +227,6 @@ function Q5(scope, parent) {
 
 	if (!($.setup || $.draw)) return;
 
-	$._startDone = false;
-
 	async function _start() {
 		$._startDone = true;
 		if ($._preloadCount > 0) return raf(_start);
@@ -229,7 +236,7 @@ function Q5(scope, parent) {
 		if ($.ctx === null) $.createCanvas(100, 100);
 		$._setupDone = true;
 		if ($.ctx) $.resetMatrix();
-		raf(_draw);
+		raf($._draw);
 	}
 
 	if ((arguments.length && scope != 'namespace') || preloadDefined) {
@@ -243,6 +250,7 @@ function Q5(scope, parent) {
 	}
 }
 
+Q5.renderers = {};
 Q5.modules = {};
 
 Q5._nodejs = typeof process == 'object';
@@ -253,13 +261,13 @@ Q5._friendlyError = (msg, func) => {
 };
 Q5._validateParameters = () => true;
 
-Q5.prototype._methods = {
+Q5.methods = {
 	init: [],
 	pre: [],
 	post: [],
 	remove: []
 };
-Q5.prototype.registerMethod = (m, fn) => Q5.prototype._methods[m].push(fn);
+Q5.prototype.registerMethod = (m, fn) => Q5.methods[m].push(fn);
 Q5.prototype.registerPreloadMethod = (n, fn) => (Q5.prototype[n] = fn[n]);
 
 if (Q5._nodejs) global.p5 ??= global.Q5 = Q5;

package/src/q5-display.js

@@ -84,4 +84,10 @@ main {
 		Object.assign(c, { displayMode, renderQuality, displayScale });
 		$._adjustDisplay();
 	};
+
+	$.fullscreen = (v) => {
+		if (v === undefined) return document.fullscreenElement;
+		if (v) document.body.requestFullscreen();
+		else document.body.exitFullscreen();
+	};
 };

package/src/q5-input.js

@@ -1,4 +1,4 @@
-Q5.modules.input = ($, p) => {
+Q5.modules.input = ($, q) => {
 	if ($._scope == 'graphics') return;
 
 	$.mouseX = 0;
@@ -42,17 +42,26 @@ Q5.modules.input = ($, p) => {
 
 	$._updateMouse = (e) => {
 		if (e.changedTouches) return;
-		let rect = $.canvas.getBoundingClientRect();
-		let sx = $.canvas.scrollWidth / $.width || 1;
-		let sy = $.canvas.scrollHeight / $.height || 1;
-		p.mouseX = (e.clientX - rect.left) / sx;
-		p.mouseY = (e.clientY - rect.top) / sy;
+		if (c) {
+			let rect = c.getBoundingClientRect();
+			let sx = c.scrollWidth / $.width || 1;
+			let sy = c.scrollHeight / $.height || 1;
+			q.mouseX = (e.clientX - rect.left) / sx;
+			q.mouseY = (e.clientY - rect.top) / sy;
+			if (c.renderer == 'webgpu') {
+				q.mouseX -= c.hw;
+				q.mouseY -= c.hh;
+			}
+		} else {
+			q.mouseX = e.clientX;
+			q.mouseY = e.clientY;
+		}
 	};
 	$._onmousedown = (e) => {
 		$._startAudio();
 		$._updateMouse(e);
-		p.mouseIsPressed = true;
-		p.mouseButton = mouseBtns[e.button];
+		q.mouseIsPressed = true;
+		q.mouseButton = mouseBtns[e.button];
 		$.mousePressed(e);
 	};
 	$._onmousemove = (e) => {
@@ -62,18 +71,15 @@ Q5.modules.input = ($, p) => {
 	};
 	$._onmouseup = (e) => {
 		$._updateMouse(e);
-		p.mouseIsPressed = false;
+		q.mouseIsPressed = false;
 		$.mouseReleased(e);
 	};
 	$._onclick = (e) => {
 		$._updateMouse(e);
-		p.mouseIsPressed = true;
+		q.mouseIsPressed = true;
 		$.mouseClicked(e);
-		p.mouseIsPressed = false;
+		q.mouseIsPressed = false;
 	};
-	c.addEventListener('mousedown', (e) => $._onmousedown(e));
-	c.addEventListener('mouseup', (e) => $._onmouseup(e));
-	c.addEventListener('click', (e) => $._onclick(e));
 
 	$.cursor = (name, x, y) => {
 		let pfx = '';
@@ -95,17 +101,17 @@ Q5.modules.input = ($, p) => {
 	$._onkeydown = (e) => {
 		if (e.repeat) return;
 		$._startAudio();
-		p.keyIsPressed = true;
-		p.key = e.key;
-		p.keyCode = e.keyCode;
+		q.keyIsPressed = true;
+		q.key = e.key;
+		q.keyCode = e.keyCode;
 		keysHeld[$.keyCode] = keysHeld[$.key.toLowerCase()] = true;
 		$.keyPressed(e);
 		if (e.key.length == 1) $.keyTyped(e);
 	};
 	$._onkeyup = (e) => {
-		p.keyIsPressed = false;
-		p.key = e.key;
-		p.keyCode = e.keyCode;
+		q.keyIsPressed = false;
+		q.key = e.key;
+		q.keyCode = e.keyCode;
 		keysHeld[$.keyCode] = keysHeld[$.key.toLowerCase()] = false;
 		$.keyReleased(e);
 	};
@@ -123,37 +129,43 @@ Q5.modules.input = ($, p) => {
 	}
 	$._ontouchstart = (e) => {
 		$._startAudio();
-		p.touches = [...e.touches].map(getTouchInfo);
+		q.touches = [...e.touches].map(getTouchInfo);
 		if (!$._isTouchAware) {
-			p.mouseX = $.touches[0].x;
-			p.mouseY = $.touches[0].y;
-			p.mouseIsPressed = true;
-			p.mouseButton = $.LEFT;
+			q.mouseX = $.touches[0].x;
+			q.mouseY = $.touches[0].y;
+			q.mouseIsPressed = true;
+			q.mouseButton = $.LEFT;
 			if (!$.mousePressed(e)) e.preventDefault();
 		}
 		if (!$.touchStarted(e)) e.preventDefault();
 	};
 	$._ontouchmove = (e) => {
-		p.touches = [...e.touches].map(getTouchInfo);
+		q.touches = [...e.touches].map(getTouchInfo);
 		if (!$._isTouchAware) {
-			p.mouseX = $.touches[0].x;
-			p.mouseY = $.touches[0].y;
+			q.mouseX = $.touches[0].x;
+			q.mouseY = $.touches[0].y;
 			if (!$.mouseDragged(e)) e.preventDefault();
 		}
 		if (!$.touchMoved(e)) e.preventDefault();
 	};
 	$._ontouchend = (e) => {
-		p.touches = [...e.touches].map(getTouchInfo);
+		q.touches = [...e.touches].map(getTouchInfo);
 		if (!$._isTouchAware && !$.touches.length) {
-			p.mouseIsPressed = false;
+			q.mouseIsPressed = false;
 			if (!$.mouseReleased(e)) e.preventDefault();
 		}
 		if (!$.touchEnded(e)) e.preventDefault();
 	};
-	c.addEventListener('touchstart', (e) => $._ontouchstart(e));
-	c.addEventListener('touchmove', (e) => $._ontouchmove(e));
-	c.addEventListener('touchcancel', (e) => $._ontouchend(e));
-	c.addEventListener('touchend', (e) => $._ontouchend(e));
+
+	if (c) {
+		c.addEventListener('mousedown', (e) => $._onmousedown(e));
+		c.addEventListener('mouseup', (e) => $._onmouseup(e));
+		c.addEventListener('click', (e) => $._onclick(e));
+		c.addEventListener('touchstart', (e) => $._ontouchstart(e));
+		c.addEventListener('touchmove', (e) => $._ontouchmove(e));
+		c.addEventListener('touchcancel', (e) => $._ontouchend(e));
+		c.addEventListener('touchend', (e) => $._ontouchend(e));
+	}
 
 	if (window) {
 		let l = window.addEventListener;