q5 1.9.21 → 1.9.46

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

@@ -0,0 +1,216 @@
+Q5.modules.q2d_text = ($) => {
+	$.NORMAL = 'normal';
+	$.ITALIC = 'italic';
+	$.BOLD = 'bold';
+	$.BOLDITALIC = 'italic bold';
+
+	$.CENTER = 'center';
+	$.LEFT = 'left';
+	$.RIGHT = 'right';
+	$.TOP = 'top';
+	$.BOTTOM = 'bottom';
+	$.BASELINE = 'alphabetic';
+
+	$._textFont = 'sans-serif';
+	$._textSize = 12;
+	$._textLeading = 15;
+	$._textLeadDiff = 3;
+	$._textStyle = 'normal';
+
+	$.loadFont = (url, cb) => {
+		$._preloadCount++;
+		let sp = url.split('/');
+		let name = sp[sp.length - 1].split('.')[0].replace(' ', '');
+		let f = new FontFace(name, 'url(' + url + ')');
+		document.fonts.add(f);
+		f.load().then(() => {
+			$._preloadCount--;
+			if (cb) cb(name);
+		});
+		return name;
+	};
+	$.textFont = (x) => ($._textFont = x);
+	$.textSize = (x) => {
+		if (x === undefined) return $._textSize;
+		if ($._da) x *= $._da;
+		$._textSize = x;
+		if (!$._leadingSet) {
+			$._textLeading = x * 1.25;
+			$._textLeadDiff = $._textLeading - x;
+		}
+	};
+	$.textLeading = (x) => {
+		if (x === undefined) return $._textLeading;
+		if ($._da) x *= $._da;
+		$._textLeading = x;
+		$._textLeadDiff = x - $._textSize;
+		$._leadingSet = true;
+	};
+	$.textStyle = (x) => ($._textStyle = x);
+	$.textAlign = (horiz, vert) => {
+		$.ctx.textAlign = horiz;
+		if (vert) {
+			$.ctx.textBaseline = vert == $.CENTER ? 'middle' : vert;
+		}
+	};
+	$.textWidth = (str) => {
+		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		return $.ctx.measureText(str).width;
+	};
+	$.textAscent = (str) => {
+		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		return $.ctx.measureText(str).actualBoundingBoxAscent;
+	};
+	$.textDescent = (str) => {
+		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		return $.ctx.measureText(str).actualBoundingBoxDescent;
+	};
+	$._textCache = true;
+	$._TimedCache = class extends Map {
+		constructor() {
+			super();
+			this.maxSize = 500;
+		}
+		set(k, v) {
+			v.lastAccessed = Date.now();
+			super.set(k, v);
+			if (this.size > this.maxSize) this.gc();
+		}
+		get(k) {
+			const v = super.get(k);
+			if (v) v.lastAccessed = Date.now();
+			return v;
+		}
+		gc() {
+			let t = Infinity;
+			let oldest;
+			let i = 0;
+			for (const [k, v] of this.entries()) {
+				if (v.lastAccessed < t) {
+					t = v.lastAccessed;
+					oldest = i;
+				}
+				i++;
+			}
+			i = oldest;
+			for (const k of this.keys()) {
+				if (i == 0) {
+					oldest = k;
+					break;
+				}
+				i--;
+			}
+			this.delete(oldest);
+		}
+	};
+	$._tic = new $._TimedCache();
+	$.textCache = (b, maxSize) => {
+		if (maxSize) $._tic.maxSize = maxSize;
+		if (b !== undefined) $._textCache = b;
+		return $._textCache;
+	};
+	$._genTextImageKey = (str, w, h) => {
+		return (
+			str.slice(0, 200) +
+			$._textStyle +
+			$._textSize +
+			$._textFont +
+			($._doFill ? $.ctx.fillStyle : '') +
+			'_' +
+			($._doStroke && $._strokeSet ? $.ctx.lineWidth + $.ctx.strokeStyle + '_' : '') +
+			(w || '') +
+			(h ? 'x' + h : '')
+		);
+	};
+	$.createTextImage = (str, w, h) => {
+		let og = $._textCache;
+		$._textCache = true;
+		$._genTextImage = true;
+		$.text(str, 0, 0, w, h);
+		$._genTextImage = false;
+		let k = $._genTextImageKey(str, w, h);
+		$._textCache = og;
+		return $._tic.get(k);
+	};
+	$.text = (str, x, y, w, h) => {
+		if (str === undefined) return;
+		str = str.toString();
+		if ($._da) {
+			x *= $._da;
+			y *= $._da;
+		}
+		if (!$._doFill && !$._doStroke) return;
+		let c, ti, tg, k, cX, cY, _ascent, _descent;
+		let pd = 1;
+		let t = $.ctx.getTransform();
+		let useCache = $._genTextImage || ($._textCache && (t.b != 0 || t.c != 0));
+		if (!useCache) {
+			c = $.ctx;
+			cX = x;
+			cY = y;
+		} else {
+			k = $._genTextImageKey(str, w, h);
+			ti = $._tic.get(k);
+			if (ti && !$._genTextImage) {
+				$.textImage(ti, x, y);
+				return;
+			}
+			tg = $.createGraphics.call($, 1, 1);
+			c = tg.ctx;
+			pd = $._pixelDensity;
+		}
+		c.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		let lines = str.split('\n');
+		if (useCache) {
+			cX = 0;
+			cY = $._textLeading * lines.length;
+			let m = c.measureText(' ');
+			_ascent = m.fontBoundingBoxAscent;
+			_descent = m.fontBoundingBoxDescent;
+			h ??= cY + _descent;
+			tg.resizeCanvas(Math.ceil(c.measureText(str).width), Math.ceil(h));
+
+			c.fillStyle = $.ctx.fillStyle;
+			c.strokeStyle = $.ctx.strokeStyle;
+			c.lineWidth = $.ctx.lineWidth;
+		}
+		let f = c.fillStyle;
+		if (!$._fillSet) c.fillStyle = 'black';
+		for (let i = 0; i < lines.length; i++) {
+			if ($._doStroke && $._strokeSet) c.strokeText(lines[i], cX, cY);
+			if ($._doFill) c.fillText(lines[i], cX, cY);
+			cY += $._textLeading;
+			if (cY > h) break;
+		}
+		if (!$._fillSet) c.fillStyle = f;
+		if (useCache) {
+			ti = tg.get();
+			ti._ascent = _ascent;
+			ti._descent = _descent;
+			$._tic.set(k, ti);
+			if (!$._genTextImage) $.textImage(ti, x, y);
+		}
+	};
+	$.textImage = (img, x, y) => {
+		let og = $._imageMode;
+		$._imageMode = 'corner';
+		if ($.ctx.textAlign == 'center') x -= img.width * 0.5;
+		else if ($.ctx.textAlign == 'right') x -= img.width;
+		if ($.ctx.textBaseline == 'alphabetic') y -= $._textLeading;
+		if ($.ctx.textBaseline == 'middle') y -= img._descent + img._ascent * 0.5 + $._textLeadDiff;
+		else if ($.ctx.textBaseline == 'bottom') y -= img._ascent + img._descent + $._textLeadDiff;
+		else if ($.ctx.textBaseline == 'top') y -= img._descent + $._textLeadDiff;
+		$.image(img, x, y);
+		$._imageMode = og;
+	};
+
+	$.nf = (n, l, r) => {
+		let neg = n < 0;
+		n = Math.abs(n);
+		let parts = n.toFixed(r).split('.');
+		parts[0] = parts[0].padStart(l, '0');
+		let s = parts.join('.');
+		if (neg) s = '-' + s;
+		return s;
+	};
+};

package/src/q5-ai.js

@@ -0,0 +1,65 @@
+Q5.modules.ai = ($) => {
+	$.askAI = (q = '') => {
+		throw Error('Ask AI ✨ ' + q);
+	};
+
+	$._aiErrorAssistance = async (e) => {
+		let askAI = e.message.includes('Ask AI ✨');
+		if (!askAI) console.error(e);
+		if (Q5.disableFriendlyErrors) return;
+		if (askAI || !Q5.errorTolerant) noLoop();
+		let stackLines = e.stack.split('\n');
+		if (stackLines.length <= 1) return;
+
+		let idx = 1;
+		let sep = '(';
+		if (navigator.userAgent.indexOf('Chrome') == -1) {
+			idx = 0;
+			sep = '@';
+		}
+		while (stackLines[idx].indexOf('q5.js:') >= 0) idx++;
+
+		let parts = stackLines[idx].split(sep).at(-1);
+		parts = parts.split(':');
+		let lineNum = parseInt(parts.at(-2));
+		if (askAI) lineNum++;
+		let fileUrl = parts.slice(0, -2).join(':');
+		let fileBase = fileUrl.split('/').at(-1);
+
+		try {
+			let res = await (await fetch(fileUrl)).text();
+			let lines = res.split('\n');
+			let errLine = lines[lineNum - 1].trim();
+
+			let context = '';
+			let i = 1;
+			while (context.length < 1600) {
+				if (lineNum - i >= 0) {
+					context = lines[lineNum - i].trim() + '\n' + context;
+				}
+				if (lineNum + i < lines.length) {
+					context += lines[lineNum + i].trim() + '\n';
+				} else break;
+				i++;
+			}
+
+			let question =
+				askAI && e.message.length > 10 ? e.message.slice(10) : 'Whats+wrong+with+this+line%3F+short+answer';
+
+			let url =
+				'https://chatgpt.com/?q=q5.js+' +
+				question +
+				(askAI ? '' : '%0A%0A' + encodeURIComponent(e.name + ': ' + e.message)) +
+				'%0A%0ALine%3A+' +
+				encodeURIComponent(errLine) +
+				'%0A%0AExcerpt+for+context%3A%0A%0A' +
+				encodeURIComponent(context);
+
+			if (!askAI) console.log('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
+
+			console.warn('Ask AI ✨ ' + url);
+
+			if (askAI) window.open(url, '_blank');
+		} catch (err) {}
+	};
+};

package/src/q5-color.js

@@ -0,0 +1,202 @@
+Q5.modules.color = ($) => {
+	$.RGB = $.RGBA = $._colorMode = 'rgb';
+
+	if (Q5.supportsHDR) $.Color = Q5.ColorRGBA_P3;
+	else $.Color = Q5.ColorRGBA;
+
+	$.colorMode = (mode) => {
+		$._colorMode = mode;
+		if (mode == 'oklch') {
+			$.Color = Q5.ColorOKLCH;
+		} else if (mode == 'rgb') {
+			if ($.canvas.colorSpace == 'srgb') $.Color = Q5.ColorRGBA;
+			else $.Color = Q5.ColorRGBA_P3;
+		} else if (mode == 'srgb') {
+			$.Color = Q5.ColorRGBA;
+			$._colorMode = 'rgb';
+		}
+	};
+
+	$._basicColors = {
+		aqua: [0, 255, 255],
+		black: [0, 0, 0],
+		blue: [0, 0, 255],
+		brown: [165, 42, 42],
+		crimson: [220, 20, 60],
+		cyan: [0, 255, 255],
+		darkviolet: [148, 0, 211],
+		gold: [255, 215, 0],
+		green: [0, 128, 0],
+		gray: [128, 128, 128],
+		grey: [128, 128, 128],
+		hotpink: [255, 105, 180],
+		indigo: [75, 0, 130],
+		khaki: [240, 230, 140],
+		lightgreen: [144, 238, 144],
+		lime: [0, 255, 0],
+		magenta: [255, 0, 255],
+		navy: [0, 0, 128],
+		orange: [255, 165, 0],
+		olive: [128, 128, 0],
+		peachpuff: [255, 218, 185],
+		pink: [255, 192, 203],
+		purple: [128, 0, 128],
+		red: [255, 0, 0],
+		skyblue: [135, 206, 235],
+		tan: [210, 180, 140],
+		turquoise: [64, 224, 208],
+		transparent: [0, 0, 0, 0],
+		white: [255, 255, 255],
+		violet: [238, 130, 238],
+		yellow: [255, 255, 0]
+	};
+
+	$.color = function (c0, c1, c2, c3) {
+		let C = $.Color;
+		if (c0._q5Color) return new C(...c0.levels);
+		let args = arguments;
+		if (args.length == 1) {
+			if (typeof c0 == 'string') {
+				if (c0[0] == '#') {
+					return new C(
+						parseInt(c0.slice(1, 3), 16),
+						parseInt(c0.slice(3, 5), 16),
+						parseInt(c0.slice(5, 7), 16),
+						c0.length != 9 ? null : parseInt(c0.slice(7, 9), 16)
+					);
+				} else if ($._basicColors[c0]) return new C(...$._basicColors[c0]);
+				else return new C(0, 0, 0);
+			} else if (Array.isArray(c0)) return new C(...c0);
+		}
+		if ($._colorMode == 'rgb') {
+			if (args.length == 1) return new C(c0, c0, c0);
+			else if (args.length == 2) return new C(c0, c0, c0, c1);
+			else if (args.length == 3) return new C(c0, c1, c2);
+			else if (args.length == 4) return new C(c0, c1, c2, c3);
+		}
+	};
+
+	$.red = (c) => c.r;
+	$.green = (c) => c.g;
+	$.blue = (c) => c.b;
+	$.alpha = (c) => c.a;
+	$.lightness = (c) => {
+		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
+	};
+
+	$.lerpColor = (a, b, t) => {
+		if ($._colorMode == 'rgb') {
+			return new $.Color(
+				$.constrain($.lerp(a.r, b.r, t), 0, 255),
+				$.constrain($.lerp(a.g, b.g, t), 0, 255),
+				$.constrain($.lerp(a.b, b.b, t), 0, 255),
+				$.constrain($.lerp(a.a, b.a, t), 0, 255)
+			);
+		} else {
+			let deltaH = b.h - a.h;
+			if (deltaH > 180) deltaH -= 360;
+			if (deltaH < -180) deltaH += 360;
+			let h = a.h + t * deltaH;
+			if (h < 0) h += 360;
+			if (h > 360) h -= 360;
+			return new $.Color(
+				$.constrain($.lerp(a.l, b.l, t), 0, 100),
+				$.constrain($.lerp(a.c, b.c, t), 0, 100),
+				h,
+				$.constrain($.lerp(a.a, b.a, t), 0, 255)
+			);
+		}
+	};
+};
+
+// COLOR CLASSES
+
+Q5.Color = class {
+	constructor() {
+		this._q5Color = true;
+	}
+};
+Q5.ColorOKLCH = class extends Q5.Color {
+	constructor(l, c, h, a) {
+		super();
+		this.l = l;
+		this.c = c;
+		this.h = h;
+		this.a = a ?? 1;
+	}
+	toString() {
+		return `color(oklch ${this.l} ${this.c} ${this.h} / ${this.a})`;
+	}
+};
+Q5.ColorRGBA = class extends Q5.Color {
+	constructor(r, g, b, a) {
+		super();
+		this.r = r;
+		this.g = g;
+		this.b = b;
+		this.a = a ?? 255;
+	}
+	setRed(v) {
+		this.r = v;
+	}
+	setGreen(v) {
+		this.g = v;
+	}
+	setBlue(v) {
+		this.b = v;
+	}
+	setAlpha(v) {
+		this.a = v;
+	}
+	get levels() {
+		return [this.r, this.g, this.b, this.a];
+	}
+	toString() {
+		return `rgb(${this.r} ${this.g} ${this.b} / ${this.a / 255})`;
+	}
+};
+Q5.ColorRGBA_P3 = class extends Q5.ColorRGBA {
+	constructor(r, g, b, a) {
+		super(r, g, b, a);
+		this._edited = true;
+	}
+	get r() {
+		return this._r;
+	}
+	set r(v) {
+		this._r = v;
+		this._edited = true;
+	}
+	get g() {
+		return this._g;
+	}
+	set g(v) {
+		this._g = v;
+		this._edited = true;
+	}
+	get b() {
+		return this._b;
+	}
+	set b(v) {
+		this._b = v;
+		this._edited = true;
+	}
+	get a() {
+		return this._a;
+	}
+	set a(v) {
+		this._a = v;
+		this._edited = true;
+	}
+	toString() {
+		if (this._edited) {
+			let r = (this._r / 255).toFixed(3);
+			let g = (this._g / 255).toFixed(3);
+			let b = (this._b / 255).toFixed(3);
+			let a = (this._a / 255).toFixed(3);
+			this._css = `color(display-p3 ${r} ${g} ${b} / ${a})`;
+			this._edited = false;
+		}
+		return this._css;
+	}
+};