CSS Panel - Rule List refactor

Improved adding, updating, and sorting of rules in rule list.

3 files changed, 175 insertions, 135 deletions

diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
index 5371ec9a..d9aae867 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -11,8 +11,8 @@ exports.RuleListContainer = Montage.create(Component, {
     _instanceToAdd     : { value: null },
     _appendElement     : { value: null },
     _lastDisplayedList : { value: null },
-    _displayedList     : { value: null },
 
+    _displayedList     : { value: null },
     displayedList : {
         get: function() {
             return this._displayedList;
@@ -74,22 +74,21 @@ exports.RuleListContainer = Montage.create(Component, {
     add : {
         value: function(selection) {
             var stylesController = this.application.ninja.stylesController,
-                listInstance = Montage.create(this.ruleListComponent),
+                instance = Montage.create(this.ruleListComponent),
                 container = document.createElement('div'),
                 rules, ruleListLog;
 
             rules = this.getRulesForSelection(selection);
 
-            this._instanceToAdd = listInstance;
-            listInstance.rules = rules;
+            this._instanceToAdd = instance;
+            instance.rules = rules;
 
             ruleListLog = {
                 selection: selection,
-                component : listInstance
+                component : instance
             };
 
             this.ruleLists.push(ruleListLog);
-
             this._appendElement = container;
             this.needsDraw = true;
 
@@ -120,17 +119,21 @@ exports.RuleListContainer = Montage.create(Component, {
 
     update : {
         value: function() {
-            var stylesController = this.application.ninja.stylesController,
-                rules = this.getRulesForSelection(this.displayedList.selection),
-                newRules;
+            this.displayedList.component.rules = this.getRulesForSelection(this.displayedList.selection);
+
 
-            newRules = rules.filter(function(rule) {
-                return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1;
-            }, this);
+            ///// Update the currently displayed list
+            //this.displayedList.component.update();
 
-            newRules.forEach(function(rule) {
-                this.displayedList.component.addRule(rule);
-            },this);
+            ///// Find the new rules which need to be added to the rule-list
+//            newRules = rules.filter(function(rule) {
+//                return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1;
+//            }, this);
+//
+//            ///// Add the new rules
+//            newRules.forEach(function(rule) {
+//                this.displayedList.component.addRule(rule);
+//            },this);
         }
     },
 
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index c9eeb64b..5f6afee5 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -12,35 +12,6 @@ exports.RuleList = Montage.create(Component, {
     ruleNodeName : { value: 'li' },
     _needsScrollToBottom: { value: null },
 
-    _rules: { value: null },
-    rules: {
-        get: function() {
-            return this._rules;
-        },
-        set: function(list) {
-            if(!list) {
-                return null;
-            }
-            //debugger;
-            console.log('list: ', list);
-            this._rules = list;
-
-            ///// remove previously added rules
-            if(this.childComponents){
-                this.childComponents.forEach(function(ruleComponent) {
-                    this.removeRule(ruleComponent);
-                }, this);
-            }
-
-            this._rules.forEach(function(rule) {
-                this.addRule(rule);
-            }, this);
-
-            this.needsDraw = true;
-
-        }
-    },
-
     childComponents : {
         value: [],
         distinct: true
@@ -54,51 +25,98 @@ exports.RuleList = Montage.create(Component, {
         value: [],
         distinct: true
     },
-    addRule: {
-        value: function(rule) {
-            var componentBase = this.supportedRules[rule.type],
-                instance, el;
 
-            ///// Draw the rule if we have a template for the rule type
-            if(componentBase) {
-                instance = Montage.create(componentBase);
-                instance.rule = rule;
+    update : {
+        value: function(rules) {
+            this.childComponents.forEach(function(component) {
+                component.update();
+            }, this);
+        }
+    },
 
-                if(this.focusDelegate) {
-                    instance.focusDelegate = this.focusDelegate;
+    _rules: { value: null },
+    rules: {
+        get: function() {
+            return this._rules;
+        },
+        set: function(list) {
+            if(!list) {
+                return null;
+            }
+
+            var foundIndices = [];
+
+            //// Iterate existing rules, update those which rule exists in new
+            //// rule list
+            this.childComponents.forEach(function(ruleComponent, i, drawnRules) {
+                //// If rule exists in new list, update it
+                var index = list.indexOf(ruleComponent.rule);
+
+                if(ruleComponent.rule.type === 'inline') {
+                    //// Let's emulate finding the line rule at the first index
+                    index = 0;
                 }
 
-                this.rulesToDraw.push(instance);
-                this.needsDraw = true;
-            }
+                if(index !== -1) {
+                    // found rule in our component list, or it's the inline rule
+                    ruleComponent.update();
+                    foundIndices.push(index);
+                } else {
+                    this.rulesToRemove.push(ruleComponent);
+                }
+            }, this);
 
-            return instance;
-        }
-    },
+            //// Find rules to add
+            list.forEach(function(rule, index) {
+                //// If we haven't updated the rule already,
+                //// we're dealing with a new rule to add
+                if(foundIndices.indexOf(index) === -1) {
+                    this.addRule(rule, index);
+                }
+            }, this);
+
+            this._rules = list;
 
-    removeRule : {
-        value: function(rule) {
-            this.childComponents.splice(this.childComponents.indexOf(rule), 1);
-            this.rulesToRemove.push(rule);
             this.needsDraw = true;
+
         }
     },
 
-    update : {
-        value: function(rules) {
-            this.childComponents.forEach(function(component) {
-                component.update();
-            }, this);
+    addRule: {
+        value: function(rule, atIndex) {
+            var insertIndex = atIndex || this.childComponents.length;
 
-            //// TODO: find new styles based on selection
+            this.rule