From 18177caf0148c2d1b16f37ff983bdceb1940e155 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 30 Jan 2018 00:00:06 +0100 Subject: [PATCH 1/4] Fix clear on slider view --- src/style_manager/view/PropertySliderView.js | 10 +++++++--- src/style_manager/view/PropertyView.js | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) 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/PropertyView.js b/src/style_manager/view/PropertyView.js index 5506aeb6a..97556d91a 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -115,6 +115,7 @@ module.exports = Backbone.View.extend({ clear(e) { e && e.stopPropagation(); const target = this.getTargetModel(); + console.log(target.getStyle(), this.model.get('property')); target.removeStyle(this.model.get('property')); this.targetUpdated(); }, From b8727a1d301800a2960942a653fba4d13601627d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 30 Jan 2018 00:34:23 +0100 Subject: [PATCH 2/4] Parsed correctly the integer value with functions. Fixes #806 --- src/domain_abstract/ui/InputNumber.js | 7 +++---- src/style_manager/view/PropertyIntegerView.js | 2 ++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index c350720bb..98c99cb7c 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'); @@ -256,9 +256,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/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 91609c458..d40248c89 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -13,6 +13,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 }); }, From c5caa96640558b20e207bd4678a730a10d079351 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 30 Jan 2018 01:28:00 +0100 Subject: [PATCH 3/4] Fix integer input issues --- src/domain_abstract/ui/InputNumber.js | 5 +++-- src/style_manager/model/Property.js | 17 ++++++++++++++--- src/style_manager/model/PropertyInteger.js | 13 ++++++++++++- src/style_manager/view/PropertyCompositeView.js | 10 ++++++++++ src/style_manager/view/PropertyIntegerView.js | 4 +++- src/style_manager/view/PropertyView.js | 9 ++++++--- 6 files changed, 48 insertions(+), 10 deletions(-) diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index 98c99cb7c..434a2cc96 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/src/domain_abstract/ui/InputNumber.js @@ -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; 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/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/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 7d8fa6e08..ff8a5d34e 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -18,6 +18,16 @@ 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(); + },*/ /** * Renders input diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index d40248c89..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 ''; }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 97556d91a..7d4b1b2aa 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,10 +114,13 @@ module.exports = Backbone.View.extend({ */ clear(e) { e && e.stopPropagation(); + this.model.clearValue(); + this.targetUpdated(); + /* const target = this.getTargetModel(); - console.log(target.getStyle(), this.model.get('property')); target.removeStyle(this.model.get('property')); this.targetUpdated(); + */ }, /** @@ -438,7 +441,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); }, From 3a65e7487818509aa46eb2c64e5c141ca99986cc Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 30 Jan 2018 02:41:28 +0100 Subject: [PATCH 4/4] Update clear methods in composite and stack --- src/style_manager/model/PropertyComposite.js | 11 ++++++++++- src/style_manager/view/PropertiesView.js | 3 +++ src/style_manager/view/PropertyCompositeView.js | 16 +++++++--------- src/style_manager/view/PropertyStackView.js | 7 +++++++ src/style_manager/view/PropertyView.js | 5 ----- 5 files changed, 27 insertions(+), 15 deletions(-) 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(); - */ }, /**