diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index 8234217c5..9496c9e84 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -28,11 +28,20 @@ module.exports = Property.extend({ this.listenTo(this, 'change:value', this.updateValues); }, + /** + * Clear the value + * @return {this} + */ + clearValue(opts = {}) { + this.get('properties').each(property => property.clearValue()); + return Property.prototype.clearValue.apply(this, arguments); + }, + /** * Update property values */ updateValues() { - const values = this.get('value').split(this.get('separator')); + const values = this.getFullValue().split(this.get('separator')); this.get('properties').each((property, i) => { const len = values.length; // Try to get value from a shorthand: diff --git a/src/style_manager/view/PropertiesView.js b/src/style_manager/view/PropertiesView.js index 07e2fb2dd..2791c21e6 100644 --- a/src/style_manager/view/PropertiesView.js +++ b/src/style_manager/view/PropertiesView.js @@ -16,6 +16,7 @@ module.exports = Backbone.View.extend({ this.onChange = o.onChange; this.onInputRender = o.onInputRender || {}; this.customValue = o.customValue || {}; + this.properties = []; const coll = this.collection; this.listenTo(coll, 'add', this.addTo); this.listenTo(coll, 'reset', this.render); @@ -43,6 +44,7 @@ module.exports = Backbone.View.extend({ view.render(); const el = view.el; + this.properties.push(view); if (frag) { frag.appendChild(el); @@ -52,6 +54,7 @@ module.exports = Backbone.View.extend({ }, render() { + this.properties = []; const fragment = document.createDocumentFragment(); this.collection.each(model => this.add(model, fragment)); this.$el.append(fragment); diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index ff8a5d34e..e3f456eab 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -18,16 +18,12 @@ module.exports = PropertyView.extend({ PropertyView.prototype.inputValueChanged.apply(this, args); } }, - /* - clear(e) { - e && e.stopPropagation(); - const target = this.getTargetModel(); - target.removeStyle(this.model.get('property')); - if (!this.model.get('detached')) { - } - this.targetUpdated(); - },*/ + clear(e) { + const props = this.properties; + props && props.forEach(propView => propView.clear()); + PropertyView.prototype.clear.apply(this, arguments); + }, /** * Renders input @@ -36,6 +32,7 @@ module.exports = PropertyView.extend({ var model = this.model; var props = model.get('properties') || []; var self = this; + this.properties = []; if (props.length) { if (!this.$input) { @@ -60,6 +57,7 @@ module.exports = PropertyView.extend({ var PropertiesView = require('./PropertiesView'); var propsView = new PropertiesView(this.getPropsConfig()); this.$props = propsView.render().$el; + this.properties = propsView.properties; this.$el.find(`#${this.pfx}input-holder`).append(this.$props); } } diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index b97780f12..92f7d87e3 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -23,6 +23,13 @@ module.exports = 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 diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 7d4b1b2aa..2da590f0c 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -116,11 +116,6 @@ module.exports = Backbone.View.extend({ e && e.stopPropagation(); this.model.clearValue(); this.targetUpdated(); - /* - const target = this.getTargetModel(); - target.removeStyle(this.model.get('property')); - this.targetUpdated(); - */ }, /**