color-operations

js/style/paint_properties.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var reference = require('./reference');
-var parseCSSColor = require('csscolorparser').parseCSSColor;
+var colorOP = require('mapbox-gl-color-operations');
 
 module.exports = {};
 
@@ -14,7 +14,7 @@ reference.paint.forEach(function(className) {
             value = prop.default;
 
         if (value === undefined) continue;
-        if (prop.type === 'color') value = parseCSSColor(value);
+        if (prop.type === 'color') value = colorOP.parse(value);
 
         Calculated.prototype[p] = value;
     }

js/style/style_constant.js

@@ -11,21 +11,26 @@ exports.resolve = function(value, constants) {
 
     value = resolve(value);
 
-    if (Array.isArray(value)) {
-        value = value.slice();
-
-        for (i = 0; i < value.length; i++) {
-            if (value[i] in constants) {
-                value[i] = resolve(value[i]);
+    function resolveArray(value) {
+        if (Array.isArray(value)) {
+            for (var i = 0; i < value.length; i++) {
+                value[i] = resolveArray(value[i]);
+                if (value[i] in constants) {
+                    value[i] = resolve(value[i]);
+                }
             }
         }
+        return value;
     }
 
+    value = resolveArray(value);
+
     if (value.stops) {
         value = util.extend({}, value);
         value.stops = value.stops.slice();
 
         for (i = 0; i < value.stops.length; i++) {
+            value.stops[i][1] = resolveArray(value.stops[i][1]);
             if (value.stops[i][1] in constants) {
                 value.stops[i] = [
                     value.stops[i][0],

js/style/style_declaration.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var parseCSSColor = require('csscolorparser').parseCSSColor;
 var mapboxGLFunction = require('mapbox-gl-function');
 var util = require('../util/util');
+var colorOP = require('mapbox-gl-color-operations');
 
 module.exports = StyleDeclaration;
 
@@ -65,7 +65,7 @@ var colorCache = {};
 
 function parseColor(value) {
     if (colorCache[value]) return colorCache[value];
-    var color = prepareColor(parseCSSColor(value));
+    var color = prepareColor(colorOP.parse(value));
     colorCache[value] = color;
     return color;
 }

package.json

@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "brfs": "1.2.0",
-    "csscolorparser": "~1.0.2",
     "envify": "2.0.1",
     "feature-filter": "1.0.0",
     "geojson-rewind": "~0.1.0",
     "geojson-vt": "^1.0.1",
     "gl-matrix": "https://github.com/toji/gl-matrix/archive/v2.2.1.tar.gz",
     "glify": "0.5.0",
+    "mapbox-gl-color-operations": "1.0.0",
     "mapbox-gl-function": "^1.0.0",
-    "mapbox-gl-style-spec": "^7.4.0",
+    "mapbox-gl-style-spec": "https://github.com/mapbox/mapbox-gl-style-spec/archive/v8.tar.gz",
     "minifyify": "^6.1.0",
     "pbf": "^1.2.0",
     "pngjs": "^0.4.0",

test/fixtures/style-basic.json

@@ -1,5 +1,5 @@
 {
-  "version": 7,
+  "version": 8,
   "constants": {
     "@land": "#eee",
     "@water": "#999",
@@ -89,7 +89,7 @@
     "filter": ["==", "$type", "Point"],
     "layout": {
       "text-field": "{name}",
-      "text-font": "Open Sans Regular, Arial Unicode MS Regular",
+      "text-font": "Open Sans Regular", "Arial Unicode MS Regular",
       "text-max-size": 16,
       "text-padding": 10
     },
@@ -106,10 +106,10 @@
     "filter": ["==", "$type", "LineString"],
     "layout": {
       "text-field": "{name}",
-      "text-font": "Open Sans Regular, Arial Unicode MS Regular",
+      "text-font": "Open Sans Regular", "Arial Unicode MS Regular",
       "text-max-size": 12,
       "text-max-angle": 59.59,
-      "symbol-min-distance": 250
+      "symbol-spacing": 250
     },
     "paint": {
       "text-color": "@text",

test/js/style/style.test.js

@@ -13,7 +13,7 @@ var util = require('../../../js/util/util');
 
 function createStyleJSON(properties) {
     return util.extend({
-        "version": 7,
+        "version": 8,
         "sources": {},
         "layers": []
     }, properties);
@@ -72,7 +72,7 @@ test('Style', function(t) {
 test('Style#_resolve', function(t) {
     t.test('creates StyleLayers', function(t) {
         var style = new Style({
-            "version": 7,
+            "version": 8,
             "sources": {
                 "foo": {
                     "type": "vector"
@@ -93,7 +93,7 @@ test('Style#_resolve', function(t) {
 
     t.test('handles ref layer preceding referent', function(t) {
         var style = new Style({
-            "version": 7,
+            "version": 8,
             "sources": {
                 "foo": {
                     "type": "vector"
@@ -388,7 +388,7 @@ test('Style#removeLayer', function(t) {
 test('Style#setFilter', function(t) {
     t.test('sets a layer filter', function(t) {
         var style = new Style({
-            "version": 7,
+            "version": 8,
             "sources": {
                 "geojson": {
                     "type": "geojson",
@@ -417,7 +417,7 @@ test('Style#setFilter', function(t) {
 test('Style#setLayoutProperty', function(t) {
     t.test('sets property', function(t) {
         var style = new Style({
-            "version": 7,
+            "version": 8,
             "sources": {
                 "geojson": {
                     "type": "geojson",
@@ -448,7 +448,7 @@ test('Style#setLayoutProperty', function(t) {
 test('Style#setPaintProperty', function(t) {
     t.test('sets property', function(t) {
         var style = new Style({
-            "version": 7,
+            "version": 8,
             "sources": {
                 "foo": {
                     "type": "vector"
@@ -471,7 +471,7 @@ test('Style#setPaintProperty', function(t) {
 
 test('Style#featuresAt', function(t) {
     var style = new Style({
-        "version": 7,
+        "version": 8,
         "sources": {
             "mapbox": {
                 "type": "vector",
@@ -504,7 +504,7 @@ test('Style#featuresAt', function(t) {
         style._recalculate(0);
 
         style.sources.mapbox.featuresAt = function(position, params, callback) {
-            var features = [{
+            callback(null, [{
                 type: 'Feature',
                 layer: 'land',
                 geometry: {
@@ -522,15 +522,7 @@ test('Style#featuresAt', function(t) {
                 geometry: {
                     type: 'Point'
                 }
-            }];
-
-            if (params.layer) {
-                features = features.filter(function(f) {
-                    return f.layer === params.layer.id;
-                });
-            }
-
-            callback(null, features);
+            }]);
         };
 
         t.test('returns feature type', function(t) {

test/js/style/style_constant.test.js

@@ -34,6 +34,45 @@ test('StyleConstant.resolve', function(t) {
         });
         t.end();
     });
+
+    t.test('resolves color operation values', function(t) {
+        var simple = ["lighten", -20, "@black"];
+        var lighten = ["lighten", 20, ["mix", 50, "@white", "@black"]];
+        var darken = ["mix", 50, ["lighten", 20, "@black"], "green"];
+
+        var constants = {
+            "@white": "#FFF",
+            "@black": "#000",
+            "@a": "a"
+        };
+
+        t.deepEqual(StyleConstant.resolve(simple, constants),
+            ["lighten", -20, "#000"]
+        );
+        t.deepEqual(StyleConstant.resolve(lighten, constants),
+            ["lighten", 20, ["mix", 50, "#FFF", "#000"]]
+        );
+        t.deepEqual(StyleConstant.resolve(darken, constants),
+            ["mix", 50, ["lighten", 20, "#000"], "green"]
+        );
+
+        t.end();
+    });
+
+    t.test('resolves color operations in functions', function(t) {
+        var fun = {
+            "stops": [[0, "@a"], [1, ["lighten", -20, "@a"]]]
+        };
+        var constants = {
+            "@a": "#ccc"
+        };
+
+        t.deepEqual(StyleConstant.resolve(fun, constants), {
+            "stops": [[0, "#ccc"], [1, ["lighten", -20, "#ccc"]]]
+        });
+
+        t.end();
+    });
 });
 
 test('StyleConstant.resolveAll', function(t) {

test/js/style/style_declaration.test.js

@@ -48,6 +48,10 @@ test('StyleDeclaration', function(t) {
         t.deepEqual(new StyleDeclaration(reference, 'red').calculate(0), [ 1, 0, 0, 1 ]);
         t.deepEqual(new StyleDeclaration(reference, '#ff00ff').calculate(0), [ 1, 0, 1, 1 ]);
         t.deepEqual(new StyleDeclaration(reference, { stops: [[0, '#f00'], [1, '#0f0']] }).calculate(0), [1, 0, 0, 1]);
+        t.deepEqual(new StyleDeclaration(reference, ['lighten', -50, '#FFF']).calculate(0),
+            [128 / 255, 128 / 255, 128 / 255, 1]);
+        t.deepEqual(new StyleDeclaration(reference, ['lighten', -30, ['mix', 20, '#551A8B',
+            ['saturate', 10, '#FF0000']]]).calculate(0), [71 / 255, 2 / 255, 9 / 255, 1]);
         // cached
         t.deepEqual(new StyleDeclaration(reference, '#ff00ff').calculate(0), [ 1, 0, 1, 1 ]);
         t.deepEqual(new StyleDeclaration(reference, 'rgba(255, 51, 0, 1)').calculate(0), [ 1, 0.2, 0, 1 ]);

test/js/ui/map.test.js

@@ -29,7 +29,7 @@ test('Map', function(t) {
         t.test('returns self', function(t) {
             var map = createMap(),
                 style = {
-                    version: 7,
+                    version: 8,
                     sources: {},
                     layers: []
                 };
@@ -40,7 +40,7 @@ test('Map', function(t) {
         t.test('sets up event forwarding', function(t) {
             var map = createMap(),
                 style = new Style({
-                    version: 7,
+                    version: 8,
                     sources: {},
                     layers: []
                 });
@@ -84,8 +84,8 @@ test('Map', function(t) {
         t.test('can be called more than once', function(t) {
             var map = createMap();
 
-            map.setStyle({version: 7, sources: {}, layers: []});
-            map.setStyle({version: 7, sources: {}, layers: []});
+            map.setStyle({version: 8, sources: {}, layers: []});
+            map.setStyle({version: 8, sources: {}, layers: []});
 
             t.end();
         });