Add option to control whether none/NaN values are serialized as none …

…or 0 Related to #228
color-js · Sep 3, 2023 · 278fb41 · 278fb41
1 parent 08b39c1
commit 278fb41
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 26 deletions.
diff --git a/src/serialize.js b/src/serialize.js
@@ -12,11 +12,13 @@ import clone from "./clone.js";
  * @param {Object} options
  * @param {number} options.precision - Significant digits
  * @param {boolean} options.inGamut - Adjust coordinates to fit in gamut first? [default: false]
+ * @param {boolean} options.stripNone - Strip none values from output (converting them to 0)? [default: false]
  */
 export default function serialize (color, {
 	precision = defaults.precision,
 	format = "default",
 	inGamut = true,
+	stripNone = true,
 	...customOptions
 } = {}) {
 	let ret;
@@ -30,14 +32,15 @@ export default function serialize (color, {
 
 	inGamut ||= format.toGamut;
 
-	let coords = color.coords;
+	let coords = color.coords.slice(); // clone so we can manipulate it
 
-	// Convert NaN to zeros to have a chance at a valid CSS color
-	// Also convert -0 to 0
-	// This also clones it so we can manipulate it
-	coords = coords.map(c => c? c : 0);
+	if (stripNone) {
+		// Convert NaN to zeros
+		coords = coords.map(c => c? c : 0);
+	}
 
 	if (inGamut && !checkInGamut(color)) {
+		// FIXME what happens if the color contains NaNs?
 		coords = toGamut(clone(color), inGamut === true? undefined : inGamut).coords;
 	}
 
@@ -60,7 +63,9 @@ export default function serialize (color, {
 		}
 		else {
 			if (precision !== null) {
-				coords = coords.map(c => util.toPrecision(c, precision));
+				coords = coords.map(c => {
+					return util.serializeNumber(c, {precision});
+				});
 			}
 		}
 
@@ -74,10 +79,10 @@ export default function serialize (color, {
 
 		let alpha = color.alpha;
 		if (precision !== null) {
-			alpha = util.toPrecision(alpha, precision);
+			alpha = util.serializeNumber(alpha, {precision});
 		}
 
-		let strAlpha = color.alpha < 1 && !format.noAlpha? `${format.commas? "," : " /"} ${alpha}` : "";
+		let strAlpha = color.alpha >= 1 || format.noAlpha? "" : `${format.commas? "," : " /"} ${alpha}`;
 		ret = `${name}(${args.join(format.commas? ", " : " ")}${strAlpha})`;
 	}
 

diff --git a/src/space.js b/src/space.js
@@ -1,4 +1,4 @@
-import {type, parseCoordGrammar, toPrecision, mapRange} from "./util.js";
+import {type, parseCoordGrammar, serializeNumber, mapRange} from "./util.js";
 import {getWhite} from "./adapt.js";
 import hooks from "./hooks.js";
 
@@ -396,11 +396,7 @@ function processFormat (format, {coords} = {}) {
 					c = mapRange(fromRange, toRange, c);
 				}
 
-				c = toPrecision(c, precision);
-
-				if (suffix) {
-					c += suffix;
-				}
+				c = serializeNumber(c, {precision, unit: suffix});
 
 				return c;
 			});

diff --git a/src/util.js b/src/util.js
@@ -24,6 +24,14 @@ export function type (o) {
 	return (str.match(/^\[object\s+(.*?)\]$/)[1] || "").toLowerCase();
 }
 
+export function serializeNumber (n, {precision, unit }) {
+	if (Number.isNaN(n) || (n instanceof Number && n?.none)) {
+		return "none";
+	}
+
+	return toPrecision(n, precision) + (unit ??  "");
+}
+
 /**
  * Round a number to a certain number of significant digits
  * @param {number} n - The number to round

diff --git a/test.html b/test.html
@@ -5,25 +5,19 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Experiment</title>
-
-
 </head>
 <body>
 <script type="module">
-	// import Color from "./src/index.js";
+	import Color from "./src/index.js";
 	// import Color2 from "https://colorjs.io/src/index.js";
-	import ColorSpace from "./src/space.js";
-	import "./src/spaces/index.js";
-	import set from "./src/set.js";
-	// import * as util from "./src/util.js";
+	// import ColorSpace from "./src/space.js";
+	// import "./src/spaces/index.js";
 
 	// window.ColorSpace = ColorSpace;
-	// window.Color = Color;
+	window.Color = Color;
 	// window.util = util;
-	// new Color("hsl(0 80% 50%)").set("lch.l", 94).toString()
-	let color = {spaceId: "hsl", coords: [0, 80, 50]};
-	set(color, "lch.l", 94);
-	console.log(color.coords);
+	console.log(new Color("hsl(0 none 50% / none)") + "");
+
 </script>
 </body>
 </html>