Example showing alternate async measurement solution

client/samples/total/src/SelectionManager.dart

-// Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
+// Copyright (c) 2012, 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 callback method type invoked when the selection changes.
 typedef void SelectionCallback();
 
 // The method type for the SelectionManager.applyToSelectedCells method.
 typedef void SelectionApply(CellLocation location);
 
 class BoundingBox {
@@ skipping 36 matching lines @@
   Spreadsheet get spreadsheet() => _spreadsheet;
 
   SelectionManager(this._spreadsheet, SpreadsheetPresenter presenter, Window window, this._table)
       : _selectedCell = null, _selectionCorner = null, _originRow = 0, _originColumn = 0 {
     Document doc = window.document;
 
     Element spreadsheetElement = presenter.spreadsheetElement;
     _selectionDiv = new Element.tag("div");
     _selectionDiv.id = "selection-${_spreadsheet.name}";
     _selectionDiv.attributes["class"] = "selection";
-    _selectionDiv.style.setProperty("display", "none");
+    _selectionDiv.style.display = "none";
     spreadsheetElement.nodes.add(_selectionDiv);
 
     Element thumb = new Element.tag("div");
     thumb.id = "selection-thumb-${_spreadsheet.name}";
     thumb.attributes["class"] = "selection-thumb";
     _selectionDiv.nodes.add(thumb);
 
     // Update selection after changing zoom factor, to reduce problems with position precision
     // Only create a single tracker per page
     if (_zoomTracker == null) {
@@ skipping 19 matching lines @@
     CellRange range = _getSelectionRange(_selectedCell, _selectionCorner);
     if (range == null) {
       return;
     }
 
     range.forEach(apply);
   }
 
   // Hide the selection marquee and empty the selection range
   void clearSelection() {
-    _selectionDiv.style.setProperty("display", "none");
+    _selectionDiv.style.display = "none";
     _selectedCell = _selectionCorner = null;
     selectionChanged();
   }
 
   // Return a BoundingBox for the given CellRange, clipped to the visible region of the table
   // TODO:  deal with full row and/or column selection
-  Future<BoundingBox> getBoundingBoxForRange(CellRange r) {
+  BoundingBox getBoundingBoxForRange(CellRange r) {
+    assert(window.inMeasurementFrame);
     // Modify the overlay for entire row/column selection
     int minRow = r.minCorner.row;
     int maxRow = r.maxCorner.row;
     int minCol = r.minCorner.col;
     int maxCol = r.maxCorner.col;
 
     // FIXME - provide the table size to this class in a better way
     int maxVisibleRow = _table.numRows() - 1;
     TableRowElement tableRow = _table.getRowElement(0);
     int maxVisibleCol = tableRow.cells.length - 1;
@@ skipping 28 matching lines @@
     TableRowElement minRowElmt = _table.getRowElement(minPinned);
     TableCellElement minCellElmt =
         minRowElmt.cells[_pin(minCol - _originColumn, 1, maxVisibleCol)];
     int maxPinned = _pin(maxRow - _originRow, 1, maxVisibleRow);
     TableRowElement maxRowElmt = _table.getRowElement(maxPinned);
     TableCellElement maxCellElmt =
         maxRowElmt.cells[_pin(maxCol - _originColumn, 1, maxVisibleCol)];
 
     // We need bounding box relative to the container which will be offset by
     // css.
-    final tableRect = _table.rect;
-    final minCellElmtRect = minCellElmt.rect;
-    final maxCellElmtRect = maxCellElmt.rect;
 
-    window.requestLayoutFrame(() {
-      ClientRect orgP = tableRect.value.bounding;
-      ClientRect minP = minCellElmtRect.value.bounding;
-      ClientRect maxP = maxCellElmtRect.value.bounding;
-      completer.complete(new BoundingBox(
-          (minP.left - orgP.left).toInt(),
-          (minP.top - orgP.top).toInt(),
-          (maxP.left - minP.left + maxCellElmtRect.value.client.width).toInt(),
-          (maxP.top - minP.top + maxCellElmtRect.value.client.height).toInt()));
-    });
-    return completer.future;
+    final orgP = _table.rect.bounding;
+    final minP = minCellElmt.rect.bounding;
+    final maxP = maxCellElmt.rect.bounding;
+    return new BoundingBox(
+        (minP.left - orgP.left).toInt(),
+        (minP.top - orgP.top).toInt(),
+        (maxP.left - minP.left + maxCellElmt.rect.client.width).toInt(),
+        (maxP.top - minP.top + maxCellElmt.rect.client.height).toInt());
   }
 
   CellRange getSelectionRange() => _getSelectionRange(_selectedCell, _selectionCorner);
 
   bool isColumnSelected(int column) {
     CellRange r = _getSelectionRange(_selectedCell, _selectionCorner);
     if (r == null) {
       return false;
     }
     return r.minCorner.col <= column && r.maxCorner.col >= column;
@@ skipping 41 matching lines @@
   }
 
   // Draw or hide the selection marquee using current cell metrics
   void updateSelection() {
     CellRange r = _getSelectionRange(_selectedCell, _selectionCorner);
     if (r == null) {
       clearSelection();
       return;
     }
 
-    getBoundingBoxForRange(r).then((BoundingBox box) {
-      if (box != null) {
-        _selectionDiv.style.setProperty("left", HtmlUtils.toPx(box.left));
-        _selectionDiv.style.setProperty("top", HtmlUtils.toPx(box.top));
-        _selectionDiv.style.setProperty("width", HtmlUtils.toPx(box.width));
-        _selectionDiv.style.setProperty("height", HtmlUtils.toPx(box.height));
-        _selectionDiv.style.removeProperty("display");
-      } else {
-        _selectionDiv.style.setProperty("display", "none");
-      }
+    window.requestMeasurementFrame(() {
+      final box = getBoundingBoxForRange(r);
+      return () {
+        if (box != null) {
+          _selectionDiv.style.left = HtmlUtils.toPx(box.left);
+          _selectionDiv.style.top = HtmlUtils.toPx(box.top);
+          _selectionDiv.style.width = HtmlUtils.toPx(box.width);
+          _selectionDiv.style.height = HtmlUtils.toPx(box.height);
+          _selectionDiv.style.removeProperty("display");
+        } else {
+          _selectionDiv.style.display = "none";
+        }
+      };
     });
   }
 
   // Return the selection range for the given corners.
   // If the first corner is on a row header, it is assumed that the entire
   // row is selected, and the returned range has min.col == 0 and max.col == 0.
   // If the first corner is on a column header, it is assumed that the entire
   // column is selected, and the returned range has min.row == 0 and max.row == 0.
   CellRange _getSelectionRange(CellLocation corner1, CellLocation corner2) {
     if (corner1 == null || corner2 == null) {
@@ skipping 19 matching lines @@
       return new CellRange.columns(corner1.spreadsheet, minCol, maxCol);
     }
 
     return new CellRange(corner1.spreadsheet, new RowCol(minRow, minCol),
         new RowCol(maxRow, maxCol));
   }
 
   // Return the value closest to x in the range [min, max]
   int _pin(int x, int min, int max) => Math.max(Math.min(x, max), min);
 }