Fix issues with color traits. Fixes GrapesJS#1104

src/domain_abstract/ui/Input.js

@@ -55,7 +55,8 @@ module.exports = Backbone.View.extend({
    */
   handleChange(e) {
     e.stopPropagation();
-    this.model.set('value', this.getInputEl().value);
+    const value = this.getInputEl().value;
+    this.model.set({ value }, { fromInput: 1 });
     this.elementUpdated();
   },
 
@@ -65,7 +66,7 @@ module.exports = Backbone.View.extend({
    */
   getInputEl() {
     if (!this.inputEl) {
-      const plh = this.model.get('defaults');
+      const plh = this.model.get('defaults') || '';
       this.inputEl = $(`<input type="text" placeholder="${plh}">`);
     }
 

src/domain_abstract/ui/InputColor.js

@@ -1,3 +1,5 @@
+import { isUndefined } from 'underscore';
+
 require('utils/ColorPicker');
 const Input = require('./Input');
 const $ = Backbone.$;
@@ -31,7 +33,8 @@ module.exports = Input.extend({
    */
   setValue(val, opts = {}) {
     const model = this.model;
-    const value = val || model.get('defaults');
+    const def = model.get('defaults');
+    const value = !isUndefined(val) ? val : !isUndefined(def) ? def : '';
     const inputEl = this.getInputEl();
     const colorEl = this.getColorEl();
     const valueClr = value != 'none' ? value : '';

src/styles/scss/_gjs_traits.scss

@@ -26,6 +26,8 @@
   .#{$app-prefix}label {
     width: 30%;
     text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   .#{$app-prefix}field {

src/trait_manager/model/Trait.js

@@ -40,21 +40,28 @@ module.exports = require('backbone').Model.extend({
   getTargetValue() {
     const name = this.get('name');
     const target = this.target;
-    const prop = this.get('changeProp');
-    if (target) return prop ? target.get(name) : target.getAttributes()[name];
+    let value;
+
+    if (this.get('changeProp')) {
+      value = target.get(name);
+    } else {
+      value = target.getAttributes()[name];
+    }
+
+    return !isUndefined(value) ? value : '';
   },
 
-  setTargetValue(value) {
+  setTargetValue(value, opts = {}) {
     const target = this.target;
     const name = this.get('name');
     if (isUndefined(value)) return;
 
     if (this.get('changeProp')) {
-      target.set(name, value);
+      target.set(name, value, opts);
     } else {
       const attrs = { ...target.get('attributes') };
       attrs[name] = value;
-      target.set('attributes', attrs);
+      target.set('attributes', attrs, opts);
     }
   },
 

src/trait_manager/view/TraitColorView.js

@@ -9,19 +9,20 @@ module.exports = TraitView.extend({
    */
   getInputEl() {
     if (!this.$input) {
-      var value = this.getModelValue();
-      var inputColor = new InputColor({
+      const model = this.model;
+      const value = this.getModelValue();
+      const inputColor = new InputColor({
+        model,
         target: this.config.em,
         contClass: this.ppfx + 'field-color',
-        model: this.model,
         ppfx: this.ppfx
       });
-      this.input = inputColor.render();
-      this.$input = this.input.colorEl;
-      value = value || '';
-      this.model.set('value', value).trigger('change:value');
-      this.input.setValue(value);
+      const input = inputColor.render();
+      this.$input = input.colorEl;
+      input.setValue(value, { fromTarget: 1 });
+      this.input = input;
     }
+
     return this.$input.get(0);
   },
 

src/trait_manager/view/TraitView.js

@@ -27,6 +27,7 @@ module.exports = Backbone.View.extend({
     this.inputhClass = this.ppfx + 'input-holder';
     model.off('change:value', this.onValueChange);
     this.listenTo(model, 'change:value', this.onValueChange);
+    model.view = this;
     this.tmpl =
       '<div class="' +
       this.fieldClass +
@@ -64,7 +65,7 @@ module.exports = Backbone.View.extend({
       this.setInputValue(mod.get('value'));
     } else {
       const value = this.getValueForTarget();
-      mod.setTargetValue(value);
+      mod.setTargetValue(value, opts);
     }
   },
 
@@ -73,8 +74,9 @@ module.exports = Backbone.View.extend({
    * @private
    */
   renderLabel() {
+    const label = this.getLabel();
     this.$el.html(
-      '<div class="' + this.labelClass + '">' + this.getLabel() + '</div>'
+      `<div class="${this.labelClass}" title="${label}">${label}</div>`
     );
   },
 
@@ -96,17 +98,12 @@ module.exports = Backbone.View.extend({
    */
   getInputEl() {
     if (!this.$input) {
-      var md = this.model;
-      var trg = this.target;
-      var name = md.get('name');
+      const md = this.model;
       const plh = md.get('placeholder') || md.get('default') || '';
       const type = md.get('type') || 'text';
-      const attrs = trg.get('attributes');
       const min = md.get('min');
       const max = md.get('max');
-      const value = md.get('changeProp')
-        ? trg.get(name)
-        : md.get('value') || attrs[name];
+      const value = this.getModelValue();
       const input = $(`<input type="${type}" placeholder="${plh}">`);
 
       if (value) {
@@ -127,19 +124,19 @@ module.exports = Backbone.View.extend({
   },
 
   getModelValue() {
-    var value;
-    var model = this.model;
-    var target = this.target;
-    var name = model.get('name');
+    let value;
+    const model = this.model;
+    const target = this.target;
+    const name = model.get('name');
 
     if (model.get('changeProp')) {
       value = target.get(name);
     } else {
-      var attrs = target.get('attributes');
+      const attrs = target.get('attributes');
       value = model.get('value') || attrs[name];
     }
 
-    return value;
+    return !isUndefined(value) ? value : '';
   },
 
   /**

src/trait_manager/view/TraitsView.js

@@ -23,7 +23,7 @@ module.exports = DomainViews.extend({
     this.pfx = config.stylePrefix || '';
     this.ppfx = config.pStylePrefix || '';
     this.className = this.pfx + 'traits';
-    const toListen = 'component:selected component:update:traits';
+    const toListen = 'component:selected';
     this.listenTo(this.em, toListen, this.updatedCollection);
     this.updatedCollection();
   },