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

2 files changed, 29 insertions, 4 deletions

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;
+            }
         }
     }
 });