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

1 files changed, 28 insertions, 16 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;
+        }
         
     },