diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index d635033c3..f98e61172 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -76,53 +76,56 @@ export default Property.extend({ return Property.prototype.__upTargetsStyle.call(this, newStyle, opts); }, - __getFullValue(opts = {}) { - if (this.isDetached() || opts.__clear) { - return ''; - } - - return this.getProperties() - .map(p => p.__getFullValue({ withDefault: 1 })) - .filter(Boolean) - .join(this.__getJoin()); - }, - - __getJoin() { - const join = this.get('join'); - return isString(join) ? join : this.get('separator'); - }, - - // TODO remove - __getFromStyle(style = {}) { - let result = {}; - const fromStyle = this.get('fromStyle'); - const sep = this.getSplitSeparator(); + /** + * Get style object from current properties + * @returns {Object} Style object + */ + getStyleFromProps(opts = {}) { const name = this.getName(); + const join = this.__getJoin(); + const toStyle = this.get('toStyle'); + let values = this.getValues(); + let style = {}; - if (fromStyle) { - result = fromStyle(style, { property: this, separator: sep }); + if (toStyle) { + style = toStyle(values, { join, name, property: this }); } else { - const value = style[name]; - if (value) { - const values = value.split(sep); - this.getProperties().forEach((prop, i) => { - const len = values.length; - // Try to get value from a shorthand: - // 11px -> 11px 11px 11px 11xp - // 11px 22px -> 11px 22px 11px 22xp - const value = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)]; - result[prop.getId()] = value || ''; - }); - result = { - ...result, - ...style, - }; + values = this.getValues({ byName: true }); + + if (this.isDetached()) { + style = { [name]: '', ...values }; } else { - result = style; + 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; + }, {}), + }; } } - return result; + return opts.camelCase + ? Object.keys(style).reduce((res, key) => { + res[camelCase(key)] = style[key]; + return res; + }, {}) + : style; + }, + + __getFullValue(opts = {}) { + if (this.isDetached() || opts.__clear) return ''; + + return this.getStyleFromProps()[this.getName()] || ''; + }, + + __getJoin() { + const join = this.get('join'); + return isString(join) ? join : this.get('separator'); }, __styleHasProps(style = {}) { diff --git a/test/specs/style_manager/model/Properties.js b/test/specs/style_manager/model/Properties.js index 96e929732..90aba02a9 100644 --- a/test/specs/style_manager/model/Properties.js +++ b/test/specs/style_manager/model/Properties.js @@ -152,6 +152,26 @@ describe('StyleManager properties logic', () => { }); }); + test('getStyleFromProps', () => { + rule1.setStyle({ padding: '1px 2px 3px 4px' }); + obj.__upSel(); + expect(compTypeProp.getStyleFromProps()).toEqual({ + [propTest]: '', + [propATest]: '1px', + [propBTest]: '2px', + [propCTest]: '3px', + [propDTest]: '4px', + }); + compTypeProp.set('detached', false); + expect(compTypeProp.getStyleFromProps()).toEqual({ + [propTest]: '1px 2px 3px 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' });