diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index ccc2b7f27..173635c60 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -64,7 +64,6 @@ export default Backbone.Collection.extend({ getLayersFromStyle(styleObj) { const layers = []; const properties = this.properties; - const propNames = properties.pluck('property'); properties.each(propModel => { const style = styleObj[propModel.get('property')]; diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index 9f0bf764b..021ba2a5d 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -1,3 +1,4 @@ +import { keys } from 'underscore'; import Property from './PropertyComposite'; import Layers from './Layers'; @@ -49,6 +50,24 @@ export default Property.extend({ return Property.prototype.clearValue.apply(this, arguments); }, + getValueFromTarget(target) { + const { detached, property, properties } = this.attributes; + const style = target.getStyle(); + const validStyles = {}; + + properties.forEach(prop => { + const name = prop.get('property'); + const value = style[name]; + if (value) validStyles[name] = value; + }); + + return !detached + ? style[property] + : keys(validStyles).length + ? validStyles + : ''; + }, + /** * 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 35e989778..d8a543199 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -51,17 +51,18 @@ export default PropertyCompositeView.extend({ * so we gonna check all props and find if it has any difference * */ targetUpdated(...args) { + let data; if (!this.model.get('detached')) { - PropertyCompositeView.prototype.targetUpdated.apply(this, args); + data = PropertyCompositeView.prototype.targetUpdated.apply(this, args); } else { - const { status } = this._getTargetData(); - this.setStatus(status); + data = this._getTargetData(); + this.setStatus(data.status); this.checkVisibility(); } // I have to wait the update of inner properites (like visibility) // before render layers - setTimeout(() => this.refreshLayers()); + setTimeout(() => this.refreshLayers(data)); }, /** @@ -183,7 +184,7 @@ export default PropertyCompositeView.extend({ /** * Refresh layers * */ - refreshLayers() { + refreshLayers(opts = {}) { let layersObj = []; const { model, em } = this; const layers = this.getLayers(); @@ -202,7 +203,7 @@ export default PropertyCompositeView.extend({ // With detached layers values will be assigned to their properties if (detached) { - style = target ? target.getStyle() : {}; + style = opts.targetValue || {}; const hasDetachedStyle = rule => { const name = model .get('properties') @@ -277,15 +278,19 @@ export default PropertyCompositeView.extend({ }, getTargetValue(opts = {}) { + const { model } = this; + const { detached } = model.attributes; + const target = this.getTarget(); 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()); + result = model.getValueFromStyle(target.getStyle()); + } else if (detached) { + result = model.getValueFromTarget(target); } return result; diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index a6593d1b7..3346cdb6c 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -266,20 +266,22 @@ export default Backbone.View.extend({ const { model } = this; const property = model.get('property'); const { status, value, ...targetData } = this._getTargetData(); + const data = { + status, + value, + ...targetData + }; this.setStatus(status); model.setValue(value, 0, { fromTarget: 1, ...opts }); if (em) { - const data = { - status, - value, - ...targetData - }; em.trigger('styleManager:change', this, property, value, data); em.trigger(`styleManager:change:${property}`, this, value, data); this._emitUpdate(data); } + + return data; }, _emitUpdate(addData = {}) { diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 89fb7bda0..a3a62835a 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -44,7 +44,7 @@ export default Backbone.View.extend({ toggleStateCls(targets = [], enable) { targets.forEach(trg => { const el = trg.getEl(); - el && el.classList[enable ? 'add' : 'remove'](helperCls); + el && el.classList && el.classList[enable ? 'add' : 'remove'](helperCls); }); },