Theme Input, style EditableText, restore text input cursor

sky/sdk/lib/editing/editable_text.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:async';
+import 'dart:sky' as sky;
 
 import '../painting/text_style.dart';
+import '../rendering/object.dart';
 import '../widgets/basic.dart';
 import 'editable_string.dart';
 
+const _kCursorBlinkPeriod = 500; // milliseconds
+const _kCursorGap = 1.0;
+const _kCursorHeightOffset = 2.0;
+const _kCursorWidth = 1.0;
+
 class EditableText extends Component {
 
-  EditableText({String key, this.value, this.focused})
-      : super(key: key, stateful: true);
-
-  // static final Style _cursorStyle = new Style('''
-  //   width: 2px;
-  //   height: 1.2em;
-  //   vertical-align: top;
-  //   background-color: ${Blue[500]};'''
-  // );
+  EditableText({
+    String key,
+    this.value,
+    this.focused,
+    this.style,
+    this.cursorColor}) : super(key: key, stateful: true);
 
   EditableString value;
   bool focused;
+  TextStyle style;
+  Color cursorColor;
 
   void syncFields(EditableText source) {
     value = source.value;
     focused = source.focused;
+    style = source.style;
+    cursorColor = source.cursorColor;
   }
 
   Timer _cursorTimer;
   bool _showCursor = false;
 
   void _cursorTick(Timer timer) {
     setState(() {
       _showCursor = !_showCursor;
     });
   }
 
   void _startCursorTimer() {
     _showCursor = true;
     _cursorTimer = new Timer.periodic(
-        new Duration(milliseconds: 500), _cursorTick);
+      new Duration(milliseconds: _kCursorBlinkPeriod), _cursorTick);
   }
 
   void didUnmount() {
     if (_cursorTimer != null)
       _stopCursorTimer();
     super.didUnmount();
   }
 
   void _stopCursorTimer() {
     _cursorTimer.cancel();
     _cursorTimer = null;
     _showCursor = false;
   }
 
+  void _paintCursor(sky.Canvas canvas, Size size) {
+    Rect cursorRect =  new Rect.fromLTWH(
+      _kCursorGap, 
+      -_kCursorHeightOffset,
+      _kCursorWidth,
+      style.fontSize + 2 * _kCursorHeightOffset
+    );
+    canvas.drawRect(cursorRect, new Paint()..color = cursorColor);

[abarth-chromium, 2015/06/29 23:33:08]

Interesting that you're drawing outside the bounds here.

[hansmuller, 2015/06/29 23:56:34]

The cursor extends _kCursorHeightOffset above and below the line.

The Material spec doesn't define this value (as far as I can tell) but that's
what the screenshots looked like to me.

+  }
+
+  Widget _buildCursor() {
+    return new Container(
+      height: style.fontSize,
+      width: _kCursorGap + _kCursorWidth,
+      child: new CustomPaint(callback: _paintCursor)
+    );
+  }
+
   Widget build() {
-    if (focused && _cursorTimer == null)
+    assert(style != null);
+
+    if (focused == true && _cursorTimer == null)

[abarth-chromium, 2015/06/29 23:33:08]

Why compare against true?  That shouldn't be needed.

[hansmuller, 2015/06/29 23:56:34]

I've asserted that the focused: must be set and removed this test.

       _startCursorTimer();
-    else if (!focused && _cursorTimer != null)
+    else if (focused != true && _cursorTimer != null)

[abarth-chromium, 2015/06/29 23:33:08]

ditto

[hansmuller, 2015/06/29 23:56:34]

Done.

       _stopCursorTimer();
 
     if (!value.composing.isValid) {
-      return new Text(value.text);
+      return new Text(value.text, style: style);
     }
 
-    return new StyledText(elements: [
-      const TextStyle(),
+    TextStyle composingStyle = style.merge(const TextStyle(decoration: underline));
+    StyledText text = new StyledText(elements: [
+      style,
       value.textBefore(value.composing),
-      [const TextStyle(decoration: underline), value.textInside(value.composing)],
+      [composingStyle, value.textInside(value.composing)],
       value.textAfter(value.composing)
     ]);
+
+    return _showCursor ? new Flex([text, _buildCursor()]) : text;

[abarth-chromium, 2015/06/29 23:33:08]

It would be more efficient to always build the render tree structure for the
cursor by skip painting it when _showCursor is false.  Otherwise we're going to
cause layouts when the cursor appears and disappears.

[hansmuller, 2015/06/29 23:56:34]

Done.

   }
 }