diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index 939075b0a..549840106 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -56,6 +56,13 @@ export default Property.extend({ this.__upTargetsStyle(style, opts); }, + _up(props, opts = {}) { + if (this.isDetached() && props.value) { + this.__setProperties(this.__getSplitValue(props.value), opts); + } + return Property.prototype._up.call(this, props, opts); + }, + /** * Get style object from current properties * @returns {Object} Style object @@ -123,13 +130,41 @@ export default Property.extend({ return allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== ''); }, - __splitStyleName(style, name, sep) { - return (style[name] || '') + __splitValue(value, sep) { + return value .split(sep) .map(value => value.trim()) .filter(Boolean); }, + __splitStyleName(style, name, sep) { + return this.__splitValue(style[name] || '', sep); + }, + + __getSplitValue(value = '') { + const props = this.getProperties(); + const props4Nums = props.length === 4 && props.every(prop => prop.getType() === 'integer'); + const values = this.__splitValue(value, this.getSplitSeparator()); + const result = {}; + + props.forEach((prop, i) => { + const value = values[i]; + let res = !isUndefined(value) ? value : ''; // : prop.getDefaultValue(); + + if (props4Nums) { + // Try to get value from a shorthand: + // 11px -> 11px 11px 11px 11xp + // 11px 22px -> 11px 22px 11px 22xp + const len = values.length; + res = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)] || res; + } + + result[prop.getId()] = res || ''; + }); + + return result; + }, + __getPropsFromStyle(style = {}) { if (!this.__styleHasProps(style)) return null; @@ -139,24 +174,8 @@ export default Property.extend({ let result = fromStyle ? fromStyle(style, { property: this, separator: sep }) : {}; if (!fromStyle) { - const props4Nums = props.length === 4 && props.every(prop => prop.getType() === 'integer'); - // Get props from the main property - const values = this.__splitStyleName(style, this.getName(), sep); - props.forEach((prop, i) => { - const value = values[i]; - let res = !isUndefined(value) ? value : ''; // : prop.getDefaultValue(); - - if (props4Nums) { - // Try to get value from a shorthand: - // 11px -> 11px 11px 11px 11xp - // 11px 22px -> 11px 22px 11px 22xp - const len = values.length; - res = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)] || res; - } - - result[prop.getId()] = res || ''; - }); + result = this.__getSplitValue(style[this.getName()] || ''); // Get props from the inner properties props.forEach(prop => { diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index e7442a570..0b976e989 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -90,7 +90,7 @@ export default Property.extend({ // Detached props will update their layers later in sm.__upProp !this.isDetached() && this.__setLayers(__layers); this.__upSelected({ noEvent: true }, opts); - return Property.prototype._up.call(this, rest, opts); + return PropertyBase.prototype._up.call(this, rest, opts); }, __setLayers(newLayers = []) { diff --git a/test/specs/style_manager/model/Properties.js b/test/specs/style_manager/model/Properties.js index 698f10132..ac3959bab 100644 --- a/test/specs/style_manager/model/Properties.js +++ b/test/specs/style_manager/model/Properties.js @@ -89,6 +89,58 @@ describe('StyleManager properties logic', () => { }); }); + test('Split value properly', () => { + expect(compTypeProp.__getSplitValue('1px 2px 3px 4px')).toEqual({ + [propATest]: '1px', + [propBTest]: '2px', + [propCTest]: '3px', + [propDTest]: '4px', + }); + expect(compTypeProp.__getSplitValue('1px 2px')).toEqual({ + [propATest]: '1px', + [propBTest]: '2px', + [propCTest]: '1px', + [propDTest]: '2px', + }); + expect(compTypeProp.__getSplitValue('100%')).toEqual({ + [propATest]: '100%', + [propBTest]: '100%', + [propCTest]: '100%', + [propDTest]: '100%', + }); + }); + + test('Updating the main property, the value is splitted properly', () => { + compTypeProp.upValue('1px 2px 3px 4px'); + [ + [propATest, '1px'], + [propBTest, '2px'], + [propCTest, '3px'], + [propDTest, '4px'], + ].forEach(item => { + expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); + }); + compTypeProp.upValue('11px'); + [ + [propATest, '11px'], + [propBTest, '11px'], + [propCTest, '11px'], + [propDTest, '11px'], + ].forEach(item => { + expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); + }); + obj.__upSel(); + expect(rule1.getStyle()).toEqual({ + __p: false, + color: 'red', + [propTest]: '', + [propATest]: '11px', + [propBTest]: '11px', + [propCTest]: '11px', + [propDTest]: '11px', + }); + }); + test('getPropsFromStyle returns correct values', () => { expect( compTypeProp.__getPropsFromStyle({