Example showing alternate async measurement solution

client/samples/dartcombat/views.dart

Index: client/samples/dartcombat/views.dart
diff --git a/client/samples/dartcombat/views.dart b/client/samples/dartcombat/views.dart
index a565f5d831b630b2b2decd9b488e9f3e2ee5a646..64f5122d8df5fc5501823823422371511fee2c1b 100644
--- a/client/samples/dartcombat/views.dart
+++ b/client/samples/dartcombat/views.dart
@@ -1,4 +1,4 @@
-// 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.
 
@@ -90,26 +90,30 @@ class PlaceBoatView extends View {
 
   void handleMouseDown(e) {
     e.preventDefault();
-    ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) {
+    window.requestMeasurementFrame(() {
+      final pos = ViewUtil.positionFromEvent(_rootNode, e);
       _boatStartX = pos[0];
       _boatStartY = pos[1];
-      // error case when the mouse was released out of the boat-placing area
-      if (_moveListener != null) {
-        _rootNode.on.mouseMove.remove(_moveListener, false);
-        _possibleBoat.remove();
-        _moveListener = null;
-      }
-      _possibleBoat = ViewUtil.createDiv("icons boat2");
-      ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY);
-      _rootNode.nodes.add(_possibleBoat);
-      _moveListener = handleMouseMove;
-      _rootNode.on.mouseMove.add(_moveListener);
+      return () {

[Siggi Cherem (dart-lang), 2012/01/23 01:16:39]

overall feels good to chunk everthing in phases (measure, layout, measure,
layout), but syntactically, returning a callback for layout feels really awkward
to me.

I'm sure you guys have been debating for a while about this, so forgive me if
you already considered something of this sort. I was trying to think if we can
work around this awkwardness by using futures for each of these stages
(measure/layout), for example:

/**
 * Returns a nested future: the outer future indicates that
 * the frame is ready for measurements, the inner future
 * indicates that the frame is ready for for more layout,
 * but no longer for measurements.
 */
Future<Future> window.requestMeasurementsFrame();

// Usage example
final measureReady = window.requestMeasurementsFrame();
measureReady.then((layoutReady) {
  // ... measure
  // ... measure
  layoutReady.then((_) {
    // ... layout
    // ... layout
  });
};

Then, if we get await (or something similar) in the language this could be
written linearly as follows:

final measureReady = window.requestMeasurementsFrame();
final layoutReady = await measureReady;
// ... measure
// ... measure
await layoutReady;
// ... layout
// ... layout


So the example here would look as follows:
  window.requestMeasurementFrame().then((layoutReady) {
    final pos = ViewUtil.positionFromEvent(_rootNode, e);
    _boatStartX = pos[0];
    _boatStartY = pos[1];
    layoutReady.then((_) {
      // error case when the mouse was released out of the boat-placing area
      if (_moveListener != null) {
         _rootNode.on.mouseMove.remove(_moveListener, false);
         _possibleBoat.remove();
         _moveListener = null;
      }
      _possibleBoat = ViewUtil.createDiv("icons boat2");
      ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY);
      _rootNode.nodes.add(_possibleBoat);
      _moveListener = handleMouseMove;
      _rootNode.on.mouseMove.add(_moveListener);
    });
  });

Thoughts?

[nweiz, 2012/01/24 00:23:49]

I like the idea of using futures. The syntax without await is a little awkward,
but no more so than the return-a-closure syntax.

I'd still like to see Future chaining. Here's how the example would look using
Closure-style chaining:

  window.requestMeasurementFrame().then((layoutReady) {
    final pos = ViewUtil.positionFromEvent(_rootNode, e);
    _boatStartX = pos[0];
    _boatStartY = pos[1];
    return layoutReady;
  }).then((_) {
    // error case when the mouse was released out of the boat-placing area
    if (_moveListener != null) {
       _rootNode.on.mouseMove.remove(_moveListener, false);
       _possibleBoat.remove();
       _moveListener = null;
    }
    _possibleBoat = ViewUtil.createDiv("icons boat2");
    ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY);
    _rootNode.nodes.add(_possibleBoat);
    _moveListener = handleMouseMove;
    _rootNode.on.mouseMove.add(_moveListener);
  });

+        // error case when the mouse was released out of the boat-placing area
+        if (_moveListener != null) {
+          _rootNode.on.mouseMove.remove(_moveListener, false);
+          _possibleBoat.remove();
+          _moveListener = null;
+        }
+        _possibleBoat = ViewUtil.createDiv("icons boat2");
+        ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY);
+        _rootNode.nodes.add(_possibleBoat);
+        _moveListener = handleMouseMove;
+        _rootNode.on.mouseMove.add(_moveListener);
+      };
     });
   }
 
   void handleMouseMove(e) {
     e.preventDefault();
-    ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) {
+    window.requestMeasurementFrame(() {
+      final pos = ViewUtil.positionFromEvent(_rootNode, e);
       if (_boatLastX == pos[0] && _boatLastY == pos[1]) {
         return;
       }
@@ -129,7 +133,10 @@ class PlaceBoatView extends View {
         boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1));
       }
 
-      _possibleBoat.attributes["class"] = "icons boat${boatSize} boatdir-${dir}";
+      return () {
+        _possibleBoat.attributes["class"] =
+           "icons boat${boatSize} boatdir-${dir}";
+      };
     });
   }
 
@@ -137,26 +144,28 @@ class PlaceBoatView extends View {
   void handleMouseUp(e) {
     _rootNode.on.mouseMove.remove(_moveListener, false);
     _moveListener = null;
-    ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) {
+    window.requestMeasurementFrame(() {
+      final pos = ViewUtil.positionFromEvent(_rootNode, e);
       int _boatEndX = pos[0];
       int _boatEndY = pos[1];
 
       int deltaX = _boatEndX - _boatStartX;
       int deltaY = _boatEndY - _boatStartY;
-      Boat boat;
-
-      if (deltaX.abs() >= deltaY.abs()) {
-        int boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1));
-        boat = new Boat(deltaX < 0 ? (_boatStartX - boatSize + 1) : _boatStartX,
-            _boatStartY, true, boatSize);
-      } else {
-        int boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1));
-        boat = new Boat(_boatStartX,
-            deltaY < 0 ? (_boatStartY - boatSize + 1) : _boatStartY,
-            false, boatSize);
-      }
-
-      state.addBoat(boat);
+      return () {
+        Boat boat;
+        if (deltaX.abs() >= deltaY.abs()) {
+          int boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1));
+          boat = new Boat(deltaX < 0 ? (_boatStartX - boatSize + 1) : _boatStartX,

[Siggi Cherem (dart-lang), 2012/01/23 01:16:39]

80 col

+              _boatStartY, true, boatSize);
+        } else {
+          int boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1));
+          boat = new Boat(_boatStartX,
+              deltaY < 0 ? (_boatStartY - boatSize + 1) : _boatStartY,
+              false, boatSize);
+        }
+
+        state.addBoat(boat);
+      };
     });
   }
 }
@@ -199,8 +208,9 @@ class EnemyGridView extends View {
 
   /** Interpret clicks as a shooting action. */
   void handleClick(MouseEvent e) {
-    ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) {
-      state.shoot(pos[0], pos[1]);
+    window.requestMeasurementFrame(() {
+      final pos = ViewUtil.positionFromEvent(_rootNode, e);
+      return () { state.shoot(pos[0], pos[1]); };
     });
   }
 
@@ -276,15 +286,15 @@ class ShootingStatusView extends View {
 /** Utility methods used by the views above. */
 class ViewUtil {
 
-  /** Extract the position of a mouse event in a containing 500x500 grid. */
-  static Future<List<int>> positionFromEvent(Element gridNode, MouseEvent e) {
-    final completer = new Completer<List<int>>();
-    gridNode.rect.then((ElementRect rect) {
-      int x = (e.pageX - rect.offset.left) ~/ 50;
-      int y = (e.pageY - rect.offset.top) ~/ 50;
-      completer.complete([x, y]);
-    });
-    return completer.future;
+  /**
+   * Extract the position of a mouse event in a containing 500x500 grid.
+   * Must be run from within a measurement frame.
+   */
+  static List<int> positionFromEvent(Element gridNode, MouseEvent e) {
+    assert(window.inMeasurementFrame);
+    int x = (e.pageX - gridNode.rect.offset.left) ~/ 50;
+    int y = (e.pageY - gridNode.rect.offset.top) ~/ 50;
+    return [x, y];
   }
 
   /** Given a grid node (square or boat) place it at a grid coordinate. */