diff --git a/js/style/paint_properties.js b/js/style/paint_properties.js index ab9b162a9ed..763d4153f89 100644 --- a/js/style/paint_properties.js +++ b/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; } diff --git a/js/style/style_constant.js b/js/style/style_constant.js index 7e2a58a8abe..fde572dfe2e 100644 --- a/js/style/style_constant.js +++ b/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], diff --git a/js/style/style_declaration.js b/js/style/style_declaration.js index d7b0aff3a60..f686834bc7e 100644 --- a/js/style/style_declaration.js +++ b/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; } diff --git a/package.json b/package.json index 01d23f1b572..9dd25271d12 100644 --- a/package.json +++ b/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", diff --git a/test/fixtures/style-basic.json b/test/fixtures/style-basic.json index 1d64f93eb8e..5bd8d02cb9a 100644 --- a/test/fixtures/style-basic.json +++ b/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", diff --git a/test/js/style/style.test.js b/test/js/style/style.test.js index ad7db637c2f..5982fac20af 100644 --- a/test/js/style/style.test.js +++ b/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) { diff --git a/test/js/style/style_constant.test.js b/test/js/style/style_constant.test.js index 4cd9b962791..73ba95ae799 100644 --- a/test/js/style/style_constant.test.js +++ b/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) { diff --git a/test/js/style/style_declaration.test.js b/test/js/style/style_declaration.test.js index 560126d5721..24fb6b61895 100644 --- a/test/js/style/style_declaration.test.js +++ b/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 ]); diff --git a/test/js/ui/map.test.js b/test/js/ui/map.test.js index a4cc73ccd92..9b5221f6472 100644 --- a/test/js/ui/map.test.js +++ b/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(); });