color-elements 0.0.1

package/lib/colorjs.io/colorjs.io/src/space-accessors.js

@@ -0,0 +1,86 @@
+/**
+ * This plugin defines getters and setters for color[spaceId]
+ * e.g. color.lch on *any* color gives us the lch coords
+ */
+import ColorSpace from "./space.js";
+import Color from "./color.js";
+import hooks from "./hooks.js";
+
+// Add space accessors to existing color spaces
+for (let id in ColorSpace.registry) {
+	addSpaceAccessors(id, ColorSpace.registry[id]);
+}
+
+// Add space accessors to color spaces not yet created
+hooks.add("colorspace-init-end", space => {
+	addSpaceAccessors(space.id, space);
+	space.aliases?.forEach(alias => {
+		addSpaceAccessors(alias, space);
+	});
+});
+
+function addSpaceAccessors (id, space) {
+	let propId = id.replace(/-/g, "_");
+
+	Object.defineProperty(Color.prototype, propId, {
+		// Convert coords to coords in another colorspace and return them
+		// Source colorspace: this.spaceId
+		// Target colorspace: id
+		get () {
+			let ret = this.getAll(id);
+
+			if (typeof Proxy === "undefined") {
+				// If proxies are not supported, just return a static array
+				return ret;
+			}
+
+			// Enable color.spaceId.coordName syntax
+			return new Proxy(ret, {
+				has: (obj, property) => {
+					try {
+						ColorSpace.resolveCoord([space, property]);
+						return true;
+					}
+					catch (e) {}
+
+					return Reflect.has(obj, property);
+				},
+				get: (obj, property, receiver) => {
+					if (property && typeof property !== "symbol" && !(property in obj)) {
+						let {index} = ColorSpace.resolveCoord([space, property]);
+
+						if (index >= 0) {
+							return obj[index];
+						}
+					}
+
+					return Reflect.get(obj, property, receiver);
+				},
+				set: (obj, property, value, receiver) => {
+					if (property && typeof property !== "symbol" && !(property in obj) || property >= 0) {
+						let {index} = ColorSpace.resolveCoord([space, property]);
+
+						if (index >= 0) {
+							obj[index] = value;
+
+							// Update color.coords
+							this.setAll(id, obj);
+
+							return true;
+						}
+					}
+
+					return Reflect.set(obj, property, value, receiver);
+				},
+			});
+		},
+		// Convert coords in another colorspace to internal coords and set them
+		// Target colorspace: this.spaceId
+		// Source colorspace: id
+		set (coords) {
+			this.setAll(id, coords);
+		},
+		configurable: true,
+		enumerable: true,
+	});
+}

package/lib/colorjs.io/colorjs.io/src/space.js

@@ -0,0 +1,440 @@
+import {type, parseCoordGrammar, serializeNumber, mapRange} from "./util.js";
+import {getWhite} from "./adapt.js";
+import hooks from "./hooks.js";
+import getColor from "./getColor.js";
+
+const ε = .000075;
+
+/**
+ * Class to represent a color space
+ */
+export default class ColorSpace {
+	constructor (options) {
+		this.id = options.id;
+		this.name = options.name;
+		this.base = options.base ? ColorSpace.get(options.base) : null;
+		this.aliases = options.aliases;
+
+		if (this.base) {
+			this.fromBase = options.fromBase;
+			this.toBase = options.toBase;
+		}
+
+		// Coordinate metadata
+
+		let coords = options.coords ?? this.base.coords;
+
+		for (let name in coords) {
+			if (!("name" in coords[name])) {
+				coords[name].name = name;
+			}
+		}
+		this.coords = coords;
+
+		// White point
+
+		let white = options.white ?? this.base.white ?? "D65";
+		this.white = getWhite(white);
+
+		// Sort out formats
+
+		this.formats = options.formats ?? {};
+
+		for (let name in this.formats) {
+			let format = this.formats[name];
+			format.type ||= "function";
+			format.name ||= name;
+		}
+
+		if (!this.formats.color?.id) {
+			this.formats.color = {
+				...this.formats.color ?? {},
+				id: options.cssId || this.id,
+			};
+		}
+
+		// Gamut space
+
+		if (options.gamutSpace) {
+			// Gamut space explicitly specified
+			this.gamutSpace = options.gamutSpace === "self" ? this : ColorSpace.get(options.gamutSpace);
+		}
+		else {
+			// No gamut space specified, calculate a sensible default
+			if (this.isPolar) {
+				// Do not check gamut through polar coordinates
+				this.gamutSpace = this.base;
+			}
+			else {
+				this.gamutSpace =  this;
+			}
+		}
+
+		// Optimize inGamut for unbounded spaces
+		if (this.gamutSpace.isUnbounded) {
+			this.inGamut = (coords, options) => {
+				return true;
+			};
+		}
+
+		// Other stuff
+		this.referred = options.referred;
+
+		// Compute ancestors and store them, since they will never change
+		Object.defineProperty(this, "path", {
+			value: getPath(this).reverse(),
+			writable: false,
+			enumerable: true,
+			configurable: true,
+		});
+
+		hooks.run("colorspace-init-end", this);
+	}
+
+	inGamut (coords, {epsilon = ε} = {}) {
+		if (!this.equals(this.gamutSpace)) {
+			coords = this.to(this.gamutSpace, coords);
+			return this.gamutSpace.inGamut(coords, {epsilon});
+		}
+
+		let coordMeta = Object.values(this.coords);
+
+		return coords.every((c, i) => {
+			let meta = coordMeta[i];
+
+			if (meta.type !== "angle" && meta.range) {
+				if (Number.isNaN(c)) {
+					// NaN is always in gamut
+					return true;
+				}
+
+				let [min, max] = meta.range;
+				return (min === undefined || c >= min - epsilon)
+				    && (max === undefined || c <= max + epsilon);
+			}
+
+			return true;
+		});
+	}
+
+	get isUnbounded () {
+		return Object.values(this.coords).every(coord => !("range" in coord));
+	}
+
+	get cssId () {
+		return this.formats?.color?.id || this.id;
+	}
+
+	get isPolar () {
+		for (let id in this.coords) {
+			if (this.coords[id].type === "angle") {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	getFormat (format) {
+		if (typeof format === "object") {
+			format = processFormat(format, this);
+			return format;
+		}
+
+		let ret;
+		if (format === "default") {
+			// Get first format
+			ret = Object.values(this.formats)[0];
+		}
+		else {
+			ret = this.formats[format];
+		}
+
+		if (ret) {
+			ret = processFormat(ret, this);
+			return ret;
+		}
+
+		return null;
+	}
+
+	/**
+	 * Check if this color space is the same as another color space reference.
+	 * Allows proxying color space objects and comparing color spaces with ids.
+	 * @param {string | ColorSpace} space ColorSpace object or id to compare to
+	 * @returns {boolean}
+	 */
+	equals (space) {
+		if (!space) {
+			return false;
+		}
+
+		return this === space || this.id === space || this.id === space.id;
+	}
+
+	to (space, coords) {
+		if (arguments.length === 1) {
+			const color = getColor(space);
+			[space, coords] = [color.space, color.coords];
+		}
+
+		space = ColorSpace.get(space);
+
+		if (this.equals(space)) {
+			// Same space, no change needed
+			return coords;
+		}
+
+		// Convert NaN to 0, which seems to be valid in every coordinate of every color space
+		coords = coords.map(c => Number.isNaN(c) ? 0 : c);
+
+		// Find connection space = lowest common ancestor in the base tree
+		let myPath = this.path;
+		let otherPath = space.path;
+
+		let connectionSpace, connectionSpaceIndex;
+
+		for (let i = 0; i < myPath.length; i++) {
+			if (myPath[i].equals(otherPath[i])) {
+				connectionSpace = myPath[i];
+				connectionSpaceIndex = i;
+			}
+			else {
+				break;
+			}
+		}
+
+		if (!connectionSpace) {
+			// This should never happen
+			throw new Error(`Cannot convert between color spaces ${this} and ${space}: no connection space was found`);
+		}
+
+		// Go up from current space to connection space
+		for (let i = myPath.length - 1; i > connectionSpaceIndex; i--) {
+			coords = myPath[i].toBase(coords);
+		}
+
+		// Go down from connection space to target space
+		for (let i = connectionSpaceIndex + 1; i < otherPath.length; i++) {
+			coords = otherPath[i].fromBase(coords);
+		}
+
+		return coords;
+	}
+
+	from (space, coords) {
+		if (arguments.length === 1) {
+			const color = getColor(space);
+			[space, coords] = [color.space, color.coords];
+		}
+
+		space = ColorSpace.get(space);
+
+		return space.to(this, coords);
+	}
+
+	toString () {
+		return `${this.name} (${this.id})`;
+	}
+
+	getMinCoords () {
+		let ret = [];
+
+		for (let id in this.coords) {
+			let meta = this.coords[id];
+			let range = meta.range || meta.refRange;
+			ret.push(range?.min ?? 0);
+		}
+
+		return ret;
+	}
+
+	static registry = {};
+
+	// Returns array of unique color spaces
+	static get all () {
+		return [...new Set(Object.values(ColorSpace.registry))];
+	}
+
+	static register (id, space) {
+		if (arguments.length === 1) {
+			space = arguments[0];
+			id = space.id;
+		}
+
+		space = this.get(space);
+
+		if (this.registry[id] && this.registry[id] !== space) {
+			throw new Error(`Duplicate color space registration: '${id}'`);
+		}
+		this.registry[id] = space;
+
+		// Register aliases when called without an explicit ID.
+		if (arguments.length === 1 && space.aliases) {
+			for (let alias of space.aliases) {
+				this.register(alias, space);
+			}
+		}
+
+		return space;
+	}
+
+	/**
+	 * Lookup ColorSpace object by name
+	 * @param {ColorSpace | string} name
+	 */
+	static get (space, ...alternatives) {
+		if (!space || space instanceof ColorSpace) {
+			return space;
+		}
+
+		let argType = type(space);
+
+		if (argType === "string") {
+			// It's a color space id
+			let ret = ColorSpace.registry[space.toLowerCase()];
+
+			if (!ret) {
+				throw new TypeError(`No color space found with id = "${space}"`);
+			}
+
+			return ret;
+		}
+
+		if (alternatives.length) {
+			return ColorSpace.get(...alternatives);
+		}
+
+		throw new TypeError(`${space} is not a valid color space`);
+	}
+
+	/**
+	 * Get metadata about a coordinate of a color space
+	 *
+	 * @static
+	 * @param {Array | string} ref
+	 * @param {ColorSpace | string} [workingSpace]
+	 * @return {Object}
+	 */
+	static resolveCoord (ref, workingSpace) {
+		let coordType = type(ref);
+		let space, coord;
+
+		if (coordType === "string") {
+			if (ref.includes(".")) {
+				// Absolute coordinate
+				[space, coord] = ref.split(".");
+			}
+			else {
+				// Relative coordinate
+				[space, coord] = [, ref];
+			}
+		}
+		else if (Array.isArray(ref)) {
+			[space, coord] = ref;
+		}
+		else {
+			// Object
+			space = ref.space;
+			coord = ref.coordId;
+		}
+
+		space = ColorSpace.get(space);
+
+		if (!space) {
+			space = workingSpace;
+		}
+
+		if (!space) {
+			throw new TypeError(`Cannot resolve coordinate reference ${ref}: No color space specified and relative references are not allowed here`);
+		}
+
+		coordType = type(coord);
+
+		if (coordType === "number" || coordType === "string" && coord >= 0) {
+			// Resolve numerical coord
+			let meta = Object.entries(space.coords)[coord];
+
+			if (meta) {
+				return {space, id: meta[0], index: coord, ...meta[1]};
+			}
+		}
+
+		space = ColorSpace.get(space);
+
+		let normalizedCoord = coord.toLowerCase();
+
+		let i = 0;
+		for (let id in space.coords) {
+			let meta = space.coords[id];
+
+			if (id.toLowerCase() === normalizedCoord || meta.name?.toLowerCase() === normalizedCoord) {
+				return {space, id, index: i, ...meta};
+			}
+
+			i++;
+		}
+
+		throw new TypeError(`No "${coord}" coordinate found in ${space.name}. Its coordinates are: ${Object.keys(space.coords).join(", ")}`);
+	}
+
+	static DEFAULT_FORMAT = {
+		type: "functions",
+		name: "color",
+	};
+}
+
+function getPath (space) {
+	let ret = [space];
+
+	for (let s = space; s = s.base;) {
+		ret.push(s);
+	}
+
+	return ret;
+}
+
+function processFormat (format, {coords} = {}) {
+	if (format.coords && !format.coordGrammar) {
+		format.type ||= "function";
+		format.name ||= "color";
+
+		// Format has not been processed
+		format.coordGrammar = parseCoordGrammar(format.coords);
+
+		let coordFormats = Object.entries(coords).map(([id, coordMeta], i) => {
+			// Preferred format for each coord is the first one
+			let outputType = format.coordGrammar[i][0];
+
+			let fromRange = coordMeta.range || coordMeta.refRange;
+			let toRange = outputType.range, suffix = "";
+
+			// Non-strict equals intentional since outputType could be a string object
+			if (outputType == "<percentage>") {
+				toRange = [0, 100];
+				suffix = "%";
+			}
+			else if (outputType == "<angle>") {
+				suffix = "deg";
+			}
+
+			return  {fromRange, toRange, suffix};
+		});
+
+		format.serializeCoords = (coords, precision) => {
+			return coords.map((c, i) => {
+				let {fromRange, toRange, suffix} = coordFormats[i];
+
+				if (fromRange && toRange) {
+					c = mapRange(fromRange, toRange, c);
+				}
+
+				c = serializeNumber(c, {precision, unit: suffix});
+
+				return c;
+			});
+		};
+	}
+
+	return format;
+}

package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb-linear.js

@@ -0,0 +1,28 @@
+import RGBColorSpace from "../rgbspace.js";
+
+// convert an array of linear-light a98-rgb values to CIE XYZ
+// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+// has greater numerical precision than section 4.3.5.3 of
+// https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
+// but the values below were calculated from first principles
+// from the chromaticity coordinates of R G B W
+const toXYZ_M = [
+	[ 0.5766690429101305,   0.1855582379065463,   0.1882286462349947  ],
+	[ 0.29734497525053605,  0.6273635662554661,   0.07529145849399788 ],
+	[ 0.02703136138641234,  0.07068885253582723,  0.9913375368376388  ],
+];
+
+const fromXYZ_M = [
+	[  2.0415879038107465,    -0.5650069742788596,   -0.34473135077832956 ],
+	[ -0.9692436362808795,     1.8759675015077202,    0.04155505740717557 ],
+	[  0.013444280632031142,  -0.11836239223101838,   1.0151749943912054  ],
+];
+
+export default new RGBColorSpace({
+	id: "a98rgb-linear",
+	cssId: "--a98-rgb-linear",
+	name: "Linear Adobe® 98 RGB compatible",
+	white: "D65",
+	toXYZ_M,
+	fromXYZ_M,
+});

package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb.js

@@ -0,0 +1,11 @@
+import RGBColorSpace from "../rgbspace.js";
+import A98Linear from "./a98rgb-linear.js";
+
+export default new RGBColorSpace({
+	id: "a98rgb",
+	cssId: "a98-rgb",
+	name: "Adobe® 98 RGB compatible",
+	base: A98Linear,
+	toBase: RGB => RGB.map(val => Math.pow(Math.abs(val), 563 / 256) * Math.sign(val)),
+	fromBase: RGB => RGB.map(val => Math.pow(Math.abs(val), 256 / 563) * Math.sign(val)),
+});

package/lib/colorjs.io/colorjs.io/src/spaces/acescc.js

@@ -0,0 +1,76 @@
+import RGBColorSpace from "../rgbspace.js";
+import "../CATs.js"; // because of the funky whitepoint
+import ACEScg from "./acescg.js";
+
+const ε = 2 ** -16;
+
+// the smallest value which, in the 32bit IEEE 754 float encoding,
+// decodes as a non-negative value
+const ACES_min_nonzero = -0.35828683;
+
+// brightest encoded value, decodes to 65504
+const ACES_cc_max = (Math.log2(65504) + 9.72) / 17.52; // 1.468
+
+export default new RGBColorSpace({
+	id: "acescc",
+	cssId: "--acescc",
+	name: "ACEScc",
+	// see S-2014-003 ACEScc – A Logarithmic Encoding of ACES Data
+	// https://docs.acescentral.com/specifications/acescc/
+	// uses the AP1 primaries, see section 4.3.1 Color primaries
+
+	// Appendix A: "Very small ACES scene referred values below 7 1/4 stops
+	// below 18% middle gray are encoded as negative ACEScc values.
+	// These values should be preserved per the encoding in Section 4.4
+	// so that all positive ACES values are maintained."
+	coords: {
+		r: {
+			range: [ACES_min_nonzero, ACES_cc_max],
+			name: "Red",
+		},
+		g: {
+			range: [ACES_min_nonzero, ACES_cc_max],
+			name: "Green",
+		},
+		b: {
+			range: [ACES_min_nonzero, ACES_cc_max],
+			name: "Blue",
+		},
+	},
+	referred: "scene",
+
+	base: ACEScg,
+	// from section 4.4.2 Decoding Function
+	toBase (RGB) {
+		const low = (9.72 - 15) / 17.52; // -0.3014
+
+		return RGB.map(function (val) {
+			if (val <= low) {
+				return (2 ** ((val * 17.52) - 9.72) - ε) * 2; // very low values, below -0.3014
+			}
+			else if (val < ACES_cc_max) {
+				return 2 ** ((val * 17.52) - 9.72);
+			}
+			else { // val >= ACES_cc_max
+				return 65504;
+			}
+		});
+	},
+
+	// Non-linear encoding function from S-2014-003, section 4.4.1 Encoding Function
+	fromBase (RGB) {
+		return RGB.map(function (val) {
+			if (val <= 0) {
+				return (Math.log2(ε) + 9.72) / 17.52; // -0.3584
+			}
+			else if (val < ε) {
+				return  (Math.log2(ε + val * 0.5) + 9.72) / 17.52;
+			}
+			else { // val >= ε
+				return  (Math.log2(val) + 9.72) / 17.52;
+			}
+		});
+	},
+	// encoded media white (rgb 1,1,1) => linear  [ 222.861, 222.861, 222.861 ]
+	// encoded media black (rgb 0,0,0) => linear [ 0.0011857, 0.0011857, 0.0011857]
+});

package/lib/colorjs.io/colorjs.io/src/spaces/acescg.js

@@ -0,0 +1,54 @@
+import RGBColorSpace from "../rgbspace.js";
+import {WHITES} from "../adapt.js";
+import "../CATs.js"; // because of the funky whitepoint
+
+// The ACES whitepoint
+// see TB-2018-001 Derivation of the ACES White Point CIE Chromaticity Coordinates
+// also https://github.com/ampas/aces-dev/blob/master/documents/python/TB-2018-001/aces_wp.py
+// Similar to D60
+WHITES.ACES = [0.32168 / 0.33767, 1.00000, (1.00000 - 0.32168 - 0.33767) / 0.33767];
+
+// convert an array of linear-light ACEScc values to CIE XYZ
+const toXYZ_M = [
+	[  0.6624541811085053,   0.13400420645643313,  0.1561876870049078  ],
+	[  0.27222871678091454,  0.6740817658111484,   0.05368951740793705 ],
+	[ -0.005574649490394108, 0.004060733528982826, 1.0103391003129971  ],
+];
+const fromXYZ_M = [
+	[  1.6410233796943257,   -0.32480329418479,    -0.23642469523761225  ],
+	[ -0.6636628587229829,    1.6153315916573379,   0.016756347685530137 ],
+	[  0.011721894328375376, -0.008284441996237409, 0.9883948585390215   ],
+];
+
+export default new RGBColorSpace({
+	id: "acescg",
+	cssId: "--acescg",
+	name: "ACEScg",
+
+	// ACEScg – A scene-referred, linear-light encoding of ACES Data
+	// https://docs.acescentral.com/specifications/acescg/
+	// uses the AP1 primaries, see section 4.3.1 Color primaries
+	coords: {
+		r: {
+			range: [0, 65504],
+			name: "Red",
+		},
+		g: {
+			range: [0, 65504],
+			name: "Green",
+		},
+		b: {
+			range: [0, 65504],
+			name: "Blue",
+		},
+	},
+
+	referred: "scene",
+
+	white: WHITES.ACES,
+
+	toXYZ_M,
+	fromXYZ_M,
+});
+
+// export default Color;