q5 2.4.4 → 2.4.10

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

@@ -1,9 +1,21 @@
 Q5.renderers.q2d.text = ($, q) => {
-	$._textFont = 'sans-serif';
-	$._textSize = 12;
-	$._textLeading = 15;
-	$._textLeadDiff = 3;
-	$._textStyle = 'normal';
+	$._textAlign = 'left';
+	$._textBaseline = 'alphabetic';
+
+	let font = 'sans-serif',
+		tSize = 12,
+		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++;
@@ -16,180 +28,214 @@ Q5.renderers.q2d.text = ($, q) => {
 		});
 		return name;
 	};
-	$.textFont = (x) => ($._textFont = x);
+
+	$.textFont = (x) => {
+		font = x;
+		fontMod = true;
+		styleHash = -1;
+	};
 	$.textSize = (x) => {
-		if (x === undefined) return $._textSize;
+		if (x === undefined) return tSize;
 		if ($._da) x *= $._da;
-		$._textSize = x;
+		tSize = x;
+		fontMod = true;
+		styleHash = -1;
 		if (!$._leadingSet) {
-			$._textLeading = x * 1.25;
-			$._textLeadDiff = $._textLeading - x;
+			leading = x * 1.25;
+			leadDiff = leading - x;
 		}
 	};
+	$.textStyle = (x) => {
+		emphasis = x;
+		fontMod = true;
+		styleHash = -1;
+	};
 	$.textLeading = (x) => {
-		if (x === undefined) return $._textLeading;
+		if (x === undefined) return leading;
 		if ($._da) x *= $._da;
-		$._textLeading = x;
-		$._textLeadDiff = x - $._textSize;
+		leading = x;
+		leadDiff = x - tSize;
 		$._leadingSet = true;
+		styleHash = -1;
 	};
-	$.textStyle = (x) => ($._textStyle = x);
 	$.textAlign = (horiz, vert) => {
-		$.ctx.textAlign = horiz;
+		$.ctx.textAlign = $._textAlign = horiz;
 		if (vert) {
-			$.ctx.textBaseline = vert == $.CENTER ? 'middle' : vert;
+			$.ctx.textBaseline = $._textBaseline = vert == $.CENTER ? 'middle' : vert;
 		}
+		styleHash = -1;
 	};
-	$.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;
-	};
+
+	$.textWidth = (str) => $.ctx.measureText(str).width;
+	$.textAscent = (str) => $.ctx.measureText(str).actualBoundingBoxAscent;
+	$.textDescent = (str) => $.ctx.measureText(str).actualBoundingBoxDescent;
+
 	$.textFill = $.fill;
 	$.textStroke = $.stroke;
 
-	$._textCache = !!Q5.Image;
-	$._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);
+	let updateStyleHash = () => {
+		let styleString = font + tSize + emphasis + leading;
+
+		let hash = 5381;
+		for (let i = 0; i < styleString.length; i++) {
+			hash = (hash * 33) ^ styleString.charCodeAt(i);
 		}
+		styleHash = hash >>> 0;
 	};
-	$._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 : '')
-		);
+
+	$.textCache = (enable, maxSize) => {
+		if (maxSize) cacheMax = maxSize;
+		if (enable !== undefined) useCache = enable;
+		return useCache;
 	};
 	$.createTextImage = (str, w, h) => {
-		let k = $._genTextImageKey(str, w, h);
-		if ($._tic.get(k)) return $._tic.get(k);
-
-		let og = $._textCache;
-		$._textCache = true;
-		$._genTextImage = true;
-		$.text(str, 0, 0, w, h);
-		$._genTextImage = false;
-		$._textCache = og;
-		return $._tic.get(k);
+		genTextImage = true;
+		img = $.text(str, 0, 0, w, h);
+		genTextImage = false;
+		return img;
 	};
+
+	let lines = [];
 	$.text = (str, x, y, w, h) => {
-		if (str === undefined) return;
+		if (str === undefined || (!$._doFill && !$._doStroke)) return;
 		str = str.toString();
 		if ($._da) {
 			x *= $._da;
 			y *= $._da;
 		}
-		if (!$._doFill && !$._doStroke) return;
-		let c, ti, tg, k, cX, cY, _ascent, _descent;
-		let t = $.ctx.getTransform();
-		let useCache = $._genTextImage || ($._textCache && (t.b != 0 || t.c != 0));
-		if (!useCache) {
-			c = $.ctx;
-			cX = x;
-			cY = y;
+		let ctx = $.ctx;
+		let img, tX, tY;
+
+		if (fontMod) {
+			ctx.font = `${emphasis} ${tSize}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 (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;
+				}
+			}
+			lines = wrapped;
+		}
+
+		if (!useCache && !genTextImage) {
+			tX = x;
+			tY = y;
 		} else {
-			k = $._genTextImageKey(str, w, h);
-			ti = $._tic.get(k);
-			if (ti && !$._genTextImage) {
-				$.textImage(ti, x, y);
-				return;
+			tX = 0;
+			tY = leading * lines.length;
+
+			if (!img) {
+				let measure = ctx.measureText(' ');
+				let ascent = measure.fontBoundingBoxAscent;
+				let descent = measure.fontBoundingBoxDescent;
+				h ??= tY + descent;
+
+				img = $.createImage.call($, Math.ceil(ctx.measureText(str).width), Math.ceil(h), {
+					pixelDensity: $._pixelDensity
+				});
+
+				img._ascent = ascent;
+				img._descent = descent;
+				img._top = descent + leadDiff;
+				img._middle = img._top + ascent * 0.5;
+				img._bottom = img._top + ascent;
 			}
-			tg = $.createGraphics.call($, 1, 1);
-			c = tg.ctx;
+
+			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;
 		}
-		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 ogFill;
+		if (!$._fillSet) {
+			ogFill = ctx.fillStyle;
+			ctx.fillStyle = 'black';
 		}
-		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;
+
+		for (let line of lines) {
+			if ($._doStroke && $._strokeSet) ctx.strokeText(line, tX, tY);
+			if ($._doFill) ctx.fillText(line, tX, tY);
+			tY += leading;
+			if (tY > h) break;
 		}
-		if (!$._fillSet) c.fillStyle = f;
-		if (useCache) {
-			ti = tg;
-			ti._ascent = _ascent;
-			ti._descent = _descent;
-			$._tic.set(k, ti);
-			if (!$._genTextImage) $.textImage(ti, x, y);
+		lines.length = 0;
+
+		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) => {
 		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;
+
+		let ta = $._textAlign;
+		if (ta == 'center') x -= img.canvas.hw;
+		else if (ta == 'right') x -= img.width;
+
+		let bl = $._textBaseline;
+		if (bl == 'alphabetic') y -= 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;
 	};

package/src/q5-canvas.js

@@ -272,12 +272,12 @@ Q5.modules.canvas = ($, q) => {
 	];
 	$._styles = [];
 
-	$._pushStyles = () => {
+	$.pushStyles = () => {
 		let styles = {};
 		for (let s of $._styleNames) styles[s] = $[s];
 		$._styles.push(styles);
 	};
-	$._popStyles = () => {
+	$.popStyles = () => {
 		let styles = $._styles.pop();
 		for (let s of $._styleNames) $[s] = styles[s];
 	};

package/src/q5-vector.js

@@ -138,9 +138,9 @@ Q5.Vector = class {
 		return this._$.atan2(this.y, this.x);
 	}
 	setHeading(ang) {
-		let mag = this.mag(); // Calculate the magnitude of the vector
-		this.x = mag * this._$.cos(ang); // Set the new x component
-		this.y = mag * this._$.sin(ang); // Set the new y component
+		let mag = this.mag();
+		this.x = mag * this._$.cos(ang);
+		this.y = mag * this._$.sin(ang);
 		return this;
 	}
 	rotate(ang) {

package/src/q5-webgpu-canvas.js

@@ -60,8 +60,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
-		opt.format = navigator.gpu.getPreferredCanvasFormat();
-		opt.device = Q5.device;
+		opt.format ??= navigator.gpu.getPreferredCanvasFormat();
+		opt.device ??= Q5.device;
 
 		$.ctx.configure(opt);
 
@@ -86,6 +86,37 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._setCanvasSize(w, h);
 	};
 
+	// current color index, used to associate a vertex with a color
+	let colorIndex = 0;
+	const addColor = (r, g, b, a = 1) => {
+		if (typeof r == 'string') r = $.color(r);
+		else if (b == undefined) {
+			// grayscale mode `fill(1, 0.5)`
+			a = g ?? 1;
+			g = b = r;
+		}
+		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
+		else colorsStack.push(r, g, b, a);
+		colorIndex++;
+	};
+
+	$.fill = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doFill = true;
+		$._fillIndex = colorIndex;
+	};
+	$.stroke = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doStroke = true;
+		$._strokeIndex = colorIndex;
+	};
+
+	$.noFill = () => ($._doFill = false);
+	$.noStroke = () => ($._doStroke = false);
+
+	$._strokeWeight = 1;
+	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
+
 	$.resetMatrix = () => {
 		// Initialize the transformation matrix as 4x4 identity matrix
 
@@ -109,24 +140,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	// Stack to keep track of transformation matrix indexes
 	$._transformIndexStack = [];
 
-	$.push = $.pushMatrix = () => {
-		// Push the current matrix index onto the stack
-		$._transformIndexStack.push($._transformIndex);
-		$._pushStyles();
-	};
-
-	$.pop = $.popMatrix = () => {
-		if (!$._transformIndexStack.length) {
-			return console.warn('Matrix index stack is empty!');
-		}
-		// Pop the last matrix index from the stack and set it as the current matrix index
-		let idx = $._transformIndexStack.pop();
-		$._matrix = $.transformStates[idx].slice();
-		$._transformIndex = idx;
-		$._matrixDirty = false;
-		$._popStyles();
-	};
-
 	$.translate = (x, y, z) => {
 		if (!x && !y && !z) return;
 		// Update the translation values
@@ -172,6 +185,57 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = true;
 	};
 
+	$.shearX = (ang) => {
+		if (!ang) return;
+		if ($._angleMode) ang *= $._DEGTORAD;
+
+		let tanAng = Math.tan(ang);
+
+		let m0 = $._matrix[0],
+			m1 = $._matrix[1],
+			m4 = $._matrix[4],
+			m5 = $._matrix[5];
+
+		$._matrix[0] = m0 + m4 * tanAng;
+		$._matrix[1] = m1 + m5 * tanAng;
+
+		$._matrixDirty = true;
+	};
+
+	$.shearY = (ang) => {
+		if (!ang) return;
+		if ($._angleMode) ang *= $._DEGTORAD;
+
+		let tanAng = Math.tan(ang);
+
+		let m0 = $._matrix[0],
+			m1 = $._matrix[1],
+			m4 = $._matrix[4],
+			m5 = $._matrix[5];
+
+		$._matrix[4] = m4 + m0 * tanAng;
+		$._matrix[5] = m5 + m1 * tanAng;
+
+		$._matrixDirty = true;
+	};
+
+	$.applyMatrix = (...args) => {
+		let m;
+		if (args.length == 1) m = args[0];
+		else m = args;
+
+		if (m.length == 9) {
+			// Convert 3x3 matrix to 4x4 matrix
+			m = [m[0], m[1], 0, m[2], m[3], m[4], 0, m[5], 0, 0, 1, 0, m[6], m[7], 0, m[8]];
+		} else if (m.length != 16) {
+			throw new Error('Matrix must be a 3x3 or 4x4 array.');
+		}
+
+		// Overwrite the current transformation matrix
+		$._matrix = m.slice();
+		$._matrixDirty = true;
+	};
+
 	// Function to save the current matrix state if dirty
 	$._saveMatrix = () => {
 		$.transformStates.push($._matrix.slice());
@@ -179,37 +243,31 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = false;
 	};
 
-	// current color index, used to associate a vertex with a color
-	let colorIndex = 0;
-	const addColor = (r, g, b, a = 1) => {
-		if (typeof r == 'string') r = $.color(r);
-		else if (b == undefined) {
-			// grayscale mode `fill(1, 0.5)`
-			a = g ?? 1;
-			g = b = r;
+	// Push the current matrix index onto the stack
+	$.pushMatrix = () => {
+		if ($._matrixDirty) $._saveMatrix();
+		$._transformIndexStack.push($._transformIndex);
+	};
+	$.popMatrix = () => {
+		if (!$._transformIndexStack.length) {
+			return console.warn('Matrix index stack is empty!');
 		}
-		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
-		else colorsStack.push(r, g, b, a);
-		colorIndex++;
+		// Pop the last matrix index from the stack and set it as the current matrix index
+		let idx = $._transformIndexStack.pop();
+		$._matrix = $.transformStates[idx].slice();
+		$._transformIndex = idx;
+		$._matrixDirty = false;
 	};
 
-	$.fill = (r, g, b, a) => {
-		addColor(r, g, b, a);
-		$._doFill = true;
-		$._fillIndex = colorIndex;
+	$.push = () => {
+		$.pushMatrix();
+		$.pushStyles();
 	};
-	$.stroke = (r, g, b, a) => {
-		addColor(r, g, b, a);
-		$._doStroke = true;
-		$._strokeIndex = colorIndex;
+	$.pop = () => {
+		$.popMatrix();
+		$.popStyles();
 	};
 
-	$.noFill = () => ($._doFill = false);
-	$.noStroke = () => ($._doStroke = false);
-
-	$._strokeWeight = 1;
-	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
-
 	$._calcBox = (x, y, w, h, mode) => {
 		let hw = w / 2;
 		let hh = h / 2;

package/src/q5-webgpu-drawing.js

@@ -224,6 +224,15 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.endShape(1);
 	};
 
+	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape(1);
+	};
+
 	$.rectMode = (x) => ($._rectMode = x);
 
 	$.rect = (x, y, w, h) => {
@@ -245,6 +254,8 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		drawStack.push(0, 6);
 	};
 
+	$.square = (x, y, s) => $.rect(x, y, s, s);
+
 	$.point = (x, y) => {
 		colorIndex = $._strokeIndex;
 		let sw = $._strokeWeight;

package/src/q5-webgpu-image.js

@@ -118,20 +118,30 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		minFilter: 'linear'
 	});
 
+	let MAX_TEXTURES = 12000;
+
+	$._textures = [];
+	let tIdx = 0;
+
 	$._createTexture = (img) => {
 		if (img.canvas) img = img.canvas;
 
 		let textureSize = [img.width, img.height, 1];
 
-		const texture = Q5.device.createTexture({
+		let texture = Q5.device.createTexture({
 			size: textureSize,
 			format: 'bgra8unorm',
 			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 
-		Q5.device.queue.copyExternalImageToTexture({ source: img }, { texture }, textureSize);
+		Q5.device.queue.copyExternalImageToTexture(
+			{ source: img },
+			{ texture, colorSpace: $.canvas.colorSpace },
+			textureSize
+		);
 
-		img.textureIndex = $._textureBindGroups.length;
+		$._textures[tIdx] = texture;
+		img.textureIndex = tIdx;
 
 		const textureBindGroup = Q5.device.createBindGroup({
 			layout: textureLayout,
@@ -140,7 +150,16 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 				{ binding: 1, resource: texture.createView() }
 			]
 		});
-		$._textureBindGroups.push(textureBindGroup);
+		$._textureBindGroups[tIdx] = textureBindGroup;
+
+		tIdx = (tIdx + 1) % MAX_TEXTURES;
+
+		// If the texture array is full, destroy the oldest texture
+		if ($._textures[tIdx]) {
+			$._textures[tIdx].destroy();
+			delete $._textures[tIdx];
+			delete $._textureBindGroups[tIdx];
+		}
 	};
 
 	$.loadImage = $.loadTexture = (src) => {
@@ -204,3 +223,12 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		verticesStack.length = 0;
 	});
 };
+
+Q5.THRESHOLD = 1;
+Q5.GRAY = 2;
+Q5.OPAQUE = 3;
+Q5.INVERT = 4;
+Q5.POSTERIZE = 5;
+Q5.DILATE = 6;
+Q5.ERODE = 7;
+Q5.BLUR = 8;