diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 438843f7f..15672f12a 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -128,7 +128,7 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack // to fetch them later var valObj = {}; this.model.get('properties').each(function(prop){ - var v = prop.getValue(); + var v = prop.getValue(), func = prop.get('functionName'); if(func) v = func + '(' + v + ')'; @@ -211,6 +211,7 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack /** * Returns array suitale for layers from target style + * Only for detached stacks * @return {Array} */ getLayersFromTarget: function(){ @@ -225,10 +226,14 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack var list = style.split(','); for(var i = 0, len = list.length; i < len; i++){ var val = list[i].trim(); - if(arr[i]) - arr[i] += ' ' + val; - else - arr[i] = val; + + if(arr[i]){ + arr[i][prop.get('property')] = val; + }else{ + var vals = {}; + vals[prop.get('property')] = val; + arr[i] = vals; + } } } }); @@ -241,7 +246,9 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack refreshLayers: function(){ var n = []; var a = []; + var fieldName = 'value'; if(this.model.get('detached')){ + fieldName = 'values'; a = this.getLayersFromTarget(); }else{ var v = this.getComponentValue(); @@ -257,7 +264,11 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack a = v.split(', '); } } - _.each(a,function(e){ n.push({ value: e});},this); + _.each(a,function(e){ + var o = {}; + o[fieldName] = e; + n.push(o); + },this); this.$props.detach(); var layers = this.getLayers(); layers.reset(); diff --git a/test/specs/style_manager/view/PropertyStackView.js b/test/specs/style_manager/view/PropertyStackView.js index 76dcfdc03..568291202 100644 --- a/test/specs/style_manager/view/PropertyStackView.js +++ b/test/specs/style_manager/view/PropertyStackView.js @@ -290,8 +290,20 @@ define([path + 'PropertyStackView', 'StyleManager/model/Property', 'DomComponent it('Returns correctly layers array from target', function() { component.set('style', compStyle); - var result = ['1px A W', '20px B X', '30px C Y']; - view.getLayersFromTarget().should.have.same.members(result); + var result = [{ + subprop1: '1px', + subprop2: 'A', + subprop3: 'W', + },{ + subprop1: '20px', + subprop2: 'B', + subprop3: 'X', + },{ + subprop1: '30px', + subprop2: 'C', + subprop3: 'Y', + }]; + view.getLayersFromTarget().should.deep.equal(result); }); it('Update target on detached value change', function() { @@ -310,9 +322,21 @@ define([path + 'PropertyStackView', 'StyleManager/model/Property', 'DomComponent view.propTarget.trigger('update'); var layers = view.getLayers(); layers.length.should.equal(3); - layers.at(0).get('value').should.equal('1px A W'); - layers.at(1).get('value').should.equal('20px B X'); - layers.at(2).get('value').should.equal('30px C Y'); + layers.at(0).get('values').should.deep.equal({ + subprop1: '1px', + subprop2: 'A', + subprop3: 'W', + }); + layers.at(1).get('values').should.deep.equal({ + subprop1: '20px', + subprop2: 'B', + subprop3: 'X', + }); + layers.at(2).get('values').should.deep.equal({ + subprop1: '30px', + subprop2: 'C', + subprop3: 'Y', + }); }); });