diff options
author | Eric Guzman | 2012-05-21 17:04:23 -0700 |
---|---|---|
committer | Eric Guzman | 2012-05-21 17:04:23 -0700 |
commit | b5bbf69e59dbadf6504955875cc13d893efe3259 (patch) | |
tree | c1818089c8fdc790dc17fa55acb61595f8efea0a /js/panels/css-panel | |
parent | 022164517cafa5f75f6d3e5eed250ae1500f898a (diff) | |
download | ninja-b5bbf69e59dbadf6504955875cc13d893efe3259.tar.gz |
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
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r-- | js/panels/css-panel/rule-list-container.reel/rule-list-container.js | 44 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list.reel/rule-list.css | 4 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list.reel/rule-list.js | 29 |
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, { | |||
78 | rules, ruleListLog; | 78 | rules, ruleListLog; |
79 | 79 | ||
80 | rules = this.getRulesForSelection(selection); | 80 | rules = this.getRulesForSelection(selection); |
81 | |||
82 | this._instanceToAdd = instance; | ||
83 | instance.rules = rules; | 81 | instance.rules = rules; |
84 | 82 | ||
85 | ruleListLog = { | 83 | ruleListLog = { |
@@ -88,13 +86,22 @@ exports.RuleListContainer = Montage.create(Component, { | |||
88 | }; | 86 | }; |
89 | 87 | ||
90 | this.ruleLists.push(ruleListLog); | 88 | this.ruleLists.push(ruleListLog); |
91 | this._appendElement = container; | 89 | |
90 | this.ruleListsToDraw.push({ | ||
91 | element : container, | ||
92 | component : instance | ||
93 | }); | ||
94 | |||
92 | this.needsDraw = true; | 95 | this.needsDraw = true; |
93 | 96 | ||
94 | return ruleListLog; | 97 | return ruleListLog; |
95 | } | 98 | } |
96 | }, | 99 | }, |
97 | 100 | ||
101 | ruleListsToDraw : { | ||
102 | value: [] | ||
103 | }, | ||
104 | |||
98 | getRulesForSelection : { | 105 | getRulesForSelection : { |
99 | value: function(selection) { | 106 | value: function(selection) { |
100 | var rules; | 107 | var rules; |
@@ -141,23 +148,28 @@ exports.RuleListContainer = Montage.create(Component, { | |||
141 | } | 148 | } |
142 | }, | 149 | }, |
143 | 150 | ||
144 | draw : { | 151 | willDraw : { |
145 | value: function() { | 152 | value: function() { |
146 | if(this._appendElement) { | 153 | //// hide all rule lists |
147 | this.element.appendChild(this._appendElement); | 154 | this.ruleLists.forEach(function(ruleListDescriptor) { |
148 | this._instanceToAdd.element = this._appendElement; | 155 | ruleListDescriptor.component.hide = true; |
149 | this._appendElement = null; | 156 | }); |
150 | this.needsDraw = true; | ||
151 | return; | ||
152 | } | ||
153 | 157 | ||
154 | if(this._lastDisplayedList) { | 158 | if(this.displayedList) { |
155 | this._lastDisplayedList.component.element.style.display = 'none'; | 159 | this.displayedList.component.hide = false; |
156 | if(this._displayedList.component.element) { | ||
157 | this._displayedList.component.element.style.display = null; | ||
158 | } | ||
159 | } | 160 | } |
160 | } | 161 | } |
162 | }, | ||
163 | |||
164 | draw : { | ||
165 | value: function() { | ||
166 | this.ruleListsToDraw.forEach(function(ruleListDescriptor) { | ||
167 | this.element.appendChild(ruleListDescriptor.element); | ||
168 | ruleListDescriptor.component.element = ruleListDescriptor.element; | ||
169 | ruleListDescriptor.component.needsDraw = true; | ||
170 | }, this); | ||
171 | this.ruleListsToDraw.length = 0; | ||
172 | } | ||
161 | 173 | ||
162 | }, | 174 | }, |
163 | 175 | ||
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 @@ | |||
23 | .rule-list li { | 23 | .rule-list li { |
24 | list-style-type: none; | 24 | list-style-type: none; |
25 | margin: 0; | 25 | margin: 0; |
26 | } | ||
27 | |||
28 | .hidden-rule-list { | ||
29 | display: none; | ||
26 | } \ No newline at end of file | 30 | } \ 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, { | |||
12 | ruleNodeName : { value: 'li' }, | 12 | ruleNodeName : { value: 'li' }, |
13 | _needsScrollToBottom: { value: null }, | 13 | _needsScrollToBottom: { value: null }, |
14 | 14 | ||
15 | _hide : { | ||
16 | value: null | ||
17 | }, | ||
18 | hide : { | ||
19 | get: function() { | ||
20 | return this._hide; | ||
21 | }, | ||
22 | set: function(value) { | ||
23 | if(value === this._hide) { return; } | ||
24 | |||
25 | this._hide = value; | ||
26 | this.needsDraw = true; | ||
27 | } | ||
28 | }, | ||
29 | |||
15 | childComponents : { | 30 | childComponents : { |
16 | value: [], | 31 | value: [], |
17 | distinct: true | 32 | distinct: true |
@@ -138,12 +153,10 @@ exports.RuleList = Montage.create(Component, { | |||
138 | if(this._needsScrollToBottom) { | 153 | if(this._needsScrollToBottom) { |
139 | ///// Make sure the appended rule item is visible (scrolled-to) | 154 | ///// Make sure the appended rule item is visible (scrolled-to) |
140 | this.element.scrollTop = this.element.offsetHeight; | 155 | this.element.scrollTop = this.element.offsetHeight; |
141 | console.log("Scroll top:", this.element.scrollTop); | ||
142 | this._needsScrollToBottom = false; | 156 | this._needsScrollToBottom = false; |
143 | } | 157 | } |
144 | 158 | ||
145 | //// Iterate through all rules needing removal | 159 | //// Iterate through all rules needing removal |
146 | console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length); | ||
147 | this.rulesToRemove.forEach(function(ruleComponent) { | 160 | this.rulesToRemove.forEach(function(ruleComponent) { |
148 | var componentIndex = this.childComponents.indexOf(ruleComponent); | 161 | var componentIndex = this.childComponents.indexOf(ruleComponent); |
149 | this.childComponents.splice(componentIndex, 1); | 162 | this.childComponents.splice(componentIndex, 1); |
@@ -166,6 +179,12 @@ exports.RuleList = Montage.create(Component, { | |||
166 | ruleObj.instance.needsDraw = true; | 179 | ruleObj.instance.needsDraw = true; |
167 | }, this); | 180 | }, this); |
168 | 181 | ||
182 | if(this.hide) { | ||
183 | this.element.classList.add('hidden-rule-list'); | ||
184 | } else { | ||
185 | this.element.classList.remove('hidden-rule-list'); | ||
186 | } | ||
187 | |||
169 | } | 188 | } |
170 | }, | 189 | }, |
171 | 190 | ||
@@ -185,8 +204,10 @@ exports.RuleList = Montage.create(Component, { | |||
185 | this.rulesToDraw.length = 0; | 204 | this.rulesToDraw.length = 0; |
186 | this.rulesToRemove.length = 0; | 205 | this.rulesToRemove.length = 0; |
187 | 206 | ||
188 | this.parentComponent.ruleListDrawn = true; | 207 | if(!this.parentComponent.ruleListDrawn) { |
189 | this.parentComponent.needsDraw = true; | 208 | this.parentComponent.ruleListDrawn = true; |
209 | this.parentComponent.needsDraw = true; | ||
210 | } | ||
190 | } | 211 | } |
191 | } | 212 | } |
192 | }); | 213 | }); |