Add premultiply after fixup step

Author: danburzo

docs/api.md

@@ -500,8 +500,8 @@ Here's the implementation of alpha premultiplication:
 
 ```js
 const multiplyAlpha = culori.mapper((val, ch, color) => {
-	if (ch !== 'alpha' && val !== undefined) {
-		return val / (color.alpha !== undefined ? color.alpha : 1);
+	if (ch !== 'alpha') {
+		return (val || 0) / (color.alpha !== undefined ? color.alpha : 1);
 	}
 	return val;
 }, 'rgb');
@@ -526,6 +526,8 @@ multiplyAlpha({ r: 1, g: 0.6, b: 0.4, a: 0.5 });
 // => { mode: 'rgb', r: 0.5, g: 0.3, b: 0.2, a: 0.5 }
 ```
 
+Any `undefined` channel value will be considered to be `0` (zero), to enable alpha-premultiplied interpolation with achromatic colors in hue-based color spaces (HSL, LCh, etc.).
+
 <a name="culoriMapAlphaDivide" href="#culoriMapAlphaDivide">#</a> culori.**mapAlphaDivide** &middot; [Source](https://github.com/evercoder/culori/blob/master/src/map.js)
 
 Divides a color's other channels by its alpha value. It's the opposite of `culori.mapAlphaMultiply`, and is used in interpolation with alpha premultiplication:
@@ -538,9 +540,11 @@ divideAlpha(multiplyAlpha({ r: 1, g: 0.6, b: 0.4, a: 0.5 }));
 // => { mode: 'rgb', r: 1, g: 0.6, b: 0.4, a: 0.5 }
 ```
 
+Any `undefined` channel value will be considered to be `0` (zero), to enable alpha-premultiplied interpolation with achromatic colors in hue-based color spaces (HSL, LCh, etc.).
+
 #### Interpolating with mappings
 
-<a name="culoriInterpolateWith" href="#culoriInterpolateWith">#</a> culori.**interpolateWith**(_premap_, _postmap_) &middot; [Source](https://github.com/evercoder/culori/blob/master/src/map.js)
+<a name="culoriInterpolateWith" href="#culoriInterpolateWith">#</a> culori.**interpolateWith**(_premap_, _postmap_) &middot; [Source](https://github.com/evercoder/culori/blob/master/src/interpolate.js)
 
 Adds a _pre-mapping_ and a _post-mapping_ to an interpolation, to enable things like alpha premultiplication:
 
@@ -572,7 +576,7 @@ let interpolateWithAlphaChromaPremult = culori.interpolateWith(
 interpolateWithAlphaPremult(['red', 'transparent', 'blue'])(0.25);
 ```
 
-<a name="culoriInterpolateWithPremultipliedAlpha" href="#culoriInterpolateWithPremultipliedAlpha">#</a> culori.**interpolateWithPremultipliedAlpha**(_colors_, _mode = "rgb"_, _overrides_) &middot; [Source](https://github.com/evercoder/culori/blob/master/src/map.js)
+<a name="culoriInterpolateWithPremultipliedAlpha" href="#culoriInterpolateWithPremultipliedAlpha">#</a> culori.**interpolateWithPremultipliedAlpha**(_colors_, _mode = "rgb"_, _overrides_) &middot; [Source](https://github.com/evercoder/culori/blob/master/src/interpolate.js)
 
 Works like `culori.interpolate()`, but with alpha premultiplication.
 

src/interpolate/interpolate.js

@@ -9,7 +9,7 @@ const isfn = o => typeof o === 'function';
 const isobj = o => o && typeof o === 'object';
 const isnum = o => typeof o === 'number';
 
-const interpolate_fn = (colors, mode = 'rgb', overrides, pre = identity) => {
+const interpolate_fn = (colors, mode = 'rgb', overrides, premap) => {
 	let def = getModeDefinition(mode);
 	let conv = converter(mode);
 
@@ -19,51 +19,72 @@ const interpolate_fn = (colors, mode = 'rgb', overrides, pre = identity) => {
 
 	colors.forEach(val => {
 		if (Array.isArray(val)) {
-			conv_colors.push(pre(conv(val[0])));
+			conv_colors.push(conv(val[0]));
 			positions.push(val[1]);
 		} else if (isnum(val) || isfn(val)) {
 			// Color interpolation hint or easing function
 			fns[positions.length] = val;
 		} else {
-			conv_colors.push(pre(conv(val)));
+			conv_colors.push(conv(val));
 			positions.push(undefined);
 		}
 	});
 
 	normalizePositions(positions);
 
-	let zipped = def.channels.reduce((res, channel) => {
-		res[channel] = conv_colors.map(color => color[channel]);
-		return res;
-	}, {});
-
 	// override the default interpolators
 	// from the color space definition with any custom ones
-
-	const interpolator = (ch, values) => {
-		let ifn, ffn;
-		if (isfn(def.interpolate[ch])) {
-			ifn = def.interpolate[ch];
-			ffn = identity;
+	let fixed = def.channels.reduce((res, ch) => {
+		let ffn;
+		if (isobj(overrides) && isobj(overrides[ch]) && overrides[ch].fixup) {
+			ffn = overrides[ch].fixup;
+		} else if (isobj(def.interpolate[ch]) && def.interpolate[ch].fixup) {
+			ffn = def.interpolate[ch].fixup;
 		} else {
-			ifn = def.interpolate[ch].use;
-			ffn = def.interpolate[ch].fixup || identity;
+			ffn = identity;
 		}
+		res[ch] = ffn(conv_colors.map(color => color[ch]));
+		return res;
+	}, {});
+
+	if (premap) {
+		let ccolors = conv_colors.map((color, idx) => {
+			return def.channels.reduce(
+				(c, ch) => {
+					c[ch] = fixed[ch][idx];
+					return c;
+				},
+				{ mode }
+			);
+		});
+		fixed = def.channels.reduce((res, ch) => {
+			res[ch] = ccolors.map(c => {
+				let v = premap(c[ch], ch, c, mode);
+				return isNaN(v) ? undefined : v;
+			});
+			return res;
+		}, {});
+	}
+
+	let interpolators = def.channels.reduce((res, ch) => {
+		let ifn;
 		if (isfn(overrides)) {
 			ifn = overrides;
-		} else if (isobj(overrides)) {
-			if (isfn(overrides[ch])) {
-				ifn = overrides[ch];
-			} else if (isobj(overrides[ch])) {
-				ifn = isfn(overrides[ch].use) ? overrides[ch].use : ifn;
-				ffn = isfn(overrides[ch].fixup) ? overrides[ch].fixup : ffn;
-			}
+		} else if (isobj(overrides) && isfn(overrides[ch])) {
+			ifn = overrides[ch];
+		} else if (
+			isobj(overrides) &&
+			isobj(overrides[ch]) &&
+			overrides[ch].use
+		) {
+			ifn = overrides[ch].use;
+		} else if (isfn(def.interpolate[ch])) {
+			ifn = def.interpolate[ch];
+		} else if (isobj(def.interpolate[ch])) {
+			ifn = def.interpolate[ch].use;
 		}
-		return ifn(ffn(values));
-	};
 
-	let interpolators = def.channels.reduce((res, ch) => {
-		res[ch] = interpolator(ch, zipped[ch]);
+		res[ch] = ifn(fixed[ch]);
 		return res;
 	}, {});
 
@@ -124,10 +145,9 @@ const interpolateWith = (premap, postmap) => (
 	mode = 'rgb',
 	overrides
 ) => {
-	let pre = premap ? mapper(premap, mode) : undefined;
-	let post = postmap ? mapper(postmap, mode) : identity;
-	let it = interpolate_fn(colors, mode, overrides, pre);
-	return t => post(it(t));
+	let post = postmap ? mapper(postmap, mode) : undefined;
+	let it = interpolate_fn(colors, mode, overrides, premap);
+	return post ? t => post(it(t)) : it;
 };
 
 const interpolateWithPremultipliedAlpha = interpolateWith(

src/map.js

@@ -22,15 +22,15 @@ const mapper = (fn, mode = 'rgb') => {
 };
 
 const mapAlphaMultiply = (v, ch, c) => {
-	if (ch !== 'alpha' && v !== undefined) {
-		return v * (c.alpha !== undefined ? c.alpha : 1);
+	if (ch !== 'alpha') {
+		return (v || 0) * (c.alpha !== undefined ? c.alpha : 1);
 	}
 	return v;
 };
 
 const mapAlphaDivide = (v, ch, c) => {
-	if (ch !== 'alpha' && v !== undefined) {
-		return v === 0 ? 0 : v / (c.alpha !== undefined ? c.alpha : 1);
+	if (ch !== 'alpha' && c.alpha !== 0) {
+		return (v || 0) / (c.alpha !== undefined ? c.alpha : 1);
 	}
 	return v;
 };

test/interpolate.test.js

@@ -221,8 +221,8 @@ tape('interpolateWith()', t => {
 	let it = interpolate(colors);
 	let it2 = interpolateWith(v => v / 2)(colors);
 
-	t.equal(formatHex8(it2(0.25)), '#1f00003e', 'w premultiplication');
-	t.equal(formatHex8(it2(0.75)), '#000050a0', 'w premultiplication');
+	t.equal(formatHex8(it2(0.25)), '#1f00001f', 'w premultiplication');
+	t.equal(formatHex8(it2(0.75)), '#00005050', 'w premultiplication');
 
 	t.end();
 });