fragment-tools 0.1.13 → 0.1.15

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

@@ -1,17 +1,17 @@
 export const FORMATS = {
-	HEX_STRING: "hex-string",
-	RGB_STRING: "rgb-string",
-	RGBA_STRING: "rgba-string",
-	HSL_STRING: "hsl-string",
-	HSLA_STRING: "hsla-string",
-	RGB_OBJECT: "rgb-object",
-	RGBA_OBJECT: "rgba-object",
-	VEC3_STRING: "vec3-string",
-	VEC4_STRING: "vec4-string",
-	VEC3_ARRAY: "vec3-array",
-	VEC4_ARRAY: "vec4-array",
-	THREE: "three",
-	CSS_COLOR: "css-color",
+	HEX_STRING: 'hex-string',
+	RGB_STRING: 'rgb-string',
+	RGBA_STRING: 'rgba-string',
+	HSL_STRING: 'hsl-string',
+	HSLA_STRING: 'hsla-string',
+	RGB_OBJECT: 'rgb-object',
+	RGBA_OBJECT: 'rgba-object',
+	VEC3_STRING: 'vec3-string',
+	VEC4_STRING: 'vec4-string',
+	VEC3_ARRAY: 'vec3-array',
+	VEC4_ARRAY: 'vec4-array',
+	THREE: 'three',
+	CSS_COLOR: 'css-color',
 };
 
 export function toHex(color, format = getColorFormat(color)) {
@@ -21,11 +21,16 @@ export function toHex(color, format = getColorFormat(color)) {
 
 	if (format === FORMATS.THREE) return threeToHex(color);
 	if (format === FORMATS.HEX_STRING) return color;
-	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING) return hslToHex(color);
-	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING) return stringToHex(color);
-	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT) return componentsToHex([color.r, color.g, color.b, color.a]);
-	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecStringToHex(color);
-	if (format === FORMATS.VEC3_ARRAY || format === FORMATS.VEC4_ARRAY) return vecArrayToHex(color);
+	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING)
+		return hslToHex(color);
+	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING)
+		return stringToHex(color);
+	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT)
+		return componentsToHex([color.r, color.g, color.b, color.a]);
+	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING)
+		return vecStringToHex(color);
+	if (format === FORMATS.VEC3_ARRAY || format === FORMATS.VEC4_ARRAY)
+		return vecArrayToHex(color);
 	if (format === FORMATS.CSS_COLOR) return nameToHex(color);
 }
 
@@ -36,10 +41,14 @@ export function toComponents(color, format = getColorFormat(color)) {
 
 	if (format === FORMATS.THREE) return [color.r, color.g, color.b, 1];
 	if (format === FORMATS.HEX_STRING) return hexToComponents(color);
-	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING) return hslToComponents(color);
-	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING) return stringToComponents(color);
-	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT) return [color.r, color.g, color.b, isFinite(color.a) ? color.a : 1];
-	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecStringToComponents(color);
+	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING)
+		return hslToComponents(color);
+	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING)
+		return stringToComponents(color);
+	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT)
+		return [color.r, color.g, color.b, isFinite(color.a) ? color.a : 1];
+	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING)
+		return vecStringToComponents(color);
 	if (format === FORMATS.CSS_COLOR) return nameToComponents(color);
 }
 
@@ -57,20 +66,30 @@ export function toString(color, format = getColorFormat(color)) {
 		format === FORMATS.VEC3_STRING ||
 		format === FORMATS.VEC4_STRING ||
 		format === FORMATS.CSS_COLOR
-	) return color;
-	if (format === FORMATS.VEC3_ARRAY) return componentsToRGBString(vecArrayToComponents(color));
-	if (format === FORMATS.VEC4_ARRAY) return componentsToRGBAString(vecArrayToComponents(color));
+	)
+		return color;
+	if (format === FORMATS.VEC3_ARRAY)
+		return componentsToRGBString(vecArrayToComponents(color));
+	if (format === FORMATS.VEC4_ARRAY)
+		return componentsToRGBAString(vecArrayToComponents(color));
 	if (format === FORMATS.THREE) return threeToHex(color);
-	if (format === FORMATS.RGB_OBJECT) return componentsToRGBString([color.r, color.g, color.b])
-	if (format === FORMATS.RGBA_OBJECT) return componentsToRGBAString([color.r, color.g, color.b, color.a ? color.a : 1]);
+	if (format === FORMATS.RGB_OBJECT)
+		return componentsToRGBString([color.r, color.g, color.b]);
+	if (format === FORMATS.RGBA_OBJECT)
+		return componentsToRGBAString([
+			color.r,
+			color.g,
+			color.b,
+			color.a ? color.a : 1,
+		]);
 }
 
 /**
- * 
- * @param {string} colorName 
+ *
+ * @param {string} colorName
  */
-export function nameToComponents(colorName, element = "temp") {
-	if (colorName.toLowerCase() === "transparent") return [0, 0, 0, 0];
+export function nameToComponents(colorName, element = 'temp') {
+	if (colorName.toLowerCase() === 'transparent') return [0, 0, 0, 0];
 
 	let temp = document.createElement(element);
 	document.body.appendChild(temp);
@@ -102,19 +121,22 @@ export function nameToHex(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*?))\))?/);
+	const match = color.match(
+		/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d*(?:\.?\d*?))\))?/,
+	);
 
 	if (match) {
 		return [
 			parseInt(match[1]) / 255,
 			parseInt(match[2]) / 255,
 			parseInt(match[3]) / 255,
-			match[4] ? Number(match[4]) : 1];
+			match[4] ? Number(match[4]) : 1,
+		];
 	}
 
 	return [];
@@ -125,14 +147,17 @@ export function stringToHex(color) {
 }
 
 export function vecStringToComponents(color) {
-	const match = color.match(/vec[3-4]?\((\d*(?:\.\d*?)), ?(\d*(?:\.\d*?)), ?(\d*(?:\.\d*))?(?:, ?(\d*(?:\.?\d*?))\))?/);
+	const match = color.match(
+		/vec[3-4]?\((\d*(?:\.\d*?)), ?(\d*(?:\.\d*?)), ?(\d*(?:\.\d*))?(?:, ?(\d*(?:\.?\d*?))\))?/,
+	);
 
 	if (match) {
 		return [
 			Math.min(1, Math.max(Number(match[1]), 0)),
 			Math.min(1, Math.max(Number(match[2]), 0)),
 			Math.min(1, Math.max(Number(match[3]), 0)),
-			match[4] ? Math.min(1, Math.max(Number(match[4]), 0)) : 1];
+			match[4] ? Math.min(1, Math.max(Number(match[4]), 0)) : 1,
+		];
 	}
 
 	console.error(`color.vecStringToComponents :: cannot parse color`, color);
@@ -143,12 +168,7 @@ export function vecStringToComponents(color) {
 export function vecArrayToComponents(color) {
 	if (color.every((c) => isFinite(c))) {
 		const [r, g, b, a = 1] = color;
-		return [
-			r,
-			g,
-			b,
-			a
-		];
+		return [r, g, b, a];
 	}
 
 	console.error(`color.vecArrayToComponents :: cannot parse color`, color);
@@ -165,12 +185,12 @@ export function vecArrayToHex(color) {
 }
 
 // https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion
-export function rgbTohsl(r,g,b) {
-  
-}
+export function rgbTohsl(r, g, b) {}
 
 export function hslToHSLComponents(color) {
-	const match = color.match(/hsla?\((\d{1,3}),?[\s]?(\d{1,3})\%,?[\s]?(\d{1,3})\%\)?(?:,?[\s]?(\d*(?:\.?\d*?))\))?/);
+	const match = color.match(
+		/hsla?\((\d{1,3}),?[\s]?(\d{1,3})\%,?[\s]?(\d{1,3})\%\)?(?:,?[\s]?(\d*(?:\.?\d*?))\))?/,
+	);
 
 	if (match) {
 		const h = Math.min(360, Math.max(Number(match[1]), 0));
@@ -198,7 +218,7 @@ export function hslToComponents(color) {
 	l /= 100;
 
 	function f(n) {
-		let k = (n + h/30) % 12;
+		let k = (n + h / 30) % 12;
 		let a = s * Math.min(l, 1 - l);
 		return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
 	}
@@ -208,10 +228,10 @@ export function hslToComponents(color) {
 
 export function hslToHex(color) {
 	return componentsToHex(hslToComponents(color));
-};
+}
 
 export function hexToComponents(color) {
-	if (color.length < 7){
+	if (color.length < 7) {
 		const R = color[1];
 		const G = color[2];
 		const B = color[3];
@@ -223,20 +243,20 @@ export function hexToComponents(color) {
 		} else {
 			color = `#${R}${R}${G}${G}${B}${B}`;
 		}
-    }
+	}
 
-    return [
+	return [
 		parseInt(color.substr(1, 2), 16) / 255,
-        parseInt(color.substr(3, 2), 16) / 255,
+		parseInt(color.substr(3, 2), 16) / 255,
 		parseInt(color.substr(5, 2), 16) / 255,
-		color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1
+		color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1,
 	];
 }
 
 /**
- * Convert a hexadecimal string to 
- * @param {string} color 
- * @returns 
+ * Convert a hexadecimal string to
+ * @param {string} color
+ * @returns
  */
 export function hexToVec3String(color) {
 	return componentsToVec3String(hexToComponents(color));
@@ -263,7 +283,7 @@ export function toVec4String(color) {
 }
 
 export function componentsToVec3String(components = []) {
-	const [ r = 0, g = 0, b = 0] = components;
+	const [r = 0, g = 0, b = 0] = components;
 
 	let rn = `${Math.round(r * 1000) / 1000}`;
 	let gn = `${Math.round(g * 1000) / 1000}`;
@@ -285,7 +305,7 @@ export function componentsToVec3String(components = []) {
 }
 
 export function componentsToVec4String(components = []) {
-	const [ r = 0, g = 0, b = 0, a = 1] = components;
+	const [r = 0, g = 0, b = 0, a = 1] = components;
 
 	let rn = `${Math.round(r * 1000) / 1000}`;
 	let gn = `${Math.round(g * 1000) / 1000}`;
@@ -330,13 +350,13 @@ export function hexToRGBAString(color) {
 }
 
 export function componentsToRGBString(components) {
-	const [ r, g, b ] = components;
+	const [r, g, b] = components;
 
 	return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
 }
 
 export function componentsToRGBAString(components = []) {
-	const [ r = 0, g = 0, b = 0, a = 1 ] = components;
+	const [r = 0, g = 0, b = 0, a = 1] = components;
 
 	return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${a})`;
 }
@@ -345,16 +365,21 @@ export function componentsToHSLComponents(components = []) {
 	let [r, g, b] = components;
 	let max = Math.max(...components);
 	let min = Math.min(...components);
-	let [h, s, l] = [NaN, 0, (min + max)/2];
+	let [h, s, l] = [NaN, 0, (min + max) / 2];
 	let d = max - min;
 
 	if (d !== 0) {
-		s = (l === 0 || l === 1) ? 0 : (max - l) / Math.min(l, 1 - l);
+		s = l === 0 || l === 1 ? 0 : (max - l) / Math.min(l, 1 - l);
 
 		switch (max) {
-			case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-			case g: h = (b - r) / d + 2; break;
-			case b: h = (r - g) / d + 4;
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b:
+				h = (r - g) / d + 4;
 		}
 
 		h = h * 60;
@@ -368,25 +393,25 @@ export function componentsToHSLComponents(components = []) {
 }
 
 export function hslToHSLString(components) {
-	const [ h = 0, s = 0, l = 0] = components;
+	const [h = 0, s = 0, l = 0] = components;
 
 	return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`;
 }
 
 export function hslaToHSLAString(components) {
-	const [ h = 0, s = 0, l = 0, a = 1] = components;
+	const [h = 0, s = 0, l = 0, a = 1] = components;
 
 	return `hsla(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%, ${a})`;
 }
 
 export function componentsToHSLString(components = []) {
-	const [ r = 0, g = 0, b = 0, a = 1 ] = 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;
-	const [ h, s, l] = componentsToHSLComponents([r, g, b]);
+	const [r = 0, g = 0, b = 0, a = 1] = components;
+	const [h, s, l] = componentsToHSLComponents([r, g, b]);
 	return hslaToHSLAString([h, s, l, a]);
 }
 
@@ -395,76 +420,87 @@ export function componentToHex(c) {
 }
 
 export function componentsToHex(components = []) {
-	const [ r = 0, g = 0, b = 0 ] = components;
+	const [r = 0, g = 0, b = 0] = components;
 
 	let hex = [r, g, b]
 		.map((c) => Math.round(c * 255))
-		.map(c => {
-			return c.toString(16).padStart(2, "0");
-		}).join("");
+		.map((c) => {
+			return c.toString(16).padStart(2, '0');
+		})
+		.join('');
 
 	return `#${hex}`;
 }
 
-export function isHexString(value, isString = typeof value === "string") {
+export function isHexString(value, isString = typeof value === 'string') {
 	return isString && /^#([a-f0-9]{3,4}){1,2}$/i.test(value);
 }
 
-export function isRGBAString(value, isString = typeof value === "string") {
-	return isString && /rgba\((\d{1,3}),[\s]*(\d{1,3}),[\s]*(\d{1,3})\)?(?:,[\s]*(\d*(?:\.?\d*?))\))?/.test(value);
+export function isRGBAString(value, isString = typeof value === 'string') {
+	return (
+		isString &&
+		/rgba\((\d{1,3}),[\s]*(\d{1,3}),[\s]*(\d{1,3})\)?(?:,[\s]*(\d*(?:\.?\d*?))\))?/.test(
+			value,
+		)
+	);
 }
 
-export function isRGBString(value, isString = typeof value === "string") {
-	return isString && /rgb\((\d{1,3}),[\s]*(\d{1,3}),[\s]*(\d{1,3})\)/.test(value);
+export function isRGBString(value, isString = typeof value === 'string') {
+	return (
+		isString && /rgb\((\d{1,3}),[\s]*(\d{1,3}),[\s]*(\d{1,3})\)/.test(value)
+	);
 }
 
-export function isHSLAString(value, isString = typeof value === "string") {
-	return isString && value.includes("hsla");
+export function isHSLAString(value, isString = typeof value === 'string') {
+	return isString && value.includes('hsla');
 }
 
-export function isHSLString(value, isString = typeof value === "string") {
-	return isString && value.includes("hsl");
+export function isHSLString(value, isString = typeof value === 'string') {
+	return isString && value.includes('hsl');
 }
 
-export function isVec3String(value, isString = typeof value === "string") {
-	return isString && value.includes("vec3(");
+export function isVec3String(value, isString = typeof value === 'string') {
+	return isString && value.includes('vec3(');
 }
 
-export function isVec4String(value, isString = typeof value === "string") {
-	return isString && value.includes("vec4(");
+export function isVec4String(value, isString = typeof value === 'string') {
+	return isString && value.includes('vec4(');
 }
 
 export function isRGBAObject(value) {
-	if (typeof value === "object") {
+	if (typeof value === 'object') {
 		const keys = Object.keys(value);
 
-		return keys.length === 4 &&
+		return (
+			keys.length === 4 &&
 			keys.includes('r') &&
 			keys.includes('g') &&
 			keys.includes('b') &&
-			keys.includes('a');
+			keys.includes('a')
+		);
 	}
 
 	return false;
 }
 
 export function isRGBObject(value) {
-	if (typeof value === "object") {
+	if (typeof value === 'object') {
 		const keys = Object.keys(value);
 
-		return keys.length === 3 &&
+		return (
+			keys.length === 3 &&
 			keys.includes('r') &&
 			keys.includes('g') &&
-			keys.includes('b');
+			keys.includes('b')
+		);
 	}
 
 	return false;
 }
 
-
 export function isVec3Array(value) {
 	if (Array.isArray(value)) {
-		return value.length == 3 && value.every(c => c >= 0 && c <= 1);
+		return value.length == 3 && value.every((c) => c >= 0 && c <= 1);
 	}
 
 	return false;
@@ -472,13 +508,13 @@ export function isVec3Array(value) {
 
 export function isVec4Array(value) {
 	if (Array.isArray(value)) {
-		return value.length == 4 && value.every(c => c >= 0 && c <= 1);
+		return value.length == 4 && value.every((c) => c >= 0 && c <= 1);
 	}
 
 	return false;
 }
 
-export function isCSSColor(value, isString = typeof value === "string") {
+export function isCSSColor(value, isString = typeof value === 'string') {
 	const components = isString && nameToComponents(value);
 
 	return components && components.length > 0;
@@ -490,14 +526,16 @@ export function isTHREE(value) {
 
 export function threeToHex(value) {
 	if (!isTHREE(value)) {
-		console.error(`color.threeToHex() : value is not an instance of THREE.Color`);
+		console.error(
+			`color.threeToHex() : value is not an instance of THREE.Color`,
+		);
 	}
 
 	return `#${value.getHexString()}`;
 }
 
 export function isColor(value) {
-	let isString = typeof value === "string";
+	let isString = typeof value === 'string';
 
 	if (isTHREE(value)) return true;
 	if (isHexString(value, isString)) return true;
@@ -512,7 +550,6 @@ export function isColor(value) {
 	return false;
 }
 
-
 export function getColorFormat(value) {
 	if (isTHREE(value)) return FORMATS.THREE;
 	if (isHexString(value)) return FORMATS.HEX_STRING;
@@ -527,4 +564,4 @@ export function getColorFormat(value) {
 	if (isHSLAString(value)) return FORMATS.HSLA_STRING;
 	if (isHSLString(value)) return FORMATS.HSL_STRING;
 	if (isCSSColor(value)) return FORMATS.CSS_COLOR;
-};
+}

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

@@ -0,0 +1,131 @@
+import { isColor } from './color.utils';
+
+export const fieldTypes = {
+	SELECT: 'select',
+	NUMBER: 'number',
+	VEC: 'vec',
+	CHECKBOX: 'checkbox',
+	TEXT: 'text',
+	LIST: 'list',
+	COLOR: 'color',
+	BUTTON: 'button',
+	DOWNLOAD: 'download',
+	IMAGE: 'image',
+	INTERVAL: 'interval',
+};
+
+/** @type string[] */
+const types = Object.values(fieldTypes);
+
+function isImageURL(url) {
+	return url.match(/\.(jpeg|jpg|gif|png|webp)$/) !== null;
+}
+
+function isImage(value) {
+	return typeof value === HTMLImageElement || isImageURL(value);
+}
+
+export function inferFieldType({ type, value, params, key }) {
+	if (type) {
+		if (types.includes(type)) {
+			return type;
+		}
+
+		console.warn(`Field: type ${type} is invalid for ${key}`);
+	} else if (params.options && Array.isArray(params.options)) {
+		return 'select';
+	} else {
+		if (value === undefined || value === null) {
+			console.warn(`Field: value ${value} for ${key}`);
+			return undefined;
+		}
+
+		const isArray = Array.isArray(value);
+		const isObject = !isArray && typeof value === 'object';
+		const values = isObject ? Object.values(value) : value;
+
+		if (
+			isArray &&
+			value.length === 2 &&
+			typeof params.min === 'number' &&
+			typeof params.max === 'number'
+		) {
+			return fieldTypes.INTERVAL;
+		} else if (isColor(value)) {
+			return fieldTypes.COLOR;
+		} else if (typeof value === 'number') {
+			return fieldTypes.NUMBER;
+		} else if (typeof value === 'function') {
+			return fieldTypes.BUTTON;
+		} else if (typeof value === 'boolean') {
+			return fieldTypes.CHECKBOX;
+		} else if (typeof value === 'string') {
+			if (isImage(value)) {
+				return fieldTypes.IMAGE;
+			}
+
+			return fieldTypes.TEXT;
+		} else {
+			if (
+				(isArray || isObject) &&
+				values.every((v) => typeof v === 'number') &&
+				values.length <= 4
+			) {
+				return fieldTypes.VEC;
+			}
+		}
+	}
+
+	console.warn(`Field: cannot find field type  for ${key}`);
+}
+
+export function hasChanged(initialValue, currentValue) {
+	const initialType = typeof initialValue;
+	const currentType = typeof currentValue;
+
+	if (initialType !== currentType) return true;
+
+	if (Array.isArray(currentValue)) {
+		if (initialValue.length !== currentValue.length) {
+			return true;
+		}
+
+		for (let i = 0; i < currentValue.length; i++) {
+			if (currentValue[i] !== initialValue[i]) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	if (initialType === 'object') {
+		const keys1 = Object.keys(initialValue);
+		const keys2 = Object.keys(currentValue);
+
+		if (
+			keys1.length !== keys2.length ||
+			!keys1.every((key) => keys2.includes(key))
+		) {
+			return true;
+		}
+
+		for (const key of keys1) {
+			const value1 = initialValue[key];
+			const value2 = currentValue[key];
+
+			if (typeof value1 === 'object' && typeof value2 === 'object') {
+				// If both values are objects, recursively compare them
+				if (hasChanged(value1, value2)) {
+					return true;
+				}
+			} else if (value1 !== value2) {
+				// If values are not objects, directly compare them
+				return true;
+			}
+
+			return false;
+		}
+	}
+
+	return initialValue !== currentValue;
+}