| 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 |