WIP make it possible to do TextFragment

sky/sdk/lib/framework/rendering/paragraph.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.
 
 import 'dart:sky' as sky;
 import 'box.dart';
 import 'object.dart';
 
 class RenderInline extends RenderObject {
   RenderInline(this.data);
@@ skipping 50 matching lines @@
   int get hashCode {
     // Use Quiver: https://github.com/domokit/mojo/issues/236
     int value = 373;
     value = 37 * value + color.hashCode;
     value = 37 * value + fontSize.hashCode;
     value = 37 * value + fontWeight.hashCode;
     value = 37 * value + textAlign.hashCode;
     return value;
   }
 
+  void _applyToCSSStyle(CSSStyleDeclaration cssStyle) {
+    if (color != null) {
+      cssStyle['color'] = 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
+    }
+    if (fontSize != null) {
+      cssStyle['font-size'] = "${fontSize}px";
+    }
+    if (fontWeight != null) {
+      cssStyle['font-weight'] = const {
+        FontWeight.light: '300',
+        FontWeight.regular: '400',
+        FontWeight.medium: '500',
+      }[fontWeight];
+    }
+    if (textAlign != null) {
+      cssStyle['text-align'] = const {
+        TextAlign.left: 'left',
+        TextAlign.right: 'right',
+        TextAlign.center: 'center',
+      }[textAlign];
+    }
+  }
+
   String toString([String prefix = '']) {
     List<String> result = [];
     if (color != null)
       result.add('${prefix}color: $color');
     if (fontSize != null)
       result.add('${prefix}fontSize: $fontSize');
     if (fontWeight != null)
-      result.add('${prefix}fontWeight: fontWeight');
+      result.add('${prefix}fontWeight: $fontWeight');
     if (textAlign != null)
-      result.add('${prefix}textAlign: textAlign');
+      result.add('${prefix}textAlign: $textAlign');
     if (result.isEmpty)
       return '${prefix}<no style specified>';
     return result.join('\n');
   }
 }
 
+class TextNode {
+  const TextStyle(this.style);
+
+  final TextStyle style;
+
+  Node _toDOM();
+}
+
+class StyledText extends TextNode {
+  const StyledText(this.text, { TextStyle style }) : super(style);
+
+  final String text;
+
+  Node _toDOM(Document owner) {
+    Node node = owner.createText(text);
+    if (style != null) {
+      Element wrapper = owner.createElement('t');
+      style._applyToCSSStyle(wrapper.style);
+      wrapper.appendChild(node);
+      node = wrapper;
+    }
+    return node;
+  }
+}
+
+class TextFragment extends TextNode {
+  const StyledText(this.text, { TextStyle style }) : super(style);
+
+  final List<TextNode> _children;
+
+  List<TextNode> get children => new UnmodifiableListView<TextNode>(_children);
+
+  Node _toDOM() {
+    Element wrapper = owner.createElement('f');
+    if (style)
+      style._applyToCSSStyle(wrapper.style);
+    for (TextNode child in children)
+      wrapper.appendChild(child._toDOM());
+    return wrapper;
+  }
+}
+
 // Unfortunately, using full precision floating point here causes bad layouts
 // because floating point math isn't associative. If we add and subtract
 // padding, for example, we'll get different values when we estimate sizes and
 // when we actually compute layout because the operations will end up associated
 // differently. To work around this problem for now, we round fractional pixel
 // values up to the nearest whole pixel value. The right long-term fix is to do
 // layout using fixed precision arithmetic.
 double _applyFloatingPointHack(double layoutValue) {
   return layoutValue.ceilToDouble();
 }
 
 class RenderParagraph extends RenderBox {
 
   RenderParagraph({
-    String text,
-    Color color,
-    TextStyle style
+    TextNode node;
   }) : _style = style {
     _layoutRoot.rootElement = _document.createElement('p');
     this.text = text;
   }
 
   final sky.Document _document = new sky.Document();
   final sky.LayoutRoot _layoutRoot = new sky.LayoutRoot();
 
   String get text => (_layoutRoot.rootElement.firstChild as sky.Text).data;
   void set text (String value) {
     _layoutRoot.rootElement.setChild(_document.createText(value));
     markNeedsLayout();
   }
 
-  TextStyle _style;
-  TextStyle get style => _style;
+  TextNode _style;
+  TextNode get style => _style;
   void set style (TextStyle value) {
     if (_style != value) {
       // TODO(hansmuller): decide if a new layout or paint is needed
       markNeedsLayout();
       _style = value;
     }
   }
 
   BoxConstraints _constraintsForCurrentLayout;
 
@@ skipping 46 matching lines @@
     // will destroy state inside the layout root. If that happens, we need to
     // get back the correct state by calling _layout again.
     //
     // TODO(abarth): Make computing the min/max intrinsic width/height a
     //               non-destructive operation.
     if (_constraintsForCurrentLayout != constraints && constraints != null)
       _layout(constraints);
 
     if (style != null) {
       var cssStyle = _layoutRoot.rootElement.style;
-      if (style.color != null) {
-        Color c = style.color;
-        cssStyle['color'] =
-            'rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha / 255.0})';
-      }
-      if (style.fontSize != null) {
-        cssStyle['font-size'] = "${style.fontSize}px";
-      }
-      if (style.fontWeight != null) {
-        cssStyle['font-weight'] = const {
-          FontWeight.light: '300',
-          FontWeight.regular: '400',
-          FontWeight.medium: '500',
-        }[style.fontWeight];
-      }
-      if (style.textAlign != null) {
-        cssStyle['text-align'] = const {
-          TextAlign.left: 'left',
-          TextAlign.right: 'right',
-          TextAlign.center: 'center',
-        }[style.textAlign];
-      }
     }
     _layoutRoot.paint(canvas);
   }
 
   // we should probably expose a way to do precise (inter-glpyh) hit testing
 
   String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings(prefix)}${prefix}style:\n${style.toString("$prefix  ")}\n${prefix}text: ${text}\n';
 }