Fix issues with stack property

src/style_manager/view/LayerView.js

@@ -5,7 +5,7 @@ import PropertiesView from './PropertiesView';
 export default Backbone.View.extend({
   events: {
     click: 'active',
-    'click [data-close-layer]': 'remove',
+    'click [data-close-layer]': 'removeItem',
     'mousedown [data-move-layer]': 'initSorter',
     'touchstart [data-move-layer]': 'initSorter'
   },
@@ -58,9 +58,12 @@ export default Backbone.View.extend({
     if (this.sorter) this.sorter.startSort(this.el);
   },
 
-  remove(e) {
+  removeItem(ev) {
-    if (e && e.stopPropagation) e.stopPropagation();
+    ev && ev.stopPropagation();
+    this.remove();
+  },
 
+  remove(opts = {}) {
     const { model, props } = this;
     const coll = model.collection;
     const stackModel = this.stackModel;
@@ -70,7 +73,7 @@ export default Backbone.View.extend({
 
     if (stackModel && stackModel.set) {
       stackModel.set({ stackIndex: null }, { silent: true });
-      stackModel.trigger('updateValue');
+      !opts.fromTarget && stackModel.trigger('updateValue');
     }
 
     props && props.remove();

src/style_manager/view/LayersView.js

@@ -15,7 +15,7 @@ export default Backbone.View.extend({
     this.className = `${pfx}layers ${ppfx}field`;
     this.listenTo(collection, 'add', this.addTo);
     this.listenTo(collection, 'deselectAll', this.deselectAll);
-    this.listenTo(collection, 'reset', this.render);
+    this.listenTo(collection, 'reset', this.reset);
     this.items = [];
 
     var em = this.config.em || '';
@@ -111,9 +111,13 @@ export default Backbone.View.extend({
     this.$el.find('.' + this.pfx + 'layer').removeClass(this.pfx + 'active');
   },
 
+  reset(coll, opts) {
+    this.clearItems(opts);
+    this.render();
+  },
+
   render() {
     var fragment = document.createDocumentFragment();
-    this.clearItems();
     this.$el.empty();
 
     this.collection.each(function(model) {
@@ -133,8 +137,8 @@ export default Backbone.View.extend({
     Backbone.View.prototype.remove.apply(this, arguments);
   },
 
-  clearItems() {
+  clearItems(opts) {
-    this.items.forEach(item => item.remove());
+    this.items.forEach(item => item.remove(opts));
     this.items = [];
   }
 });

src/style_manager/view/PropertyStackView.js

@@ -192,6 +192,7 @@ export default PropertyCompositeView.extend({
     const target = this.getTarget();
     const valueComput = this.getComputedValue();
     const selected = em.getSelected();
+    const updateOpts = { fromTarget: 1 };
     let resultValue,
       style,
       targetAlt,
@@ -270,8 +271,8 @@ export default PropertyCompositeView.extend({
     const toAdd =
       model.getLayersFromTarget(target, { resultValue, layersObj }) ||
       layersObj;
-    layers.reset();
+    layers.reset(null, updateOpts);
-    layers.add(toAdd);
+    layers.add(toAdd, updateOpts);
     model.set({ stackIndex: null }, { silent: true });
   },
 

src/style_manager/view/PropertyView.js

@@ -189,9 +189,9 @@ export default Backbone.View.extend({
    * Triggers when the value of element input/s is changed, so have to update
    * the value of the model which will propogate those changes to the target
    */
-  inputValueChanged(e) {
+  inputValueChanged(ev) {
-    e && e.stopPropagation();
+    ev && ev.stopPropagation();
-    this.model.setValue(this.getInputValue(), 1, { fromInput: 1 });
+    this.model.setValueFromInput(this.getInputValue());
     this.elementUpdated();
   },
 
@@ -405,7 +405,10 @@ export default Backbone.View.extend({
       this.setValue(value);
     }
 
-    this.getTargets().forEach(target => this.__updateTarget(target, opt));
+    // Avoid target update if the changes comes from it
+    if (!opt.fromTarget) {
+      this.getTargets().forEach(target => this.__updateTarget(target, opt));
+    }
   },
 
   __updateTarget(target, opt = {}) {