Merge pull request #76 from memspace/cursor-color

Allow customizing cursor color

packages/zefyr/CHANGELOG.md

@@ -1,6 +1,7 @@
-## Unreleased
+## 0.3.1
 
 - Fixed autofocus not being triggered when set to `true` for the first time.
+- Allow customizing cursor color via ZefyrTheme.
 
 ## 0.3.0
 

packages/zefyr/example/lib/src/full_page.dart

@@ -43,6 +43,7 @@ class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
   @override
   Widget build(BuildContext context) {
     final theme = new ZefyrThemeData(
+      cursorColor: Colors.blue,
       toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
         color: Colors.grey.shade800,
         toggleColor: Colors.grey.shade900,

packages/zefyr/lib/src/widgets/caret.dart

@@ -5,7 +5,8 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 
-class CaretPainter {
+/// Helper class responsible for cursor layout and painting.
+class CursorPainter {
   static const double _kCaretHeightOffset = 2.0; // pixels
   static const double _kCaretWidth = 1.0; // pixels
 
@@ -14,16 +15,27 @@ class CaretPainter {
         0.0, 0.0, _kCaretWidth, lineHeight - _kCaretHeightOffset);
   }
 
+  CursorPainter(Color color)
+      : assert(color != null),
+        _color = color;
+
   Rect _prototype;
 
   Rect get prototype => _prototype;
 
+  Color _color;
+  Color get color => _color;
+  set color(Color value) {
+    assert(value != null);
+    _color = value;
+  }
+
   void layout(double lineHeight) {
     _prototype = buildPrototype(lineHeight);
   }
 
   void paint(Canvas canvas, Offset offset) {
-    final Paint paint = new Paint()..color = Colors.black;
+    final Paint paint = new Paint()..color = _color;
     final Rect caretRect = _prototype.shift(offset);
     canvas.drawRect(caretRect, paint);
   }

packages/zefyr/lib/src/widgets/common.dart

@@ -65,6 +65,7 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
         showCursor: editable.showCursor,
         selection: editable.selection,
         selectionColor: theme.selectionColor,
+        cursorColor: theme.cursorColor,
       );
     }
 
@@ -153,6 +154,7 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
         showCursor: editable.showCursor,
         selection: editable.selection,
         selectionColor: theme.selectionColor,
+        cursorColor: theme.cursorColor,
       );
     } else if (embed.type == EmbedType.image) {
       return new EditableBox(
@@ -163,6 +165,7 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
         showCursor: editable.showCursor,
         selection: editable.selection,
         selectionColor: theme.selectionColor,
+        cursorColor: theme.cursorColor,
       );
     } else {
       throw new UnimplementedError('Unimplemented embed type ${embed.type}');

packages/zefyr/lib/src/widgets/editable_box.dart

@@ -20,6 +20,7 @@ class EditableBox extends SingleChildRenderObjectWidget {
     @required this.showCursor,
     @required this.selection,
     @required this.selectionColor,
+    @required this.cursorColor,
   }) : super(child: child);
 
   final ContainerNode node;
@@ -28,6 +29,7 @@ class EditableBox extends SingleChildRenderObjectWidget {
   final ValueNotifier<bool> showCursor;
   final TextSelection selection;
   final Color selectionColor;
+  final Color cursorColor;
 
   @override
   RenderEditableProxyBox createRenderObject(BuildContext context) {
@@ -38,6 +40,7 @@ class EditableBox extends SingleChildRenderObjectWidget {
       showCursor: showCursor,
       selection: selection,
       selectionColor: selectionColor,
+      cursorColor: cursorColor,
     );
   }
 
@@ -50,7 +53,8 @@ class EditableBox extends SingleChildRenderObjectWidget {
       ..renderContext = renderContext
       ..showCursor = showCursor
       ..selection = selection
-      ..selectionColor = selectionColor;
+      ..selectionColor = selectionColor
+      ..cursorColor = cursorColor;
   }
 }
 
@@ -67,6 +71,7 @@ class RenderEditableProxyBox extends RenderBox
     @required ValueNotifier<bool> showCursor,
     @required TextSelection selection,
     @required Color selectionColor,
+    @required Color cursorColor,
   })  : _node = node,
         _layerLink = layerLink,
         _renderContext = renderContext,
@@ -75,6 +80,16 @@ class RenderEditableProxyBox extends RenderBox
         _selectionColor = selectionColor,
         super() {
     this.child = child;
+    _cursorPainter = CursorPainter(cursorColor);
+  }
+
+  CursorPainter _cursorPainter;
+
+  set cursorColor(Color value) {
+    if (_cursorPainter.color != value) {
+      _cursorPainter.color = value;
+      markNeedsPaint();
+    }
   }
 
   bool _isDirty = true;
@@ -171,7 +186,7 @@ class RenderEditableProxyBox extends RenderBox
   @mustCallSuper
   void performLayout() {
     super.performLayout();
-    _caretPainter.layout(preferredLineHeight);
+    _cursorPainter.layout(preferredLineHeight);
     // Indicate to render context that this object can be used by other
     // layers (selection overlay, for instance).
     _isDirty = false;
@@ -196,16 +211,14 @@ class RenderEditableProxyBox extends RenderBox
       paintSelection(context, offset, selection, selectionColor);
     }
     if (isCaretVisible) {
-      _paintCaret(context, offset);
+      _paintCursor(context, offset);
     }
   }
 
-  final CaretPainter _caretPainter = new CaretPainter();
-
-  void _paintCaret(PaintingContext context, Offset offset) {
+  void _paintCursor(PaintingContext context, Offset offset) {
     Offset caretOffset =
-        getOffsetForCaret(_selection.extent, _caretPainter.prototype);
-    _caretPainter.paint(context.canvas, caretOffset + offset);
+        getOffsetForCaret(_selection.extent, _cursorPainter.prototype);
+    _cursorPainter.paint(context.canvas, caretOffset + offset);
   }
 
   @override

packages/zefyr/lib/src/widgets/rich_text.dart

@@ -127,7 +127,7 @@ class RenderEditableParagraph extends RenderParagraph
   List<ui.TextBox> getEndpointsForSelection(TextSelection selection) {
     TextSelection local = getLocalSelection(selection);
     if (local.isCollapsed) {
-      final caret = CaretPainter.buildPrototype(preferredLineHeight);
+      final caret = CursorPainter.buildPrototype(preferredLineHeight);
       final offset = getOffsetForCaret(local.extent, caret);
       return [
         new ui.TextBox.fromLTRBD(

packages/zefyr/lib/src/widgets/theme.dart

@@ -60,6 +60,7 @@ class ZefyrThemeData {
   final HeadingTheme headingTheme;
   final BlockTheme blockTheme;
   final Color selectionColor;
+  final Color cursorColor;
 
   /// Size of indentation for blocks.
   final double indentSize;
@@ -88,6 +89,7 @@ class ZefyrThemeData {
       headingTheme: new HeadingTheme.fallback(),
       blockTheme: new BlockTheme.fallback(),
       selectionColor: Colors.lightBlueAccent.shade100,
+      cursorColor: Colors.black,
       indentSize: 16.0,
       toolbarTheme: new ZefyrToolbarTheme.fallback(context),
     );
@@ -101,6 +103,7 @@ class ZefyrThemeData {
     this.headingTheme,
     this.blockTheme,
     this.selectionColor,
+    this.cursorColor,
     this.indentSize,
     this.toolbarTheme,
   });
@@ -114,6 +117,7 @@ class ZefyrThemeData {
     HeadingTheme headingTheme,
     BlockTheme blockTheme,
     Color selectionColor,
+    Color cursorColor,
     double indentSize,
     ZefyrToolbarTheme toolbarTheme,
   }) {
@@ -125,6 +129,7 @@ class ZefyrThemeData {
       headingTheme: headingTheme ?? this.headingTheme,
       blockTheme: blockTheme ?? this.blockTheme,
       selectionColor: selectionColor ?? this.selectionColor,
+      cursorColor: cursorColor ?? this.cursorColor,
       indentSize: indentSize ?? this.indentSize,
       toolbarTheme: toolbarTheme ?? this.toolbarTheme,
     );
@@ -139,6 +144,7 @@ class ZefyrThemeData {
       headingTheme: other.headingTheme,
       blockTheme: other.blockTheme,
       selectionColor: other.selectionColor,
+      cursorColor: other.cursorColor,
       indentSize: other.indentSize,
       toolbarTheme: other.toolbarTheme,
     );

packages/zefyr/test/painting/caret_painter_test.dart

@@ -3,18 +3,19 @@
 // BSD-style license that can be found in the LICENSE file.
 import 'dart:ui';
 
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:zefyr/src/widgets/caret.dart';
 
 void main() {
-  group('$CaretPainter', () {
+  group('$CursorPainter', () {
     test('prototype is null before layout', () {
-      var painter = new CaretPainter();
+      var painter = new CursorPainter(Colors.black);
       expect(painter.prototype, isNull);
     });
 
     test('prototype is set after layout', () {
-      var painter = new CaretPainter();
+      var painter = new CursorPainter(Colors.black);
       painter.layout(16.0);
       expect(painter.prototype, new Rect.fromLTWH(0.0, 0.0, 1.0, 14.0));
     });

packages/zefyr/test/rendering/render_editable_proxy_box_test.dart

@@ -36,6 +36,7 @@ void main() {
         showCursor: ValueNotifier<bool>(true),
         selection: TextSelection.collapsed(offset: 0),
         selectionColor: Color(0),
+        cursorColor: Color(0),
       );
     });
 

packages/zefyr/test/widgets/editable_text_scope_test.dart

@@ -103,5 +103,6 @@ RenderEditableProxyBox createParagraph(ZefyrRenderContext context) {
     showCursor: showCursor,
     selection: selection,
     selectionColor: selectionColor,
+    cursorColor: Color(0),
   );
 }

packages/zefyr/test/widgets/render_context_test.dart

@@ -85,5 +85,6 @@ RenderEditableProxyBox createParagraph(ZefyrRenderContext viewport) {
     showCursor: showCursor,
     selection: selection,
     selectionColor: selectionColor,
+    cursorColor: Color(0),
   );
 }