Merge branch 'fix-style-manager' into dev

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,

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 || '';
   }
 });

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:

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]);
   }
 });

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);

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);
       }
     }

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 });
   },
 

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) {

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

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);
   },