cartodb
/
carto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added the possibility of using custom defined functions from cartocss

Browse Source
custom_functions
javi 9 years ago
parent 8050ec843f
commit 873f22c0d9
7 changed files with 280 additions and 136 deletions
Show Stats Download Patch File Download Diff File

2
lib/carto/parser.js
Unescape View File

@ -370,7 +370,7 @@ carto.Parser = function Parser(env) {
// These can start with either a letter or a dash (-),
// and then contain numbers, underscores, and letters.
keyword: function() {
var k = $(/^[A-Za-z-]+[A-Za-z-0-9_]*/);
var k = $(/^[A-Za-z-]+[A-Za-z-0-9_\.]*/);
if (k) { return new tree.Keyword(k); }
},

203
lib/carto/renderer_js.js
Unescape View File

@ -1,14 +1,12 @@
(function(carto) {
var tree = require('./tree');
var _ = global._ || require('underscore');
var async = require('async');
function CartoCSS(style, options) {
function CartoCSS(options) {
this.options = options || {};
this.imageURLs = [];
if(style) {
this.setStyle(style);
}
}
CartoCSS.Layer = function(shader, options) {
@ -114,9 +112,25 @@ CartoCSS.Layer.prototype = {
};
CartoCSS.parse = function(style, options) {
var args = Array.prototype.slice.call(arguments);
var callback = args[args.length - 1];
// TODO: raise an error if not a function
var cartocss = new CartoCSS(options);
cartocss._functions = options.functions;
cartocss._parse(style, function(err, layers) {
if (err) {
callback(err);
return;
}
callback(null, cartocss);
});
};
CartoCSS.prototype = {
setStyle: function(style) {
/*setStyle: function(style) {
var layers = this.parse(style);
if(!layers) {
throw new Error(this.parse_env.errors);
@ -124,7 +138,7 @@ CartoCSS.prototype = {
this.layers = layers.map(function(shader) {
return new CartoCSS.Layer(shader);
});
},
},*/
getLayers: function() {
return this.layers;
@ -169,7 +183,41 @@ CartoCSS.prototype = {
return this.imageURLs;
},
parse: function(cartocss) {
preprocess: function(def, done) {
var self = this;
var functions = []
// look for functions that need preprocess
_.each(def.rules, function(rule) {
if (rule.value.value[0] instanceof tree.Expression &&
rule.value.value[0].value[0] instanceof tree.Call) {
var call = rule.value.value[0].value[0];
var fn = self._functions[call.name];
if (fn) {
functions.push({
fn: fn,
callNode: call
});
}
}
})
if (functions.length === 0) {
done(null, this);
return;
}
// call all of them
// TODO: we should check for uniqueness to avoid extra calls
var finished = _.after(functions.length, done.bind(this))
_.each(functions, function(f) {
f.fn(f.callNode.args, function(finalFunction) {
tree.functions[f.callNode.name] = finalFunction;
finished(null);
});
});
},
_parse: function(cartocss, callback) {
var self = this;
var parse_env = {
frames: [],
errors: [],
@ -185,85 +233,92 @@ CartoCSS.prototype = {
} catch(e) {
// add the style.mss string to match the response from the server
parse_env.errors.push(e.message);
callback(parse_env);
return;
}
if(ruleset) {
if (ruleset) {
function defKey(def) {
return def.elements[0] + "::" + def.attachment;
}
var defs = ruleset.toList(parse_env);
defs.reverse();
// group by elements[0].value::attachment
var layers = {};
for(var i = 0; i < defs.length; ++i) {
var def = defs[i];
var key = defKey(def);
var layer = layers[key] = (layers[key] || {
symbolizers: []
});
for(var u = 0; u<def.rules.length; u++){
if(def.rules[u].name === "marker-file" || def.rules[u].name === "point-file"){
var value = def.rules[u].value.value[0].value[0].value.value;
this.imageURLs.push(value);
}
}
layer.frames = [];
layer.zoom = tree.Zoom.all;
var props = def.toJS(parse_env);
if (this.options.debug) console.log("props", props);
for(var v in props) {
var lyr = layer[v] = layer[v] || {
constant: false,
symbolizer: null,
js: [],
index: 0
};
// build javascript statements
lyr.js.push(props[v].map(function(a) { return a.js; }).join('\n'));
// get symbolizer for prop
lyr.symbolizer = _.first(props[v].map(function(a) { return a.symbolizer; }));
// serach the max index to know rendering order
lyr.index = _.max(props[v].map(function(a) { return a.index; }).concat(lyr.index));
lyr.constant = !_.any(props[v].map(function(a) { return !a.constant; }));
async.each(defs, this.preprocess.bind(this), function(err) {
var layers = {};
for(var i = 0; i < defs.length; ++i) {
var def = defs[i];
var key = defKey(def);
var layer = layers[key] = (layers[key] || {
symbolizers: []
});
for(var u = 0; u<def.rules.length; u++){
if(def.rules[u].name === "marker-file" || def.rules[u].name === "point-file"){
var value = def.rules[u].value.value[0].value[0].value.value;
this.imageURLs.push(value);
}
}
layer.frames = [];
layer.zoom = tree.Zoom.all;
var props = def.toJS(parse_env);
if (self.options.debug) console.log("props", props);
for(var v in props) {
var lyr = layer[v] = layer[v] || {
constant: false,
symbolizer: null,
js: [],
index: 0
};
// build javascript statements
lyr.js.push(props[v].map(function(a) { return a.js; }).join('\n'));
// get symbolizer for prop
lyr.symbolizer = _.first(props[v].map(function(a) { return a.symbolizer; }));
// serach the max index to know rendering order
lyr.index = _.max(props[v].map(function(a) { return a.index; }).concat(lyr.index));
lyr.constant = !_.any(props[v].map(function(a) { return !a.constant; }));
}
}
}
var ordered_layers = [];
if (this.options.debug) console.log(layers);
var done = {};
for(var i = 0; i < defs.length; ++i) {
var def = defs[i];
var k = defKey(def);
var layer = layers[k];
if(!done[k]) {
if(this.options.debug) console.log("**", k);
for(var prop in layer) {
if (prop !== 'zoom' && prop !== 'frames' && prop !== 'symbolizers') {
if(this.options.debug) console.log("*", prop);
layer[prop].style = this._createFn(layer[prop].js);
layer.symbolizers.push(layer[prop].symbolizer);
layer.symbolizers = _.uniq(layer.symbolizers);
var ordered_layers = [];
if (self.options.debug) console.log(layers);
var done = {};
for(var i = 0; i < defs.length; ++i) {
var def = defs[i];
var k = defKey(def);
var layer = layers[k];
if(!done[k]) {
if(self.options.debug) console.log("**", k);
for(var prop in layer) {
if (prop !== 'zoom' && prop !== 'frames' && prop !== 'symbolizers') {
if(self.options.debug) console.log("*", prop);
layer[prop].style = self._createFn(layer[prop].js);
layer.symbolizers.push(layer[prop].symbolizer);
layer.symbolizers = _.uniq(layer.symbolizers);
}
}
layer.attachment = k;
ordered_layers.push(layer);
done[k] = true;
}
layer.attachment = k;
ordered_layers.push(layer);
done[k] = true;
layer.zoom |= def.zoom;
layer.frames.push(def.frame_offset);
}
layer.zoom |= def.zoom;
layer.frames.push(def.frame_offset);
}
// uniq the frames
for(i = 0; i < ordered_layers.length; ++i) {
ordered_layers[i].frames = _.uniq(ordered_layers[i].frames);
}
// uniq the frames
for(i = 0; i < ordered_layers.length; ++i) {
ordered_layers[i].frames = _.uniq(ordered_layers[i].frames);
}
return ordered_layers;
self.layers = ordered_layers.map(function(shader) {
return new CartoCSS.Layer(shader);
});
callback(null, self.layers);
return;
});
} else {
callback(new Error("not rules found"));
}
return null;
}
};
@ -271,13 +326,19 @@ CartoCSS.prototype = {
carto.RendererJS = function (options) {
this.options = options || {};
this.options.mapnik_version = this.options.mapnik_version || 'latest';
this._functions = {}
};
// Prepare a javascript object which contains the layers
carto.RendererJS.prototype.render = function render(cartocss, callback) {
var reference = require('./torque-reference');
tree.Reference.setData(reference.version.latest);
return new CartoCSS(cartocss, this.options);
if (cartocss) {
CartoCSS.parse(cartocss, _.extend({}, this.options, { functions: this._functions }), callback);
}
}
carto.RendererJS.prototype.addFunction = function(name, process) {
this._functions[name] = process;
}
if(typeof(module) !== 'undefined') {

6
lib/carto/torque-reference.js
Unescape View File

@ -148,6 +148,12 @@ var _mapnik_reference_latest = {
},
"symbolizers" : {
"*": {
"transition-time": {
"css": "transition-time",
"default-value": 0,
"default-meaning": "transition time",
"doc": ""
},
"image-filters": {
"css": "image-filters",
"default-value": "none",

9
lib/carto/tree/filterset.js
Unescape View File

@ -92,7 +92,14 @@ tree.Filterset.prototype.toJS = function(env) {
val = filter._val.toString(true);
}
var attrs = "data";
return attrs + "." + filter.key.value + " " + op + " " + (val.is === 'string' ? "'"+ val +"'" : val);
var value = val;
if (val.is === 'string') {
value = "'" + val + "'";
} else if (val.is === 'keyword') {
// comparasions like [var == other_var]
value = attrs + "." + val.value;
}
return attrs + "." + filter.key.value + " " + op + " " + value;
}).join(' && ');
};

6
lib/carto/tree/value.js
Unescape View File

@ -15,11 +15,13 @@ tree.Value.prototype = {
}));
}
},
toString: function(env, selector, sep, format) {
return this.value.map(function(e) {
return e.toString(env, format);
}).join(sep || ', ');
},
clone: function() {
var obj = Object.create(tree.Value.prototype);
if (Array.isArray(obj)) obj.value = this.value.slice();
@ -37,7 +39,9 @@ tree.Value.prototype = {
} else if (val.is === 'field') {
// replace [variable] by ctx['variable']
v = v.replace(/\[(.*)\]/g, "data['$1']");
}else if (val.is === 'call') {
} else if (val.is === 'custom') {
v = val.toString();
} else if (val.is === 'call') {
v = JSON.stringify({
name: val.name,
args: val.args

11
package.json
Unescape View File

@ -39,15 +39,16 @@
"dependencies": {
"underscore": "~1.6.0",
"mapnik-reference": "~6.0.2",
"optimist": "~0.6.0"
"optimist": "~0.6.0",
"async": "^1.4.2"
},
"devDependencies": {
"mocha": "1.12.x",
"browserify": "~7.0.0",
"coveralls": "~2.10.1",
"istanbul": "~0.2.14",
"jshint": "0.2.x",
"mocha": "1.12.x",
"sax": "0.1.x",
"istanbul": "~0.2.14",
"coveralls": "~2.10.1",
"browserify": "~7.0.0",
"uglify-js": "1.3.3"
},
"scripts": {

179
test/rendering_js.test.js
Unescape View File

@ -1,6 +1,9 @@
var assert = require('assert');
var carto = require('../lib/carto');
var tree = require('../lib/carto/tree');
var _ = require('underscore');
describe('RenderingJS', function() {
var shader;
var style = [
@ -20,21 +23,24 @@ describe('RenderingJS', function() {
'}'
].join('\n');
beforeEach(function() {
shader = (new carto.RendererJS({ debug: true })).render(style);
beforeEach(function(done) {
(new carto.RendererJS({ debug: true })).render(style, function (err, s) {
shader = s;
done();
});
});
it ("shold render layers", function() {
it("shold render layers", function() {
assert(shader.getLayers().length === 2);
});
it ("shold report frames used in the layer", function() {
it("shold report frames used in the layer", function() {
var layer = shader.getLayers()[0];
assert( layer.frames()[0] === 0);
assert( layer.frames()[1] === 1);
assert(layer.frames()[0] === 0);
assert(layer.frames()[1] === 1);
layer = shader.getLayers()[1];
assert( layer.frames()[0] === 10);
assert(layer.frames()[0] === 10);
});
it ("shold render with frames var", function() {
@ -43,49 +49,59 @@ describe('RenderingJS', function() {
assert( props['line-width'] === 4);
});
it ("shold render variables", function() {
it("shold render variables", function(done) {
var style = '#test { marker-width: [testing]; }';
shader = (new carto.RendererJS({ debug: true })).render(style);
var layer = shader.getLayers()[0];
var props = layer.getStyle({testing: 2}, { 'zoom': 0, 'frame-offset': 10 });
assert( props['marker-width'] === 2);
(new carto.RendererJS({ debug: true })).render(style, function(err, s) {
console.log("#### --> ", s);
debugger
var layer = s.getLayers()[0];
var props = layer.getStyle({testing: 2}, { 'zoom': 0, 'frame-offset': 10 });
assert( props['marker-width'] === 2);
done();
});
});
it ("should allow filter based rendering", function() {
it ("should allow filter based rendering", function(done) {
var style = '#test { marker-width: 10; [zoom = 1] { marker-width: 1; } }';
shader = (new carto.RendererJS({ debug: true })).render(style);
var layer = shader.getLayers()[0];
var props = layer.getStyle({}, { 'zoom': 0, 'frame-offset': 10 });
assert( props['marker-width'] === 10);
props = layer.getStyle({}, { 'zoom': 1, 'frame-offset': 10 });
assert( props['marker-width'] === 1);
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var layer = shader.getLayers()[0];
var props = layer.getStyle({}, { 'zoom': 0, 'frame-offset': 10 });
assert( props['marker-width'] === 10);
props = layer.getStyle({}, { 'zoom': 1, 'frame-offset': 10 });
assert( props['marker-width'] === 1);
done();
});
});
it ("symbolizers should be in rendering order", function() {
it ("symbolizers should be in rendering order", function(done) {
var style = '#test { polygon-fill: red; line-color: red; }';
style += '#test2 { line-color: red;polygon-fill: red; line-witdh: 10; }';
var shader = (new carto.RendererJS({ debug: true })).render(style);
var layer0 = shader.getLayers()[0];
assert(layer0.getSymbolizers()[0] === 'polygon');
assert(layer0.getSymbolizers()[1] === 'line');
var layer1 = shader.getLayers()[1];
assert(layer0.getSymbolizers()[0] === 'polygon');
assert(layer0.getSymbolizers()[1] === 'line');
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var layer0 = shader.getLayers()[0];
assert(layer0.getSymbolizers()[0] === 'polygon');
assert(layer0.getSymbolizers()[1] === 'line');
var layer1 = shader.getLayers()[1];
assert(layer0.getSymbolizers()[0] === 'polygon');
assert(layer0.getSymbolizers()[1] === 'line');
done();
});
});
it ("colorize should return a list of colours in same order", function() {
it ("colorize should return a list of colours in same order", function(done) {
var style = '#test { image-filters: colorize-alpha(blue, cyan, green, yellow, orange, red); }';
var shader = (new carto.RendererJS({ debug: true })).render(style);
var layer0 = shader.getLayers()[0];
var st = layer0.getStyle({ value: 1 }, {"frame-offset": 0, "zoom": 3});
var expectedColours = [[0, 0, 255], [0, 255, 255], [0, 128, 0], [255, 255, 0], [255, 165, 0], [255, 0, 0]];
for (var i = 0; i < st["image-filters"].args; i++){
assert (st["image-filters"].args[i].rgb === expectedColours[i]);
}
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var layer0 = shader.getLayers()[0];
var st = layer0.getStyle({ value: 1 }, {"frame-offset": 0, "zoom": 3});
var expectedColours = [[0, 0, 255], [0, 255, 255], [0, 128, 0], [255, 255, 0], [255, 165, 0], [255, 0, 0]];
for (var i = 0; i < st["image-filters"].args; i++){
assert (st["image-filters"].args[i].rgb === expectedColours[i]);
}
done();
});
});
it ("should return list of marker-files", function(){
it ("should return list of marker-files", function(done) {
var css = [
'Map {',
'-torque-time-attribute: "date";',
@ -106,30 +122,79 @@ describe('RenderingJS', function() {
' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
'}'
].join('\n');
var shader = (new carto.RendererJS({ debug: true })).render(css);
var markerURLs = shader.getImageURLs();
var against = ["http://localhost:8081/gal.svg", "http://upload.wikimedia.org/wikipedia/commons/4/43/Flag_of_the_Galactic_Empire.svg", "http://upload.wikimedia.org/wikipedia/commons/c/c9/Flag_of_Syldavia.svg"];
for(var i = 0; i<against.length; i++){
assert(against[i] == markerURLs[i])
}
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var markerURLs = shader.getImageURLs();
var against = ["http://localhost:8081/gal.svg", "http://upload.wikimedia.org/wikipedia/commons/4/43/Flag_of_the_Galactic_Empire.svg", "http://upload.wikimedia.org/wikipedia/commons/c/c9/Flag_of_Syldavia.svg"];
for(var i = 0; i< against.length; i++){
assert(against[i] == markerURLs[i])
}
done();
});
})
it ("should return variable for styles that change", function() {
var style = '#test { marker-width: [prop]; }';
var shader = (new carto.RendererJS({ debug: true })).render(style);
var layer0 = shader.getLayers()[0];
assert(layer0.isVariable());
style = '#test { marker-width: 1; }';
shader = (new carto.RendererJS({ debug: true })).render(style);
layer0 = shader.getLayers()[0];
assert(!layer0.isVariable());
describe("isVariable", function() {
it("prop", function(done) {
var style = '#test { marker-width: [prop]; }';
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var layer0 = shader.getLayers()[0];
assert(layer0.isVariable());
done();
});
});
it ("constant", function(done) {
style = '#test { marker-width: 1; }';
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
layer0 = shader.getLayers()[0];
assert(!layer0.isVariable());
done();
});
});
it ("both", function(done) {
style = '#test { marker-width: [prop]; marker-fill: red; }';
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
layer0 = shader.getLayers()[0];
assert(layer0.isVariable());
done();
});
});
});
style = '#test { marker-width: [prop]; marker-fill: red; }';
shader = (new carto.RendererJS({ debug: true })).render(style);
layer0 = shader.getLayers()[0];
assert(layer0.isVariable());
it ("should be able to provide external functions", function(done) {
var style = '#test { marker-width: testing([prop]); }';
var renderer = new carto.RendererJS({ debug: true })
renderer.addFunction('testing', function(args, callback) {
_.defer(function() {
callback(function(a) {
return {
is: 'custom',
toString: function() {
return "(function() { return data['" + a.value + "']})();";
}
}
})
});
})
renderer.render(style, function(err, shader) {
var layer = shader.getLayers()[0];
var props = layer.getStyle({prop: 1}, { 'zoom': 0, 'frame-offset': 10 });
assert(props['marker-width'] === 1);
done();
});
});
it("should be able to provide do var to var comparasions", function(done) {
var style = '#test { marker-width: 1; [prop = test.a] {marker-width: 10 }}';
(new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
var layer = shader.getLayers()[0];
var props = layer.getStyle({ prop: 1, test: {a: 1} }, { 'zoom': 0, 'frame-offset': 10 });
assert(props['marker-width'] === 10);
var props = layer.getStyle({prop: 1, test: {a: 0}}, { 'zoom': 0, 'frame-offset': 10 });
assert(props['marker-width'] === 1);
done();
});
});
});

Write Preview
Loading…
Cancel
Save