Update Component with new style methods and fix regressions

src/css_composer/index.js

@@ -279,8 +279,10 @@ module.exports = () => {
        * Add/update a css rule with id selector
        * @param {string} name Id selector name, eg. 'my-id'
        * @param {Object} style  Style properties and values
+       * @param {Object} [opts={}]  Custom options
+       * @return {CssRule}
        */
-      setIdStyle(name, style = {}, opts = {}) {
+      setIdRule(name, style = {}, opts = {}) {
         const state = opts.state || '';
         const media = opts.mediaText || em.getCurrentMedia();
         const sm = em.get('SelectorManager');

src/dom_components/model/Component.js

@@ -185,6 +185,34 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.set('attributes', attrs);
   },
 
+  getStyle() {
+    const rule = this.rule;
+    return rule ? rule.getStyle() : Styleable.getStyle.call(this);
+  },
+
+  setStyle(prop = {}, opts = {}) {
+    prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1});
+    const state = this.get('state');
+    const cc = this.em.get('CssComposer');
+    this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
+  },
+
+  // setStyle / getStyle
+  /*
+
+  setStyle(prop = {}, opts = {}) {
+    if (isString(prop)) {
+      prop = parseStyle(prop);
+    }
+
+    this.set('style', { ...prop }, opts);
+
+    for (let pr in prop) {
+      this.trigger(`change:style:${pr}`);
+    }
+  },
+   */
+
 
   /**
    * Return attributes

src/dom_components/view/ComponentView.js

@@ -144,16 +144,10 @@ module.exports = Backbone.View.extend({
    * Update style attribute
    * @private
    * */
-  updateStyle(mod, val, opts = {}) {
-    const em = this.em;
-    const model = this.model;
-    const style = model.getStyle();
-    const state = model.get('state');
-    const cc = em.get('CssComposer');
-    cc.setIdStyle(model.getId(), style, { ...opts, state });
+  updateStyle() {
+    //this.setAttribute('style', this.getStyleString());
   },
 
-
   /**
    * Update classe attribute
    * @private
@@ -207,7 +201,6 @@ module.exports = Backbone.View.extend({
     }
 
     src && (attrs.src = src);
-    attrs.id = model.getId();
     this.$el.attr(attrs);
     this.updateHighlight();
     this.updateStyle();

src/domain_abstract/model/Styleable.js

@@ -26,6 +26,7 @@ export default {
    * Set new style object
    * @param {Object|string} prop
    * @param {Object} opts
+   * @return {Object} Applied properties
    */
   setStyle(prop = {}, opts = {}) {
     if (isString(prop)) {
@@ -37,6 +38,8 @@ export default {
     for (let pr in prop) {
       this.trigger(`change:style:${pr}`);
     }
+
+    return prop;
   },
 
   /**

test/specs/css_composer/e2e/CssComposer.js

@@ -130,7 +130,7 @@ module.exports = {
              active: true,
              label: 'test1',
              name: 'test1',
-             type: 'class',
+             type: clsm.Selector.TYPE_CLASS,
              private: false,
              protected: false,
             }],

test/specs/selector_manager/index.js

@@ -44,7 +44,7 @@ describe('SelectorManager', () => {
 
     it('Default new selector is a class type', () => {
       obj.add('test');
-      expect(obj.get('test').get('type')).toEqual('class');
+      expect(obj.get('test').get('type')).toEqual(obj.Selector.TYPE_CLASS);
     });
 
     it('Check name property', () => {

test/specs/style_manager/view/PropertyColorView.js

@@ -1,12 +1,17 @@
 const PropertyColorView = require('style_manager/view/PropertyColorView');
 const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 
 module.exports = {
   run() {
 
       describe('PropertyColorView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -22,13 +27,16 @@ module.exports = {
         });
 
         beforeEach(() => {
-          target = new Component();
-          component = new Component();
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
+          propTarget = Object.assign({}, Backbone.Events);
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           model = new Property({
             type: 'color',
             property: propName
           });
-          propTarget = Object.assign({}, Backbone.Events);
           propTarget.model = component;
           view = new PropertyColorView({
             model,

test/specs/style_manager/view/PropertyCompositeView.js

@@ -2,12 +2,17 @@ const PropertyCompositeView = require('style_manager/view/PropertyCompositeView'
 const Property = require('style_manager/model/Property');
 const PropertyComposite = require('style_manager/model/PropertyComposite');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 
 module.exports = {
   run() {
 
       describe('PropertyCompositeView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -35,8 +40,11 @@ module.exports = {
         }];
 
         beforeEach(() => {
-          target = new Component();
-          component = new Component();
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           target.model = component;
           model = new PropertyComposite({
             type: 'composite',

test/specs/style_manager/view/PropertyIntegerView.js

@@ -2,12 +2,17 @@ const PropertyIntegerView = require('style_manager/view/PropertyIntegerView');
 const Property = require('style_manager/model/Property');
 const PropertyInteger = require('style_manager/model/PropertyInteger');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 
 module.exports = {
   run() {
 
       describe('PropertyIntegerView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -25,13 +30,16 @@ module.exports = {
         var unitsElSel = '.field-units select';
 
         beforeEach(() => {
-          target = new Component();
-          component = new Component();
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
+          propTarget = Object.assign({}, Backbone.Events);
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           model = new PropertyInteger({
             units,
             property: propName
           });
-          propTarget = Object.assign({}, Backbone.Events);
           propTarget.model = component;
           view = new PropertyIntegerView({
             model,

test/specs/style_manager/view/PropertyRadioView.js

@@ -1,12 +1,17 @@
 const PropertyRadioView = require('style_manager/view/PropertyRadioView');
 const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 
 module.exports = {
   run() {
 
       describe('PropertyRadioView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -27,14 +32,17 @@ module.exports = {
         var getCheckedEl = (view) => view.getInputEl().querySelectorAll('input:checked')[0];
 
         beforeEach(() => {
-          target = new Component();
-          component = new Component();
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
+          propTarget = Object.assign({}, Backbone.Events);
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           model = new Property({
             type: 'radio',
             list: options,
             property: propName
           });
-          propTarget = Object.assign({}, Backbone.Events);
           propTarget.model = component;
           view = new PropertyRadioView({
             model,

test/specs/style_manager/view/PropertySelectView.js

@@ -1,5 +1,7 @@
 const PropertySelectView = require('style_manager/view/PropertySelectView');
 const Property = require('style_manager/model/Property');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
@@ -7,6 +9,9 @@ module.exports = {
 
       describe('PropertySelectView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -23,9 +28,12 @@ module.exports = {
             ];
 
         beforeEach(() => {
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
           propTarget = Object.assign({}, Backbone.Events);
-          target = new Component();
-          component = new Component();
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           model = new Property({
             type: 'select',
             list: options,

test/specs/style_manager/view/PropertyStackView.js

@@ -1,12 +1,17 @@
 const PropertyStackView = require('style_manager/view/PropertyStackView');
 const Property = require('style_manager/model/PropertyStack');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 
 module.exports = {
   run() {
 
       describe('PropertyStackView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -41,8 +46,11 @@ module.exports = {
         ];
 
         beforeEach(() => {
-          target = new Component();
-          component = new Component();
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           target.model = component;
           model = new Property({
             type: 'stack',

test/specs/style_manager/view/PropertyView.js

@@ -1,5 +1,7 @@
 const PropertyView = require('style_manager/view/PropertyView');
 const Property = require('style_manager/model/Property');
+const Editor = require('editor/model/Editor');
+const DomComponents = require('dom_components');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
@@ -7,6 +9,9 @@ module.exports = {
 
       describe('PropertyView', () => {
 
+        let em;
+        let dcomp;
+        let compOpts;
         var component;
         var fixtures;
         var target;
@@ -19,9 +24,12 @@ module.exports = {
         var defValue = 'testDefault';
 
         beforeEach(() => {
+          em = new Editor({});
+          dcomp = new DomComponents();
+          compOpts = { em, componentTypes: dcomp.componentTypes };
           propTarget = Object.assign({}, Backbone.Events);
-          target = new Component();
-          component = new Component();
+          target = new Component({}, compOpts);
+          component = new Component({}, compOpts);
           model = new Property({property: propName});
           propTarget.model = component;
           options = {