q5 2.14.3 → 2.14.5

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

@@ -1,279 +0,0 @@
-Q5.renderers.q2d.text = ($, q) => {
-	$._textAlign = 'left';
-	$._textBaseline = 'alphabetic';
-	$._textSize = 12;
-
-	let font = 'sans-serif',
-		leadingSet = false,
-		leading = 15,
-		leadDiff = 3,
-		emphasis = 'normal',
-		fontMod = false,
-		styleHash = 0,
-		styleHashes = [],
-		useCache = false,
-		genTextImage = false,
-		cacheSize = 0,
-		cacheMax = 12000;
-
-	let cache = ($._textCache = {});
-
-	$.loadFont = (url, cb) => {
-		q._preloadCount++;
-		let name = url.split('/').pop().split('.')[0].replace(' ', '');
-		let f = new FontFace(name, `url(${url})`);
-		document.fonts.add(f);
-		f.load().then(() => {
-			q._preloadCount--;
-			if (cb) cb(name);
-		});
-		$.textFont(name);
-		return name;
-	};
-
-	$.textFont = (x) => {
-		if (!x || x == font) return font;
-		font = x;
-		fontMod = true;
-		styleHash = -1;
-	};
-
-	$.textSize = (x) => {
-		if (x == undefined || x == $._textSize) return $._textSize;
-		if ($._da) x *= $._da;
-		$._textSize = x;
-		fontMod = true;
-		styleHash = -1;
-		if (!leadingSet) {
-			leading = x * 1.25;
-			leadDiff = leading - x;
-		}
-	};
-
-	$.textStyle = (x) => {
-		if (!x || x == emphasis) return emphasis;
-		emphasis = x;
-		fontMod = true;
-		styleHash = -1;
-	};
-
-	$.textLeading = (x) => {
-		if (x == undefined) return leading || $._textSize * 1.25;
-		leadingSet = true;
-		if (x == leading) return leading;
-		if ($._da) x *= $._da;
-		leading = x;
-		leadDiff = x - $._textSize;
-		styleHash = -1;
-	};
-
-	$.textAlign = (horiz, vert) => {
-		$.ctx.textAlign = $._textAlign = horiz;
-		if (vert) {
-			$.ctx.textBaseline = $._textBaseline = vert == $.CENTER ? 'middle' : vert;
-		}
-	};
-
-	const updateFont = () => {
-		$.ctx.font = `${emphasis} ${$._textSize}px ${font}`;
-		fontMod = false;
-	};
-
-	$.textWidth = (str) => {
-		if (fontMod) updateFont();
-		return $.ctx.measureText(str).width;
-	};
-	$.textAscent = (str) => {
-		if (fontMod) updateFont();
-		return $.ctx.measureText(str).actualBoundingBoxAscent;
-	};
-	$.textDescent = (str) => {
-		if (fontMod) updateFont();
-		return $.ctx.measureText(str).actualBoundingBoxDescent;
-	};
-
-	$.textFill = $.fill;
-	$.textStroke = $.stroke;
-
-	let updateStyleHash = () => {
-		let styleString = font + $._textSize + emphasis + leading;
-
-		let hash = 5381;
-		for (let i = 0; i < styleString.length; i++) {
-			hash = (hash * 33) ^ styleString.charCodeAt(i);
-		}
-		styleHash = hash >>> 0;
-	};
-
-	$.textCache = (enable, maxSize) => {
-		if (maxSize) cacheMax = maxSize;
-		if (enable !== undefined) useCache = enable;
-		return useCache;
-	};
-
-	$.createTextImage = (str, w, h) => {
-		genTextImage = true;
-		img = $.text(str, 0, 0, w, h);
-		genTextImage = false;
-		return img;
-	};
-
-	let lines = [];
-
-	$.text = (str, x, y, w, h) => {
-		if (str === undefined || (!$._doFill && !$._doStroke)) return;
-		str = str.toString();
-		if ($._da) {
-			x *= $._da;
-			y *= $._da;
-		}
-		let ctx = $.ctx;
-		let img, tX, tY;
-
-		if (fontMod) {
-			ctx.font = `${emphasis} ${$._textSize}px ${font}`;
-			fontMod = false;
-		}
-
-		if (useCache || genTextImage) {
-			if (styleHash == -1) updateStyleHash();
-
-			img = cache[str];
-			if (img) img = img[styleHash];
-
-			if (img) {
-				if (img._fill == $._fill && img._stroke == $._stroke && img._strokeWeight == $._strokeWeight) {
-					if (genTextImage) return img;
-					return $.textImage(img, x, y);
-				} else img.clear();
-			}
-		}
-
-		if (str.indexOf('\n') == -1) lines[0] = str;
-		else lines = str.split('\n');
-
-		if (str.length > w) {
-			let wrapped = [];
-			for (let line of lines) {
-				let i = 0;
-
-				while (i < line.length) {
-					let max = i + w;
-					if (max >= line.length) {
-						wrapped.push(line.slice(i));
-						break;
-					}
-					let end = line.lastIndexOf(' ', max);
-					if (end === -1 || end < i) end = max;
-					wrapped.push(line.slice(i, end));
-					i = end + 1;
-				}
-			}
-			lines = wrapped;
-		}
-
-		if (!useCache && !genTextImage) {
-			tX = x;
-			tY = y;
-		} else {
-			tX = 0;
-			tY = leading * lines.length;
-
-			if (!img) {
-				let measure = ctx.measureText(' ');
-				let ascent = measure.fontBoundingBoxAscent;
-				let descent = measure.fontBoundingBoxDescent;
-
-				img = $.createImage.call($, Math.ceil(ctx.measureText(str).width), Math.ceil(tY + descent), {
-					pixelDensity: $._pixelDensity
-				});
-
-				img._ascent = ascent;
-				img._descent = descent;
-				img._top = descent + leadDiff;
-				img._middle = img._top + ascent * 0.5;
-				img._bottom = img._top + ascent;
-				img._leading = leading;
-			}
-
-			img._fill = $._fill;
-			img._stroke = $._stroke;
-			img._strokeWeight = $._strokeWeight;
-			img.modified = true;
-
-			ctx = img.ctx;
-
-			ctx.font = $.ctx.font;
-			ctx.fillStyle = $._fill;
-			ctx.strokeStyle = $._stroke;
-			ctx.lineWidth = $.ctx.lineWidth;
-		}
-
-		let ogFill;
-		if (!$._fillSet) {
-			ogFill = ctx.fillStyle;
-			ctx.fillStyle = 'black';
-		}
-
-		let lineAmount = 0;
-		for (let line of lines) {
-			if ($._doStroke && $._strokeSet) ctx.strokeText(line, tX, tY);
-			if ($._doFill) ctx.fillText(line, tX, tY);
-			tY += leading;
-			lineAmount++;
-			if (lineAmount >= h) break;
-		}
-		lines = [];
-
-		if (!$._fillSet) ctx.fillStyle = ogFill;
-
-		if (useCache || genTextImage) {
-			styleHashes.push(styleHash);
-			(cache[str] ??= {})[styleHash] = img;
-
-			cacheSize++;
-			if (cacheSize > cacheMax) {
-				let half = Math.ceil(cacheSize / 2);
-				let hashes = styleHashes.splice(0, half);
-				for (let s in cache) {
-					s = cache[s];
-					for (let h of hashes) delete s[h];
-				}
-				cacheSize -= half;
-			}
-
-			if (genTextImage) return img;
-			$.textImage(img, x, y);
-		}
-	};
-
-	$.textImage = (img, x, y) => {
-		if (typeof img == 'string') img = $.createTextImage(img);
-
-		let og = $._imageMode;
-		$._imageMode = 'corner';
-
-		let ta = $._textAlign;
-		if (ta == 'center') x -= img.canvas.hw;
-		else if (ta == 'right') x -= img.width;
-
-		let bl = $._textBaseline;
-		if (bl == 'alphabetic') y -= img._leading;
-		else if (bl == 'middle') y -= img._middle;
-		else if (bl == 'bottom') y -= img._bottom;
-		else if (bl == 'top') y -= img._top;
-
-		$.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

@@ -1,65 +0,0 @@
-Q5.modules.ai = ($) => {
-	$.askAI = (question = '') => {
-		Q5.disableFriendlyErrors = false;
-		throw Error('Ask AI ✨ ' + question);
-	};
-
-	$._askAI = async (e) => {
-		let askAI = e.message?.includes('Ask AI ✨');
-		let stackLines = e.stack?.split('\n');
-		if (!e.stack || stackLines.length <= 1) return;
-
-		let idx = 1;
-		let sep = '(';
-		if (navigator.userAgent.indexOf('Chrome') == -1) {
-			idx = 0;
-			sep = '@';
-		}
-		while (stackLines[idx].indexOf('q5') >= 0) idx++;
-
-		let errFile = stackLines[idx].split(sep).at(-1);
-		if (errFile.startsWith('blob:')) errFile = errFile.slice(5);
-		let parts = errFile.split(':');
-		let lineNum = parseInt(parts.at(-2));
-		if (askAI) lineNum++;
-		parts[3] = parts[3].split(')')[0];
-		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);
-
-			console.warn('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
-
-			console.warn('Ask AI ✨ ' + url);
-
-			if (askAI) return window.open(url, '_blank');
-		} catch (err) {}
-	};
-};

package/src/q5-canvas.js

@@ -1,367 +0,0 @@
-Q5.modules.canvas = ($, q) => {
-	$._OffscreenCanvas =
-		window.OffscreenCanvas ||
-		function () {
-			return document.createElement('canvas');
-		};
-
-	if (Q5._server) {
-		if (Q5._createServerCanvas) {
-			q.canvas = Q5._createServerCanvas(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;
-	$.width = 200;
-	$.height = 200;
-	$._pixelDensity = 1;
-
-	$.displayDensity = () => window.devicePixelRatio || 1;
-
-	if (c) {
-		c.width = 200;
-		c.height = 200;
-		if ($._scope != 'image') {
-			c.renderer = $._renderer;
-			c[$._renderer] = true;
-
-			$._pixelDensity = Math.ceil($.displayDensity());
-		}
-	}
-
-	$._adjustDisplay = () => {
-		if (c.style) {
-			c.style.width = c.w + 'px';
-			c.style.height = c.h + 'px';
-		}
-	};
-
-	$.createCanvas = function (w, h, options) {
-		if (typeof w == 'object') {
-			options = w;
-			w = null;
-		}
-		options ??= arguments[3];
-
-		let opt = Object.assign({}, Q5.canvasOptions);
-		if (typeof options == 'object') Object.assign(opt, options);
-
-		if ($._scope != 'image') {
-			if ($._scope == 'graphics') $._pixelDensity = this._pixelDensity;
-			else if (window.IntersectionObserver) {
-				let wasObserved = false;
-				new IntersectionObserver((e) => {
-					c.visible = e[0].isIntersecting;
-					if (!wasObserved) {
-						$._wasLooping = $._loop;
-						wasObserved = true;
-					}
-					if (c.visible) {
-						if ($._wasLooping && !$._loop) $.loop();
-					} else {
-						$._wasLooping = $._loop;
-						$.noLoop();
-					}
-				}).observe(c);
-			}
-		}
-
-		$._setCanvasSize(w, h);
-
-		Object.assign(c, opt);
-		let rend = $._createCanvas(c.w, c.h, opt);
-
-		if ($._hooks) {
-			for (let m of $._hooks.postCanvas) m();
-		}
-		if ($._beginRender) $._beginRender();
-
-		return rend;
-	};
-
-	$.createGraphics = function (w, h, opt) {
-		let g = new Q5('graphics');
-		opt ??= {};
-		opt.alpha ??= true;
-		opt.colorSpace ??= $.canvas.colorSpace;
-		g.createCanvas.call($, w, h, opt);
-		g.defaultWidth = w;
-		g.defaultHeight = h;
-		return g;
-	};
-
-	async function saveFile(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 saveFile(a, b, c);
-		if (b) {
-			b = b.split('.');
-			saveFile(a, b[0], b.at(-1));
-		} else saveFile(a);
-	};
-
-	$._setCanvasSize = (w, h) => {
-		w ??= window.innerWidth;
-		h ??= window.innerHeight;
-		$.defaultWidth = c.w = w = Math.ceil(w);
-		$.defaultHeight = c.h = h = Math.ceil(h);
-		c.hw = w / 2;
-		c.hh = h / 2;
-
-		// changes the actual size of the canvas
-		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();
-	};
-
-	$._setImageSize = (w, h) => {
-		q.width = c.w = w;
-		q.height = c.h = h;
-		c.hw = w / 2;
-		c.hh = h / 2;
-
-		// changes the actual size of the canvas
-		c.width = Math.ceil(w * $._pixelDensity);
-		c.height = Math.ceil(h * $._pixelDensity);
-	};
-
-	$.defaultImageScale = (scale) => {
-		if (!scale) return $._defaultImageScale;
-		return ($._defaultImageScale = scale);
-	};
-	$.defaultImageScale(0.5);
-
-	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) {
-					$._didResize = 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);
-	};
-
-	if (c && !Q5._createServerCanvas) {
-		c.resize = $.resizeCanvas;
-		c.save = $.saveCanvas = $.save;
-	}
-
-	$.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;
-	};
-
-	$._styleNames = [
-		'_fill',
-		'_stroke',
-		'_strokeWeight',
-		'_doStroke',
-		'_doFill',
-		'_strokeSet',
-		'_fillSet',
-		'_shadow',
-		'_doShadow',
-		'_shadowOffsetX',
-		'_shadowOffsetY',
-		'_shadowBlur',
-		'_tint',
-		'_imageMode',
-		'_rectMode',
-		'_ellipseMode',
-		'_textSize',
-		'_textAlign',
-		'_textBaseline'
-	];
-	$._styles = [];
-
-	$.pushStyles = () => {
-		let styles = {};
-		for (let s of $._styleNames) styles[s] = $[s];
-		$._styles.push(styles);
-	};
-	$.popStyles = () => {
-		let styles = $._styles.pop();
-		for (let s of $._styleNames) $[s] = styles[s];
-	};
-
-	if (window && $._scope != 'graphics') {
-		window.addEventListener('resize', () => {
-			$._didResize = true;
-			q.windowWidth = window.innerWidth;
-			q.windowHeight = window.innerHeight;
-			q.deviceOrientation = window.screen?.orientation?.type;
-		});
-	}
-};
-
-Q5.CENTER = 'center';
-Q5.LEFT = 'left';
-Q5.RIGHT = 'right';
-Q5.TOP = 'top';
-Q5.BOTTOM = 'bottom';
-
-Q5.BASELINE = 'alphabetic';
-Q5.MIDDLE = 'middle';
-
-Q5.NORMAL = 'normal';
-Q5.ITALIC = 'italic';
-Q5.BOLD = 'bold';
-Q5.BOLDITALIC = 'italic bold';
-
-Q5.ROUND = 'round';
-Q5.SQUARE = 'butt';
-Q5.PROJECT = 'square';
-Q5.MITER = 'miter';
-Q5.BEVEL = 'bevel';
-
-Q5.CHORD_OPEN = 0;
-Q5.PIE_OPEN = 1;
-Q5.PIE = 2;
-Q5.CHORD = 3;
-
-Q5.RADIUS = 'radius';
-Q5.CORNER = 'corner';
-Q5.CORNERS = 'corners';
-
-Q5.OPEN = 0;
-Q5.CLOSE = 1;
-
-Q5.LANDSCAPE = 'landscape';
-Q5.PORTRAIT = 'portrait';
-
-Q5.BLEND = 'source-over';
-Q5.REMOVE = 'destination-out';
-Q5.ADD = 'lighter';
-Q5.DARKEST = 'darken';
-Q5.LIGHTEST = 'lighten';
-Q5.DIFFERENCE = 'difference';
-Q5.SUBTRACT = 'subtract';
-Q5.EXCLUSION = 'exclusion';
-Q5.MULTIPLY = 'multiply';
-Q5.SCREEN = 'screen';
-Q5.REPLACE = 'copy';
-Q5.OVERLAY = 'overlay';
-Q5.HARD_LIGHT = 'hard-light';
-Q5.SOFT_LIGHT = 'soft-light';
-Q5.DODGE = 'color-dodge';
-Q5.BURN = 'color-burn';
-
-Q5.THRESHOLD = 1;
-Q5.GRAY = 2;
-Q5.OPAQUE = 3;
-Q5.INVERT = 4;
-Q5.POSTERIZE = 5;
-Q5.DILATE = 6;
-Q5.ERODE = 7;
-Q5.BLUR = 8;
-Q5.SEPIA = 9;
-Q5.BRIGHTNESS = 10;
-Q5.SATURATION = 11;
-Q5.CONTRAST = 12;
-Q5.HUE_ROTATE = 13;
-
-Q5.P2D = '2d';
-Q5.WEBGL = 'webgl';
-
-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;