Paint selection and caret, plus some cleanups

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

@@ -9,13 +9,17 @@ class CaretPainter {
   static const double _kCaretHeightOffset = 2.0; // pixels
   static const double _kCaretWidth = 1.0; // pixels
 
+  static Rect buildPrototype(double lineHeight) {
+    return new Rect.fromLTWH(
+        0.0, 0.0, _kCaretWidth, lineHeight - _kCaretHeightOffset);
+  }
+
   Rect _prototype;
 
   Rect get prototype => _prototype;
 
   void layout(double lineHeight) {
-    _prototype = new Rect.fromLTWH(
-        0.0, 0.0, _kCaretWidth, lineHeight - _kCaretHeightOffset);
+    _prototype = buildPrototype(lineHeight);
   }
 
   void paint(Canvas canvas, Offset offset) {

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

@@ -8,6 +8,7 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
+import 'caret.dart';
 import 'render_context.dart';
 
 class EditableBox extends SingleChildRenderObjectWidget {
@@ -29,7 +30,7 @@ class EditableBox extends SingleChildRenderObjectWidget {
   final Color selectionColor;
 
   @override
-  RenderObject createRenderObject(BuildContext context) {
+  RenderEditableProxyBox createRenderObject(BuildContext context) {
     return new RenderEditableProxyBox(
       node: node,
       layerLink: layerLink,
@@ -39,6 +40,18 @@ class EditableBox extends SingleChildRenderObjectWidget {
       selectionColor: selectionColor,
     );
   }
+
+  @override
+  void updateRenderObject(
+      BuildContext context, RenderEditableProxyBox renderObject) {
+    renderObject
+      ..node = node
+      ..layerLink = layerLink
+      ..renderContext = renderContext
+      ..showCursor = showCursor
+      ..selection = selection
+      ..selectionColor = selectionColor;
+  }
 }
 
 class RenderEditableProxyBox extends RenderBox
@@ -114,8 +127,6 @@ class RenderEditableProxyBox extends RenderBox
     markNeedsPaint();
   }
 
-  double get preferredLineHeight => child.preferredLineHeight;
-
   /// Returns `true` if current selection is collapsed, located within
   /// this paragraph and is visible according to tick timer.
   bool get isCaretVisible {
@@ -153,12 +164,11 @@ class RenderEditableProxyBox extends RenderBox
     super.detach();
   }
 
-  /// Subclasses must call super as the last statement when overriding this
-  /// method.
   @override
   @mustCallSuper
   void performLayout() {
     super.performLayout();
+    _caretPainter.layout(preferredLineHeight);
     // Indicate to render context that this object can be used by other
     // layers (selection overlay, for instance).
     _renderContext.markDirty(this, false);
@@ -171,6 +181,30 @@ class RenderEditableProxyBox extends RenderBox
     super.markNeedsLayout();
   }
 
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    if (selectionOrder == SelectionOrder.background && isSelectionVisible) {
+      paintSelection(context, offset, selection, selectionColor);
+    }
+    super.paint(context, offset);
+    if (selectionOrder == SelectionOrder.foreground && isSelectionVisible) {
+      paintSelection(context, offset, selection, selectionColor);
+    }
+    if (isCaretVisible) {
+      _paintCaret(context, offset);
+    }
+  }
+
+  final CaretPainter _caretPainter = new CaretPainter();
+
+  void _paintCaret(PaintingContext context, Offset offset) {
+    final TextPosition caret = new TextPosition(
+      offset: _selection.extentOffset - node.documentOffset,
+    );
+    Offset caretOffset = getOffsetForCaret(caret, _caretPainter.prototype);
+    _caretPainter.paint(context.canvas, caretOffset + offset);
+  }
+
   @override
   bool hitTestSelf(Offset position) => true;
 
@@ -183,6 +217,25 @@ class RenderEditableProxyBox extends RenderBox
     return false;
   }
 
+  //
+  // Proxy methods
+  //
+
+  @override
+  double get preferredLineHeight => child.preferredLineHeight;
+
+  @override
+  SelectionOrder get selectionOrder => child.selectionOrder;
+
+  @override
+  void paintSelection(PaintingContext context, Offset offset,
+          TextSelection selection, Color selectionColor) =>
+      child.paintSelection(context, offset, selection, selectionColor);
+
+  @override
+  Offset getOffsetForCaret(TextPosition position, Rect caretPrototype) =>
+      child.getOffsetForCaret(position, caretPrototype);
+
   @override
   TextSelection getLocalSelection(TextSelection documentSelection) =>
       child.getLocalSelection(documentSelection);
@@ -191,9 +244,8 @@ class RenderEditableProxyBox extends RenderBox
       child.intersectsWithSelection(selection);
 
   @override
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-          {bool isLocal: false}) =>
-      child.getEndpointsForSelection(selection, isLocal: isLocal);
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection) =>
+      child.getEndpointsForSelection(selection);
 
   @override
   ui.TextPosition getPositionForOffset(ui.Offset offset) =>
@@ -204,13 +256,20 @@ class RenderEditableProxyBox extends RenderBox
       child.getWordBoundary(position);
 }
 
+enum SelectionOrder {
+  /// Background selection is painted before primary content of editable box.
+  background,
+
+  /// Foreground selection is painted after primary content of editable box.
+  foreground,
+}
+
 abstract class RenderEditableBox extends RenderBox {
   Node get node;
   double get preferredLineHeight;
 
   TextPosition getPositionForOffset(Offset offset);
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-      {bool isLocal: false});
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection);
 
   /// Returns the text range of the word at the given offset. Characters not
   /// part of a word, such as spaces, symbols, and punctuation, have word breaks
@@ -223,6 +282,14 @@ abstract class RenderEditableBox extends RenderBox {
   /// Valid only after [layout].
   TextRange getWordBoundary(TextPosition position);
 
+  /// Paint order of selection in this editable box.
+  SelectionOrder get selectionOrder;
+
+  void paintSelection(PaintingContext context, Offset offset,
+      TextSelection selection, Color selectionColor);
+
+  Offset getOffsetForCaret(TextPosition position, Rect caretPrototype);
+
   /// Returns part of [documentSelection] local to this box. May return
   /// `null`.
   ///

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

@@ -46,8 +46,12 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
     _node = value;
   }
 
+  @override
   double get preferredLineHeight => size.height;
 
+  @override
+  SelectionOrder get selectionOrder => SelectionOrder.foreground;
+
   @override
   TextSelection getLocalSelection(TextSelection documentSelection) {
     if (!intersectsWithSelection(documentSelection)) return null;
@@ -60,43 +64,28 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
     return documentSelection.copyWith(baseOffset: base, extentOffset: extent);
   }
 
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-      {bool isLocal: false}) {
-    TextSelection local = isLocal ? selection : getLocalSelection(selection);
+  @override
+  List<TextBox> getEndpointsForSelection(TextSelection selection) {
+    TextSelection local = getLocalSelection(selection);
     if (local.isCollapsed) {
       return [
-        new ui.TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
+        new TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
       ];
     }
 
     return [
-      new ui.TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
-      new ui.TextBox.fromLTRBD(
+      new TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
+      new TextBox.fromLTRBD(
           size.width, 0.0, size.width, size.height, TextDirection.ltr),
     ];
   }
 
   @override
-  void performLayout() {
-    super.performLayout();
-//    _prototypePainter.layout(
-//        minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
-//    _caretPainter.layout(_prototypePainter.height);
+  TextPosition getPositionForOffset(Offset offset) {
+    return new TextPosition(offset: node.documentOffset);
   }
 
   @override
-  void paint(PaintingContext context, Offset offset) {
-//    if (_isSelectionVisible) _paintSelection(context, offset);
-    super.paint(context, offset);
-//    if (_isCaretVisible) _paintCaret(context, offset);
-  }
-
-  @override
-  ui.TextPosition getPositionForOffset(ui.Offset offset) {
-    return new ui.TextPosition(offset: node.documentOffset);
-  }
-
-  /// Returns `true` if this paragraph intersects with document [selection].
   bool intersectsWithSelection(TextSelection selection) {
     final int base = node.documentOffset;
     final int extent = base + node.length;
@@ -107,4 +96,21 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   TextRange getWordBoundary(ui.TextPosition position) {
     return new TextRange(start: position.offset, end: position.offset + 1);
   }
+
+  @override
+  ui.Offset getOffsetForCaret(
+      ui.TextPosition position, ui.Rect caretPrototype) {
+    final pos = position.offset - node.documentOffset;
+    Offset caretOffset = Offset.zero;
+    if (pos == 1) {
+      caretOffset = caretOffset + new Offset(size.width - 1.0, 0.0);
+    }
+    return caretOffset;
+  }
+
+  @override
+  void paintSelection(PaintingContext context, ui.Offset offset,
+      TextSelection selection, ui.Color selectionColor) {
+    // TODO: implement paintSelection
+  }
 }

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

@@ -75,6 +75,9 @@ class RenderEditableParagraph extends RenderParagraph
   @override
   double get preferredLineHeight => _prototypePainter.height;
 
+  @override
+  SelectionOrder get selectionOrder => SelectionOrder.background;
+
   @override
   TextSelection getLocalSelection(TextSelection documentSelection) {
     if (!intersectsWithSelection(documentSelection)) return null;
@@ -89,19 +92,18 @@ class RenderEditableParagraph extends RenderParagraph
 
   // This method works around some issues in getBoxesForSelection and handles
   // edge-case with our TextSpan objects not having last line-break character.
-  // Wait for https://github.com/flutter/flutter/issues/16418 to be resolved.
   @override
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-      {bool isLocal: false}) {
-    TextSelection local = isLocal ? selection : getLocalSelection(selection);
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection) {
+    TextSelection local = getLocalSelection(selection);
     if (local.isCollapsed) {
-      final offset = getOffsetForCaret(local.extent, _caretPainter.prototype);
+      final caret = CaretPainter.buildPrototype(preferredLineHeight);
+      final offset = getOffsetForCaret(local.extent, caret);
       return [
         new ui.TextBox.fromLTRBD(
           offset.dx,
           offset.dy,
           offset.dx,
-          offset.dy + _caretPainter.prototype.height,
+          offset.dy + caret.height,
           TextDirection.ltr,
         )
       ];
@@ -158,46 +160,36 @@ class RenderEditableParagraph extends RenderParagraph
     super.performLayout();
     _prototypePainter.layout(
         minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
-    _caretPainter.layout(_prototypePainter.height);
   }
 
   @override
   void paint(PaintingContext context, Offset offset) {
-//    if (isSelectionVisible) _paintSelection(context, offset);
     super.paint(context, offset);
-//    if (isCaretVisible) _paintCaret(context, offset);
   }
 
-  //
-  // Private members
-  //
-
   final TextPainter _prototypePainter;
-  final CaretPainter _caretPainter = new CaretPainter();
   List<ui.TextBox> _selectionRects;
 
   /// Returns `true` if this paragraph intersects with document [selection].
+  @override
   bool intersectsWithSelection(TextSelection selection) {
     final int base = node.documentOffset;
     final int extent = base + node.length;
     return base <= selection.extentOffset && selection.baseOffset <= extent;
   }
 
-//
-//  void _paintCaret(PaintingContext context, Offset offset) {
-//    final TextPosition caret = new TextPosition(
-//      offset: _selection.extentOffset - node.documentOffset,
-//    );
-//    Offset caretOffset = getOffsetForCaret(caret, _caretPainter.prototype);
-//    _caretPainter.paint(context.canvas, caretOffset + offset);
-//  }
-//
+  TextSelection _lastPaintedSelection;
+  @override
   void paintSelection(PaintingContext context, Offset offset,
       TextSelection selection, Color selectionColor) {
-    // TODO: this could be improved by painting additional box for line-break characters.
+    if (_lastPaintedSelection != selection) {
+      _selectionRects = null;
+    }
     _selectionRects ??= getBoxesForSelection(getLocalSelection(selection));
     final Paint paint = new Paint()..color = selectionColor;
-    for (ui.TextBox box in _selectionRects)
+    for (ui.TextBox box in _selectionRects) {
       context.canvas.drawRect(box.toRect().shift(offset), paint);
+    }
+    _lastPaintedSelection = selection;
   }
 }

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

@@ -48,9 +48,12 @@ class RenderHorizontalRule extends RenderEditableBox {
   @override
   double get preferredLineHeight => size.height;
 
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-      {bool isLocal: false}) {
-    TextSelection local = isLocal ? selection : getLocalSelection(selection);
+  @override
+  SelectionOrder get selectionOrder => SelectionOrder.background;
+
+  @override
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection) {
+    TextSelection local =  getLocalSelection(selection);
     if (local.isCollapsed) {
       return [
         new ui.TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
@@ -68,16 +71,13 @@ class RenderHorizontalRule extends RenderEditableBox {
   void performLayout() {
     assert(constraints.hasBoundedWidth);
     size = new Size(constraints.maxWidth, _kHeight);
-//    _caretPainter.layout(height);
   }
 
   @override
   void paint(PaintingContext context, Offset offset) {
-//    if (isSelectionVisible) _paintSelection(context, offset);
     final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kThickness);
     final paint = new ui.Paint()..color = Colors.grey.shade200;
     context.canvas.drawRect(rect.shift(offset), paint);
-//    if (isCaretVisible) _paintCaret(context, offset);
   }
 
   @override
@@ -86,29 +86,25 @@ class RenderHorizontalRule extends RenderEditableBox {
   }
 
   @override
-  TextRange getWordBoundary(ui.TextPosition position) {
+  TextRange getWordBoundary(TextPosition position) {
     return new TextRange(start: position.offset, end: position.offset + 1);
   }
 
-  //
-  // Private members
-  //
-//
-//  final CaretPainter _caretPainter = new CaretPainter();
-//
-//  void _paintCaret(PaintingContext context, Offset offset) {
-//    final pos = selection.extentOffset - node.documentOffset;
-//    Offset caretOffset = Offset.zero;
-//    if (pos == 1) {
-//      caretOffset = caretOffset + new Offset(size.width - 1.0, 0.0);
-//    }
-//    _caretPainter.paint(context.canvas, caretOffset + offset);
-//  }
-//
-//  void _paintSelection(PaintingContext context, Offset offset) {
-//    assert(isSelectionVisible);
-//    final Paint paint = new Paint()..color = selectionColor;
-//    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kHeight);
-//    context.canvas.drawRect(rect.shift(offset), paint);
-//  }
+  @override
+  void paintSelection(PaintingContext context, Offset offset,
+      TextSelection selection, Color selectionColor) {
+    final Paint paint = new Paint()..color = selectionColor;
+    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kHeight);
+    context.canvas.drawRect(rect.shift(offset), paint);
+  }
+
+  @override
+  Offset getOffsetForCaret(ui.TextPosition position, ui.Rect caretPrototype) {
+    final pos = position.offset - node.documentOffset;
+    Offset caretOffset = Offset.zero;
+    if (pos == 1) {
+      caretOffset = caretOffset + new Offset(size.width - 1.0, 0.0);
+    }
+    return caretOffset;
+  }
 }