added the possibility of using custom defined functions from cartocss

lib/carto/parser.js

@@ -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); }
                 },
 

lib/carto/renderer_js.js

@@ -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,16 +233,17 @@ 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
+      async.each(defs, this.preprocess.bind(this), function(err) {
         var layers = {};
         for(var i = 0; i < defs.length; ++i) {
           var def = defs[i];
@@ -211,7 +260,7 @@ CartoCSS.prototype = {
           layer.frames = [];
           layer.zoom = tree.Zoom.all;
           var props = def.toJS(parse_env);
-        if (this.options.debug) console.log("props", props);
+          if (self.options.debug) console.log("props", props);
           for(var v in props) {
             var lyr = layer[v] = layer[v] || {
               constant: false,
@@ -228,9 +277,8 @@ CartoCSS.prototype = {
             lyr.constant = !_.any(props[v].map(function(a) { return !a.constant; }));
           }
         }
-
         var ordered_layers = [];
-      if (this.options.debug) console.log(layers);
+        if (self.options.debug) console.log(layers);
 
         var done = {};
         for(var i = 0; i < defs.length; ++i) {
@@ -238,11 +286,11 @@ CartoCSS.prototype = {
           var k = defKey(def);
           var layer = layers[k];
           if(!done[k]) {
-          if(this.options.debug) console.log("**", k);
+            if(self.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);
+                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);
               }
@@ -260,10 +308,17 @@ CartoCSS.prototype = {
           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') {

lib/carto/torque-reference.js

@@ -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",

lib/carto/tree/filterset.js

@@ -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(' && ');
 };
 

lib/carto/tree/value.js

@@ -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

package.json

@@ -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",
-    "jshint": "0.2.x",
-    "sax": "0.1.x",
-    "istanbul": "~0.2.14",
-    "coveralls": "~2.10.1",
     "browserify": "~7.0.0",
+    "coveralls": "~2.10.1",
+    "istanbul": "~0.2.14",
+    "jshint": "0.2.x",
+    "mocha": "1.12.x",
+    "sax": "0.1.x",
     "uglify-js": "1.3.3"
   },
   "scripts": {

test/rendering_js.test.js

@@ -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,28 +49,34 @@ 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];
+    (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);
+    (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);
+    (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');
@@ -72,20 +84,24 @@ describe('RenderingJS', function() {
       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);
+    (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);
+      (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++){
+        for(var i = 0; i< against.length; i++){
           assert(against[i] == markerURLs[i])
         }
+        done();
+      });
   })
 
-  it ("should return variable for styles that change", function() {
+  describe("isVariable", function() {
+
+    it("prop", function(done) {
       var style = '#test { marker-width: [prop]; }';
-    var shader = (new carto.RendererJS({ debug: true })).render(style);
+      (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; }';
-    shader = (new carto.RendererJS({ debug: true })).render(style);
+      (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;  }';
-    shader = (new carto.RendererJS({ debug: true })).render(style);
+      (new carto.RendererJS({ debug: true })).render(style, function(err, shader) {
         layer0 = shader.getLayers()[0];
         assert(layer0.isVariable());
+        done();
+      });
+    });
+  });
 
+  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();
+    });
   });
 
 });