Init the component with initial values from traits. Closes #230

index.html

@@ -1326,11 +1326,6 @@ <h1 class="heading">Insert title here</h1>
       let computedValue = view.getComputedValue();
       let defaultValue = view.getDefaultValue();
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
-    })
-
-    editor.on('block:drag:stop', function(model) {
-      console.log(model);
-      model && editor.select(model);
     });
 
     editor.render();

src/dom_components/model/Component.js

@@ -114,6 +114,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.components	= new Components(this.defaultC, opt);
     this.components.parent = this;
     this.listenTo(this, 'change:script', this.scriptUpdated);
+    this.listenTo(this, 'change:traits', this.traitsUpdated);
     this.set('attributes', this.get('attributes') || {});
     this.set('components', this.components);
     this.set('classes', new Selectors(this.defaultCl));
@@ -150,6 +151,23 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.set('scriptUpdated', 1);
   },
 
+  /**
+   * Once traits are updated I have to populates model's attributes
+   */
+  traitsUpdated() {
+    let found = 0;
+    const attrs = Object.assign({}, this.get('attributes'));
+
+    this.get('traits').each((trait) => {
+      found = 1;
+      if (!trait.get('changeProp')) {
+        attrs[trait.get('name')] = trait.getInitValue();
+      }
+    });
+
+    found && this.set('attributes', attrs);
+  },
+
   /**
    * Init toolbar
    */

src/trait_manager/model/Trait.js

@@ -23,4 +23,8 @@ module.exports = Backbone.Model.extend({
     }
   },
 
+  getInitValue() {
+    return this.get('value') || this.get('default');
+  }
+
 });