diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index e6930c73a..fa9f6f759 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -36,6 +36,16 @@ export default Property.extend({ return this.get('detached') ? '' : this.get('layers').getFullValue(); }, + getValueFromStyle(styles = {}) { + const layers = this.getLayers().getLayersFromStyle(styles); + return new Layers(layers).getFullValue(); + }, + + clearValue() { + this.getLayers().reset(); + return Property.prototype.clearValue.apply(this, arguments); + }, + /** * This method allows to customize layers returned from the target * @param {Object} target diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 7258d7fb2..b839c5ac2 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -1,3 +1,4 @@ +import { isUndefined } from 'underscore'; import PropertyCompositeView from './PropertyCompositeView'; import LayersView from './LayersView'; @@ -23,13 +24,6 @@ export default PropertyCompositeView.extend({ this.delegateEvents(); }, - clear(e) { - e && e.stopPropagation(); - this.model.get('layers').reset(); - this.model.clearValue(); - this.targetUpdated(); - }, - /** * Fired when the target is updated. * With detached mode the component will be always empty as its value @@ -138,6 +132,21 @@ export default PropertyCompositeView.extend({ model.set({ stackIndex: null }, { silent: true }); }, + getTargetValue(opts = {}) { + let result = PropertyCompositeView.prototype.getTargetValue.call( + this, + opts + ); + const { detached } = this.model.attributes; + + // It might happen that the browser split properties on CSSOM parse + if (isUndefined(result) && !detached) { + result = this.model.getValueFromStyle(this.getTarget().getStyle()); + } + + return result; + }, + onRender() { const self = this; const model = this.model; @@ -159,7 +168,10 @@ export default PropertyCompositeView.extend({ // 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') { - model.set('value', model.getFullValue(), opt); + const value = model.getFullValue(); + model.set('value', value, opt); + // Try to remove detached properties + !value && view.updateTargetStyle(value, null, opt); } } } @@ -179,8 +191,7 @@ export default PropertyCompositeView.extend({ stackModel: model, config: this.config, onChange: propsConfig.onChange, - propTarget: propsConfig.propTarget, - customValue: propsConfig.customValue + propTarget: propsConfig.propTarget }).render(); //model.get('properties') diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index d2eed39da..836910eed 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -200,7 +200,7 @@ export default Backbone.View.extend({ setStatus(value) { this.model.set('status', value); const parent = this.model.parent; - parent && value && parent.set('status', value); + parent && value == 'updated' && parent.set('status', value); }, emitUpdateTarget: debounce(function() { @@ -249,18 +249,8 @@ export default Backbone.View.extend({ status = ''; } - if (property == 'box-shadow' || property == 'transition') { - console.log({ - property, - status, - targetValue, - computedValue, - defaultValue - }); - } - - model.setValue(value, 0, { fromTarget: 1 }); this.setStatus(status); + model.setValue(value, 0, { fromTarget: 1 }); if (em) { em.trigger('styleManager:change', this, property, value); @@ -297,10 +287,10 @@ export default Backbone.View.extend({ * @private */ getTargetValue(opts = {}) { - var result; - var model = this.model; - var target = this.getTargetModel(); - var customFetchValue = this.customValue; + let result; + const { model } = this; + const target = this.getTargetModel(); + const customFetchValue = this.customValue; if (!target) { return result; @@ -314,7 +304,7 @@ export default Backbone.View.extend({ if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) { let index = model.collection.indexOf(model); - let customValue = customFetchValue(this, index); + let customValue = customFetchValue(this, index, result); if (customValue) { result = customValue;