Allow filter to be mutated and set again (#2495)

* Allow filter to be mutated and set again

fixes #2486

* Clone StyleDeclaration value

Author: lucaswoj

js/style/style.js

@@ -501,7 +501,7 @@ Style.prototype = util.inherit(Evented, {
         if (this._handleErrors(validateStyle.filter, 'layers.' + layer.id + '.filter', filter)) return this;
 
         if (util.deepEqual(layer.filter, filter)) return this;
-        layer.filter = filter;
+        layer.filter = util.clone(filter);
 
         return this._updateLayer(layer);
     },

js/style/style_declaration.js

@@ -2,13 +2,14 @@
 
 var MapboxGLFunction = require('./style_function');
 var parseColor = require('./parse_color');
+var util = require('../util/util');
 
 module.exports = StyleDeclaration;
 
 function StyleDeclaration(reference, value) {
     this.type = reference.type;
     this.transitionable = reference.transition;
-    this.value = value;
+    this.value = util.clone(value);
     this.isFunction = !!value.stops;
 
     // immutable representation of value. used for comparison

js/util/util.js

@@ -435,6 +435,23 @@ exports.deepEqual = function deepEqual(a, b) {
     return a === b;
 };
 
+/**
+ * Deeply clones two objects.
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @returns {boolean}
+ * @private
+ */
+exports.clone = function deepEqual(input) {
+    if (Array.isArray(input)) {
+        return input.map(exports.clone);
+    } else if (typeof input === 'object') {
+        return exports.mapObject(input, exports.clone);
+    } else {
+        return input;
+    }
+};
+
 /**
  * Check if two arrays have at least one common element.
  * @param {Array} a

test/js/style/style.test.js

@@ -766,12 +766,34 @@ test('Style#setFilter', function(t) {
         style.on('load', function() {
             style.dispatcher.broadcast = function(key, value) {
                 t.equal(key, 'update layers');
-                t.deepEqual(value.map(function(layer) { return layer.id; }), ['symbol']);
+                t.deepEqual(value[0].id, 'symbol');
+                t.deepEqual(value[0].filter, ['==', 'id', 1]);
+                t.end();
             };
 
             style.setFilter('symbol', ['==', 'id', 1]);
             t.deepEqual(style.getFilter('symbol'), ['==', 'id', 1]);
-            t.end();
+            style.update({}, {}); // trigger dispatcher broadcast
+        });
+    });
+
+    t.test('sets again mutated filter', function(t) {
+        var style = createStyle();
+
+        style.on('load', function() {
+            var filter = ['==', 'id', 1];
+            style.setFilter('symbol', filter);
+            style.update({}, {}); // flush pending operations
+
+            style.dispatcher.broadcast = function(key, value) {
+                t.equal(key, 'update layers');
+                t.deepEqual(value[0].id, 'symbol');
+                t.deepEqual(value[0].filter, ['==', 'id', 2]);
+                t.end();
+            };
+            filter[2] = 2;
+            style.setFilter('symbol', filter);
+            style.update({}, {}); // trigger dispatcher broadcast
         });
     });
 

test/js/util/util.test.js

@@ -257,6 +257,42 @@ test('util', function(t) {
         t.end();
     });
 
+    t.test('clone', function(t) {
+        t.test('array', function(t) {
+            var input = [false, 1, 'two'];
+            var output = util.clone(input);
+            t.notEqual(input, output);
+            t.deepEqual(input, output);
+            t.end();
+        });
+
+        t.test('object', function(t) {
+            var input = {a: false, b: 1, c: 'two'};
+            var output = util.clone(input);
+            t.notEqual(input, output);
+            t.deepEqual(input, output);
+            t.end();
+        });
+
+        t.test('deep object', function(t) {
+            var input = {object: {a: false, b: 1, c: 'two'}};
+            var output = util.clone(input);
+            t.notEqual(input.object, output.object);
+            t.deepEqual(input.object, output.object);
+            t.end();
+        });
+
+        t.test('deep array', function(t) {
+            var input = {array: [false, 1, 'two']};
+            var output = util.clone(input);
+            t.notEqual(input.array, output.array);
+            t.deepEqual(input.array, output.array);
+            t.end();
+        });
+
+        t.end();
+    });
+
     if (process.browser) {
         t.test('timed: no duration', function(t) {
             var context = { foo: 'bar' };