Rule List Container - Handle drawing multiple rules at the same time

Fixes problems when dropping multiple images on to stage and the selection changes too quickly

3 files changed, 57 insertions, 20 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 e7174c3d..e2e269ba 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
@@ -78,8 +78,6 @@ exports.RuleListContainer = Montage.create(Component, {
                 rules, ruleListLog;
 
             rules = this.getRulesForSelection(selection);
-
-            this._instanceToAdd = instance;
             instance.rules = rules;
 
             ruleListLog = {
@@ -88,13 +86,22 @@ exports.RuleListContainer = Montage.create(Component, {
             };
 
             this.ruleLists.push(ruleListLog);
-            this._appendElement = container;
+
+            this.ruleListsToDraw.push({
+                element : container,
+                component : instance
+            });
+
             this.needsDraw = true;
 
             return ruleListLog;
         }
     },
 
+    ruleListsToDraw : {
+        value: []
+    },
+
     getRulesForSelection : {
         value: function(selection) {
             var rules;
@@ -141,23 +148,28 @@ exports.RuleListContainer = Montage.create(Component, {
         }
     },
 
-    draw : {
+    willDraw : {
         value: function() {
-            if(this._appendElement) {
-                this.element.appendChild(this._appendElement);
-                this._instanceToAdd.element = this._appendElement;
-                this._appendElement = null;
-                this.needsDraw = true;
-                return;
-            }
+            //// hide all rule lists
+            this.ruleLists.forEach(function(ruleListDescriptor) {
+                ruleListDescriptor.component.hide = true;
+            });
 
-            if(this._lastDisplayedList) {
-                this._lastDisplayedList.component.element.style.display = 'none';
-                if(this._displayedList.component.element) {
-                    this._displayedList.component.element.style.display = null;
-                }
+            if(this.displayedList) {
+                this.displayedList.component.hide = false;
             }
         }
+    },
+
+    draw : {
+        value: function() {
+            this.ruleListsToDraw.forEach(function(ruleListDescriptor) {
+                this.element.appendChild(ruleListDescriptor.element);
+                ruleListDescriptor.component.element = ruleListDescriptor.element;
+                ruleListDescriptor.component.needsDraw = true;
+            }, this);
+            this.ruleListsToDraw.length = 0;
+        }
         
     },
     
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
index 1d998f3d..2aba01da 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.css
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -23,4 +23,8 @@
 .rule-list li {
     list-style-type: none;
     margin: 0;
+}
+
+.hidden-rule-list {
+    display: none;
 }
\ No newline at end of file
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 2cd5ac5c..3e18c3bf 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -12,6 +12,21 @@ exports.RuleList = Montage.create(Component, {
     ruleNodeName : { value: 'li' },
     _needsScrollToBottom: { value: null },
 
+    _hide : {
+        value: null
+    },
+    hide : {
+        get: function() {
+            return this._hide;
+        },
+        set: function(value) {
+            if(value === this._hide) { return; }
+
+            this._hide = value;
+            this.needsDraw = true;
+        }
+    },
+
     childComponents : {
         value: [],
         distinct: true
@@ -138,12 +153,10 @@ exports.RuleList = Montage.create(Component, {
             if(this._needsScrollToBottom) {
                 ///// Make sure the appended rule item is visible (scrolled-to)
                 this.element.scrollTop = this.element.offsetHeight;
-                console.log("Scroll top:", this.element.scrollTop);
                 this._needsScrollToBottom = false;
             }
 
             //// Iterate through all rules needing removal
-            console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length);
             this.rulesToRemove.forEach(function(ruleComponent) {
                 var componentIndex = this.childComponents.indexOf(ruleComponent);
                 this.childComponents.splice(componentIndex, 1);
@@ -166,6 +179,12 @@ exports.RuleList = Montage.create(Component, {
                 ruleObj.instance.needsDraw = true;
             }, this);
 
+            if(this.hide) {
+                this.element.classList.add('hidden-rule-list');
+            } else {
+                this.element.classList.remove('hidden-rule-list');
+            }
+
         }
     },
 
@@ -185,8 +204,10 @@ exports.RuleList = Montage.create(Component, {
             this.rulesToDraw.length = 0;
             this.rulesToRemove.length = 0;
 
-            this.parentComponent.ruleListDrawn = true;
-            this.parentComponent.needsDraw = true;
+            if(!this.parentComponent.ruleListDrawn) {
+                this.parentComponent.ruleListDrawn = true;
+                this.parentComponent.needsDraw = true;
+            }
         }
     }
 });