q5 2.0.17 → 2.1.0

package/src/q5-2d-image.js

@@ -1,4 +1,29 @@
-Q5.modules.q2d_image = ($, p) => {
+Q5.renderers.q2d.image = ($, q) => {
+	class Q5Image {
+		constructor(w, h, opt) {
+			let $ = this;
+			$._scope = 'image';
+			$.canvas = $.ctx = $.drawingContext = null;
+			$.pixels = [];
+			Q5.modules.canvas($, $);
+			let r = Q5.renderers.q2d;
+			for (let m of ['canvas', 'image', 'soft_filters']) {
+				if (r[m]) r[m]($, $);
+			}
+			$.createCanvas(w, h, opt);
+			delete $.createCanvas;
+			$._loop = false;
+		}
+		get w() {
+			return this.width;
+		}
+		get h() {
+			return this.height;
+		}
+	}
+
+	Q5.Image ??= Q5Image;
+
 	$.createImage = (w, h, opt) => {
 		opt ??= {};
 		opt.alpha ??= true;
@@ -6,115 +31,145 @@ Q5.modules.q2d_image = ($, p) => {
 		return new Q5.Image(w, h, opt);
 	};
 
-	$._tint = null;
-	let imgData = null;
-	let tmpCtx = null;
-	let tmpCt2 = null;
+	$.loadImage = function (url, cb, opt) {
+		if (url.canvas) return url;
+		if (url.slice(-3).toLowerCase() == 'gif') {
+			throw new Error(`q5 doesn't support GIFs due to their impact on performance. Use a video or animation instead.`);
+		}
+		q._preloadCount++;
+		let last = [...arguments].at(-1);
+		opt = typeof last == 'object' ? last : null;
 
-	function makeTmpCtx(w, h) {
-		h ??= w || $.canvas.height;
-		w ??= $.canvas.width;
-		if (tmpCtx == null) {
-			tmpCtx = new $._OffscreenCanvas(w, h).getContext('2d', {
-				colorSpace: $.canvas.colorSpace
-			});
+		let g = $.createImage(1, 1, opt);
+
+		function loaded(img) {
+			g.resize(img.naturalWidth || img.width, img.naturalHeight || img.height);
+			g.ctx.drawImage(img, 0, 0);
+			q._preloadCount--;
+			if (cb) cb(g);
 		}
-		if (tmpCtx.canvas.width != w || tmpCtx.canvas.height != h) {
-			tmpCtx.canvas.width = w;
-			tmpCtx.canvas.height = h;
+
+		if (Q5._nodejs && global.CairoCanvas) {
+			global.CairoCanvas.loadImage(url)
+				.then(loaded)
+				.catch((e) => {
+					q._preloadCount--;
+					throw e;
+				});
+		} else {
+			let img = new window.Image();
+			img.src = url;
+			img.crossOrigin = 'Anonymous';
+			img._pixelDensity = 1;
+			img.onload = () => loaded(img);
+			img.onerror = (e) => {
+				q._preloadCount--;
+				throw e;
+			};
 		}
-	}
+		return g;
+	};
 
-	function makeTmpCt2(w, h) {
-		h ??= w || $.canvas.height;
-		w ??= $.canvas.width;
-		if (tmpCt2 == null) {
-			tmpCt2 = new $._OffscreenCanvas(w, h).getContext('2d', {
-				colorSpace: $.canvas.colorSpace
-			});
+	$.imageMode = (mode) => ($._imageMode = mode);
+	$.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
+		let drawable = img.canvas || img;
+		if (Q5._createNodeJSCanvas) {
+			drawable = drawable.context.canvas;
 		}
-		if (tmpCt2.canvas.width != w || tmpCt2.canvas.height != h) {
-			tmpCt2.canvas.width = w;
-			tmpCt2.canvas.height = h;
+		dw ??= img.width || img.videoWidth;
+		dh ??= img.height || img.videoHeight;
+		if ($._imageMode == 'center') {
+			dx -= dw * 0.5;
+			dy -= dh * 0.5;
 		}
-	}
+		if ($._da) {
+			dx *= $._da;
+			dy *= $._da;
+			dw *= $._da;
+			dh *= $._da;
+			sx *= $._da;
+			sy *= $._da;
+			sw *= $._da;
+			sh *= $._da;
+		}
+		let pd = img._pixelDensity || 1;
+		if (!sw) {
+			sw = drawable.width || drawable.videoWidth;
+		} else sw *= pd;
+		if (!sh) {
+			sh = drawable.height || drawable.videoHeight;
+		} else sh *= pd;
+		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
+
+		if ($._tint) {
+			$.ctx.globalCompositeOperation = 'multiply';
+			$.ctx.fillStyle = $._tint.toString();
+			$.ctx.fillRect(dx, dy, dw, dh);
+			$.ctx.globalCompositeOperation = 'source-over';
+		}
+	};
+
+	$._tint = null;
+	let imgData = null;
 
 	$._softFilter = () => {
-		throw 'Load q5-2d-soft-filters.js to use software filters.';
+		throw new Error('Load q5-2d-soft-filters.js to use software filters.');
 	};
 
-	function nativeFilter(filt) {
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.filter = filt;
-		tmpCtx.drawImage($.canvas, 0, 0);
-		$.ctx.save();
-		$.ctx.resetTransform();
-		$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
-		$.ctx.drawImage(tmpCtx.canvas, 0, 0);
-		$.ctx.restore();
-	}
+	$.filter = (type, x) => {
+		if (!$.ctx.filter) return $._softFilter(type, x);
 
-	$.filter = (typ, x) => {
-		if (!$.ctx.filter) return $._softFilter(typ, x);
-		makeTmpCtx();
-		if (typeof typ == 'string') {
-			nativeFilter(typ);
-		} else if (typ == Q5.THRESHOLD) {
+		if (typeof type == 'string') f = type;
+		else if (type == Q5.GRAY) f = `saturate(0%)`;
+		else if (type == Q5.INVERT) f = `invert(100%)`;
+		else if (type == Q5.BLUR) {
+			let r = Math.ceil(x * $._pixelDensity) || 1;
+			f = `blur(${r}px)`;
+		} else if (type == Q5.THRESHOLD) {
 			x ??= 0.5;
-			x = Math.max(x, 0.00001);
-			let b = Math.floor((0.5 / x) * 100);
-			nativeFilter(`saturate(0%) brightness(${b}%) contrast(1000000%)`);
-		} else if (typ == Q5.GRAY) {
-			nativeFilter(`saturate(0%)`);
-		} else if (typ == Q5.OPAQUE) {
-			tmpCtx.fillStyle = 'black';
-			tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-			tmpCtx.drawImage($.canvas, 0, 0);
-			$.ctx.save();
-			$.ctx.resetTransform();
-			$.ctx.drawImage(tmpCtx.canvas, 0, 0);
-			$.ctx.restore();
-		} else if (typ == Q5.INVERT) {
-			nativeFilter(`invert(100%)`);
-		} else if (typ == Q5.BLUR) {
-			nativeFilter(`blur(${Math.ceil((x * $._pixelDensity) / 1) || 1}px)`);
-		} else {
-			$._softFilter(typ, x);
-		}
-	};
+			let b = Math.floor((0.5 / Math.max(x, 0.00001)) * 100);
+			f = `saturate(0%) brightness(${b}%) contrast(1000000%)`;
+		} else return $._softFilter(type, x);
 
-	$.resize = (w, h) => {
-		makeTmpCtx();
-		tmpCtx.drawImage($.canvas, 0, 0);
-		p.width = w;
-		p.height = h;
-		$.canvas.width = w * $._pixelDensity;
-		$.canvas.height = h * $._pixelDensity;
-		$.ctx.save();
-		$.ctx.resetTransform();
-		$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
-		$.ctx.drawImage(tmpCtx.canvas, 0, 0, $.canvas.width, $.canvas.height);
-		$.ctx.restore();
+		$.ctx.filter = f;
+		$.ctx.drawImage($.canvas, 0, 0, $.canvas.w, $.canvas.h);
+		$.ctx.filter = 'none';
 	};
 
+	if ($._scope == 'image') {
+		$.resize = (w, h) => {
+			let o = new $._OffscreenCanvas($.canvas.width, $.canvas.height);
+			let tmpCtx = o.getContext('2d', {
+				colorSpace: $.canvas.colorSpace
+			});
+			tmpCtx.drawImage($.canvas, 0, 0);
+			$._setCanvasSize(w, h);
+
+			$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
+			$.ctx.drawImage(o, 0, 0, $.canvas.width, $.canvas.height);
+		};
+	}
+
 	$.trim = () => {
 		let pd = $._pixelDensity || 1;
-		let imgData = $.ctx.getImageData(0, 0, $.width * pd, $.height * pd);
-		let data = imgData.data;
-		let left = $.width,
+		let w = $.canvas.width;
+		let h = $.canvas.height;
+		let data = $.ctx.getImageData(0, 0, w, h).data;
+		let left = w,
 			right = 0,
-			top = $.height,
+			top = h,
 			bottom = 0;
 
-		for (let y = 0; y < $.height * pd; y++) {
-			for (let x = 0; x < $.width * pd; x++) {
-				let index = (y * $.width * pd + x) * 4;
-				if (data[index + 3] !== 0) {
+		let i = 3;
+		for (let y = 0; y < h; y++) {
+			for (let x = 0; x < w; x++) {
+				if (data[i] !== 0) {
 					if (x < left) left = x;
 					if (x > right) right = x;
 					if (y < top) top = y;
 					if (y > bottom) bottom = y;
 				}
+				i += 4;
 			}
 		}
 		top = Math.floor(top / pd);
@@ -135,48 +190,6 @@ Q5.modules.q2d_image = ($, p) => {
 		$.ctx.restore();
 	};
 
-	$._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);
-	};
-
 	$.get = (x, y, w, h) => {
 		let pd = $._pixelDensity || 1;
 		if (x !== undefined && w === undefined) {
@@ -221,174 +234,23 @@ Q5.modules.q2d_image = ($, p) => {
 
 	$.loadPixels = () => {
 		imgData = $.ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
-		p.pixels = imgData.data;
+		q.pixels = imgData.data;
 	};
 	$.updatePixels = () => {
 		if (imgData != null) $.ctx.putImageData(imgData, 0, 0);
 	};
 
-	$._tinted = function (col) {
-		let alpha = col.a;
-		col.a = 255;
-		makeTmpCtx();
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.fillStyle = col.toString();
-		tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.globalCompositeOperation = 'multiply';
-		tmpCtx.drawImage($.ctx.canvas, 0, 0);
-		tmpCtx.globalCompositeOperation = 'source-over';
-
-		$.ctx.save();
-		$.ctx.resetTransform();
-		let old = $.ctx.globalCompositeOperation;
-		$.ctx.globalCompositeOperation = 'source-in';
-		$.ctx.drawImage(tmpCtx.canvas, 0, 0);
-		$.ctx.globalCompositeOperation = old;
-		$.ctx.restore();
-
-		tmpCtx.globalAlpha = alpha / 255;
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.drawImage($.ctx.canvas, 0, 0);
-		tmpCtx.globalAlpha = 1;
-
-		$.ctx.save();
-		$.ctx.resetTransform();
-		$.ctx.clearRect(0, 0, $.ctx.canvas.width, $.ctx.canvas.height);
-		$.ctx.drawImage(tmpCtx.canvas, 0, 0);
-		$.ctx.restore();
-	};
-
 	$.smooth = () => ($.ctx.imageSmoothingEnabled = true);
 	$.noSmooth = () => ($.ctx.imageSmoothingEnabled = false);
 
 	if ($._scope == 'image') return;
 
-	$.saveCanvas = $.canvas.save = $.save;
-
 	$.tint = function (c) {
 		$._tint = c._q5Color ? c : $.color(...arguments);
 	};
 	$.noTint = () => ($._tint = null);
-
-	// IMAGING
-
-	$.imageMode = (mode) => ($._imageMode = mode);
-	$.image = (img, dx, dy, dWidth, dHeight, sx = 0, sy = 0, sWidth, sHeight) => {
-		if ($._da) {
-			dx *= $._da;
-			dy *= $._da;
-			dWidth *= $._da;
-			dHeight *= $._da;
-			sx *= $._da;
-			sy *= $._da;
-			sWidth *= $._da;
-			sHeight *= $._da;
-		}
-		let drawable = img.canvas || img;
-		if (Q5._createNodeJSCanvas) {
-			drawable = drawable.context.canvas;
-		}
-		function reset() {
-			if (!img._q5 || !$._tint) return;
-			let c = img.ctx;
-			c.save();
-			c.resetTransform();
-			c.clearRect(0, 0, c.canvas.width, c.canvas.height);
-			c.drawImage(tmpCt2.canvas, 0, 0);
-			c.restore();
-		}
-		if (img.canvas && $._tint != null) {
-			makeTmpCt2(img.canvas.width, img.canvas.height);
-			tmpCt2.drawImage(img.canvas, 0, 0);
-			img._tinted($._tint);
-		}
-		dWidth ??= img.width || img.videoWidth;
-		dHeight ??= img.height || img.videoHeight;
-		if ($._imageMode == 'center') {
-			dx -= dWidth * 0.5;
-			dy -= dHeight * 0.5;
-		}
-		let pd = img._pixelDensity || 1;
-		if (!sWidth) {
-			sWidth = drawable.width || drawable.videoWidth;
-		} else sWidth *= pd;
-		if (!sHeight) {
-			sHeight = drawable.height || drawable.videoHeight;
-		} else sHeight *= pd;
-		$.ctx.drawImage(drawable, sx * pd, sy * pd, sWidth, sHeight, dx, dy, dWidth, dHeight);
-		reset();
-	};
-
-	$.loadImage = function (url, cb, opt) {
-		if (url.canvas) return url;
-		if (url.slice(-3).toLowerCase() == 'gif') {
-			throw new Error(`q5 doesn't support GIFs due to their impact on performance. Use a video or animation instead.`);
-		}
-		p._preloadCount++;
-		let last = [...arguments].at(-1);
-		opt = typeof last == 'object' ? last : null;
-
-		let g = $.createImage(1, 1, opt);
-
-		function loaded(img) {
-			let c = g.ctx;
-			g.width = c.canvas.width = img.naturalWidth || img.width;
-			g.height = c.canvas.height = img.naturalHeight || img.height;
-			c.drawImage(img, 0, 0);
-			p._preloadCount--;
-			if (cb) cb(g);
-		}
-
-		if (Q5._nodejs && global.CairoCanvas) {
-			global.CairoCanvas.loadImage(url)
-				.then(loaded)
-				.catch((e) => {
-					p._preloadCount--;
-					throw e;
-				});
-		} else {
-			let img = new window.Image();
-			img.src = url;
-			img.crossOrigin = 'Anonymous';
-			img._pixelDensity = 1;
-			img.onload = () => loaded(img);
-			img.onerror = (e) => {
-				p._preloadCount--;
-				throw e;
-			};
-		}
-		return g;
-	};
 };
 
-// IMAGE CLASS
-
-Q5.imageModules = ['q2d_canvas', 'q2d_image'];
-
-class _Q5Image {
-	constructor(w, h, opt) {
-		let $ = this;
-		$._scope = 'image';
-		$.canvas = $.ctx = $.drawingContext = null;
-		$.pixels = [];
-		for (let m of Q5.imageModules) {
-			Q5.modules[m]($, $);
-		}
-		delete this.createCanvas;
-
-		this._createCanvas(w, h, '2d', opt);
-		this._loop = false;
-	}
-	get w() {
-		return this.width;
-	}
-	get h() {
-		return this.height;
-	}
-}
-
-Q5.Image ??= _Q5Image;
-
 Q5.THRESHOLD = 1;
 Q5.GRAY = 2;
 Q5.OPAQUE = 3;

package/src/q5-2d-soft-filters.js

@@ -1,10 +1,10 @@
 /* software implementation of image filters */
-Q5.modules.q2d_soft_filters = ($) => {
+Q5.renderers.q2d.soft_filters = ($) => {
 	let tmpBuf = null;
 
-	function makeTmpBuf() {
+	function ensureTmpBuf() {
 		let l = $.canvas.width * $.canvas.height * 4;
-		if (!tmpBuf || l != tmpBuf.length) {
+		if (!tmpBuf || tmpBuf.length != l) {
 			tmpBuf = new Uint8ClampedArray(l);
 		}
 	}
@@ -46,7 +46,7 @@ Q5.modules.q2d_soft_filters = ($) => {
 			}
 		};
 		$._filters[Q5.DILATE] = (data) => {
-			makeTmpBuf();
+			ensureTmpBuf();
 			tmpBuf.set(data);
 			let [w, h] = [$.canvas.width, $.canvas.height];
 			for (let i = 0; i < h; i++) {
@@ -73,7 +73,7 @@ Q5.modules.q2d_soft_filters = ($) => {
 			}
 		};
 		$._filters[Q5.ERODE] = (data) => {
-			makeTmpBuf();
+			ensureTmpBuf();
 			tmpBuf.set(data);
 			let [w, h] = [$.canvas.width, $.canvas.height];
 			for (let i = 0; i < h; i++) {
@@ -102,7 +102,7 @@ Q5.modules.q2d_soft_filters = ($) => {
 		$._filters[Q5.BLUR] = (data, rad) => {
 			rad = rad || 1;
 			rad = Math.floor(rad * $._pixelDensity);
-			makeTmpBuf();
+			ensureTmpBuf();
 			tmpBuf.set(data);
 
 			let ksize = rad * 2 + 1;

package/src/q5-2d-text.js

@@ -1,4 +1,4 @@
-Q5.modules.q2d_text = ($, p) => {
+Q5.renderers.q2d.text = ($, q) => {
 	$.NORMAL = 'normal';
 	$.ITALIC = 'italic';
 	$.BOLD = 'bold';
@@ -18,12 +18,12 @@ Q5.modules.q2d_text = ($, p) => {
 	$._textStyle = 'normal';
 
 	$.loadFont = (url, cb) => {
-		p._preloadCount++;
+		q._preloadCount++;
 		let name = url.split('/').pop().split('.')[0].replace(' ', '');
 		let f = new FontFace(name, `url(${url})`);
 		document.fonts.add(f);
 		f.load().then(() => {
-			p._preloadCount--;
+			q._preloadCount--;
 			if (cb) cb(name);
 		});
 		return name;

package/src/q5-ai.js

@@ -1,6 +1,6 @@
 Q5.modules.ai = ($) => {
-	$.askAI = (q = '') => {
-		throw Error('Ask AI ✨ ' + q);
+	$.askAI = (question = '') => {
+		throw Error('Ask AI ✨ ' + question);
 	};
 
 	$._aiErrorAssistance = async (e) => {