diff --git a/js/render/drawpoint.js b/js/render/drawpoint.js index 6f8ced518db..78e4d35da26 100644 --- a/js/render/drawpoint.js +++ b/js/render/drawpoint.js @@ -16,7 +16,6 @@ module.exports = function drawPoint(gl, painter, bucket, layerStyle, posMatrix, gl.switchShader(shader, posMatrix, painter.tile.exMatrix); gl.uniform4fv(shader.u_color, layerStyle['point-color'] || [opacity, opacity, opacity, opacity]); - gl.uniform2f(shader.u_texsize, imageSprite.img.width, imageSprite.img.height); if (type === 'circle') { var diameter = layerStyle['point-radius'] * 2.0 * window.devicePixelRatio; @@ -31,6 +30,7 @@ module.exports = function drawPoint(gl, painter, bucket, layerStyle, posMatrix, var size = bucket.info['point-size'] || [12, 12], ratio = window.devicePixelRatio; + gl.uniform2f(shader.u_texsize, imageSprite.img.width, imageSprite.img.height); gl.uniform2fv(shader.u_size, [size[0] * ratio, size[1] * ratio]); gl.uniform1i(shader.u_invert, layerStyle['point-invert']); gl.uniform1f(shader.u_zoom, (painter.transform.zoom - params.z) * 10.0); diff --git a/js/style/styledeclaration.js b/js/style/styledeclaration.js index 95426da2c44..1dc905f7ca6 100644 --- a/js/style/styledeclaration.js +++ b/js/style/styledeclaration.js @@ -21,7 +21,6 @@ function StyleDeclaration(prop, value, constants) { this.value = this.parseValue(value, propReference.type, propReference.values); this.prop = prop; this.type = propReference.type; - this.constants = constants; // immuatable representation of value. used for comparison this.json = JSON.stringify(value); diff --git a/test/expected/style-basic-layers.json b/test/expected/style-basic-layers.json new file mode 100644 index 00000000000..169443c4cac --- /dev/null +++ b/test/expected/style-basic-layers.json @@ -0,0 +1,294 @@ +{ + "background": { + "fill-color": { + "declaration": { + "value": [ + 0.9333333333333333, + 0.9333333333333333, + 0.9333333333333333, + 1 + ], + "prop": "fill-color", + "type": "color", + "json": "\"#eee\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 0 + } + }, + "park": { + "fill-color": { + "declaration": { + "value": [ + 0.7333333333333333, + 0.8666666666666667, + 0.6666666666666666, + 1 + ], + "prop": "fill-color", + "type": "color", + "json": "\"#bda\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 1 + } + }, + "water": { + "fill-color": { + "declaration": { + "value": [ + 0.6, + 0.6, + 0.6, + 1 + ], + "prop": "fill-color", + "type": "color", + "json": "\"#999\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 2 + } + }, + "roads": { + "opacity": { + "declaration": { + "value": 1, + "prop": "opacity", + "type": "number", + "json": "1" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 3 + } + }, + "road": { + "line-color": { + "declaration": { + "value": [ + 0.996078431372549, + 0.996078431372549, + 0.996078431372549, + 1 + ], + "prop": "line-color", + "type": "color", + "json": "\"#fefefe\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 4 + }, + "line-blur": { + "declaration": { + "value": 1, + "prop": "line-blur", + "type": "number", + "json": "1" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 5 + }, + "line-width": { + "declaration": { + "prop": "line-width", + "type": "number", + "json": "{\"fn\":\"exponential\",\"z\":10,\"val\":-1,\"slope\":0.2,\"min\":1}" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 6 + } + }, + "building": { + "fill-color": { + "declaration": { + "value": [ + 0.8666666666666667, + 0.8666666666666667, + 0.8666666666666667, + 1 + ], + "prop": "fill-color", + "type": "color", + "json": "\"#ddd\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 7 + }, + "fill-opacity": { + "declaration": { + "prop": "fill-opacity", + "type": "number", + "json": "{\"fn\":\"linear\",\"z\":14,\"val\":0,\"slope\":1,\"min\":0,\"max\":1}" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 8 + }, + "stroke-color": { + "declaration": { + "value": [ + 0.8, + 0.8, + 0.8, + 1 + ], + "prop": "stroke-color", + "type": "color", + "json": "\"#ccc\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 9 + } + }, + "borders": { + "line-color": { + "declaration": { + "value": [ + 0, + 0, + 0, + 0.3 + ], + "prop": "line-color", + "type": "color", + "json": "[0,0,0,0.3]" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 10 + }, + "line-width": { + "declaration": { + "value": 1, + "prop": "line-width", + "type": "number", + "json": "1" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 11 + } + }, + "poi": { + "point-alignment": { + "declaration": { + "value": true, + "prop": "point-alignment", + "type": "enum", + "json": "\"screen\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 12 + } + }, + "country_label": { + "text-halo-color": { + "declaration": { + "value": [ + 0.7, + 0.7, + 0.7, + 0.7 + ], + "prop": "text-halo-color", + "type": "color", + "json": "[1,1,1,0.7]" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 13 + }, + "text-halo-width": { + "declaration": { + "value": 0.25, + "prop": "text-halo-width", + "type": "number", + "json": "0.25" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 14 + }, + "text-color": { + "declaration": { + "value": [ + 0, + 0, + 0, + 1 + ], + "prop": "text-color", + "type": "color", + "json": "\"#000000\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 15 + } + }, + "road_label": { + "text-color": { + "declaration": { + "value": [ + 0, + 0, + 0, + 1 + ], + "prop": "text-color", + "type": "color", + "json": "\"#000000\"" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 16 + }, + "text-halo-color": { + "declaration": { + "value": [ + 0.7, + 0.7, + 0.7, + 0.7 + ], + "prop": "text-halo-color", + "type": "color", + "json": "[1,1,1,0.7]" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 17 + }, + "text-halo-width": { + "declaration": { + "value": 0.25, + "prop": "text-halo-width", + "type": "number", + "json": "0.25" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 18 + }, + "text-size": { + "declaration": { + "prop": "text-size", + "type": "number", + "json": "{\"fn\":\"exponential\",\"z\":14,\"val\":8,\"slope\":1,\"min\":8,\"max\":12}" + }, + "endTime": 1402963200000, + "startTime": 1402963200000, + "loopID": 19 + } + } +} \ No newline at end of file diff --git a/test/fixtures/style-basic.json b/test/fixtures/style-basic.json new file mode 100644 index 00000000000..2131126e0fe --- /dev/null +++ b/test/fixtures/style-basic.json @@ -0,0 +1,234 @@ +{ + "version": 2, + "sources": { + "mapbox.mapbox-streets-v5": { + "type": "vector", + "url": "mapbox://mapbox.mapbox-streets-v5", + "glyphs": "http://mapbox.s3.amazonaws.com/gl-glyphs-256/{fontstack}/{range}.pbf", + "tileSize": 512 + } + }, + "buckets": { + "park": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "landuse", + "class": "park" + }, + "fill": true + }, + "water": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "water" + }, + "fill": true + }, + "road": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "road" + }, + "line": true, + "line-cap": "round", + "line-join": "bevel" + }, + "building": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "building" + }, + "fill": true + }, + "borders": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "admin" + }, + "line": true + }, + "country_label": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "country_label", + "feature_type": "point" + }, + "text": true, + "text-field": "{{name}}", + "text-font": "Open Sans Regular, Arial Unicode MS Regular", + "text-max-size": 16, + "text-path": "horizontal", + "text-padding": 10 + }, + "road_label": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "road_label", + "feature_type": "line" + }, + "text": true, + "text-field": "{{name}}", + "text-font": "Open Sans Regular, Arial Unicode MS Regular", + "text-max-size": 12, + "text-path": "curve", + "text-min-distance": 250, + "text-max-angle": 1.04 + }, + "poi": { + "filter": { + "source": "mapbox.mapbox-streets-v5", + "layer": "poi_label" + }, + "point": true, + "point-size": [ + 12, + 12 + ] + } + }, + "layers": [ + { + "id": "background" + }, + { + "id": "park", + "bucket": "park" + }, + { + "id": "water", + "bucket": "water" + }, + { + "id": "roads", + "layers": [ + { + "id": "road", + "bucket": "road" + } + ] + }, + { + "id": "building", + "bucket": "building" + }, + { + "id": "borders", + "bucket": "borders" + }, + { + "id": "poi", + "bucket": "poi" + }, + { + "id": "country_label", + "bucket": "country_label" + }, + { + "id": "road_label", + "bucket": "road_label" + } + ], + "constants": { + "land": "#eee", + "water": "#999", + "park": "#bda", + "road": "#fefefe", + "border": "#6d90ab", + "building": "#ddd", + "building_outline": "#ccc", + "text": "#000000", + "road_blur": 1, + "stroke_width": 0.25 + }, + "styles": { + "default": { + "background": { + "fill-color": "land", + "transition-fill-color": { + "duration": 500, + "delay": 0 + } + }, + "park": { + "fill-color": "park" + }, + "water": { + "fill-color": "#999" + }, + "roads": { + "opacity": 1, + "transition-opacity": { + "duration": 500, + "delay": 0 + } + }, + "road": { + "line-color": "road", + "line-blur": "road_blur", + "line-width": { + "fn": "exponential", + "z": 10, + "val": -1, + "slope": 0.2, + "min": 1 + } + }, + "building": { + "fill-color": "building", + "transition-fill-opacity": { + "duration": 500, + "delay": 500 + }, + "fill-opacity": { + "fn": "linear", + "z": 14, + "val": 0, + "slope": 1, + "min": 0, + "max": 1 + }, + "stroke-color": "building_outline" + }, + "borders": { + "line-color": [ + 0, + 0, + 0, + 0.3 + ], + "line-width": 1 + }, + "poi": { + "point-alignment": "screen" + }, + "country_label": { + "text-halo-color": [ + 1, + 1, + 1, + 0.7 + ], + "text-halo-width": "stroke_width", + "text-color": "text" + }, + "road_label": { + "text-color": "text", + "text-halo-color": [ + 1, + 1, + 1, + 0.7 + ], + "text-halo-width": "stroke_width", + "text-size": { + "fn": "exponential", + "z": 14, + "val": 8, + "slope": 1, + "min": 8, + "max": 12 + } + } + } + } +} diff --git a/test/style.test.js b/test/style.test.js new file mode 100644 index 00000000000..9da05b21735 --- /dev/null +++ b/test/style.test.js @@ -0,0 +1,27 @@ +'use strict'; +var test = require('tape').test; +var fs = require('fs'); +var AnimationLoop = require('../js/style/animationloop.js'); +var Style = require('../js/style/style.js'); +var stylesheet = require(__dirname + '/fixtures/style-basic.json'); +var UPDATE = process.env.UPDATE; + +test('style', function(t) { + var style = new Style(stylesheet, new AnimationLoop()); + t.ok(style); + + // Replace changing startTime/endTime values with singe stable value + // for fixture comparison. + var style_layers = JSON.parse(JSON.stringify(style.layers, function(key, val) { + if (key === 'startTime' || key === 'endTime') { + return +new Date('Tue, 17 Jun 2014 0:00:00 UTC'); + } else { + return val; + } + })); + if (UPDATE) fs.writeFileSync(__dirname + '/expected/style-basic-layers.json', JSON.stringify(style_layers, null, 2)); + var style_layers_expected = JSON.parse(fs.readFileSync(__dirname + '/expected/style-basic-layers.json')); + t.deepEqual(style_layers, style_layers_expected); + + t.end(); +});