Implement measurement using futures

client/layout/ViewLayout.dart

 // Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 /** The interface that the layout algorithms use to talk to the view. */
 interface Positionable {
   ViewLayout get layout();
 
   /** Gets our custom CSS properties, as provided by the CSS preprocessor. */
   Map<String, String> get customStyle();
 
   /** Gets the root DOM used for layout. */
   Element get node();
 
   /** Gets the collection of child views. */
   Collection<Positionable> get childViews();
 
   /** Causes a view to layout its children. */
   void doLayout();
 }
 
 
 /**
  * Caches the layout parameters that were specified in CSS during a layout
  * computation. These values are immutable during a layout.
  */
 class LayoutParams {
   // TODO(jmesserly): should be const, but there's a bug in DartC preventing us
   // from calling "window." in an initializer. See b/5332777
-  CSSStyleDeclaration style;
+  Future<CSSStyleDeclaration> style;
 
   int get layer() => 0;
 
   LayoutParams(Element node) {
-    style = window.getComputedStyle(node, '');
+    style = node.computedStyle;
   }
 }
 
 // TODO(jmesserly): enums would really help here
 class Dimension {
   // TODO(jmesserly): perhaps this should be X and Y
   static final WIDTH = const Dimension._internal('width');
   static final HEIGHT = const Dimension._internal('height');
 
   final String name; // for debugging
@@ skipping 18 matching lines @@
  * Abstract base class for View layout. Tracks relevant layout state.
  * This code was inspired by code in Android's View.java; it's needed for the
  * rest of the layout system.
  */
 class ViewLayout {
   /**
    * The layout parameters associated with this view and used by the parent
    * to determine how this view should be laid out.
    */
   LayoutParams layoutParams;
+  Future<ElementRect> _cachedViewRect;
 
   /** The view that this layout belongs to. */
   final Positionable view;
 
   /**
    * To get a perforant positioning model on top of the DOM, we read all
    * properties in the first pass while computing positions. Then we have a
    * second pass that actually moves everything.
    */
   int _measuredLeft, _measuredTop, _measuredWidth, _measuredHeight;
 
-  ViewLayout(this.view) {}
+  ViewLayout(this.view);
 
   /**
    * Creates the appropriate view layout, depending on the properties.
    */
   // TODO(jmesserly): we should support user defined layouts somehow. Perhaps
   // registered with a LayoutProvider.
   factory ViewLayout.fromView(Positionable view) {
     if (hasCustomLayout(view)) {
       return new GridLayout(view);
     } else {
       return new ViewLayout(view);
     }
   }
 
   static bool hasCustomLayout(Positionable view) {
     return view.customStyle['display'] == "-dart-grid";
   }
 
-  CSSStyleDeclaration get _style() => layoutParams.style;
+  CSSStyleDeclaration get _style() => layoutParams.style.value;
 
-  int get currentWidth() => view.node.offsetWidth;
-  int get currentHeight() => view.node.offsetHeight;
+  void cacheExistingBrowserLayout() {
+    _cachedViewRect = view.node.rect;
+  }
+
+  int get currentWidth() {
+    return _cachedViewRect.value.offset.width;

[nweiz, 2011/10/28 03:58:38]

What happens when _cachedViewRect hasn't fired yet? Seems like an NPE isn't
ideal... and if _cachedViewRect is always going to be concrete, why not store
ElementRect rather than a future?

Also, what if cacheExistingBrowserLayout hasn't been called yet?

[Jacob, 2011/10/31 22:09:50]

by design it will always have fired due to appropriate calls to
requestLayoutFrame in the code that uses this.
This way we should get the right "future not available exception" instead of
just a NPE resulting in clearer error messages as well as making the code
simpler and more efficient as we avoid attaching completion listeners to each of
the individual futures.

[nweiz, 2011/11/01 00:49:22]

Oh, futures throw an error when value doesn't exist? That makes sense.

+  }
+
+  int get currentHeight() {
+    return _cachedViewRect.value.offset.height;
+  }
 
   int get borderLeftWidth() => _toPixels(_style.borderLeftWidth);

[nweiz, 2011/10/28 03:58:38]

Can't _style be null sometimes?

[Jacob, 2011/10/31 22:09:50]

it can't be null, however a future not available yet exception could fire if the
user doesn't use this correctly.
This is ugly but I can't think of a cleaner way to modify this api to work
acceptably with async layout. If you or John can think of a better way to modify
this, let me know.

[nweiz, 2011/11/01 00:49:22]

The fact that it fires a "future not completed" error rather than an NPE makes
this better. I think the ideal scenario is to have all these properties return
Futures, but that's not really practical without more fluid language support for
async.

   int get borderTopWidth() => _toPixels(_style.borderTopWidth);
   int get borderRightWidth() => _toPixels(_style.borderRightWidth);
   int get borderBottomWidth() => _toPixels(_style.borderBottomWidth);
   int get borderWidth() => borderLeftWidth + borderRightWidth;
   int get borderHeight() => borderTopWidth + borderBottomWidth;
-
+ 

[nweiz, 2011/10/28 03:58:38]

Style nit: trailing whitespace

[Jacob, 2011/10/31 22:09:50]

Done.

   /** Implements the custom layout computation. */
-  bool measureLayout(int width, int height) => false;
+  void measureLayout(Future<Size> size, Completer<bool> changed) {
+  }
 
   /**
    * Positions the view within its parent container.
    * Also performs a layout of its children.
    */
   void setBounds(int left, int top, int width, int height) {
     assert(width >= 0 && height >= 0);
 
     _measuredLeft = left;
     _measuredTop = top;
 
     // Note: we need to save the client height
     _measuredWidth = width - borderWidth;
     _measuredHeight = height - borderHeight;
-
-    measureLayout(_measuredWidth, _measuredHeight);
+    final completer = new Completer<Size>();
+    completer.complete(new Size(_measuredWidth, _measuredHeight));
+    measureLayout(completer.future, null);
   }
 
   /** Applies the layout to the node. */
   void applyLayout() {
     if (_measuredLeft != null) {
       // TODO(jmesserly): benchmark the performance of this DOM interaction
       final style = view.node.style;
       style.position = 'absolute';
       style.left = '${_measuredLeft}px';
       style.top = '${_measuredTop}px';
@@ skipping 25 matching lines @@
                      [ContentSizeMode mode = null]) {
     switch (dimension) {
       case Dimension.WIDTH:
         return measureWidth(parent, mode);
       case Dimension.HEIGHT:
         return measureHeight(parent, mode);
     }
   }
 
   int measureWidth(ViewLayout parent, ContentSizeMode mode) {
-    final style = layoutParams.style;
+    final style = layoutParams.style.value;
     switch (mode) {
       case ContentSizeMode.MIN:
         return _styleToPixels(
             style.minWidth, currentWidth, parent.currentWidth);
 
       case ContentSizeMode.MAX:
         return _styleToPixels(
             style.maxWidth, currentWidth, parent.currentWidth);
     }
   }
 
   int measureHeight(ViewLayout parent, ContentSizeMode mode) {
-    final style = layoutParams.style;
+    final style = layoutParams.style.value;
     switch (mode) {
       case ContentSizeMode.MIN:
         return _styleToPixels(
             style.minHeight, currentHeight, parent.currentHeight);
 
       case ContentSizeMode.MAX:
         return _styleToPixels(
             style.maxHeight, currentHeight, parent.currentHeight);
     }
   }
@@ skipping 13 matching lines @@
       // For an unset max-content size, use the actual size
       return size;
     }
     if (style.endsWith('%')) {
       num percent = Math.parseDouble(style.substring(0, style.length - 1));
       return ((percent / 100) * parentSize).toInt();
     }
     return _toPixels(style);
   }
 }