Fix color field input

src/domain_abstract/ui/Input.js

@@ -4,7 +4,7 @@ const $ = Backbone.$;
 
 export default Backbone.View.extend({
   events: {
-    change: 'handleChange'
+    change: 'handleChange',
   },
 
   template() {
@@ -24,7 +24,7 @@ export default Backbone.View.extend({
     this.opts = opts;
     this.ppfx = ppfx;
     this.em = opts.target || {};
-    this.listenTo(this.model, 'change:value', this.handleModelChange);
+    !opts.onChange && this.listenTo(this.model, 'change:value', this.handleModelChange);
   },
 
   /**
@@ -74,11 +74,7 @@ export default Backbone.View.extend({
     if (!this.inputEl) {
       const { model, opts } = this;
       const type = opts.type || 'text';
-      const plh =
-        model.get('placeholder') ||
-        model.get('defaults') ||
-        model.get('default') ||
-        '';
+      const plh = model.get('placeholder') || model.get('defaults') || model.get('default') || '';
       this.inputEl = $(`<input type="${type}" placeholder="${plh}">`);
     }
 
@@ -92,5 +88,5 @@ export default Backbone.View.extend({
     el.html(this.template());
     el.find(`.${this.holderClass()}`).append(this.getInputEl());
     return this;
-  }
+  },
 });

src/domain_abstract/ui/InputColor.js

@@ -39,7 +39,16 @@ export default Input.extend({
     this.colorEl.spectrum('destroy');
   },
 
+  handleChange(e) {
+    e.stopPropagation();
+    const { value } = e.target;
+    if (isUndefined(value)) return;
+    this.__onInputChange(value);
+  },
+
   __onInputChange(val) {
+    const { model, opts } = this;
+    const { onChange } = opts;
     let value = val;
     const colorEl = this.getColorEl();
 
@@ -51,7 +60,7 @@ export default Input.extend({
       color && (value = color);
     }
 
-    this.model.set({ value }, { fromInput: 1 });
+    onChange ? onChange(value) : model.set({ value }, { fromInput: 1 });
   },
 
   /**
@@ -60,8 +69,8 @@ export default Input.extend({
    * @param {Object} opts
    */
   setValue(val, opts = {}) {
-    const model = this.model;
-    const def = model.get('defaults');
+    const { model } = this;
+    const def = !isUndefined(opts.def) ? opts.def : model.get('defaults');
     const value = !isUndefined(val) ? val : !isUndefined(def) ? def : '';
     const inputEl = this.getInputEl();
     const colorEl = this.getColorEl();
@@ -82,15 +91,15 @@ export default Input.extend({
    */
   getColorEl() {
     if (!this.colorEl) {
-      const { em, model } = this;
+      const { em, model, opts } = this;
       const self = this;
       const ppfx = this.ppfx;
+      const { onChange } = opts;
 
       var colorEl = $(`<div class="${this.ppfx}field-color-picker"></div>`);
       var cpStyle = colorEl.get(0).style;
       var elToAppend = em && em.config ? em.config.el : '';
-      var colorPickerConfig =
-        (em && em.getConfig && em.getConfig('colorPicker')) || {};
+      var colorPickerConfig = (em && em.getConfig && em.getConfig('colorPicker')) || {};
 
       let changed = 0;
       let previousColor;
@@ -113,30 +122,34 @@ export default Input.extend({
         move(color) {
           const cl = getColor(color);
           cpStyle.backgroundColor = cl;
-          model.setValueFromInput(cl, 0);
+          onChange ? onChange(cl, true) : model.setValueFromInput(cl, 0);
         },
         change(color) {
           changed = 1;
           const cl = getColor(color);
           cpStyle.backgroundColor = cl;
-          model.setValueFromInput(0, 0); // for UndoManager
-          model.setValueFromInput(cl);
+          if (onChange) {
+            onChange(cl);
+          } else {
+            model.setValueFromInput(0, 0); // for UndoManager
+            model.setValueFromInput(cl);
+          }
           self.noneColor = 0;
         },
         show(color) {
           changed = 0;
-          previousColor = getColor(color);
+          previousColor = onChange ? model.getValue({ noDefault: true }) : getColor(color);
         },
         hide(color) {
-          if (!changed && previousColor) {
+          if (!changed && (previousColor || onChange)) {
             if (self.noneColor) {
               previousColor = '';
             }
             cpStyle.backgroundColor = previousColor;
             colorEl.spectrum('set', previousColor);
-            model.setValueFromInput(previousColor, 0);
+            onChange ? onChange(previousColor, true) : model.setValueFromInput(previousColor, 0);
           }
-        }
+        },
       });
 
       if (em && em.on) {
@@ -156,5 +169,5 @@ export default Input.extend({
     // This will make the color input available on render
     this.getColorEl();
     return this;
-  }
+  },
 });

src/style_manager/model/PropertyStack.js

@@ -285,7 +285,7 @@ export default class PropertyStack extends PropertyComposite {
     values &&
       this.getProperties().forEach(prop => {
         const value = values[prop.getId()];
-        !isUndefined(value) && prop.upValue(value, { ...opts, __up: true });
+        prop.__getFullValue() !== value && prop.upValue(value, { ...opts, __up: true });
       });
 
     !noEvent && sm.__trgEv(sm.events.layerSelect, { property: this });

src/style_manager/view/PropertyColorView.js

@@ -2,9 +2,8 @@ import PropertyNumberView from './PropertyNumberView';
 import InputColor from 'domain_abstract/ui/InputColor';
 
 export default PropertyNumberView.extend({
-  setValue(value, opts = {}) {
-    opts = { ...opts, silent: 1 };
-    this.inputInst.setValue(value, opts);
+  setValue(value) {
+    this.inputInst.setValue(value, { fromTarget: 1, def: this.model.getDefaultValue() });
   },
 
   remove() {
@@ -14,10 +13,15 @@ export default PropertyNumberView.extend({
     ['inputInst', '$color'].forEach(i => (this[i] = {}));
   },
 
+  __handleChange(value, partial) {
+    this.model.upValue(value, { partial });
+  },
+
   onRender() {
     if (!this.inputInst) {
+      this.__handleChange = this.__handleChange.bind(this);
       const { ppfx, model, em, el } = this;
-      const inputColor = new InputColor({ target: em, model, ppfx });
+      const inputColor = new InputColor({ target: em, model, ppfx, onChange: this.__handleChange });
       const input = inputColor.render();
       el.querySelector(`.${ppfx}fields`).appendChild(input.el);
       this.input = input.inputEl.get(0);

test/specs/style_manager/model/Properties.js

@@ -76,7 +76,7 @@ describe('StyleManager properties logic', () => {
     });
 
     test('Rule selected', () => {
-      expect(obj.getLastSelected()).toBe(rule1);
+      expect(obj.getSelected()).toBe(rule1);
     });
 
     test('Properties correctly reflect on rule update', () => {
@@ -293,7 +293,7 @@ describe('StyleManager properties logic', () => {
       `)[0];
       dv.select('tablet');
       obj.__upSel();
-      expect(obj.getLastSelected()).toBe(rule2);
+      expect(obj.getSelected()).toBe(rule2);
       expect(obj.getSelectedParents()).toEqual([rule1]);
 
       expect(compTypeProp.hasValue()).toBe(true);
@@ -322,7 +322,7 @@ describe('StyleManager properties logic', () => {
       `)[0];
       dv.select('tablet');
       obj.__upSel();
-      expect(obj.getLastSelected()).toBe(rule2);
+      expect(obj.getSelected()).toBe(rule2);
       expect(compTypeProp.hasValue({ noParent: true })).toBe(true);
       [
         [propATest, '11px'],
@@ -336,7 +336,7 @@ describe('StyleManager properties logic', () => {
 
       dv.select('desktop');
       obj.__upSel();
-      expect(obj.getLastSelected()).toBe(rule1);
+      expect(obj.getSelected()).toBe(rule1);
       expect(obj.getSelectedParents()).toEqual([]);
       [
         [propATest, ''],
@@ -718,7 +718,7 @@ describe('StyleManager properties logic', () => {
       `)[0];
       dv.select('tablet');
       obj.__upSel();
-      expect(obj.getLastSelected()).toBe(rule2);
+      expect(obj.getSelected()).toBe(rule2);
       expect(obj.getSelectedParents()).toEqual([rule1]);
 
       expect(compTypeProp.hasValue()).toBe(true);