diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index c350720bb..434a2cc96 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/src/domain_abstract/ui/InputNumber.js @@ -1,4 +1,4 @@ -import { bindAll } from 'underscore'; +import { bindAll, isUndefined } from 'underscore'; import { on, off } from 'utils/mixins'; const Input = require('./Input'); const Backbone = require('backbone'); @@ -228,7 +228,8 @@ module.exports = Input.extend({ var force = 0; var opt = opts || {}; var model = this.model; - var val = value !== '' ? value : model.get('defaults'); + const defValue = ''; //model.get('defaults'); + var val = !isUndefined(value) ? value : defValue; var units = model.get('units') || []; var unit = model.get('unit') || (units.length && units[0]) || ''; var max = model.get('max'); @@ -248,7 +249,7 @@ module.exports = Input.extend({ var valCopy = val + ''; val += ''; // Make it suitable for replace val = parseFloat(val.replace(',', '.')); - val = !isNaN(val) ? val : model.get('defaults'); + val = !isNaN(val) ? val : defValue; var uN = valCopy.replace(val, ''); // Check if exists as unit if (_.indexOf(units, uN) >= 0) unit = uN; @@ -256,9 +257,8 @@ module.exports = Input.extend({ } } - if (typeof max !== 'undefined' && max !== '') val = val > max ? max : val; - - if (typeof min !== 'undefined' && min !== '') val = val < min ? min : val; + if (!isUndefined(max) && max !== '') val = val > max ? max : val; + if (!isUndefined(min) && min !== '') val = val < min ? min : val; return { force, diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index cf0d757cf..2604fed10 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -1,3 +1,5 @@ +import { isUndefined } from 'underscore'; + module.exports = require('backbone').Model.extend({ defaults: { name: '', @@ -36,6 +38,15 @@ module.exports = require('backbone').Model.extend({ init && init(); }, + /** + * Clear the value + * @return {this} + */ + clearValue(opts = {}) { + this.set({ value: undefined }, opts); + return this; + }, + /** * Update value * @param {any} value @@ -117,12 +128,12 @@ module.exports = require('backbone').Model.extend({ */ getFullValue(val) { const fn = this.get('functionName'); - let value = val || this.get('value'); + let value = isUndefined(val) ? this.get('value') : val; - if (fn) { + if (fn && !isUndefined(value)) { value = `${fn}(${value})`; } - return value; + return value || ''; } }); 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/model/PropertyInteger.js b/src/style_manager/model/PropertyInteger.js index 5aea5c69b..63b73a20f 100644 --- a/src/style_manager/model/PropertyInteger.js +++ b/src/style_manager/model/PropertyInteger.js @@ -1,3 +1,5 @@ +import { isUndefined } from 'underscore'; + const Property = require('./Property'); const InputNumber = require('domain_abstract/ui/InputNumber'); @@ -30,6 +32,11 @@ module.exports = Property.extend({ } }, + clearValue(opts = {}) { + this.set({ value: undefined, unit: undefined }, opts); + return this; + }, + parseValue(val) { const parsed = Property.prototype.parseValue.apply(this, arguments); const { value, unit } = this.input.validateInputValue(parsed.value, { @@ -41,7 +48,11 @@ module.exports = Property.extend({ }, getFullValue() { - let value = this.get('value') + this.get('unit'); + let value = this.get('value'); + let unit = this.get('unit'); + value = !isUndefined(value) ? value : ''; + unit = !isUndefined(unit) && value ? unit : ''; + value = `${value}${unit}`; return Property.prototype.getFullValue.apply(this, [value]); } }); 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 7d8fa6e08..e3f456eab 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -19,6 +19,12 @@ module.exports = PropertyView.extend({ } }, + clear(e) { + const props = this.properties; + props && props.forEach(propView => propView.clear()); + PropertyView.prototype.clear.apply(this, arguments); + }, + /** * Renders input * */ @@ -26,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) { @@ -50,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/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 91609c458..6518a9d4f 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -1,7 +1,9 @@ const InputNumber = require('domain_abstract/ui/InputNumber'); +const PropertyView = require('./PropertyView'); const $ = Backbone.$; +let timeout; -module.exports = require('./PropertyView').extend({ +module.exports = PropertyView.extend({ templateInput() { return ''; }, @@ -13,6 +15,8 @@ module.exports = require('./PropertyView').extend({ }, setValue(value) { + const parsed = this.model.parseValue(value); + value = `${parsed.value}${parsed.unit}`; this.inputInst.setValue(value, { silent: 1 }); }, diff --git a/src/style_manager/view/PropertySliderView.js b/src/style_manager/view/PropertySliderView.js index f6e1b362d..712781efc 100644 --- a/src/style_manager/view/PropertySliderView.js +++ b/src/style_manager/view/PropertySliderView.js @@ -1,9 +1,13 @@ const Property = require('./PropertyIntegerView'); module.exports = Property.extend({ - events: { - 'change [type=range]': 'inputValueChanged', - 'input [type=range]': 'inputValueChangedSoft' + events() { + return { + ...Property.prototype.events, + 'change [type=range]': 'inputValueChanged', + 'input [type=range]': 'inputValueChangedSoft', + change: '' + }; }, templateInput(model) { 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 5506aeb6a..2da590f0c 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -1,4 +1,4 @@ -import { bindAll, isArray } from 'underscore'; +import { bindAll, isArray, isUndefined } from 'underscore'; import { camelCase } from 'utils/mixins'; const clearProp = 'data-clear-style'; @@ -114,8 +114,7 @@ module.exports = Backbone.View.extend({ */ clear(e) { e && e.stopPropagation(); - const target = this.getTargetModel(); - target.removeStyle(this.model.get('property')); + this.model.clearValue(); this.targetUpdated(); }, @@ -437,7 +436,7 @@ module.exports = Backbone.View.extend({ * */ setValue(value) { const model = this.model; - let val = value || model.getDefaultValue(); + let val = isUndefined(value) ? model.getDefaultValue() : value; const input = this.getInputEl(); input && (input.value = val); },