Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New style format #363

Merged
merged 19 commits into from
May 6, 2014
Merged

New style format #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
44160ec
add new style
mourner Apr 14, 2014
9fa6b78
update style parsing
mourner Apr 14, 2014
66d90b5
update bucket filter parsing
mourner Apr 14, 2014
556c0eb
update wokertile style handling
mourner Apr 14, 2014
b2200a7
update style parsing more
mourner Apr 14, 2014
56346f8
fix bucket parsing
mourner Apr 14, 2014
add7a46
fix style functions
mourner Apr 14, 2014
67e2725
update painters
mourner Apr 14, 2014
09cb79b
fix more properties in bucket parsing
mourner Apr 14, 2014
ae37bac
more new style-related fixes
mourner Apr 14, 2014
5253a5b
more new style fixes
mourner Apr 14, 2014
895e1b6
fix image poi rendering
mourner Apr 14, 2014
9991784
fix build
mourner Apr 14, 2014
930e89c
fix casings and line-image
mourner Apr 14, 2014
6b641b5
fix casings again
mourner Apr 15, 2014
d547e83
fix opacity rendering
mourner Apr 16, 2014
b9b59d0
fix jshint complaining
mourner Apr 16, 2014
e186cee
separate out bucket filtering logic, make GeoJSON work
mourner Apr 16, 2014
04fe482
remove old style
mourner Apr 16, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,076 changes: 583 additions & 493 deletions debug/style.js
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 15 additions & 32 deletions js/geometry/bucket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

module.exports = Bucket;

var interpolate = require('./interpolate.js');
var interpolate = require('./interpolate.js'),
bucketFilter = require('../style/bucket-filter.js');

function Bucket(info, geometry, placement, indices) {

Expand All @@ -11,34 +12,26 @@ function Bucket(info, geometry, placement, indices) {
this.placement = placement;
this.indices = indices; // only used after transfer from worker

if (info.type === 'text') {
if (info.text) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promote text from a value of the type key to being a key on its own.

this.addFeature = this.addText;

} else if (info.type == 'point') {
} else if (info.point) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promote point from a value of the type key to being a key on its own.

this.addFeature = this.addPoint;
this.size = info.size;
this.spacing = info.spacing;
this.padding = info.padding || 2;
this.size = info['point-size'];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change the point size syntax from "size": { "x": 12, "y": 12 } into "point-size": [12, 12]

this.spacing = info['point-spacing'];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename the spacing key to become point-spacing and the padding key to become point-padding

this.padding = info['point-padding'] || 2;

} else if (info.type == 'line') {
} else if (info.line) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promote line from a value of the type key to being a key on its own.

this.addFeature = this.addLine;

} else if (info.type == 'fill') {
} else if (info.fill) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promote fill from a value of the type key to being a key on its own.

this.addFeature = this.addFill;

} else {
console.warn('unrecognized type');
}

var compare = info.compare || '==';
if (compare in comparators) {
var code = comparators[compare](info);
if (code) {
/* jshint evil: true */
this.compare = new Function('feature', code);
}
console.warn('No type specified');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generate a warning if one of the keys { text | point | line | fill } was not present in this bucket

}

this.compare = bucketFilter(this, ['source', 'feature_type']);
}

Bucket.prototype.start = function() {
Expand Down Expand Up @@ -87,7 +80,8 @@ Bucket.prototype.toJSON = function() {
Bucket.prototype.addLine = function(lines) {
var info = this.info;
for (var i = 0; i < lines.length; i++) {
this.geometry.addLine(lines[i], info.join, info.cap, info.miterLimit, info.roundLimit);
this.geometry.addLine(lines[i], info['line-join'], info['line-cap'],
info['line-miter-limit'], info['line-round-limit']);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change join to line-join, cap to line-cap, miterLimit to line-miter-limit, and roundLimit to line-round-limit

}
};

Expand All @@ -105,8 +99,8 @@ Bucket.prototype.addPoint = function(lines) {

if (this.size) {
var ratio = 8, // todo uhardcode tileExtent/tileSize
x = this.size.x / 2 * ratio,
y = this.size.y / 2 * ratio;
x = this.size[0] / 2 * ratio,
y = this.size[1] / 2 * ratio;

for (var k = 0; k < points.length; k++) {
var point = points[k];
Expand Down Expand Up @@ -134,14 +128,3 @@ Bucket.prototype.addText = function(lines, faces, shaping) {
this.placement.addFeature(lines[i], this.info, faces, shaping);
}
};

// Builds a function body from the JSON specification. Allows specifying other compare operations.
var comparators = {
'==': function(bucket) {
if (!('field' in bucket)) return;
var value = bucket.value, field = bucket.field;
return 'return ' + (Array.isArray(value) ? value : [value]).map(function(value) {
return 'feature[' + JSON.stringify(field) + '] == ' + JSON.stringify(value);
}).join(' || ') + ';';
}
};
4 changes: 2 additions & 2 deletions js/render/drawcomposited.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
module.exports = drawComposited;

function drawComposited (gl, painter, buckets, layerStyle, params, style, layer) {
var texture = painter.namedRenderTextures[layer.name];
if (!texture) return console.warn('missing render texture ' + layer.name);
var texture = painter.namedRenderTextures[layer.id];
if (!texture) return console.warn('missing render texture ' + layer.id);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change name to id


gl.disable(gl.STENCIL_TEST);
gl.stencilMask(0x00);
Expand Down
10 changes: 6 additions & 4 deletions js/render/drawfill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
module.exports = drawFill;

function drawFill(gl, painter, bucket, layerStyle, params, imageSprite, background) {
if (typeof layerStyle.color !== 'object') console.warn('layer style has a color');
if (typeof layerStyle['fill-color'] !== 'object') console.warn('layer style has a color');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change layer color to fill-color


var color = layerStyle.color;
var color = layerStyle['fill-color'];

// TODO: expose this to the stylesheet.
var evenodd = false;
Expand Down Expand Up @@ -78,7 +78,9 @@ function drawFill(gl, painter, bucket, layerStyle, params, imageSprite, backgrou
gl.switchShader(painter.outlineShader, painter.translatedMatrix || painter.tile.posMatrix, painter.tile.exMatrix);
gl.lineWidth(2 * window.devicePixelRatio);

if (layerStyle.stroke) {
var strokeColor = layerStyle['stroke-color'];

if (strokeColor) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change layer stroke to stroke-color

// If we defined a different color for the fill outline, we are
// going to ignore the bits in 0x3F and just care about the global
// clipping mask.
Expand All @@ -93,7 +95,7 @@ function drawFill(gl, painter, bucket, layerStyle, params, imageSprite, backgrou
}

gl.uniform2f(painter.outlineShader.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.uniform4fv(painter.outlineShader.u_color, layerStyle.stroke ? layerStyle.stroke : color);
gl.uniform4fv(painter.outlineShader.u_color, strokeColor ? strokeColor : color);

// Draw all buffers
buffer = bucket.indices.fillBufferIndex;
Expand Down
26 changes: 13 additions & 13 deletions js/render/drawline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
'use strict';

module.exports = function drawLine(gl, painter, bucket, layerStyle, params, imageSprite) {
if (typeof layerStyle.color !== 'object') console.warn('layer style has a color');
if (typeof layerStyle['line-color'] !== 'object') console.warn('layer style has a color');

var width = layerStyle.width;
var width = layerStyle['line-width'];
if (width === null) return;

var offset = (layerStyle.offset || 0) / 2;
var offset = (layerStyle['line-offset'] || 0) / 2;
var inset = Math.max(-1, offset - width / 2 - 0.5) + 1;
var outset = offset + width / 2 + 0.5;

var imagePos = layerStyle.image && imageSprite.getPosition(layerStyle.image);
var imagePos = layerStyle['line-image'] && imageSprite.getPosition(layerStyle['line-image']);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change line color to line-color, width to line-width, offset to line-offset, and image to line-image

var shader;

if (imagePos) {
Expand All @@ -19,26 +19,26 @@ module.exports = function drawLine(gl, painter, bucket, layerStyle, params, imag
imageSprite.bind(gl, true);

//factor = Math.pow(2, 4 - painter.transform.tileZoom + params.z);
gl.switchShader(painter.linepatternShader, painter.translatedMatrix || painter.tile.posMatrix, painter.tile.exMatrix);
shader = painter.linepatternShader;
gl.uniform2fv(painter.linepatternShader.u_pattern_size, [imagePos.size[0] * factor, imagePos.size[1] ]);
gl.uniform2fv(painter.linepatternShader.u_pattern_tl, imagePos.tl);
gl.uniform2fv(painter.linepatternShader.u_pattern_br, imagePos.br);
gl.uniform1f(painter.linepatternShader.u_fade, painter.transform.zoomFraction);
gl.switchShader(shader, painter.translatedMatrix || painter.tile.posMatrix, painter.tile.exMatrix);
gl.uniform2fv(shader.u_pattern_size, [imagePos.size[0] * factor, imagePos.size[1] ]);
gl.uniform2fv(shader.u_pattern_tl, imagePos.tl);
gl.uniform2fv(shader.u_pattern_br, imagePos.br);
gl.uniform1f(shader.u_fade, painter.transform.zoomFraction);

} else {
gl.switchShader(painter.lineShader, painter.tile.posMatrix, painter.tile.exMatrix);
gl.uniform2fv(painter.lineShader.u_dasharray, layerStyle.dasharray || [1, -1]);
shader = painter.lineShader;
gl.switchShader(shader, painter.tile.posMatrix, painter.tile.exMatrix);
gl.uniform2fv(shader.u_dasharray, layerStyle['line-dasharray'] || [1, -1]);
}

var tilePixelRatio = painter.transform.scale / (1 << params.z) / 8;
gl.uniform2fv(shader.u_linewidth, [ outset, inset ]);
gl.uniform1f(shader.u_ratio, tilePixelRatio);
gl.uniform1f(shader.u_gamma, window.devicePixelRatio);
gl.uniform1f(shader.u_blur, layerStyle.blur === undefined ? 1 : layerStyle.blur);
gl.uniform1f(shader.u_blur, layerStyle['line-blur'] === undefined ? 1 : layerStyle['line-blur']);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change how the shader draws lines


var color = layerStyle.color;
var color = layerStyle['line-color'];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Continuation of change color to line-color


if (!params.antialiasing) {
color = color.slice();
Expand Down
16 changes: 8 additions & 8 deletions js/render/drawpoint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,37 @@ var mat2 = require('../lib/glmatrix.js').mat2;

module.exports = function drawPoint(gl, painter, bucket, layerStyle, params, imageSprite) {

var imagePos = imageSprite && imageSprite.getPosition(layerStyle.image),
var imagePos = imageSprite && imageSprite.getPosition(layerStyle['point-image']),
begin = bucket.indices.pointVertexIndex,
count = bucket.indices.pointVertexIndexEnd - begin,
shader = imagePos ? painter.pointShader : painter.dotShader;

bucket.geometry.pointVertex.bind(gl);

gl.switchShader(shader, painter.translatedMatrix || painter.tile.posMatrix, painter.tile.exMatrix);
gl.uniform4fv(shader.u_color, layerStyle.color || [0, 0, 0, 0]);
gl.uniform4fv(shader.u_color, layerStyle['point-color'] || [0, 0, 0, 0]);

if (!imagePos) {
var diameter = (layerStyle.radius * 2.0 || 8.0) * window.devicePixelRatio;
var diameter = (layerStyle['point-radius'] * 2.0 || 8.0) * window.devicePixelRatio;
gl.uniform1f(shader.u_size, diameter);
gl.uniform1f(shader.u_blur, (layerStyle.blur || 1.5) / diameter);
gl.uniform1f(shader.u_blur, (layerStyle['point-blur'] || 1.5) / diameter);

gl.vertexAttribPointer(shader.a_pos, 4, gl.SHORT, false, 8, 0);

gl.drawArrays(gl.POINTS, begin, count);

} else {
gl.uniform1i(shader.u_invert, layerStyle.invert);
gl.uniform1i(shader.u_invert, layerStyle['point-invert']);
gl.uniform2fv(shader.u_size, imagePos.size);
gl.uniform2fv(shader.u_tl, imagePos.tl);
gl.uniform2fv(shader.u_br, imagePos.br);
gl.uniform1f(shader.u_zoom, (painter.transform.zoom - params.z) * 10.0);

var rotate = layerStyle.alignment && layerStyle.alignment !== 'screen';
var rotate = layerStyle['point-alignment'] && layerStyle['point-alignment'] !== 'screen';

var rotationMatrix = rotate ? mat2.clone(painter.tile.rotationMatrix) : mat2.create();
if (layerStyle.rotate) {
mat2.rotate(rotationMatrix, rotationMatrix, layerStyle.rotate);
if (layerStyle['point-rotate']) {
mat2.rotate(rotationMatrix, rotationMatrix, layerStyle['point-rotate']);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change point image to point-image, color to point-color, radius to point-radius, invert to point-invert, alignment to point-alignment, and rotate to point-rotate

}
gl.uniformMatrix2fv(shader.u_rotationmatrix, false, rotationMatrix);

Expand Down
24 changes: 12 additions & 12 deletions js/render/drawtext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ module.exports = drawText;
function drawText(gl, painter, bucket, layerStyle, params) {

var exMatrix = mat4.clone(painter.projectionMatrix);
if (bucket.info.path == 'curve') {
if (bucket.info['text-path'] == 'curve') {
mat4.rotateZ(exMatrix, exMatrix, painter.transform.angle);
}

var rotate = layerStyle.rotate || 0;
var rotate = layerStyle['text-rotate'] || 0;
if (rotate) {
mat4.rotateZ(exMatrix, exMatrix, rotate);
}

// If layerStyle.size > bucket.info.fontSize then labels may collide
var fontSize = layerStyle.size || bucket.info.fontSize;
// If layerStyle.size > bucket.info['text-max-size'] then labels may collide
var fontSize = layerStyle['text-size'] || bucket.info['text-max-size'];
mat4.scale(exMatrix, exMatrix, [ fontSize / 24, fontSize / 24, 1 ]);

var shader = painter.sdfShader;
Expand All @@ -42,16 +42,16 @@ function drawText(gl, painter, bucket, layerStyle, params) {
gl.vertexAttribPointer(shader.a_rangeend, 1, ubyte, false, 16, 14);
gl.vertexAttribPointer(shader.a_rangestart, 1, ubyte, false, 16, 15);

gl.uniform1f(shader.u_gamma, params.antialiasing ? 2.5 / bucket.info.fontSize / window.devicePixelRatio : 0);
gl.uniform1f(shader.u_gamma, params.antialiasing ? 2.5 / bucket.info['text-max-size'] / window.devicePixelRatio : 0);

// Convert the -pi..pi to an int8 range.
var angle = Math.round((painter.transform.angle + rotate) / Math.PI * 128);

// adjust min/max zooms for variable font sies
var zoomAdjust = Math.log(fontSize / bucket.info.fontSize) / Math.LN2;
var zoomAdjust = Math.log(fontSize / bucket.info['text-max-size']) / Math.LN2;

gl.uniform1f(shader.u_angle, (angle + 256) % 256);
gl.uniform1f(shader.u_flip, bucket.info.path === 'curve' ? 1 : 0);
gl.uniform1f(shader.u_flip, bucket.info['text-path'] === 'curve' ? 1 : 0);
gl.uniform1f(shader.u_zoom, (painter.transform.zoom - zoomAdjust) * 10); // current zoom level

// Label fading
Expand Down Expand Up @@ -96,19 +96,19 @@ function drawText(gl, painter, bucket, layerStyle, params) {
gl.uniform1f(shader.u_fadezoom, (painter.transform.zoom + bump) * 10);

// Draw text first.
gl.uniform4fv(shader.u_color, layerStyle.color);
gl.uniform4fv(shader.u_color, layerStyle['text-color']);
gl.uniform1f(shader.u_buffer, (256 - 64) / 256);

var begin = bucket.indices.glyphVertexIndex,
len = bucket.indices.glyphVertexIndexEnd - begin;

gl.drawArrays(gl.TRIANGLES, begin, len);

if (layerStyle.stroke) {
if (layerStyle['text-halo-color']) {
// Draw halo underneath the text.
gl.uniform4fv(shader.u_color, layerStyle.stroke);
gl.uniform1f(shader.u_buffer, layerStyle.strokeWidth === undefined ?
64 / 256 : layerStyle.strokeWidth);
gl.uniform4fv(shader.u_color, layerStyle['text-halo-color']);
gl.uniform1f(shader.u_buffer, layerStyle['text-halo-width'] === undefined ?
64 / 256 : layerStyle['text-halo-width']);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change text path to text-path, rotate to text-rotate, size to text-size, fontSize to text-max-size, color to text-color, and stroke to text-halo-color


gl.drawArrays(gl.TRIANGLES, begin, len);
}
Expand Down
18 changes: 9 additions & 9 deletions js/render/painter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,12 +291,12 @@ GLPainter.prototype.draw = function glPainterDraw(tile, style, layers, params) {
GLPainter.prototype.applyStyle = function(layer, style, buckets, params) {
var gl = this.gl;

var layerStyle = style.computed[layer.name];
var layerStyle = style.computed[layer.id];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change name to id

if (!layerStyle || layerStyle.hidden) return;

if (layer.layers) {
drawComposited(gl, this, buckets, layerStyle, params, style, layer);
} else if (layer.bucket === 'background') {
} else if (layer.id === 'background') {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change test from bucket === 'background' to id === 'background'

drawFill(gl, this, undefined, layerStyle, params, style.sprite, true);
} else {

Expand All @@ -314,17 +314,17 @@ GLPainter.prototype.applyStyle = function(layer, style, buckets, params) {
mat4.translate(this.translatedMatrix, this.tile.posMatrix, translation);
}

var type = bucket.info.type,
draw = type === 'text' ? drawText :
type === 'fill' ? drawFill :
type === 'line' ? drawLine :
type === 'point' ? drawPoint :
type === 'raster' ? drawRaster : null;
var info = bucket.info,
draw = info.text ? drawText :
info.fill ? drawFill :
info.line ? drawLine :
info.point ? drawPoint :
info.raster ? drawRaster : null;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Determine the bucket type, taking into account that text, point, line, and fill are now keys instead of values of type


if (draw) {
draw(gl, this, bucket, layerStyle, params, style.sprite);
} else {
console.warn('Unknown bucket type ' + type);
console.warn('No bucket type specified');
}

if (layerStyle.translate) {
Expand Down
34 changes: 34 additions & 0 deletions js/style/bucket-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
'use strict';

module.exports = function (bucket, excludes) {
if (!('filter' in bucket)) return;

// prevent a false warning (JSHint bug)
// jshint -W088

var key, value,
filters = [];

function keyValue(v) {
return {key: key, value: v};
}

for (key in bucket.filter) {
if (excludes && excludes.indexOf(key) !== -1) continue;

value = bucket.filter[key];

if (Array.isArray(value)) {
filters.push.apply(filters, value.map(keyValue));
} else {
filters.push({key: key, value: value});
}
}

if (!filters.length) return;

// jshint evil: true
return new Function('f', 'return ' + filters.map(function(f) {
return 'f[' + JSON.stringify(f.key) + '] == ' + JSON.stringify(f.value);
}).join(' || ') + ';');
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is mysterious! What does it do?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code turns bucket.filter object in the style to a function you can actually use to filter out features of a particular bucket. It was put elsewhere earlier but I made a separate file to avoid duplication (it was needed it two places, vector buckets & GeoJSON).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... I'm not sure I understand the circumstances when it would be useful to "filter out features of a particular bucket". Is that intended to happen as a normal part of the parsing process, or does it serve some other purpose?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a part of the parsing process. When looping through all parsed features, we need to categorize them, putting into buckets defined in the style.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, got it. Thanks. I'll have to do some digging to figure out how this step is happening in C++. I have a feeling it's doing it a different way

edit: Actually, maybe native is not doing this at all... Is this new functionality that you added for the v1 style format?

Loading