q5 3.6.4 → 3.6.8

package/q5.js

@@ -276,7 +276,6 @@ function Q5(scope, parent, renderer) {
 	let t = globalScope || $;
 
 	let userFns = [
-		'preload',
 		'postProcess',
 		'mouseMoved',
 		'mousePressed',
@@ -291,13 +290,18 @@ function Q5(scope, parent, renderer) {
 		'touchStarted',
 		'touchMoved',
 		'touchEnded',
-		'windowResized'
+		'windowResized',
+		'preload'
 	];
 	// shim if undefined
 	for (let name of userFns) $[name] ??= () => {};
 
+	userFns.pop();
+
+	let allUserFns = ['update', 'draw', 'drawFrame', ...userFns];
+
 	if ($._isGlobal) {
-		for (let name of ['setup', 'update', 'draw', 'drawFrame', ...userFns]) {
+		for (let name of allUserFns) {
 			if (Q5[name]) $[name] = Q5[name];
 			else {
 				Object.defineProperty(Q5, name, {
@@ -460,7 +464,7 @@ Q5.version = Q5.VERSION = '3.6';
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
 		if (!Q5._hasGlobal) {
-			if (Q5.setup || Q5.update || Q5.draw) {
+			if (Q5.update || Q5.draw) {
 				Q5.WebGPU();
 			} else {
 				new Q5('auto');
@@ -1424,7 +1428,6 @@ Q5.renderers.c2d.image = ($, q) => {
 
 		g.promise = new Promise((resolve, reject) => {
 			img.onload = () => {
-				delete g.promise;
 				delete g.then;
 				if (g._usedAwait) g = $.createImage(1, 1, opt);
 
@@ -1659,7 +1662,7 @@ Q5.renderers.c2d.image = ($, q) => {
 		img.ctx.drawImage(c, x, y, w * pd, h * pd, 0, 0, w, h);
 		img.width = w;
 		img.height = h;
-		if ($._webgpuInst) $._webgpuInst._makeDrawable(img);
+		if ($?._owner._makeDrawable) $._owner._makeDrawable(img);
 		return img;
 	};
 
@@ -1674,15 +1677,29 @@ Q5.renderers.c2d.image = ($, q) => {
 			$._tint = old;
 			return;
 		}
+
 		if (!pixels) $.loadPixels();
-		let mod = $._pixelDensity || 1;
+
+		let mod = $._pixelDensity || 1,
+			r = val.r,
+			g = val.g,
+			b = val.b,
+			a = val.a;
+
+		if (($._colorFormat || $._owner?._colorFormat) == 1) {
+			r *= 255;
+			g *= 255;
+			b *= 255;
+			a *= 255;
+		}
+
 		for (let i = 0; i < mod; i++) {
 			for (let j = 0; j < mod; j++) {
 				let idx = 4 * ((y * mod + i) * c.width + x * mod + j);
-				pixels[idx] = val.r;
-				pixels[idx + 1] = val.g;
-				pixels[idx + 2] = val.b;
-				pixels[idx + 3] = val.a;
+				pixels[idx] = r;
+				pixels[idx + 1] = g;
+				pixels[idx + 2] = b;
+				pixels[idx + 3] = a;
 			}
 		}
 	};
@@ -1916,7 +1933,6 @@ Q5.renderers.c2d.text = ($, q) => {
 			f.promise = new Promise((resolve, reject) => {
 				ff.load()
 					.then(() => {
-						delete f.promise;
 						delete f.then;
 						if (cb) cb(ff);
 						resolve(ff);
@@ -2004,7 +2020,6 @@ Q5.renderers.c2d.text = ($, q) => {
 				}
 
 				f.faces = loadedFaces;
-				delete f.promise;
 				delete f.then;
 				if (cb) cb(f);
 				return f;
@@ -3178,7 +3193,6 @@ Q5.modules.dom = ($, q) => {
 		if (src) {
 			el.promise = new Promise((resolve) => {
 				el.addEventListener('loadeddata', () => {
-					delete el.promise;
 					delete el.then;
 					if (el._usedAwait) {
 						el = $.createEl('video');
@@ -3233,7 +3247,6 @@ Q5.modules.dom = ($, q) => {
 				throw e;
 			}
 
-			delete vid.promise;
 			delete vid.then;
 			if (vid._usedAwait) {
 				vid = $.createVideo();
@@ -4437,7 +4450,6 @@ Q5.modules.sound = ($, q) => {
 			} catch (e) {
 				err = e;
 			}
-			delete s.promise;
 			delete s.then;
 			if (err) throw err;
 			if (cb) cb(s);
@@ -4459,7 +4471,6 @@ Q5.modules.sound = ($, q) => {
 		a.promise = new Promise((resolve, reject) => {
 			function loaded() {
 				if (!a.loaded) {
-					delete a.promise;
 					delete a.then;
 					if (a._usedAwait) {
 						a = new Audio(url);
@@ -4559,32 +4570,47 @@ Q5.Sound = class {
 		source.start(0, source._offset, source._duration);
 
 		this.sources.add(source);
-		source.onended = () => {
-			if (!this.paused) {
-				this.ended = true;
-				if (this._onended) this._onended();
-				this.sources.delete(source);
-			}
-		};
+
+		source.promise = new Promise((resolve) => {
+			source.onended = () => {
+				if (!this.paused) {
+					this.ended = true;
+					if (this._onended) this._onended();
+					this.sources.delete(source);
+					resolve();
+				}
+			};
+		});
+
+		return source;
 	}
 
 	play(time = 0, duration) {
 		if (!this.loaded) return;
 
+		let source;
+
 		if (!this.paused) {
-			this._newSource(time, duration);
+			source = this._newSource(time, duration);
 		} else {
 			let timings = [];
 			for (let source of this.sources) {
-				timings.push(source._offset, source._duration);
+				timings.push({ offset: source._offset, duration: source._duration });
 				this.sources.delete(source);
 			}
-			for (let i = 0; i < timings.length; i += 2) {
-				this._newSource(timings[i], timings[i + 1]);
+			timings.sort((a, b) => {
+				let durA = a.duration ?? this.buffer.duration - a.offset;
+				let durB = b.duration ?? this.buffer.duration - b.offset;
+				return durA - durB;
+			});
+			for (let t of timings) {
+				source = this._newSource(t.offset, t.duration);
 			}
 		}
 
 		this.paused = this.ended = false;
+
+		return source.promise;
 	}
 
 	pause() {
@@ -4679,7 +4705,6 @@ Q5.modules.util = ($, q) => {
 				if (typeof f == 'string') ret.text = f;
 				else Object.assign(ret, f);
 
-				delete ret.promise;
 				delete ret.then;
 				if (cb) cb(f);
 				return f;
@@ -4703,7 +4728,6 @@ Q5.modules.util = ($, q) => {
 			.then((text) => {
 				let xml = new DOMParser().parseFromString(text, 'application/xml');
 				ret.DOM = xml;
-				delete ret.promise;
 				delete ret.then;
 				if (cb) cb(xml);
 				return xml;
@@ -5745,6 +5769,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			doStroke,
 			fillSet,
 			strokeSet,
+			globalAlpha,
 			tintIdx,
 			_textSize,
 			_textAlign,
@@ -5775,6 +5800,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			doStroke,
 			fillSet,
 			strokeSet,
+			globalAlpha,
 			tintIdx,
 			_textSize,
 			_textAlign,
@@ -7508,7 +7534,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 	$._makeDrawable = (g) => {
 		$._addTexture(g);
-		g._webgpuInst = $;
+		g._owner = $;
 	};
 
 	$.createImage = (w, h, opt) => {
@@ -7990,7 +8016,6 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		let fontName = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('-'));
 		let f = { family: fontName };
 		f.promise = createFont(url, fontName, () => {
-			delete f.promise;
 			delete f.then;
 			if (f._usedAwait) f = { family: fontName };
 			if (cb) cb(f);