Remove StyleDeclarationSet and PaintProperties classes

js/style/parse_color.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var parseCSSColor = require('csscolorparser').parseCSSColor;
+var util = require('../util/util');
+
+var colorCache = {};
+
+function parseColor(input) {
+
+    if (colorCache[input]) {
+        return colorCache[input];
+
+    // RGBA array
+    } else if (Array.isArray(input)) {
+        return input;
+
+    // GL function
+    } else if (input && input.stops) {
+        return util.extend({}, input, {
+            stops: input.stops.map(parseFunctionStopColor)
+        });
+
+    // Color string
+    } else if (typeof input === 'string') {
+        var output = colorDowngrade(parseCSSColor(input));
+        colorCache[input] = output;
+        return output;
+
+    } else {
+        throw new Error('Invalid color ' + input);
+    }
+
+}
+
+function parseFunctionStopColor(stop) {
+    return [stop[0], parseColor(stop[1])];
+}
+
+function colorDowngrade(color) {
+    return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 1];
+}
+
+module.exports = parseColor;

js/style/style_declaration.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var parseCSSColor = require('csscolorparser').parseCSSColor;
 var MapboxGLFunction = require('mapbox-gl-function');
-var util = require('../util/util');
+var parseColor = require('./parse_color');
 
 module.exports = StyleDeclaration;
 
@@ -62,38 +61,3 @@ function transitioned(calculate) {
         };
     };
 }
-
-var colorCache = {};
-
-function parseColor(input) {
-
-    if (colorCache[input]) {
-        return colorCache[input];
-
-    // RGBA array
-    } else if (Array.isArray(input)) {
-        return input;
-
-    // GL function
-    } else if (input && input.stops) {
-        return util.extend({}, input, {
-            stops: input.stops.map(function(step) {
-                return [step[0], parseColor(step[1])];
-            })
-        });
-
-    // Color string
-    } else if (typeof input === 'string') {
-        var output = colorDowngrade(parseCSSColor(input));
-        colorCache[input] = output;
-        return output;
-
-    } else {
-        throw new Error('Invalid color ' + input);
-    }
-
-}
-
-function colorDowngrade(color) {
-    return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 1];
-}

js/style/style_layer.js

@@ -2,12 +2,15 @@
 
 var util = require('../util/util');
 var StyleTransition = require('./style_transition');
-var StyleDeclarationSet = require('./style_declaration_set');
+var StyleDeclaration = require('./style_declaration');
 var LayoutProperties = require('./layout_properties');
-var PaintProperties = require('./paint_properties');
+var StyleSpecification = require('./reference');
+var parseColor = require('./parse_color');
 
 module.exports = StyleLayer;
 
+var TRANSITION_SUFFIX = '-transition';
+
 StyleLayer.create = function(layer, refLayer) {
     var Classes = {
         background: require('./style_layer/background_style_layer'),
@@ -33,8 +36,12 @@ function StyleLayer(layer, refLayer) {
     this.filter = (refLayer || layer).filter;
     this.layout = (refLayer || layer).layout;
 
-    this._classes = {}; // class name -> StyleDeclarationSet
-    this._transitions = {}; // property name -> StyleTransition
+    this._paintDeclarations = {}; // {[class name]: { [property name]: StyleDeclaration }}
+    this._paintTransitions = {}; // {[class name]: { [property name]: StyleTransitionOptions }}
+    this._paintTransitions = {}; // { [property name]: StyleDeclaration }
+
+    this._paintSpecifications = StyleSpecification['paint_' + this.type];
+    this._layoutSpecifications = StyleSpecification['layout_' + this.type];
 }
 
 StyleLayer.prototype = {
@@ -59,21 +66,56 @@ StyleLayer.prototype = {
     resolvePaint: function() {
         for (var key in this._layer) {
             var match = key.match(/^paint(?:\.(.*))?$/);
-            if (!match) continue;
-            this._classes[match[1] || ''] = new StyleDeclarationSet('paint', this.type, this._layer[key]);
+            if (match) {
+                var klass = match[1] || '';
+                for (var name in this._layer[key]) {
+                    this.setPaintProperty(name, this._layer[key][name], klass);
+                }
+            }
         }
     },
 
     setPaintProperty: function(name, value, klass) {
-        var declarations = this._classes[klass || ''];
-        if (!declarations) {
-            declarations = this._classes[klass || ''] = new StyleDeclarationSet('paint', this.type, {});
+        if (endsWith(name, TRANSITION_SUFFIX)) {
+            if (!this._paintTransitions[klass || '']) {
+                this._paintTransitions[klass || ''] = {};
+            }
+            this._paintTransitions[klass || ''][name] = value;
+        } else {
+            if (!this._paintDeclarations[klass || '']) {
+                this._paintDeclarations[klass || ''] = {};
+            }
+            this._paintDeclarations[klass || ''][name] = new StyleDeclaration(this._paintSpecifications[name], value);
         }
-        declarations[name] = value;
     },
 
     getPaintProperty: function(name, klass) {
-        return this._classes[klass || ''] && this._classes[klass || ''][name];
+        klass = klass || '';
+        if (endsWith(name, TRANSITION_SUFFIX)) {
+            return (
+                this._paintTransitions[klass] &&
+                this._paintTransitions[klass][name]
+            );
+        } else {
+            return (
+                this._paintDeclarations[klass] &&
+                this._paintDeclarations[klass][name] &&
+                this._paintDeclarations[klass][name].value
+            );
+        }
+    },
+
+    getPaintValue: function(name, zoom, zoomHistory) {
+        var specification = this._paintSpecifications[name];
+        var transition = this._paintTransitions[name];
+
+        if (transition) {
+            return transition.at(zoom, zoomHistory);
+        } else if (specification.type === 'color' && specification.default) {
+            return parseColor(specification.default);
+        } else {
+            return specification.default;
+        }
     },
 
     isHidden: function(zoom) {
@@ -85,21 +127,21 @@ StyleLayer.prototype = {
     },
 
     // update classes
-    cascade: function(classes, options, globalTrans, animationLoop) {
-        for (var klass in this._classes) {
+    cascade: function(classes, options, globalTransitionOptions, animationLoop) {
+        for (var klass in this._paintDeclarations) {
             if (klass !== "" && !classes[klass]) continue;
 
-            var declarations = this._classes[klass];
-            var values = declarations.values();
-
-            for (var k in values) {
-                var newDeclaration = values[k];
-                var oldTransition = options.transition ? this._transitions[k] : undefined;
+            for (var name in this._paintDeclarations[klass]) {
+                var declaration = this._paintDeclarations[klass][name];
+                var oldTransition = options.transition ? this._paintTransitions[name] : undefined;
 
                 // Only create a new transition if the declaration changed
-                if (!oldTransition || oldTransition.declaration.json !== newDeclaration.json) {
-                    var newStyleTrans = declarations.transition(k, globalTrans);
-                    var newTransition = this._transitions[k] = new StyleTransition(newDeclaration, oldTransition, newStyleTrans);
+                if (!oldTransition || oldTransition.declaration.json !== declaration.json) {
+                    var newTransition = this._paintTransitions[name] = new StyleTransition(declaration, oldTransition, util.extend(
+                        {duration: 300, delay: 0},
+                        globalTransitionOptions,
+                        this.getPaintProperty(name + TRANSITION_SUFFIX)
+                    ));
 
                     // Run the animation loop until the end of the transition
                     if (!newTransition.instant()) {
@@ -114,15 +156,10 @@ StyleLayer.prototype = {
         }
     },
 
-    getPaintValue: function(name, zoom, zoomHistory) {
-        return this._transitions[name].at(zoom, zoomHistory);
-    },
-
     // update zoom
     recalculate: function(zoom, zoomHistory) {
-        this.paint = new PaintProperties[this.type]();
-
-        for (var name in this._transitions) {
+        this.paint = {};
+        for (var name in this._paintSpecifications) {
             this.paint[name] = this.getPaintValue(name, zoom, zoomHistory);
         }
     },
@@ -138,3 +175,7 @@ StyleLayer.prototype = {
         );
     }
 };
+
+function endsWith(string, suffix) {
+    return string.indexOf(suffix, string.length - suffix.length) !== -1;
+}

js/style/style_layer/line_style_layer.js

@@ -16,7 +16,7 @@ LineStyleLayer.prototype = util.inherit(StyleLayer, {
 
         // If the line is dashed, scale the dash lengths by the line
         // width at the previous round zoom level.
-        if (name === 'line-dasharray') {
+        if (output && name === 'line-dasharray') {
             var lineWidth = this.getPaintValue('line-width', Math.floor(zoom), Infinity);
             output.fromScale *= lineWidth;
             output.toScale *= lineWidth;

js/style/style_layer/symbol_style_layer.js

@@ -2,9 +2,7 @@
 
 var util = require('../../util/util');
 var StyleLayer = require('../style_layer');
-var StyleDeclarationSet = require('../style_declaration_set');
-var StyleTransition = require('../style_transition');
-
+var MapboxGLFunction = require('mapbox-gl-function');
 
 function SymbolStyleLayer() {
     StyleLayer.apply(this, arguments);
@@ -37,15 +35,14 @@ SymbolStyleLayer.prototype = util.inherit(StyleLayer, {
         }
     },
 
-    cascade: function(classes, options, globalTrans) {
-        StyleLayer.prototype.cascade.apply(this, arguments);
+    recalculate: function(zoom) {
+        StyleLayer.prototype.recalculate.apply(this, arguments);
 
         // the -size properties are used both as layout and paint.
         // In the spec they are layout properties. This adds them
-        // as internal paint properties.
-        var resolvedLayout = new StyleDeclarationSet('layout', this.type, this.layout);
-        this._transitions['text-size'] = new StyleTransition(resolvedLayout.values()['text-size'], undefined, globalTrans);
-        this._transitions['icon-size'] = new StyleTransition(resolvedLayout.values()['icon-size'], undefined, globalTrans);
+        // as paint properties.
+        this.paint['text-size'] = MapboxGLFunction.interpolated(this.layout['text-size'])(zoom);
+        this.paint['icon-size'] = MapboxGLFunction.interpolated(this.layout['icon-size'])(zoom);
     }
 
 });

test/js/style/style.test.js

@@ -8,7 +8,6 @@ var sinon = require('sinon');
 var Style = require('../../../js/style/style');
 var VectorTileSource = require('../../../js/source/vector_tile_source');
 var LayoutProperties = require('../../../js/style/layout_properties');
-var PaintProperties = require('../../../js/style/paint_properties');
 var StyleLayer = require('../../../js/style/style_layer');
 var util = require('../../../js/util/util');
 
@@ -851,13 +850,7 @@ test('Style#featuresAt', function(t) {
             t.test('includes paint properties', function(t) {
                 featuresInOrAt({}, function(err, results) {
                     t.error(err);
-
-                    var paint = results[0].layer.paint;
-                    t.deepEqual(paint, {'line-color': [ 1, 0, 0, 1 ]});
-                    t.deepEqual(
-                        Object.getPrototypeOf(paint),
-                        PaintProperties.line.prototype);
-
+                    t.deepEqual(results[0].layer.paint['line-color'], [ 1, 0, 0, 1 ]);
                     t.end();
                 });
             });

test/js/style/style_layer.test.js

@@ -44,13 +44,13 @@ test('StyleLayer#resolvePaint', function(t) {
     t.test('calculates paint classes', function(t) {
         var layer = StyleLayer.create({
             type: 'fill',
-            'paint': {},
-            'paint.night': {}
+            'paint': { 'fill-color': 'white' },
+            'paint.night': { 'fill-color': 'black' }
         });
 
         layer.resolvePaint({});
 
-        t.deepEqual(Object.keys(layer._classes), ['', 'night']);
+        t.deepEqual(Object.keys(layer._paintDeclarations), ['', 'night']);
         t.end();
     });
 });