diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index f98e61172..17079be48 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -93,22 +93,29 @@ export default Property.extend({ values = this.getValues({ byName: true }); if (this.isDetached()) { - style = { [name]: '', ...values }; + style = values; } else { const value = this.getProperties() .map(p => p.__getFullValue({ withDefault: 1 })) .filter(Boolean) .join(join); - style = { - [name]: value, - ...Object.keys(values).reduce((acc, prop) => { - acc[prop] = ''; - return acc; - }, {}), - }; + style = { [name]: value }; } } + if (this.isDetached()) { + style[name] = ''; + } else { + style[name] = style[name] || ''; + style = { + ...style, + ...this.getProperties().reduce((acc, prop) => { + acc[prop.getName()] = ''; + return acc; + }, {}), + }; + } + return opts.camelCase ? Object.keys(style).reduce((res, key) => { res[camelCase(key)] = style[key]; diff --git a/test/specs/style_manager/model/Properties.js b/test/specs/style_manager/model/Properties.js index 90aba02a9..a89b7d0c1 100644 --- a/test/specs/style_manager/model/Properties.js +++ b/test/specs/style_manager/model/Properties.js @@ -172,6 +172,24 @@ describe('StyleManager properties logic', () => { }); }); + test('getStyleFromProps with custom toStyle', () => { + rule1.setStyle({ padding: '1px 2px 3px 4px' }); + obj.__upSel(); + compTypeProp.set('toStyle', values => { + return { + [propTest]: `rgba(${values[propATest]}, ${values[propBTest]}, ${values[propDTest]})`, + }; + }); + compTypeProp.set('detached', false); + expect(compTypeProp.getStyleFromProps()).toEqual({ + [propTest]: 'rgba(1px, 2px, 4px)', + [propATest]: '', + [propBTest]: '', + [propCTest]: '', + [propDTest]: '', + }); + }); + test('Update on properties reflects to the rule correctly', () => { compTypeProp.set('detached', false); rule1.setStyle({ padding: '1px 2px 3px 4px' });