OLD | NEW |
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 /** The interface that the layout algorithms use to talk to the view. */ | 5 /** The interface that the layout algorithms use to talk to the view. */ |
6 interface Positionable { | 6 interface Positionable { |
7 ViewLayout get layout(); | 7 ViewLayout get layout(); |
8 | 8 |
9 /** Gets our custom CSS properties, as provided by the CSS preprocessor. */ | 9 /** Gets our custom CSS properties, as provided by the CSS preprocessor. */ |
10 Map<String, String> get customStyle(); | 10 Map<String, String> get customStyle(); |
11 | 11 |
12 /** Gets the root DOM used for layout. */ | 12 /** Gets the root DOM used for layout. */ |
13 Element get node(); | 13 Element get node(); |
14 | 14 |
15 /** Gets the collection of child views. */ | 15 /** Gets the collection of child views. */ |
16 Collection<Positionable> get childViews(); | 16 Collection<Positionable> get childViews(); |
17 | 17 |
18 /** Causes a view to layout its children. */ | 18 /** Causes a view to layout its children. */ |
19 void doLayout(); | 19 void doLayout(); |
20 } | 20 } |
21 | 21 |
22 | 22 |
23 /** | 23 /** |
24 * Caches the layout parameters that were specified in CSS during a layout | 24 * Caches the layout parameters that were specified in CSS during a layout |
25 * computation. These values are immutable during a layout. | 25 * computation. These values are immutable during a layout. |
26 */ | 26 */ |
27 class LayoutParams { | 27 class LayoutParams { |
28 // TODO(jmesserly): should be const, but there's a bug in DartC preventing us | 28 // TODO(jmesserly): should be const, but there's a bug in DartC preventing us |
29 // from calling "window." in an initializer. See b/5332777 | 29 // from calling "window." in an initializer. See b/5332777 |
30 CSSStyleDeclaration style; | 30 Future<CSSStyleDeclaration> style; |
31 | 31 |
32 int get layer() => 0; | 32 int get layer() => 0; |
33 | 33 |
34 LayoutParams(Element node) { | 34 LayoutParams(Element node) { |
35 style = node.computedStyle; | 35 style = node.computedStyle; |
36 } | 36 } |
37 } | 37 } |
38 | 38 |
39 // TODO(jmesserly): enums would really help here | 39 // TODO(jmesserly): enums would really help here |
40 class Dimension { | 40 class Dimension { |
(...skipping 23 matching lines...) Expand all Loading... |
64 * Abstract base class for View layout. Tracks relevant layout state. | 64 * Abstract base class for View layout. Tracks relevant layout state. |
65 * This code was inspired by code in Android's View.java; it's needed for the | 65 * This code was inspired by code in Android's View.java; it's needed for the |
66 * rest of the layout system. | 66 * rest of the layout system. |
67 */ | 67 */ |
68 class ViewLayout { | 68 class ViewLayout { |
69 /** | 69 /** |
70 * The layout parameters associated with this view and used by the parent | 70 * The layout parameters associated with this view and used by the parent |
71 * to determine how this view should be laid out. | 71 * to determine how this view should be laid out. |
72 */ | 72 */ |
73 LayoutParams layoutParams; | 73 LayoutParams layoutParams; |
74 int _currentWidth; | 74 Future<ElementRect> _cachedViewRect; |
75 int _currentHeight; | |
76 | 75 |
77 /** The view that this layout belongs to. */ | 76 /** The view that this layout belongs to. */ |
78 final Positionable view; | 77 final Positionable view; |
79 | 78 |
80 /** | 79 /** |
81 * To get a perforant positioning model on top of the DOM, we read all | 80 * To get a perforant positioning model on top of the DOM, we read all |
82 * properties in the first pass while computing positions. Then we have a | 81 * properties in the first pass while computing positions. Then we have a |
83 * second pass that actually moves everything. | 82 * second pass that actually moves everything. |
84 */ | 83 */ |
85 int _measuredLeft, _measuredTop, _measuredWidth, _measuredHeight; | 84 int _measuredLeft, _measuredTop, _measuredWidth, _measuredHeight; |
(...skipping 10 matching lines...) Expand all Loading... |
96 return new GridLayout(view); | 95 return new GridLayout(view); |
97 } else { | 96 } else { |
98 return new ViewLayout(view); | 97 return new ViewLayout(view); |
99 } | 98 } |
100 } | 99 } |
101 | 100 |
102 static bool hasCustomLayout(Positionable view) { | 101 static bool hasCustomLayout(Positionable view) { |
103 return view.customStyle['display'] == "-dart-grid"; | 102 return view.customStyle['display'] == "-dart-grid"; |
104 } | 103 } |
105 | 104 |
106 CSSStyleDeclaration get _style() => layoutParams.style; | 105 CSSStyleDeclaration get _style() => layoutParams.style.value; |
107 | 106 |
108 void cacheExistingBrowserLayout() { | 107 void cacheExistingBrowserLayout() { |
109 assert(window.inMeasurementFrame); | 108 _cachedViewRect = view.node.rect; |
110 final rect = view.node.rect.offset; | |
111 _currentWidth = rect.width; | |
112 _currentHeight = rect.height; | |
113 } | 109 } |
114 | 110 |
115 int get currentWidth() => _currentWidth; | 111 int get currentWidth() { |
116 int get currentHeight() => _currentHeight; | 112 return _cachedViewRect.value.offset.width; |
| 113 } |
| 114 |
| 115 int get currentHeight() { |
| 116 return _cachedViewRect.value.offset.height; |
| 117 } |
117 | 118 |
118 int get borderLeftWidth() => _toPixels(_style.borderLeftWidth); | 119 int get borderLeftWidth() => _toPixels(_style.borderLeftWidth); |
119 int get borderTopWidth() => _toPixels(_style.borderTopWidth); | 120 int get borderTopWidth() => _toPixels(_style.borderTopWidth); |
120 int get borderRightWidth() => _toPixels(_style.borderRightWidth); | 121 int get borderRightWidth() => _toPixels(_style.borderRightWidth); |
121 int get borderBottomWidth() => _toPixels(_style.borderBottomWidth); | 122 int get borderBottomWidth() => _toPixels(_style.borderBottomWidth); |
122 int get borderWidth() => borderLeftWidth + borderRightWidth; | 123 int get borderWidth() => borderLeftWidth + borderRightWidth; |
123 int get borderHeight() => borderTopWidth + borderBottomWidth; | 124 int get borderHeight() => borderTopWidth + borderBottomWidth; |
124 | 125 |
125 /** Implements the custom layout computation. */ | 126 /** Implements the custom layout computation. */ |
126 bool measureLayout(int width, int height) { | 127 void measureLayout(Future<Size> size, Completer<bool> changed) { |
127 } | 128 } |
128 | 129 |
129 /** | 130 /** |
130 * Positions the view within its parent container. | 131 * Positions the view within its parent container. |
131 * Also performs a layout of its children. | 132 * Also performs a layout of its children. |
132 */ | 133 */ |
133 void setBounds(int left, int top, int width, int height) { | 134 void setBounds(int left, int top, int width, int height) { |
134 assert(width >= 0 && height >= 0); | 135 assert(width >= 0 && height >= 0); |
135 | 136 |
136 _measuredLeft = left; | 137 _measuredLeft = left; |
137 _measuredTop = top; | 138 _measuredTop = top; |
138 | 139 |
139 // Note: we need to save the client height | 140 // Note: we need to save the client height |
140 _measuredWidth = width - borderWidth; | 141 _measuredWidth = width - borderWidth; |
141 _measuredHeight = height - borderHeight; | 142 _measuredHeight = height - borderHeight; |
142 measureLayout(_measuredWidth, _measuredHeight); | 143 final completer = new Completer<Size>(); |
| 144 completer.complete(new Size(_measuredWidth, _measuredHeight)); |
| 145 measureLayout(completer.future, null); |
143 } | 146 } |
144 | 147 |
145 /** Applies the layout to the node. */ | 148 /** Applies the layout to the node. */ |
146 void applyLayout() { | 149 void applyLayout() { |
147 assert(!window.inMeasurementFrame); | |
148 if (_measuredLeft != null) { | 150 if (_measuredLeft != null) { |
149 // TODO(jmesserly): benchmark the performance of this DOM interaction | 151 // TODO(jmesserly): benchmark the performance of this DOM interaction |
150 final style = view.node.style; | 152 final style = view.node.style; |
151 style.position = 'absolute'; | 153 style.position = 'absolute'; |
152 style.left = '${_measuredLeft}px'; | 154 style.left = '${_measuredLeft}px'; |
153 style.top = '${_measuredTop}px'; | 155 style.top = '${_measuredTop}px'; |
154 style.width = '${_measuredWidth}px'; | 156 style.width = '${_measuredWidth}px'; |
155 style.height = '${_measuredHeight}px'; | 157 style.height = '${_measuredHeight}px'; |
156 style.zIndex = '${layoutParams.layer}'; | 158 style.zIndex = '${layoutParams.layer}'; |
157 | 159 |
(...skipping 21 matching lines...) Expand all Loading... |
179 [ContentSizeMode mode = null]) { | 181 [ContentSizeMode mode = null]) { |
180 switch (dimension) { | 182 switch (dimension) { |
181 case Dimension.WIDTH: | 183 case Dimension.WIDTH: |
182 return measureWidth(parent, mode); | 184 return measureWidth(parent, mode); |
183 case Dimension.HEIGHT: | 185 case Dimension.HEIGHT: |
184 return measureHeight(parent, mode); | 186 return measureHeight(parent, mode); |
185 } | 187 } |
186 } | 188 } |
187 | 189 |
188 int measureWidth(ViewLayout parent, ContentSizeMode mode) { | 190 int measureWidth(ViewLayout parent, ContentSizeMode mode) { |
189 final style = layoutParams.style; | 191 final style = layoutParams.style.value; |
190 switch (mode) { | 192 switch (mode) { |
191 case ContentSizeMode.MIN: | 193 case ContentSizeMode.MIN: |
192 return _styleToPixels( | 194 return _styleToPixels( |
193 style.minWidth, currentWidth, parent.currentWidth); | 195 style.minWidth, currentWidth, parent.currentWidth); |
194 | 196 |
195 case ContentSizeMode.MAX: | 197 case ContentSizeMode.MAX: |
196 return _styleToPixels( | 198 return _styleToPixels( |
197 style.maxWidth, currentWidth, parent.currentWidth); | 199 style.maxWidth, currentWidth, parent.currentWidth); |
198 } | 200 } |
199 } | 201 } |
200 | 202 |
201 int measureHeight(ViewLayout parent, ContentSizeMode mode) { | 203 int measureHeight(ViewLayout parent, ContentSizeMode mode) { |
202 final style = layoutParams.style; | 204 final style = layoutParams.style.value; |
203 switch (mode) { | 205 switch (mode) { |
204 case ContentSizeMode.MIN: | 206 case ContentSizeMode.MIN: |
205 return _styleToPixels( | 207 return _styleToPixels( |
206 style.minHeight, currentHeight, parent.currentHeight); | 208 style.minHeight, currentHeight, parent.currentHeight); |
207 | 209 |
208 case ContentSizeMode.MAX: | 210 case ContentSizeMode.MAX: |
209 return _styleToPixels( | 211 return _styleToPixels( |
210 style.maxHeight, currentHeight, parent.currentHeight); | 212 style.maxHeight, currentHeight, parent.currentHeight); |
211 } | 213 } |
212 } | 214 } |
(...skipping 13 matching lines...) Expand all Loading... |
226 // For an unset max-content size, use the actual size | 228 // For an unset max-content size, use the actual size |
227 return size; | 229 return size; |
228 } | 230 } |
229 if (style.endsWith('%')) { | 231 if (style.endsWith('%')) { |
230 num percent = Math.parseDouble(style.substring(0, style.length - 1)); | 232 num percent = Math.parseDouble(style.substring(0, style.length - 1)); |
231 return ((percent / 100) * parentSize).toInt(); | 233 return ((percent / 100) * parentSize).toInt(); |
232 } | 234 } |
233 return _toPixels(style); | 235 return _toPixels(style); |
234 } | 236 } |
235 } | 237 } |
OLD | NEW |