diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index e18d02dd1..2dc790155 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -34,7 +34,7 @@ export default PropertyCompositeView.extend({ config: this.config, propsConfig }); - // For detached properties (eg. clear all) + // For detached properties, used in inputValueChanged (eg. clear all) const PropertiesView = require('./PropertiesView').default; this.propsView = new PropertiesView({ target: this.target, @@ -308,16 +308,39 @@ export default PropertyCompositeView.extend({ // Things to do when a single sub-property is changed onChange(el, view, opt) { const subModel = view.model; + const status = model.get('status'); if (model.get('detached')) { const subProp = subModel.get('property'); const defVal = subModel.getDefaultValue(); - const values = self.getLayers().getPropertyValues(subProp, defVal); + const layers = self.getLayers(); + const values = layers.getPropertyValues(subProp, defVal); view.updateTargetStyle(values, null, opt); + // Update also the target with values of special hidden properties. + // This fixes the case of update with computed layers + if ( + subProp == 'background-image' && + !opt.avoidStore && + status == 'computed' + ) { + model + .get('properties') + .filter(prop => prop.get('property').substr(0, 2) == '__') + .forEach(prop => { + const name = prop.get('property'); + const value = layers.getPropertyValues( + name, + prop.getDefaultValue() + ); + self + .getTargets() + .forEach(tr => tr.addStyle({ [name]: value }, opt)); + }); + } } else { // Update only if there is an actual update (to avoid changes for computed styles) // ps: status is calculated in `targetUpdated` method - if (model.get('status') == 'updated') { + if (status == 'updated') { const value = model.getFullValue(); model.set('value', value, opt); // Try to remove detached properties