[Effen] basic layout container class for custom layout

sky/framework/fn.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 library fn;
 
 import 'dart:async';
 import 'dart:collection';
 import 'dart:sky' as sky;
 import 'reflect.dart' as reflect;
@@ skipping 569 matching lines @@
     Style style,
     String inlineStyle
   }) : super(
     key: key,
     children: children,
     style: style,
     inlineStyle: inlineStyle
   );
 }
 
+abstract class LayoutContainer extends Container {
+

[ojan, 2015/04/13 21:49:27]

Nit: The style of the other classes doesn't have this extra line break.

[Hixie, 2015/04/13 23:16:01]

As far as I can tell, the style, such as it is, is to have a line break unless
the first thing in the class is a non-static field. (q.v. SkyNodeWrapper,
SkyElementWrapper, Container, Image, and Anchor, which all start with a blank
line).

+  LayoutContainer({
+    Object key,
+    List<UINode> children,
+    Style style,
+    String inlineStyle
+  }) : super(
+    key: key,
+    children: children,
+    style: style,
+    inlineStyle: inlineStyle
+  );
+
+  sky.Node _createNode() {
+    var result = super._createNode();
+    result.setLayoutManager(() => layout(_root));
+    return result;
+  }
+
+  void _syncNode(SkyNodeWrapper old) {
+    super._syncNode(old);
+    _root.setNeedsLayout();
+  }
+
+  void layout(sky.Element skyNode);

[ojan, 2015/04/13 21:49:27]

How about we bake this into Container itself and pass the layout callback as an
optional argument to the constructor? That way the layout is not tied to your
inheritance hierarchy.

What I was picturing is that we'd have sky/framework/layouts/block.dart create a
block layout callback that then fixed_height_scrollable.dart would pass in as an
argument to the Container instead of using a BlockLayout node.

[Hixie, 2015/04/13 23:16:01]

I could go either way. Will discuss this offline.

+  // set skyNode.width (e.g., set it to skyNode.parentNode.width)
+  // for each skyNode.getChildNodes()[i]:
+  //   call .layout()
+  //   set .x, .y
+  //   set .width if you want to force a width

[ojan, 2015/04/13 21:49:27]

Setting width here wouldn't work for the BlockLayout case you have below because
then the children's descendants wouldn't be relayouted at this width.

We'll talk about this tomorrow, so go ahead and check this in without us
resolving this stuff, but I think what we want as the final result is that the
parent is 100% responsible for setting the child's x/y/width/height and the
child is responsible for communicating up its intrinsic width/height (e.g. as a
return value from layout?) so that the parent can size it appropriately. Ideally
we'd take this a step further and actually pass any information we need from
ancestors down the tree in a context argument to the layout method and remove
the parentNode pointer from skyNode entirely.

[Hixie, 2015/04/13 23:16:01]

That was basically how I'd designed my custom layout proposal back in the JS
days. Another option is to have the child be responsible for setting its
dimensions, but for the parent to pass in min/max width and height. Then if the
parent wants to force a dimension, it just sets the min/max to the same value.

The problem is this doesn't handle cases like "figure out all the intrinsic
dimensions then distribute the available space in the same ratio". But maybe the
way we handle that is just to do layout twice. I don't really see how to avoid a
double layout anyway in that case.

+  //   set .height if you want to force a height
+  // set skyNode.height
+

[ojan, 2015/04/13 21:49:27]

ditto

+}
+
 class Image extends SkyElementWrapper {
 
   String get _tagName => 'img';
 
   static final Image _emptyImage = new Image();
 
   SkyNodeWrapper get _emptyNode => _emptyImage;
 
   final String src;
   final int width;
@@ skipping 285 matching lines @@
 
 abstract class App extends Component {
   sky.Node _host;
 
   App() : super(stateful: true) {
     _host = sky.document.createElement('div');
     sky.document.appendChild(_host);
     _scheduleComponentForRender(this);
   }
 }