fragment-tools 0.1.0

package/src/client/app/utils/color.utils.js

@@ -0,0 +1,427 @@
+/**
+ * 
+ * @param {string} colorName 
+ */
+export function nameToComponents(colorName, element = "temp") {
+	if (colorName.toLowerCase() === "transparent") return [0, 0, 0, 0];
+
+	let temp = document.createElement(element);
+	document.body.appendChild(temp);
+
+	const removeChild = () => temp.parentNode.removeChild(temp);
+
+	let flag = 'rgb(1, 2, 3)';
+	temp.style.color = flag;
+	if (temp.style.color !== flag) {
+		removeChild();
+		return;
+	}
+	temp.style.color = colorName;
+
+	// parse failed
+	if (temp.style.color === flag || temp.style.color === '') {
+		removeChild();
+		return;
+	}
+
+	let color = getComputedStyle(temp).color;
+	removeChild();
+
+	return stringToComponents(color);
+}
+
+export function nameToHex(color) {
+	return componentsToHex(nameToComponents(color));
+}
+
+/**
+ * 
+ * @param {string} value
+ * @return {array}
+ */
+export function stringToComponents(color) {
+	const match = color.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d*(?:\.?\d*?))\))?/);
+
+	if (match) {
+		return [
+			parseInt(match[1]),
+			parseInt(match[2]),
+			parseInt(match[3]),
+			match[4] ? Number(match[4]) : 1];
+	}
+
+	return [];
+}
+
+export function stringToHex(color) {
+	return componentsToHex(stringToComponents(color));
+}
+
+export function vecToComponents(color) {
+	const match = color.match(/vec[3-4]?\((\d*(?:\.\d*?)), ?(\d*(?:\.\d*?)), ?(\d*(?:\.\d*))?(?:, ?(\d*(?:\.?\d*?))\))?/);
+
+	if (match) {
+		return [
+			Math.min(255, Math.max(Math.round(Number(match[1]) * 255), 0)),
+			Math.min(255, Math.max(Math.round(Number(match[2]) * 255), 0)),
+			Math.min(255, Math.max(Math.round(Number(match[3]) * 255), 0)),
+			match[4] ? Math.min(1, Math.max(Number(match[4]), 0)) : 1];
+	}
+
+	console.error(`color.vecToComponents :: cannot parse color`, color);
+
+	return [];
+}
+
+export function vecToHex(color) {
+	return componentsToHex(vecToComponents(color));
+}
+
+// https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion
+export function rgbTohsl(r,g,b) {
+  
+}
+
+export function hslToHSLComponents(color) {
+	const match = color.match(/hsla?\((\d{1,3}), ?(\d{1,3})\%, ?(\d{1,3})\%\)?(?:, ?(\d*(?:\.?\d*?))\))?/);
+
+	if (match) {
+		const h = Math.min(360, Math.max(Number(match[1]), 0));
+		const l = Math.min(100, Math.max(Number(match[2]), 0));
+		const s = Math.min(100, Math.max(Number(match[3]), 0));
+		const a = match[4] ? Math.min(1, Math.max(Number(match[4]), 0)) : 1;
+
+		return [h, s, l, a];
+	}
+
+	console.error(`color.hslToHSLComponents :: cannot parse color`, color);
+	return [];
+}
+
+export function hslToComponents(color) {
+	const [h, s, l, a] = hslToHSLComponents(color);
+
+	// monochromatic
+	if (s === 0) { 
+		const tl = l / 100 * 255;
+
+		return [tl, tl, tl, a];
+	} else {
+		const hue2rgb = (p, q, t) => {
+			if (t < 0) t += 1;
+			if (t > 1) t -= 1;
+			if (t < 1 / 6) return p + (q - p) * 6 * t;
+			if (t < 1 / 2) return q;
+			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+			return p;
+		};
+
+		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+
+		return [
+			hue2rgb(p, q, h + 1 / 3),
+			hue2rgb(p, q, h),
+			hue2rgb(p, q, h - 1 / 3),
+			a,
+		];
+	}
+}
+
+export function hlsToHex(color) {
+	return componentsToHex(hslToComponents(color));
+};
+
+export function hexToComponents(color) {
+	if (color.length < 7){
+		const R = color[1];
+		const G = color[2];
+		const B = color[3];
+
+		if (color.length > 4) {
+			const A = color[4];
+
+			color = `#${R}${R}${G}${G}${B}${B}${A}${A}`;
+		} else {
+			color = `#${R}${R}${G}${G}${B}${B}`;
+		}
+    }
+
+    return [
+		parseInt(color.substr(1, 2), 16),
+        parseInt(color.substr(3, 2), 16),
+		parseInt(color.substr(5, 2), 16),
+		color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1
+	];
+}
+
+/**
+ * Convert a hexadecimal string to 
+ * @param {string} color 
+ * @returns 
+ */
+export function hexToVec3String(color) {
+	return componentsToVec3String(hexToComponents(color));
+}
+
+export function hexToVec4String(color) {
+	return componentsToVec4String(hexToComponents(color));
+}
+
+export function hexToHSLString(color) {
+	return componentsToHSLString(hexToComponents(color));
+}
+
+export function hexToHSLAString(color) {
+	return componentsToHSLAString(hexToComponents(color));
+}
+
+export function toComponents(color) {
+	if (isHexString(color)) return hexToComponents(color);
+	if (isRGBAString(color) || isRGBString(color)) return stringToComponents(color);
+	if (isVec3String(color) || isVec4String(color)) return vecToComponents(color);
+	
+	if (typeof color === "string") return nameToComponents(color);
+
+	console.error(`color.toComponents :: cannot parse color`, color);
+}
+
+export function toVec3String(color) {
+	return componentsToVec3String(toComponents(color));
+}
+
+export function toVec4String(color) {
+	return componentsToVec4String(toComponents(color));
+}
+
+export function componentsToVec3String(components = []) {
+	const [ r = 0, g = 0, b = 0] = components;
+
+	let rn = `${Math.round(r / 255 * 100000) / 100000}`;
+	let gn = `${Math.round(g / 255 * 100000) / 100000}`;
+	let bn = `${Math.round(b / 255 * 100000) / 100000}`;
+
+	if (r === 255 || r === 0) {
+		rn = `${rn}.0`;
+	}
+
+	if (g === 255 || g === 0) {
+		gn = `${gn}.0`;
+	}
+
+	if (b === 255 || b === 0) {
+		bn = `${bn}.0`;
+	}
+
+	return `vec3(${rn}, ${gn}, ${bn})`;
+}
+
+export function componentsToVec4String(components = []) {
+	const [ r = 0, g = 0, b = 0, a = 1] = components;
+
+	let rn = `${Math.round(r / 255 * 100000) / 100000}`;
+	let gn = `${Math.round(g / 255 * 100000) / 100000}`;
+	let bn = `${Math.round(b / 255 * 100000) / 100000}`;
+	let an = `${a}`;
+
+	if (r === 255 || r === 0) {
+		rn = `${rn}.0`;
+	}
+
+	if (g === 255 || g === 0) {
+		gn = `${gn}.0`;
+	}
+
+	if (b === 255 || b === 0) {
+		bn = `${bn}.0`;
+	}
+
+	if (a === 1 || a === 0) {
+		an = `${an}.0`;
+	}
+
+	return `vec4(${rn}, ${gn}, ${bn}, ${an})`;
+}
+
+export function toHex(color) {
+	if (isHexString(color)) return color;
+	if (isRGBString(color)) return stringToHex(color);
+	if (isRGBAString(color)) return stringToHex(color);
+	if (isVec3String(color)) return vecToHex(color);
+	if (isVec4String(color)) return vecToHex(color);
+	if (!color.includes('rgb')) return nameToHex(color);
+
+	console.error(`color.toHex :: cannot parse color`, color);
+}
+
+export function toRGBString(color) {
+	const [r, g, b] = toComponents(color);
+
+	return componentsToRGBString([r, g, b]);
+}
+
+export function toRGBAString(color) {
+	return componentsToRGBAString(toComponents(color));
+}
+
+export function hexToRGBString(color) {
+	return componentsToRGBString(hexToComponents(color));
+}
+
+export function hexToRGBAString(color) {
+	return componentsToRGBString(hexToComponents(color));
+}
+
+export function componentsToRGBString(components) {
+	const [ r, g, b ] = components;
+
+	return `rgb(${r}, ${g}, ${b})`;
+}
+
+export function componentsToRGBAString(components = []) {
+	const [ r = 0, g = 0, b = 0, a = 1 ] = components;
+
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export function componentsToHSLComponents(components = []) {
+	const [ r = 0, g = 0, b = 0 ] = components;
+
+	let v = Math.max(r,g,b);
+	let c = v-Math.min(r,g,b);
+	let f = (1-Math.abs(v+v-c-1));
+  	let h = c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c)); 
+	h = 60*(h<0?h+6:h);
+
+	let l = (f ? c/f : 0);
+	let s = (v+v-c)/2;
+
+	return [h, s, l];
+}
+
+export function hslToHSLString(components) {
+	const [ h = 0, s = 0, l = 0] = components;
+
+	return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+export function hslaToHSLAString(components) {
+	const [ h = 0, s = 0, l = 0, a = 1] = components;
+
+	return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+}
+
+export function componentsToHSLString(components = []) {
+	const [ r = 0, g = 0, b = 0, a = 1 ] = components;
+	return hslToHSLString(componentsToHSLComponents([r, g, b]));
+}
+
+export function componentsToHSLAString(components = []) {
+	const [ r = 0, g = 0, b = 0, a = 1 ] = components;
+	return hslaToHSLAString(componentsToHSLComponents([r, g, b]));
+}
+
+export function componentToHex(c) {
+	return c.toString(16).padStart(2, 0);
+}
+
+export function componentsToHex(components = []) {
+	const [ r = 0, g = 0, b = 0 ] = components;
+
+	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+
+export function isHexString(color, isString = typeof color === "string") {
+	return isString && color[0] === "#";
+}
+
+export function isRGBAString(color, isString = typeof color === "string") {
+	return isString && color.includes("rgba");
+}
+
+export function isRGBString(color, isString = typeof color === "string") {
+	return isString && color.includes("rgb");
+}
+
+export function isHSLAString(color, isString = typeof color === "string") {
+	return isString && color.includes("hsla");
+}
+
+export function isHSLString(color, isString = typeof color === "string") {
+	return isString && color.includes("hsl");
+}
+
+export function isVec3String(color, isString = typeof color === "string") {
+	return isString && color.includes("vec3(");
+}
+
+export function isVec4String(color, isString = typeof color === "string") {
+	return isString && color.includes("vec4(");
+}
+
+export function isRGBAArray(value) {
+	return Array.isArray(value) && value.length === 4 && value.every((c, i) => i < 3 ? (c <= 255) : (c <= 1));
+}
+
+export function isRGBArray(value) {
+	return Array.isArray(value) && value.length === 3 && value.every(c => c <= 255);
+}
+
+export function isName(value) {
+	const components = nameToComponents(value);
+
+	return components && components.length > 0;
+}
+
+export function isTHREE(value) {
+	return value && value.isColor;
+}
+
+export function threeToHexString(value) {
+	if (!isTHREE(value)) {
+		console.error(`color.threeToHexString() : value is not an instance of THREE.Color`);
+	}
+
+	return `#${value.getHexString()}`;
+}
+
+export function isColor(value) {
+	let isString = typeof value === "string";
+
+	if (isHexString(value, isString)) return true;
+	if (isRGBString(value, isString)) return true;
+	if (isVec3String(value, isString)) return true;
+	if (isVec4String(value, isString)) return true;
+	if (isHSLString(value, isString)) return true;
+	if (isRGBArray(value)) return true;
+	if (isRGBAArray(value)) return true;
+	if (isName(value)) return true;
+
+	return false;
+}
+
+export const FORMATS = {
+	HEX_STRING: "hex-string",
+	RGB_STRING: "rgb-string",
+	RGBA_STRING: "rgba-string",
+	HSL_STRING: "hsl-string",
+	HSLA_STRING: "hsla-string",
+	RGB_ARRAY: "rgb-array",
+	RGBA_ARRAY: "rgba-array",
+	VEC3_STRING: "vec3-string",
+	VEC4_STRING: "vec4-string",
+	THREE: "three",
+};
+
+export function getColorFormat(value) {
+	if (isTHREE(value)) return FORMATS.THREE;
+	if (isHexString(value)) return FORMATS.HEX_STRING;
+	if (isRGBAString(value)) return FORMATS.RGBA_STRING;
+	if (isRGBString(value)) return FORMATS.RGB_STRING;
+	if (isRGBArray(value)) return FORMATS.RGB_ARRAY;
+	if (isRGBAArray(value)) return FORMATS.RGBA_ARRAY;
+	if (isVec3String(value)) return FORMATS.VEC3_STRING;
+	if (isVec4String(value)) return FORMATS.VEC4_STRING;
+	if (isHSLAString(value)) return FORMATS.HSLA_STRING;
+	if (isHSLString(value)) return FORMATS.HSL_STRING;
+};

package/src/client/app/utils/file.utils.js

@@ -0,0 +1,77 @@
+export function createBlobFromDataURL(dataURL) {
+    return new Promise((resolve) => {
+        const splitIndex = dataURL.indexOf(',');
+
+        if (splitIndex === -1) {
+            reject(new Error(`createBlobFromDataURL: dataURL doesn't contain extension data.`))
+            return;
+        }
+
+        const base64 = dataURL.slice(splitIndex + 1);
+        const byteString = window.atob(base64);
+        const type = dataURL.slice(0, splitIndex);
+        const mimeMatch = /data:([^;]+)/.exec(type);
+        const mime = (mimeMatch ? mimeMatch[1] : '') || undefined;
+        const ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (var i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+        
+        resolve(new window.Blob([ ab ], { type: mime }));
+    });
+}
+
+export function download(data, filename) {
+	let extension = getFileExtension(filename);
+
+	if (typeof data === "object" && ["json", "txt"].includes(extension)) {
+        data = JSON.stringify(data, undefined, 4);
+    }
+
+	let type = getMimeType(extension);
+	let blob = new Blob([data], { type });
+
+	downloadBlob(blob, { filename });
+}
+
+export function downloadBlob(blob, { filename = "untitled" } = {}) {
+	let a = document.createElement('a');
+	a.style.visibility = 'hidden';
+    a.target = '_blank';
+
+    a.download = filename;
+    a.href = window.URL.createObjectURL(blob);
+    // a.dataset.downloadurl =  [type, a.download, a.href].join(':');
+
+	a.onclick = () => {
+		a.onclick = () => {};
+		setTimeout(() => {
+			window.URL.revokeObjectURL(blob);
+			if (a.parentElement) a.parentElement.removeChild(a);
+			a.removeAttribute('href');
+		});
+	};
+
+    a.click();
+}
+
+export function getFileExtension(path) {
+	const match = path.match(/[^\\/]\.([^.\\/]+)$/);
+
+	if (match && match.length > 1) {
+		return match[1];
+	}
+}
+
+/**
+ * 
+ * @param {string} extension 
+ * @returns {string} mimeType
+ */
+export function getMimeType(extension) {
+	if (extension === "json") return "application/json";
+	if (extension === "txt") return "text";
+	if (extension === "png") return "image/png";
+	if (extension === "jpeg" || extension === "jpg") return "image/jpeg";
+}

package/src/client/app/utils/glsl.utils.js

@@ -0,0 +1,14 @@
+const regex = /<filepath:\/\/(.*)>/;
+
+export function getShaderPath(shader) {
+	const match = shader.match(/<filepath:\/\/(.*)>/);
+	return match && match[1];
+};
+
+export function removeShaderPath(shader, filepath = getShaderPath(shader)) {
+	if (filepath) {
+		return shader.replace(`// <filepath://${filepath}>`, "");
+	}
+
+	return shader;
+}

package/src/client/app/utils/glslErrors.js

@@ -0,0 +1,154 @@
+import { displayError } from "../stores/errors";
+import { getShaderPath, removeShaderPath } from "./glsl.utils";
+
+const methods = ['attachShader'];
+
+const contexts = [WebGLRenderingContext, WebGL2RenderingContext];
+const references = {};
+
+for (let i = 0; i < methods.length; i++) {
+	const method = methods[i];
+	references[method] = contexts.map((context) => context.prototype[method]);
+}
+
+function createUUID() {
+	function s4() {
+		return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+	}
+
+	return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+};
+
+function e(method, fn) {
+	contexts.forEach(context => {
+		const f = context.prototype[method];
+
+		context.prototype[method] = function() {
+			var res = f.apply( this, arguments );
+			res = fn.apply( this, [ res, arguments ] ) || res;
+			return res;
+		}
+	})
+}
+
+const FRAGMENT_SHADER = 35632;
+const VERTEX_SHADER = 35633;
+
+class ShaderCompileError extends Error {
+
+	constructor({
+		source,
+		filename = "",
+		lineNumber,
+		message = `Cannot compile ${filename !== "" ? filename : "shader"}`
+	} = {}) {
+		super(message, filename, lineNumber);
+
+		this.name = "ShaderCompileError";
+		this.source = source;
+		this.lineNumber = lineNumber;
+
+		this.stack = `at (${filename}:${lineNumber})`;
+	}
+}
+
+e('createShader', function(res, args) {
+	if (!this.__uuid) {
+		this.__uuid = createUUID();
+	}
+
+	res.__uuid = createUUID();
+	res.__type = args[0];
+});
+
+e('attachShader', function(res, args) {
+	const program = args[0];
+	const shader = args[1];
+
+	if (shader.__type === FRAGMENT_SHADER) {
+		program.__fragmentShader = shader; 
+	} else if (shader.__type === VERTEX_SHADER) {
+		program.__vertexShader = shader;
+	}
+});
+
+e('shaderSource', function(res, args) {
+	const shader = args[0];
+	const source = args[1];
+
+	shader.__source = source;
+
+	const filepath = getShaderPath(source);
+
+	if (filepath) {
+		const filename = filepath.replace(`${__CWD__}/`, "");
+
+		shader.__filepath = filepath;
+		shader.__filename = filename;
+	}
+});
+
+e('createProgram', function(res, args) {
+	res.__uuid = createUUID();
+});
+
+e('compileShader', function(res, args) {
+	const gl = this;
+	const shader = args[0];
+	const filename = shader.__filename;
+
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		const { source, lineNumber, message } = getShaderError(gl, shader, shader.__type);
+		
+		const error = new ShaderCompileError({
+			source,
+			message,
+			filename,
+			lineNumber,
+		});
+
+		displayError(error, this.__uuid);
+	}
+});
+
+function getShaderError(gl, shader, type) {
+	const status = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+	const errors = gl.getShaderInfoLog(shader).trim();
+
+	if (status && errors === '') return '';
+
+	const errorMatches = errors.match(/ERROR: 0:(\d+):([\s\S]*$)/);
+	
+	if (errorMatches) {
+		const lineNumber = parseInt(errorMatches[1]);
+		const message = errorMatches[2];
+		const shaderSource = gl.getShaderSource(shader);
+		const source = handleSource(shaderSource, lineNumber);
+
+		return {
+			message, 
+			source: source,
+			lineNumber,
+		};
+	} else {
+		return errors;
+	}
+}
+
+function handleSource(source, errorLine) {
+	const hasPath = getShaderPath(source);
+
+	const lines = (hasPath ? removeShaderPath(source) : source).split('\n');
+	const lines2 = [];
+
+	const from = Math.max( errorLine - 6, 0 );
+	const to = Math.min( errorLine + 6, lines.length );
+
+	for ( let i = from; i < to; i ++ ) {
+		const line = i + 1;
+
+		lines2.push( `${line === errorLine ? '>' : ' '} ${line}: ${lines[ i ]}` );
+	}
+
+	return lines2.join( '\n' );
+}

package/src/client/app/utils/index.js

@@ -0,0 +1,39 @@
+/**
+ * 
+ * @param {Map} map 
+ * @param {string} key 
+ * @param {any} find 
+ */
+export const addToMapArray = (map, key, item) => {
+    if (map.has(key)) {
+        map.set(key, [...map.get(key), item]);
+    } else {
+        map.set(key, [item]);
+    }
+}
+
+/**
+ * 
+ * @param {Map} map 
+ * @param {string} key 
+ * @param {function} findIndex 
+ */
+export const removeFromMapArray = (map, key, findIndex) => {
+    if (map.has(key)) {
+        const items = map.get(key);
+        const index = items.findIndex(findIndex);
+
+        if (index >= 0) {
+            const newItems = [...items];
+            newItems.splice(index, 1);
+
+            if (newItems.length > 0) {
+                map.set(key, newItems);
+            } else {
+                map.delete(key);
+            }
+        }
+    } else {
+        console.error(`removeFromMapArray: key ${key} doesn't exist in Map.`, map);
+    }
+};