Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(60)

Side by Side Diff: client/view/PagedViews.dart

Issue 9145004: Revert "Example showing alternate async measurement solution" (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 8 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « client/touch/Scroller.dart ('k') | client/view/SliderMenu.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file
2 // for details. All rights reserved. Use of this source code is governed by a 2 // for details. All rights reserved. Use of this source code is governed by a
3 // BSD-style license that can be found in the LICENSE file. 3 // BSD-style license that can be found in the LICENSE file.
4 4
5 class PageState { 5 class PageState {
6 final ObservableValue<int> current; 6 final ObservableValue<int> current;
7 final ObservableValue<int> target; 7 final ObservableValue<int> target;
8 final ObservableValue<int> length; 8 final ObservableValue<int> length;
9 PageState() : 9 PageState() :
10 current = new ObservableValue<int>(0), 10 current = new ObservableValue<int>(0),
11 target = new ObservableValue<int>(0), 11 target = new ObservableValue<int>(0),
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
109 // work reasonably well for both clicking and throwing. So for now, leave 109 // work reasonably well for both clicking and throwing. So for now, leave
110 // the scroller configured the default way. 110 // the scroller configured the default way.
111 111
112 // TODO(jacobr): use named arguments when available. 112 // TODO(jacobr): use named arguments when available.
113 scroller = new Scroller( 113 scroller = new Scroller(
114 _container, 114 _container,
115 false /* verticalScrollEnabled */, 115 false /* verticalScrollEnabled */,
116 true /* horizontalScrollEnabled */, 116 true /* horizontalScrollEnabled */,
117 true /* momementumEnabled */, 117 true /* momementumEnabled */,
118 () { 118 () {
119 assert(window.inMeasurementFrame); 119 final completer = new Completer<Size>();
120 return new Size(_getViewLength(), 1); 120 _container.rect.then((ElementRect rect) {
121 // Only view width matters.
122 completer.complete(new Size(_getViewLength(rect), 1));
123 });
124 return completer.future;
121 }, 125 },
122 Scroller.FAST_SNAP_DECELERATION_FACTOR); 126 Scroller.FAST_SNAP_DECELERATION_FACTOR);
123 127
124 scroller.onDecelStart.add(_snapToPage); 128 scroller.onDecelStart.add(_snapToPage);
125 scroller.onScrollerDragEnd.add(_snapToPage); 129 scroller.onScrollerDragEnd.add(_snapToPage);
126 scroller.onContentMoved.add(_onContentMoved); 130 scroller.onContentMoved.add(_onContentMoved);
127 return node; 131 return node;
128 } 132 }
129 133
130 int _getViewLength() { 134 int _getViewLength(ElementRect rect) {
131 assert(window.inMeasurementFrame); 135 return _computePageSize(rect) * pages.length.value;
132 return _computePageSize() * pages.length.value;
133 } 136 }
134 137
135 // TODO(jmesserly): would be better to not have this code in enterDocument. 138 // TODO(jmesserly): would be better to not have this code in enterDocument.
136 // But we need computedStyle to read our CSS properties. 139 // But we need computedStyle to read our CSS properties.
137 void enterDocument() { 140 void enterDocument() {
138 window.requestMeasurementFrame(() { 141 contentView.node.computedStyle.then((CSSStyleDeclaration style) {
139 _computeColumnGap(); 142 _computeColumnGap(style);
140 143
141 // Trigger a fake resize event so we measure our height. 144 // Trigger a fake resize event so we measure our height.
142 windowResized(); 145 windowResized();
146
147 // Hook img onload events, so we find out about changes in content size
148 for (ImageElement img in contentView.node.queryAll("img")) {
149 if (!img.complete) {
150 img.on.load.add((e) {
151 _updatePageCount(null);
152 });
153 }
154 }
155
156 // If the selected page changes, animate to it.
157 watch(pages.target, (s) => _onPageSelected());
158 watch(pages.length, (s) => _onPageSelected());
143 }); 159 });
144
145 // If the selected page changes, animate to it.
146 watch(pages.target, (s) => _onPageSelected());
147 watch(pages.length, (s) => _onPageSelected());
148
149 // Hook img onload events, so we find out about changes in content size
150 for (ImageElement img in contentView.node.queryAll("img")) {
151 if (!img.complete) {
152 img.on.load.add((e) {
153 _updatePageCount();
154 });
155 }
156 }
157 } 160 }
158 161
159 /** Read the column-gap setting so we know how far to translate the child. */ 162 /** Read the column-gap setting so we know how far to translate the child. */
160 void _computeColumnGap() { 163 void _computeColumnGap(CSSStyleDeclaration style) {
161 assert(window.inMeasurementFrame);
162 final style = contentView.node.computedStyle;
163 String gap = style.columnGap; 164 String gap = style.columnGap;
164 if (gap == 'normal') { 165 if (gap == 'normal') {
165 gap = style.fontSize; 166 gap = style.fontSize;
166 } 167 }
167 _columnGap = _toPixels(gap, 'column-gap or font-size'); 168 _columnGap = _toPixels(gap, 'column-gap or font-size');
168 _columnWidth = _toPixels(style.columnWidth, 'column-width'); 169 _columnWidth = _toPixels(style.columnWidth, 'column-width');
169 } 170 }
170 171
171 static int _toPixels(String value, String message) { 172 static int _toPixels(String value, String message) {
172 // TODO(jmesserly): Safari 4 has a bug where this property does not end 173 // TODO(jmesserly): Safari 4 has a bug where this property does not end
173 // in "px" like it should, but the value is correct. Handle that gracefully. 174 // in "px" like it should, but the value is correct. Handle that gracefully.
174 if (value.endsWith('px')) { 175 if (value.endsWith('px')) {
175 value = value.substring(0, value.length - 2); 176 value = value.substring(0, value.length - 2);
176 } 177 }
177 return Math.parseDouble(value).round().toInt(); 178 return Math.parseDouble(value).round().toInt();
178 } 179 }
179 180
180 /** Watch for resize and update page count. */ 181 /** Watch for resize and update page count. */
181 LayoutCallback windowResized() { 182 void windowResized() {
182 assert(window.inMeasurementFrame); 183 // TODO(jmesserly): verify we aren't triggering unnecessary layouts.
184
183 // The content needs to have its height explicitly set, or columns don't 185 // The content needs to have its height explicitly set, or columns don't
184 // flow to the right correctly. So we copy our own height and set the 186 // flow to the right correctly. So we copy our own height and set the height
185 // height of the content. 187 // of the content.
186 int offsetHeight = node.rect.offset.height; 188 node.rect.then((ElementRect rect) {
187 return () { 189 contentView.node.style.height = '${rect.offset.height}px';
188 contentView.node.style.height = '${offsetHeight}px'; 190 });
189 _updatePageCount(); 191 _updatePageCount(null);
190 };
191 } 192 }
192 193
193 void _updatePageCount() { 194 bool _updatePageCount(Callback callback) {
194 int pageLength = 1; 195 int pageLength = 1;
195 window.requestMeasurementFrame(() { 196 _container.rect.then((ElementRect rect) {
196 final rect = _container.rect;
197 if (rect.scroll.width > rect.offset.width) { 197 if (rect.scroll.width > rect.offset.width) {
198 pageLength = (rect.scroll.width / _computePageSize( )) 198 pageLength = (rect.scroll.width / _computePageSize(rect))
199 .ceil().toInt(); 199 .ceil().toInt();
200 } 200 }
201 pageLength = Math.max(pageLength, 1); 201 pageLength = Math.max(pageLength, 1);
202 202
203 int oldPage = pages.target.value; 203 int oldPage = pages.target.value;
204 int newPage = Math.min(oldPage, pageLength - 1); 204 int newPage = Math.min(oldPage, pageLength - 1);
205 205
206 return () { 206 // Hacky: make sure a change event always fires.
207 // Hacky: make sure a change event always fires. 207 // This is so we adjust the 3d transform after resize.
208 // This is so we adjust the 3d transform after resize. 208 if (oldPage == newPage) {
209 if (oldPage == newPage) { 209 pages.target.value = 0;
210 pages.target.value = 0; 210 }
211 } 211 assert(newPage < pageLength);
212 assert(newPage < pageLength); 212 pages.target.value = newPage;
213 pages.target.value = newPage; 213 pages.length.value = pageLength;
214 pages.length.value = pageLength; 214 if (callback != null) {
215 }; 215 callback();
216 }
216 }); 217 });
217 } 218 }
218 219
219 void _onContentMoved(Event e) { 220 void _onContentMoved(Event e) {
220 window.requestMeasurementFrame(() { 221 _container.rect.then((ElementRect rect) {
221 num current = scroller.contentOffset.x; 222 num current = scroller.contentOffset.x;
222 int pageSize = _computePageSize(); 223 int pageSize = _computePageSize(rect);
223 return () { 224 pages.current.value = -(current / pageSize).round().toInt();
224 pages.current.value = -(current / pageSize).round().toInt();
225 };
226 }); 225 });
227 } 226 }
228 227
229 void _snapToPage(Event e) { 228 void _snapToPage(Event e) {
230 num current = scroller.contentOffset.x; 229 num current = scroller.contentOffset.x;
231 num currentTarget = scroller.currentTarget.x; 230 num currentTarget = scroller.currentTarget.x;
232 window.requestMeasurementFrame(() { 231 _container.rect.then((ElementRect rect) {
233 int pageSize = _computePageSize(); 232 int pageSize = _computePageSize(rect);
234 int destination; 233 int destination;
235 num currentPageNumber = -(current / pageSize).round(); 234 num currentPageNumber = -(current / pageSize).round();
236 num pageNumber = -currentTarget / pageSize; 235 num pageNumber = -currentTarget / pageSize;
237 if (current == currentTarget) { 236 if (current == currentTarget) {
238 // User was just static dragging so round to the nearest page. 237 // User was just static dragging so round to the nearest page.
239 pageNumber = pageNumber.round(); 238 pageNumber = pageNumber.round();
240 } else { 239 } else {
241 if (currentPageNumber == pageNumber.round() && 240 if (currentPageNumber == pageNumber.round() &&
242 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION && 241 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION &&
243 -current + _viewportSize < _getViewLength() && current < 0) { 242 -current + _viewportSize < _getViewLength(rect) && current < 0) {
244 // The user is trying to throw so we want to round up to the 243 // The user is trying to throw so we want to round up to the
245 // nearest page in the direction they are throwing. 244 // nearest page in the direction they are throwing.
246 pageNumber = currentTarget < current 245 pageNumber = currentTarget < current
247 ? currentPageNumber + 1 : currentPageNumber - 1; 246 ? currentPageNumber + 1 : currentPageNumber - 1;
248 } else { 247 } else {
249 pageNumber = pageNumber.round(); 248 pageNumber = pageNumber.round();
250 } 249 }
251 } 250 }
252 pageNumber = pageNumber.toInt(); 251 pageNumber = pageNumber.toInt();
253 num translate = -pageNumber * pageSize; 252 num translate = -pageNumber * pageSize;
254 return () { 253 pages.current.value = pageNumber;
255 pages.current.value = pageNumber; 254 if (currentTarget != translate) {
256 if (currentTarget != translate) { 255 scroller.throwTo(translate, 0);
257 scroller.throwTo(translate, 0); 256 } else {
258 } else { 257 // Update the target page number when we are done animating.
259 // Update the target page number when we are done animating. 258 pages.target.value = pageNumber;
260 pages.target.value = pageNumber; 259 }
261 }
262 };
263 }); 260 });
264 } 261 }
265 262
266 int _computePageSize() { 263 int _computePageSize(ElementRect rect) {
267 assert(window.inMeasurementFrame);
268 final rect = _container.rect;
269
270 // Hacky: we need to duplicate the way the columns are being computed, 264 // Hacky: we need to duplicate the way the columns are being computed,
271 // including rounding, to figure out how far to translate the div. 265 // including rounding, to figure out how far to translate the div.
272 // See http://www.w3.org/TR/css3-multicol/#column-width 266 // See http://www.w3.org/TR/css3-multicol/#column-width
273 _viewportSize = rect.offset.width; 267 _viewportSize = rect.offset.width;
274 268
275 // Figure out how many columns we're rendering. 269 // Figure out how many columns we're rendering.
276 // The algorithm ensures we're bigger than the specified min size. 270 // The algorithm ensures we're bigger than the specified min size.
277 int perPage = Math.max(1, 271 int perPage = Math.max(1,
278 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap)); 272 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap));
279 273
280 // Divide up the viewport between the columns. 274 // Divide up the viewport between the columns.
281 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage; 275 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage;
282 276
283 // Finally, compute how big each page is, and how far to translate. 277 // Finally, compute how big each page is, and how far to translate.
284 return perPage * (columnSize + _columnGap); 278 return perPage * (columnSize + _columnGap);
285 } 279 }
286 280
287 void _onPageSelected() { 281 void _onPageSelected() {
288 window.requestMeasurementFrame(() { 282 _container.rect.then((ElementRect rect) {
289 int translate = -pages.target.value * _computePageSize(); 283 int translate = -pages.target.value * _computePageSize(rect);
290 return () { 284 scroller.throwTo(translate, 0);
291 scroller.throwTo(translate, 0);
292 };
293 }); 285 });
294 } 286 }
295 } 287 }
OLDNEW
« no previous file with comments | « client/touch/Scroller.dart ('k') | client/view/SliderMenu.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698