q5 2.16.0 → 2.17.0

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.16
+ * @version 2.17
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -311,7 +311,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.16';
+Q5.version = Q5.VERSION = '2.17';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -464,8 +464,10 @@ Q5.modules.canvas = ($, q) => {
 	};
 
 	$._setCanvasSize = (w, h) => {
+		if (!w) h ??= window.innerHeight;
+		else h ??= w;
 		w ??= window.innerWidth;
-		h ??= window.innerHeight;
+
 		$.defaultWidth = c.w = w = Math.ceil(w);
 		$.defaultHeight = c.h = h = Math.ceil(h);
 		c.hw = w / 2;
@@ -1761,7 +1763,7 @@ Q5.renderers.c2d.soft_filters = ($) => {
 
 	$._softFilter = (typ, x) => {
 		if (!$._filters) initSoftFilters();
-		let imgData = $.ctx._getImageData(0, 0, $.canvas.width, $.canvas.height);
+		let imgData = $._getImageData(0, 0, $.canvas.width, $.canvas.height);
 		$._filters[typ](imgData.data, x);
 		$.ctx.putImageData(imgData, 0, 0);
 	};
@@ -2538,7 +2540,9 @@ main {
 		}
 		if (displayMode == 'center') displayMode = 'centered';
 		Object.assign(c, { displayMode, renderQuality, displayScale });
+		if ($.ctx) $.pushStyles();
 		$._adjustDisplay();
+		if ($.ctx) $.popStyles();
 	};
 
 	$.fullscreen = (v) => {
@@ -2547,6 +2551,264 @@ main {
 		else document.body.exitFullscreen();
 	};
 };
+Q5.modules.dom = ($) => {
+	$.elementMode = (mode) => ($._elementMode = mode);
+
+	$.createElement = (tag, content) => {
+		let el = document.createElement(tag);
+
+		if ($._elementMode == 'center') {
+			el.style.transform = 'translate(-50%, -50%)';
+		}
+
+		if (content) el.innerHTML = content;
+
+		Object.defineProperty(el, 'x', {
+			get: () => el._x,
+			set: (v) => {
+				let pos = el.style.position;
+				if (!pos || pos == 'relative') {
+					el.style.position = 'absolute';
+				}
+				let x = $.canvas.offsetLeft + v;
+				el.style.left = x + 'px';
+				el._x = x;
+			}
+		});
+
+		Object.defineProperty(el, 'y', {
+			get: () => el._y,
+			set: (v) => {
+				let pos = el.style.position;
+				if (!pos || pos == 'relative') {
+					el.style.position = 'absolute';
+				}
+				let y = $.canvas.offsetTop + v;
+				el.style.top = y + 'px';
+				el._y = y;
+			}
+		});
+
+		Object.defineProperty(el, 'width', {
+			get: () => el.style.width,
+			set: (v) => (el.style.width = v + 'px')
+		});
+
+		Object.defineProperty(el, 'height', {
+			get: () => el.style.height,
+			set: (v) => (el.style.height = v + 'px')
+		});
+
+		el.position = (x, y, scheme) => {
+			if (scheme) el.style.position = scheme;
+			el.x = x;
+			el.y = y;
+			return el;
+		};
+
+		// overwrite size
+		Object.defineProperty(el, 'size', {
+			writable: true
+		});
+
+		el.size = (w, h) => {
+			el.width = w;
+			el.height = h;
+			return el;
+		};
+
+		el.center = () => {
+			el.style.position = 'absolute';
+			el.x = $.canvas.hw;
+			el.y = $.canvas.hh;
+			return el;
+		};
+
+		el.show = () => {
+			el.style.display = 'block';
+			return el;
+		};
+
+		el.hide = () => {
+			el.style.display = 'none';
+			return el;
+		};
+
+		el.parent = (parent) => {
+			parent.append(el);
+			return el;
+		};
+
+		$._elements.push(el);
+		$.canvas.parentElement.append(el);
+
+		return el;
+	};
+	$.createEl = $.createElement;
+
+	$.createA = (href, content, newTab) => {
+		let el = $.createEl('a', content);
+		el.href = href;
+		el.target = newTab ? '_blank' : '_self';
+		return el;
+	};
+
+	$.createButton = (content) => $.createEl('button', content);
+
+	$.createCheckbox = (label = '', checked = false) => {
+		let el = $.createEl('input');
+		el.type = 'checkbox';
+		el.checked = checked;
+		let lbl = $.createEl('label', label);
+		lbl.addEventListener('click', () => {
+			el.checked = !el.checked;
+			el.dispatchEvent(new Event('change', { bubbles: true }));
+		});
+		el.insertAdjacentElement('afterend', lbl);
+		el.label = lbl;
+		return el;
+	};
+
+	$.createColorPicker = (value = '#ffffff') => {
+		let el = $.createEl('input');
+		el.type = 'color';
+		el.value = value.toString();
+		return el;
+	};
+
+	$.createDiv = (content) => $.createEl('div', content);
+
+	$.createImg = (src) => {
+		let el = $.createEl('img');
+		el.crossOrigin = 'anonymous';
+		el.src = src;
+		return el;
+	};
+
+	$.createInput = (value = '', type = 'text') => {
+		let el = $.createEl('input');
+		el.value = value;
+		el.type = type;
+		el.style.boxSizing = 'border-box';
+		return el;
+	};
+
+	$.createP = (content) => $.createEl('p', content);
+
+	let radioCount = 0;
+	$.createRadio = (name) => {
+		let el = $.createEl('div');
+		el.name = name || 'radio' + radioCount++;
+		el.buttons = [];
+		Object.defineProperty(el, 'value', {
+			get: () => el.selected?.value,
+			set: (v) => {
+				let btn = el.buttons.find((b) => b.value == v);
+				if (btn) {
+					btn.checked = true;
+					el.selected = btn;
+				}
+			}
+		});
+		el.option = (label, value) => {
+			let btn = $.createEl('input');
+			btn.type = 'radio';
+			btn.name = el.name;
+			btn.value = value || label;
+			btn.addEventListener('change', () => (el.selected = btn));
+
+			let lbl = $.createEl('label', label);
+			lbl.addEventListener('click', () => {
+				btn.checked = true;
+				el.selected = btn;
+				btn.dispatchEvent(new Event('change', { bubbles: true }));
+			});
+
+			btn.label = lbl;
+			el.append(btn);
+			el.append(lbl);
+			el.buttons.push(btn);
+			return el;
+		};
+
+		return el;
+	};
+
+	$.createSelect = (placeholder) => {
+		let el = $.createEl('select');
+		if (placeholder) {
+			let opt = $.createEl('option', placeholder);
+			opt.disabled = true;
+			opt.selected = true;
+			el.append(opt);
+		}
+		Object.defineProperty(el, 'selected', {
+			get: () => {
+				if (el.multiple) return Array.from(el.selectedOptions);
+				return el.selectedOptions[0];
+			},
+			set: (v) => {
+				if (el.multiple) {
+					el.options.forEach((o) => (o.selected = v.includes(o)));
+				} else {
+					v.selected = true;
+				}
+			}
+		});
+		Object.defineProperty(el, 'value', {
+			get: () => {
+				if (el.multiple) {
+					return Array.from(el.selectedOptions).map((o) => o.value);
+				}
+				return el.selectedOptions[0]?.value;
+			},
+			set: (v) => {
+				if (el.multiple) {
+					el.options.forEach((o) => (o.selected = v.includes(o.value)));
+				} else {
+					let opt;
+					for (let i = 0; i < el.options.length; i++) {
+						if (el.options[i].value == v) {
+							opt = el.options[i];
+							break;
+						}
+					}
+					if (opt) opt.selected = true;
+				}
+			}
+		});
+		el.option = (label, value) => {
+			let opt = $.createEl('option', label);
+			opt.value = value || label;
+			el.append(opt);
+			return el;
+		};
+		return el;
+	};
+
+	$.createSlider = (min, max, value, step) => {
+		let el = $.createEl('input');
+		el.type = 'range';
+		el.min = min;
+		el.max = max;
+		el.value = value;
+		el.step = step;
+		el.val = () => parseFloat(el.value);
+		return el;
+	};
+
+	$.createSpan = (content) => $.createEl('span', content);
+
+	$.createVideo = (src) => {
+		let el = $.createEl('video');
+		el.crossOrigin = 'anonymous';
+		el.src = src;
+		return el;
+	};
+
+	$.findElement = (selector) => document.querySelector(selector);
+	$.findElements = (selector) => document.querySelectorAll(selector);
+};
 Q5.modules.input = ($, q) => {
 	if ($._scope == 'graphics') return;
 
@@ -4954,7 +5216,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	$.background = (r, g, b, a) => {
 		$.push();
 		$.resetMatrix();
-		if (r.src) {
+		if (r.canvas) {
 			let img = r;
 			$._imageMode = 'corner';
 			$.image(img, -c.hw, -c.hh, c.w, c.h);