Example showing alternate async measurement solution

client/samples/total/src/SpreadsheetPresenter.dart

 // 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.
 
 typedef void EditCellRangeFunction(CellRange range);
 
 /**
  * Spreadsheet widget.
  */
 class SpreadsheetPresenter implements SpreadsheetListener, SelectionListener {
@@ skipping 646 matching lines @@
           print("Error parsing formula '${value}': ${exception}");
         }
       }
     });
   }
 
   void _createMoveDragger(Document doc) {
     _moveDragger = new Element.tag("div");
     _moveDragger.id = "moveDragger-${_spreadsheet.name}";
     _moveDragger.attributes["class"] = "moveDragger";
-    _moveDragger.style.setProperty("left", HtmlUtils.toPx(3));
-    _moveDragger.style.setProperty("top", HtmlUtils.toPx(3));
+    _moveDragger.style.left = HtmlUtils.toPx(3);
+    _moveDragger.style.top = HtmlUtils.toPx(3);
     _spreadsheetElement.nodes.add(_moveDragger);
 
     _moveDragger.on.mouseDown.add((MouseEvent e) {
       _moveToTop();
       _hideInnerMenu(true);
 
       int mouseStartX = e.x;
       int mouseStartY = e.y;
 
-      _spreadsheetElement.rect.then((ElementRect elementRect) {
-        ClientRect rect = elementRect.bounding;
+      window.requestMeasurementFrame(() {
+        ClientRect rect = _spreadsheetElement.rect.bounding;
         int startX = rect.left;
         int startY = rect.top;
-        _window.document.body.style.setProperty("cursor", "move");
+        return () {
+          _window.document.body.style.cursor = "move";
 
-        _setDragFunction((MouseEvent e_) {
-          int x = startX + e_.x - mouseStartX;
-          int y = startY + e_.y - mouseStartY;
+          _setDragFunction((MouseEvent e_) {
+            int x = startX + e_.x - mouseStartX;
+            int y = startY + e_.y - mouseStartY;
 
-          x = Math.max(x, CssStyles.OBJECTBAR_WIDTH);
-          y = Math.max(y, CssStyles.SANDBAR_HEIGHT);
-          // Move the spreadsheet container
-          _spreadsheetElement.style.setProperty("left", HtmlUtils.toPx(x));
-          _spreadsheetElement.style.setProperty("top", HtmlUtils.toPx(y));
-        });
-        });
+            x = Math.max(x, CssStyles.OBJECTBAR_WIDTH);
+            y = Math.max(y, CssStyles.SANDBAR_HEIGHT);
+            // Move the spreadsheet container
+            _spreadsheetElement.style.left = HtmlUtils.toPx(x);
+            _spreadsheetElement.style.top = HtmlUtils.toPx(y);
+          });
+        };
+      });
 
       _setUndragFunction((MouseEvent e_) {
-        _window.document.body.style.setProperty("cursor", "auto");
+        _window.document.body.style.cursor = "auto";
       });
     });
   }
 
   void _createResizeDragger(Document doc) {
     _resizeDragger = new Element.tag("div");
     _resizeDragger.id = "resizeDragger-${_spreadsheet.name}";
     _resizeDragger.attributes["class"] = "resizeDragger";
     _spreadsheetElement.nodes.add(_resizeDragger);
 
@@ skipping 93 matching lines @@
     _tableScrollContainer.style.setProperty("left", "0px");
     _tableScrollContainer.style.setProperty("top", "0px");
     _tableScrollContainer.nodes.add(_tableScrollDiv);
     _tableSizeChanged();
 
     _tableScrollContainer.on.scroll.add((e) {
       if (_scrolledByKeyboard) {
         _scrolledByKeyboard = false;
         return;
       }
-      Future<ElementRect> future = _tableScrollContainer.rect;
-      future.then((ElementRect rect) {
+      window.requestMeasurementFrame(() {
+        final rect = _tableScrollContainer.rect;
         int scrollTop = rect.scroll.top;
         int row = _getAbsRowOrColumn(scrollTop, ROW) - 1;
         int col = _getAbsRowOrColumn(rect.scroll.left, COL) - 1;
         int newRowShift = Math.max(0, row);
         int newColumnShift = Math.max(0, col);
         if (newRowShift != _rowShift || newColumnShift != _columnShift) {
           _rowShift = newRowShift;
           _columnShift = newColumnShift;
-          _spreadsheet.refresh();
+          return () { _spreadsheet.refresh(); };
         }
       });
     });
   }
 
   // Return the number of milliseconds since the epoch
   int _currentTimeMllis() {
     Date now = new Date.now();
     Date then = new Date.fromEpoch(0, now.timeZone);
     return now.difference(then).inMilliseconds;
@@ skipping 51 matching lines @@
 
     // apply text selection now
     _formulaCellSelectingSelectText();
 
     // show cell selecting div
     {
       DivElement div = _table.formulaCellSelectingDiv;
       CSSStyleDeclaration divStyle = div.style;
       int borderWidth = 2 + 2;
       CellRange cellRange = new CellRange(_spreadsheet, minCorner, maxCorner);
-      _selectionManager.getBoundingBoxForRange(cellRange).then(
-          (BoundingBox box) {
-        if (box != null) {
-          divStyle.setProperty("left", HtmlUtils.toPx(box.left));
-          divStyle.setProperty("top", HtmlUtils.toPx(box.top));
-          divStyle.setProperty("width", HtmlUtils.toPx(box.width - borderWidth));
-          divStyle.setProperty("height", HtmlUtils.toPx(box.height - borderWidth));
-          divStyle.removeProperty("display");
-        } else {
-          divStyle.setProperty("display", "none");
-        }
+      window.requestMeasurementFrame(() {
+        final box = _selectionManager.getBoundingBoxForRange(cellRange);
+        return () {
+          if (box != null) {
+            divStyle.left = HtmlUtils.toPx(box.left);
+            divStyle.top = HtmlUtils.toPx(box.top);
+            divStyle.width = HtmlUtils.toPx(box.width - borderWidth);
+            divStyle.height = HtmlUtils.toPx(box.height - borderWidth);
+            divStyle.removeProperty("display");
+          } else {
+            divStyle.setProperty("display", "none");
+          }
+        };
       });
     }
   }
 
   void _formulaCellSelectingRememberSelectionRange() {
     _formulaCellSelectingTextStart = _formulaInput.selectionStart;
     _formulaCellSelectingTextEnd = _formulaInput.selectionEnd;
   }
 
   void _formulaCellSelectingSelectText() {
@@ skipping 156 matching lines @@
 
   // Return the number of _rows currently being displayed (not counting the column header row)
   int _getVisibleTableHeight() => _getShiftedRowEnd(_rowShift + _rows, _rowShift);
 
   // Return the number of _columns currently being displayed (not counting the row header column)
   int _getVisibleTableWidth() => _getShiftedColumnEnd(_columnShift + _columns, _columnShift);
 
   // Resize the formula input field to fit the contained text
   void _growFormulaInput() {
     _formulaInputMeasure.text = _formulaInput.value;
-    _formulaInputMeasure.rect.then((ElementRect rect) {
-      int textWidth = rect.client.width;
+    window.requestMeasurementFrame(() {
+      int textWidth = _formulaInputMeasure.rect.client.width;
       int width = Math.max(textWidth + 25, _formulaCellWidth);
-      _formulaDiv.style.setProperty("width", HtmlUtils.toPx(width));
-      _formulaInput.style.setProperty("width", HtmlUtils.toPx(width));
+      return () {
+        _formulaDiv.style.width = HtmlUtils.toPx(width);
+        _formulaInput.style.width = HtmlUtils.toPx(width);
+      };
     });
   }
 
   // Fade out the formula input field
   void _hideFormula() {
     _hideFormulaCellSelecting();
     _formulaEditing = false;
     _formulaDiv.classes.remove("fadeIn");
     _formulaDiv.classes.add("fadeOut");
   }
@@ skipping 48 matching lines @@
   // update table row and column headers
   void _redrawHeaders() {
     _setTableWidth(_getVisibleTableWidth());
     _tableSizeChanged();
 
     _table.redrawHeaders(_selectionManager, _rows, _columns, _rowShift, _columnShift,
         _cellDisplay);
   }
 
   void _refreshResizeDragger() {
-    _table.rect.then((ElementRect elementRect) {
+   window.requestMeasurementFrame(() {
       // We may be called before the dragger is ready
       if (_resizeDragger == null) {
         return;
       }
-      ClientRect rect = elementRect.bounding;
-
-      _resizeDragger.style.setProperty("left", HtmlUtils.toPx(rect.width));
-      _resizeDragger.style.setProperty("top", HtmlUtils.toPx(rect.height));
+      ClientRect rect =  _table.rect.bounding;
+      return () {
+        _resizeDragger.style.setProperty("left", HtmlUtils.toPx(rect.width));
+        _resizeDragger.style.setProperty("top", HtmlUtils.toPx(rect.height));
+      };
     });
   }
 
   // Remove the HTML elements corresponding to the given column
   void _removeTableColumnHtml(int col) {
     _table.removeColumn(col);
     int width = _spreadsheet.getColumnWidth(col);
     _setTableWidth(_tableWidth - width);
   }
 
@@ skipping 291 matching lines @@
         setDrag(COL, false);
       }
     });
 
     // The inline cell editing UI is displayed when a user makes the same single
     // cell selection over again. We keep track of the current single cell that
     // is selected here to know when to enter edit mode.
     CellLocation currentSelectedSingleCell = null;
 
     void mouseMove(MouseEvent e) {
-      _table.rect.then((ElementRect rect) {
+      window.requestMeasurementFrame(() {
         // Set x and y to the mouse coordinates, relative to the top left of
         // the spreadsheet table.
-        ClientRect boundingRect = rect.bounding;
+        ClientRect boundingRect = _table.rect.bounding;
         int scrollOffsetX = -boundingRect.left.toInt();
         int scrollOffsetY = -boundingRect.top.toInt();
         x = e.x + scrollOffsetX;
         y = e.y + scrollOffsetY;
 
         // Update the dragger position and optionally the actual row/column size
         if (dragRowColumn(false)) {
           return;
         }
 
@@ skipping 48 matching lines @@
       });
     }
 
     _setMove(mouseMove);
 
     _table.on.mouseDown.add((MouseEvent e) {
       _moveToTop();
 
       // Right click toggles and positions the context menu
       if (e.button == 2 || (e.button == 0 && e.ctrlKey)) {
-        _table.rect.then((ElementRect rect) {
-          ClientRect boundingRect = rect.bounding;
-          int scrollOffsetX = -boundingRect.left;
-          int scrollOffsetY = -boundingRect.top;
-          _contextMenu.show(e.x + scrollOffsetX, e.y + scrollOffsetY);
+        window.requestMeasurementFrame(() {
+          ClientRect boundingRect = _table.rect.bounding;
+          return () {
+            int scrollOffsetX = -boundingRect.left;
+            int scrollOffsetY = -boundingRect.top;
+            _contextMenu.show(e.x + scrollOffsetX, e.y + scrollOffsetY);
+          };
         });
         return;
       }
 
       _setDragFunction(mouseMove);
 
       _setUndragFunction((MouseEvent e_) {
         dragRowColumn(true);
         _table.setDefaultCursor();
         draggingSelection = false;
@@ skipping 121 matching lines @@
     }
     _activeInnerMenu = new InnerMenuView(_window, row, _selectionManager, style,
         _spreadsheet.layout.getRowHeight(rowIndex),
         (){ _tableSizeChanged(); },
         (){ _hideInnerMenu(true); _repositionFormulaInput(null, false); });
     _innerMenuRowIndex = rowIndex;
   }
 
   // Update the scroll mechanism due to a change in the visible table area
   void _tableSizeChanged() {
-    _table.rect.then((ElementRect elementRect) {
-      ClientRect rect = elementRect.bounding;
+    window.requestMeasurementFrame(() {
+      ClientRect rect = _table.rect.bounding;
+      return () {
+        _tableScrollContainer.style.width = HtmlUtils.toPx(rect.width + 10);
+        _spreadsheetElement.style.width = HtmlUtils.toPx(rect.width);
 
-      _tableScrollContainer.style.width = HtmlUtils.toPx(rect.width + 10);
-      _spreadsheetElement.style.width = HtmlUtils.toPx(rect.width);
+        _tableScrollContainer.style.height = HtmlUtils.toPx(rect.height + 10);
+        _spreadsheetElement.style.height = HtmlUtils.toPx(rect.height);
 
-      _tableScrollContainer.style.height = HtmlUtils.toPx(rect.height + 10);
-      _spreadsheetElement.style.height = HtmlUtils.toPx(rect.height);
+        _tableScrollDiv.style.width = HtmlUtils.toPx(
+            _spreadsheet.getColumnEnd(_spreadsheet.columnCount()));
+        int extra = _activeInnerMenu == null ?
+            0 : _activeInnerMenu.currentRowHeight;
+        _tableScrollDiv.style.height = HtmlUtils.toPx(_spreadsheet.getRowEnd(
+            _spreadsheet.rowCount()) + extra);
 
-      _tableScrollDiv.style.width = HtmlUtils.toPx(
-          _spreadsheet.getColumnEnd(_spreadsheet.columnCount()));
-      int extra = _activeInnerMenu == null ?
-          0 : _activeInnerMenu.currentRowHeight;
-      _tableScrollDiv.style.height = HtmlUtils.toPx(_spreadsheet.getRowEnd(
-          _spreadsheet.rowCount()) + extra);
-
-      // Reposition the scroll bars
-      _scroll(_rowShift, _columnShift);
-      // Move the resize dragger to the bottom-right corner
-      _refreshResizeDragger();
+        // Reposition the scroll bars
+        _scroll(_rowShift, _columnShift);
+        // Move the resize dragger to the bottom-right corner
+        _refreshResizeDragger();
+      };
     });
   }
 
   void _updateInnerMenu() {
     if (_activeInnerMenu != null) {
       _activeInnerMenu.updateSize();
     }
   }
 
   // Change the width/height of a column or row.
   void _updateRowColumnSize(int rowOrCol, int index, int size, int oldSize, bool mouseUp) {
     if (mouseUp) {
       Command command = new ResizeRowColumnCommand(_spreadsheet, rowOrCol, index, size, oldSize);
       _spreadsheet.execute(command);
     } else {
       if (rowOrCol == COL) {
         _spreadsheet.setColumnWidth(index, size);
       } else {
         _spreadsheet.setRowHeight(index, size);
       }
     }
   }
 }