From 890355764cd7fc85d69bfe585ca885ce9cd3a93d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 19 Sep 2017 21:56:23 +0200 Subject: [PATCH] Add `step` option for integer inputs in StyleManager --- src/domain_abstract/ui/InputNumber.js | 55 ++++++++++++++++------ src/style_manager/model/PropertyInteger.js | 9 ++++ 2 files changed, 50 insertions(+), 14 deletions(-) diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index 14281e33b..a14aa8619 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/src/domain_abstract/ui/InputNumber.js @@ -135,10 +135,13 @@ module.exports = Backbone.View.extend({ * Invoked when the up arrow is clicked * */ upArrowClick() { - var value = this.model.get('value'); - value = isNaN(value) ? 1 : parseInt(value, 10) + 1; + const model = this.model; + const step = model.get('step'); + let value = model.get('value'); + //value = isNaN(value) ? 1 * step : parseFloat(value); + value = this.normalizeValue(value + step); var valid = this.validateInputValue(value); - this.model.set('value', valid.value); + model.set('value', valid.value); this.elementUpdated(); }, @@ -146,10 +149,12 @@ module.exports = Backbone.View.extend({ * Invoked when the down arrow is clicked * */ downArrowClick() { - var value = this.model.get('value'); - value = isNaN(value) ? 0 : parseInt(value, 10) - 1; + const model = this.model; + const step = model.get('step'); + let value = model.get('value'); + value = this.normalizeValue(value - step); var valid = this.validateInputValue(value); - this.model.set('value', valid.value); + model.set('value', valid.value); this.elementUpdated(); }, @@ -163,8 +168,8 @@ module.exports = Backbone.View.extend({ e.preventDefault(); this.moved = 0; var value = this.model.get('value'); - value = isNaN(value) ? 0 : parseInt(value, 10); - var current = {y: e.pageY, val: value }; + value = this.normalizeValue(value); + var current = {y: e.pageY, val: value}; this.docEl.mouseup(current, this.upIncrement); this.docEl.mousemove(current, this.moveIncrement); }, @@ -176,9 +181,11 @@ module.exports = Backbone.View.extend({ * */ moveIncrement(ev) { this.moved = 1; - var pos = parseInt(ev.data.val - ev.pageY + ev.data.y, 10); - this.prValue = this.validateInputValue(pos).value;//Math.max(this.min, Math.min(this.max, pos) ); - this.model.set('value', this.prValue, {avoidStore: 1}); + const model = this.model; + const step = model.get('step'); + var pos = this.normalizeValue(ev.data.val + (ev.data.y - ev.pageY) * step); + this.prValue = this.validateInputValue(pos).value; + model.set('value', this.prValue, {avoidStore: 1}); return false; }, @@ -189,17 +196,37 @@ module.exports = Backbone.View.extend({ * @return void * */ upIncrement(e) { + const model = this.model; + const step = model.get('step'); this.docEl.off('mouseup', this.upIncrement); this.docEl.off('mousemove', this.moveIncrement); if(this.prValue && this.moved) { - var value = this.prValue - 1; - this.model.set('value', value, {avoidStore: 1}) - .set('value', value + 1); + var value = this.prValue - step; + model.set('value', value, {avoidStore: 1}) + .set('value', value + step); this.elementUpdated(); } }, + normalizeValue(value, defValue = 0) { + const model = this.model; + const step = model.get('step'); + let stepDecimals = 0; + + if (isNaN(value)) { + return defValue; + } + + value = parseFloat(value); + + if (Math.floor(value) !== value) { + stepDecimals = step.toString().split('.')[1].length || 0; + } + + return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value; + }, + /** * Validate input value * @param {String} value Raw value diff --git a/src/style_manager/model/PropertyInteger.js b/src/style_manager/model/PropertyInteger.js index ee8a9b95c..8383b5fee 100644 --- a/src/style_manager/model/PropertyInteger.js +++ b/src/style_manager/model/PropertyInteger.js @@ -8,6 +8,15 @@ module.exports = Property.extend({ // Selected unit, eg. 'px' unit: '', + + // Integer value steps + step: 1, + + // Minimum value + min: '', + + // Maximum value + max: '', }), getFullValue() {