Fix colorSpace function property

src/style-spec/function/index.js

@@ -62,31 +62,6 @@ function createFunction(parameters, propertySpec) {
         throw new Error(`Unknown function type "${type}"`);
     }
 
-    let outputFunction;
-
-    // If we're interpolating colors in a color system other than RGBA,
-    // first translate all stop values to that color system, then interpolate
-    // arrays as usual. The `outputFunction` option lets us then translate
-    // the result of that interpolation back into RGBA.
-    if (parameters.colorSpace && parameters.colorSpace !== 'rgb') {
-        if (colorSpaces[parameters.colorSpace]) {
-            const colorspace = colorSpaces[parameters.colorSpace];
-            // Avoid mutating the parameters value
-            parameters = JSON.parse(JSON.stringify(parameters));
-            for (let s = 0; s < parameters.stops.length; s++) {
-                parameters.stops[s] = [
-                    parameters.stops[s][0],
-                    colorspace.forward(parameters.stops[s][1])
-                ];
-            }
-            outputFunction = colorspace.reverse;
-        } else {
-            throw new Error(`Unknown color space: ${parameters.colorSpace}`);
-        }
-    } else {
-        outputFunction = identityFunction;
-    }
-
     if (zoomAndFeatureDependent) {
         const featureFunctions = {};
         const zoomStops = [];
@@ -116,10 +91,10 @@ function createFunction(parameters, propertySpec) {
             interpolationFactor: Interpolate.interpolationFactor.bind(undefined, {name: 'linear'}),
             zoomStops: featureFunctionStops.map(s => s[0]),
             evaluate({zoom}, properties) {
-                return outputFunction(evaluateExponentialFunction({
+                return evaluateExponentialFunction({
                     stops: featureFunctionStops,
                     base: parameters.base
-                }, propertySpec, zoom).evaluate(zoom, properties));
+                }, propertySpec, zoom).evaluate(zoom, properties);
             }
         };
     } else if (zoomDependent) {
@@ -129,7 +104,7 @@ function createFunction(parameters, propertySpec) {
                 Interpolate.interpolationFactor.bind(undefined, {name: 'exponential', base: parameters.base !== undefined ? parameters.base : 1}) :
                 () => 0,
             zoomStops: parameters.stops.map(s => s[0]),
-            evaluate: ({zoom}) => outputFunction(innerFun(parameters, propertySpec, zoom, hashedStops, categoricalKeyType))
+            evaluate: ({zoom}) => innerFun(parameters, propertySpec, zoom, hashedStops, categoricalKeyType)
         };
     } else {
         return {
@@ -139,7 +114,7 @@ function createFunction(parameters, propertySpec) {
                 if (value === undefined) {
                     return coalesce(parameters.default, propertySpec.default);
                 }
-                return outputFunction(innerFun(parameters, propertySpec, value, hashedStops, categoricalKeyType));
+                return innerFun(parameters, propertySpec, value, hashedStops, categoricalKeyType);
             }
         };
     }
@@ -187,7 +162,16 @@ function evaluateExponentialFunction(parameters, propertySpec, input) {
 
     const outputLower = parameters.stops[index][1];
     const outputUpper = parameters.stops[index + 1][1];
-    const interp = interpolate[propertySpec.type] || identityFunction;
+    let interp = interpolate[propertySpec.type] || identityFunction;
+
+    if (parameters.colorSpace && parameters.colorSpace !== 'rgb') {
+        const colorspace = colorSpaces[parameters.colorSpace];
+        if (colorspace) {
+            interp = (a, b) => colorspace.reverse(colorspace.interpolate(colorspace.forward(a), colorspace.forward(b), t));
+        } else {
+            throw new Error(`Unknown color space: ${parameters.colorSpace}`);
+        }
+    }
 
     if (typeof outputLower.evaluate === 'function') {
         return {

src/style-spec/util/color_spaces.js

@@ -1,6 +1,7 @@
 // @flow
 
 const Color = require('./color');
+const interpolate = require('./interpolate');
 
 type LABColor = {
     l: number,
@@ -77,6 +78,15 @@ function labToRgb(labColor: LABColor): Color {
     );
 }
 
+function interpolateLab(from: LABColor, to: LABColor, t: number) {
+    return {
+        l: interpolate.number(from.l, to.l, t),
+        a: interpolate.number(from.a, to.a, t),
+        b: interpolate.number(from.b, to.b, t),
+        alpha: interpolate.number(from.alpha, to.alpha, t)
+    };
+}
+
 // HCL
 function rgbToHcl(rgbColor: Color): HCLColor {
     const {l, a, b} = rgbToLab(rgbColor);
@@ -101,13 +111,24 @@ function hclToRgb(hclColor: HCLColor): Color {
     });
 }
 
+function interpolateHcl(from: HCLColor, to: HCLColor, t: number) {
+    return {
+        h: interpolate.number(from.h, to.h, t),
+        c: interpolate.number(from.c, to.c, t),
+        l: interpolate.number(from.l, to.l, t),
+        alpha: interpolate.number(from.alpha, to.alpha, t)
+    };
+}
+
 module.exports = {
     lab: {
         forward: rgbToLab,
-        reverse: labToRgb
+        reverse: labToRgb,
+        interpolate: interpolateLab
     },
     hcl: {
         forward: rgbToHcl,
-        reverse: hclToRgb
+        reverse: hclToRgb,
+        interpolate: interpolateHcl
     }
 };

test/integration/render-tests/background-color/colorSpace-hcl/style.json

@@ -0,0 +1,32 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "zoom": 5,
+  "sources": {},
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": {
+          "stops": [
+            [
+              0,
+              "rgb(118,0,118)"
+            ],
+            [
+              10,
+              "rgb(255,155,0)"
+            ]
+          ],
+          "colorSpace": "hcl"
+        }
+      }
+    }
+  ]
+}

test/integration/render-tests/background-color/colorSpace-lab/style.json

@@ -0,0 +1,32 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "zoom": 5,
+  "sources": {},
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": {
+          "stops": [
+            [
+              0,
+              "rgb(118,0,118)"
+            ],
+            [
+              10,
+              "rgb(255,155,0)"
+            ]
+          ],
+          "colorSpace": "lab"
+        }
+      }
+    }
+  ]
+}