diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index 3a1ecf5f6..db9ea7c00 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -28,6 +28,7 @@ module.exports = require('backbone').Model.extend({ init && init(); }, + /** * Update value * @param {any} value diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index fcf18f609..0022e5535 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -16,14 +16,37 @@ module.exports = Property.extend({ // Array of sub properties properties: [], + + // Separator between properties + separator: ' ', }), + init() { const properties = this.get('properties') || []; const Properties = require('./Properties'); this.set('properties', new Properties(properties)); + this.listenTo(this, 'change:value', this.updateValues) }, + + /** + * Update property values + */ + updateValues() { + const values = this.get('value').split(this.get('separator')); + this.get('properties').each((property, 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)]; + // There some issue with UndoManager + //property.setValue(value, 0, {fromParent: 1}); + }); + }, + + /** * Returns default value * @param {Boolean} defaultProps Force to get defaults from properties @@ -42,12 +65,12 @@ module.exports = Property.extend({ return value.trim(); }, + getFullValue() { if (this.get('detached')) { return ''; } - let result = ''; return this.get('properties').getFullValue(); }, diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 26e0a4a31..59dd8dc9e 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -209,7 +209,8 @@ module.exports = () => ({ } // Min/Max - switch(prop){ + switch(prop) { + case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left': case 'min-height': case 'min-width': case 'max-height': case 'max-width': case 'width': case 'height': case 'font-size': diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 026c2c82e..618a1e9df 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -13,8 +13,11 @@ module.exports = PropertyView.extend({ }, inputValueChanged(...args) { - if(!this.model.get('detached')) + // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow + // the same flow of PropertyView + if (!this.model.get('detached')) { PropertyView.prototype.inputValueChanged.apply(this, args); + } }, /** diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index c09a4ba04..d2cca3721 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -312,7 +312,9 @@ module.exports = Backbone.View.extend({ // Avoid target update if the changes comes from it if (!opt.fromTarget) { - if (onChange) { + // The onChange is used by Composite/Stack properties, so I'd avoid sending + // it back if the change comes from one of those + if (onChange && !opt.fromParent) { onChange(target, this, opt); } else { this.updateTargetStyle(value, null, opt);