Avoid useless changes. Closes #3189

src/css_composer/index.js

@@ -113,14 +113,14 @@ export default () => {
       um && um.add(rules);
       em.stopListening(rules, ev, this.handleChange);
       em.listenTo(rules, ev, this.handleChange);
-      rules.each(rule => this.handleChange(rule, { avoidStore: 1 }));
+      rules.each(rule => this.handleChange(rule, null, { avoidStore: 1 }));
     },
 
     /**
      * Handle rule changes
      * @private
      */
-    handleChange(model, opts = {}) {
+    handleChange(model, val, opts = {}) {
       const ev = 'change:style';
       const um = em.get('UndoManager');
       um && um.add(model);
@@ -183,7 +183,8 @@ export default () => {
      * @param {Array<Selector>} selectors Array of selectors
      * @param {String} state Css rule state
      * @param {String} width For which device this style is oriented
-     * @param {Object} opts Other options for the rule
+     * @param {Object} props Other props for the rule
+     * @param {Object} opts Options for the add of new rule
      * @return {Model}
      * @example
      * var sm = editor.SelectorManager;
@@ -195,7 +196,7 @@ export default () => {
      *   color: '#fff',
      * });
      * */
-    add(selectors, state, width, opts = {}) {
+    add(selectors, state, width, opts = {}, addOpts = {}) {
       var s = state || '';
       var w = width || '';
       var opt = { ...opts };
@@ -211,8 +212,8 @@ export default () => {
         opt.mediaText = w;
         opt.selectors = [];
         rule = new CssRule(opt, c);
-        rule.get('selectors').add(selectors);
-        rules.add(rule);
+        rule.get('selectors').add(selectors, addOpts);
+        rules.add(rule, addOpts);
         return rule;
       }
     },
@@ -406,12 +407,13 @@ export default () => {
      * // #myid:hover { color: blue }
      */
     setIdRule(name, style = {}, opts = {}) {
+      const { addOpts = {} } = opts;
       const state = opts.state || '';
       const media = opts.mediaText || em.getCurrentMedia();
       const sm = em.get('SelectorManager');
-      const selector = sm.add({ name, type: Selector.TYPE_ID });
-      const rule = this.add(selector, state, media);
-      rule.setStyle(style, opts);
+      const selector = sm.add({ name, type: Selector.TYPE_ID }, addOpts);
+      const rule = this.add(selector, state, media, {}, addOpts);
+      rule.setStyle(style, { ...opts, ...addOpts });
       return rule;
     },
 

src/editor/model/Editor.js

@@ -247,15 +247,13 @@ export default Backbone.Model.extend({
    * */
   handleUpdates(model, val, opt = {}) {
     // Component has been added temporarily - do not update storage or record changes
-    if (opt.temporary) {
+    if (opt.temporary || opt.noCount || opt.avoidStore) {
       return;
     }
 
-    timedInterval && clearInterval(timedInterval);
+    timedInterval && clearTimeout(timedInterval);
     timedInterval = setTimeout(() => {
-      if (!opt.avoidStore) {
-        this.set('changesCount', this.get('changesCount') + 1, opt);
-      }
+      this.set('changesCount', this.get('changesCount') + 1, opt);
     }, 0);
   },
 

src/style_manager/index.js

@@ -279,7 +279,8 @@ export default () => {
         const valid = classes.getStyleable();
         const hasClasses = valid.length;
         const useClasses = !smConf.componentFirst || options.useClasses;
-        const opts = { state };
+        const addOpts = { noCount: 1 };
+        const opts = { state, addOpts };
         let rule;
 
         // I stop undo manager here as after adding the CSSRule (generally after
@@ -293,7 +294,7 @@ export default () => {
           rule = cssC.get(valid, state, deviceW);
 
           if (!rule && !skipAdd) {
-            rule = cssC.add(valid, state, deviceW);
+            rule = cssC.add(valid, state, deviceW, {}, addOpts);
           }
         } else if (config.avoidInlineStyle) {
           rule = cssC.getIdRule(id, opts);