Skip to content

F
Front-End
Unverified Commit 46878d84 authored by jslavitz's avatar jslavitz Committed by GitHub
Browse files
Options

Adds support for floating cursor (#24761) 

* Adds support for floating cursor!
parent 95b01247
Hide whitespace changes
Inline Side-by-side
Showing with 612 additions and 18 deletions
packages/flutter/lib/src/cupertino/text_field.dart
View file @ 46878d84
......@@ -672,6 +672,7 @@ class _CupertinoTextFieldState extends State<CupertinoTextField> with AutomaticK
cursorWidth: widget.cursorWidth,
cursorRadius: widget.cursorRadius,
cursorColor: widget.cursorColor,
backgroundCursorColor: CupertinoColors.inactiveGray,
scrollPadding: widget.scrollPadding,
keyboardAppearance: keyboardAppearance,
),
......
packages/flutter/lib/src/material/text_field.dart
View file @ 46878d84
......@@ -613,6 +613,7 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
cursorWidth: widget.cursorWidth,
cursorRadius: widget.cursorRadius,
cursorColor: widget.cursorColor ?? Theme.of(context).cursorColor,
backgroundCursorColor: CupertinoColors.inactiveGray,
scrollPadding: widget.scrollPadding,
keyboardAppearance: keyboardAppearance,
enableInteractiveSelection: widget.enableInteractiveSelection,
......
packages/flutter/lib/src/rendering/editable.dart
View file @ 46878d84
......@@ -5,7 +5,7 @@
//ignore: Remove this once Google catches up with dev.4 Dart.
import 'dart:async';
import 'dart:math' as math;
import 'dart:ui' as ui show TextBox;
import 'dart:ui' as ui show TextBox, lerpDouble;
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
......@@ -19,6 +19,13 @@ import 'viewport_offset.dart';
const double _kCaretGap = 1.0; // pixels
const double _kCaretHeightOffset = 2.0; // pixels
// The additional size on the x and y axis with which to expand the prototype
// cursor to render the floating cursor in pixels.
const Offset _kFloatingCaretSizeIncrease = Offset(0.5, 2.0);
// The corner radius of the floating cursor in pixels.
const double _kFloatingCaretRadius = 1.0;
/// Signature for the callback that reports when the user changes the selection
/// (including the cursor location).
///
......@@ -129,6 +136,7 @@ class RenderEditable extends RenderBox {
@required TextDirection textDirection,
TextAlign textAlign = TextAlign.start,
Color cursorColor,
Color backgroundCursorColor,
ValueNotifier<bool> showCursor,
bool hasFocus,
int maxLines = 1,
......@@ -143,6 +151,7 @@ class RenderEditable extends RenderBox {
Locale locale,
double cursorWidth = 1.0,
Radius cursorRadius,
EdgeInsets floatingCursorAddedMargin = const EdgeInsets.fromLTRB(3, 6, 3, 6),
bool enableInteractiveSelection = true,
@required this.textSelectionDelegate,
}) : assert(textAlign != null),
......@@ -162,6 +171,7 @@ class RenderEditable extends RenderBox {
locale: locale,
),
_cursorColor = cursorColor,
_backgroundCursorColor = backgroundCursorColor,
_showCursor = showCursor ?? ValueNotifier<bool>(false),
_hasFocus = hasFocus ?? false,
_maxLines = maxLines,
......@@ -170,6 +180,7 @@ class RenderEditable extends RenderBox {
_offset = offset,
_cursorWidth = cursorWidth,
_cursorRadius = cursorRadius,
_floatingCursorAddedMargin = floatingCursorAddedMargin,
_enableInteractiveSelection = enableInteractiveSelection,
_obscureText = obscureText {
assert(_showCursor != null);
......@@ -566,6 +577,19 @@ class RenderEditable extends RenderBox {
markNeedsPaint();
}
/// The color to use when painting the cursor aligned to the text while
/// rendering the floating cursor.
///
/// The default is light grey.
Color get backgroundCursorColor => _backgroundCursorColor;
Color _backgroundCursorColor;
set backgroundCursorColor(Color value) {
if (backgroundCursorColor == value)
return;
_backgroundCursorColor = value;
markNeedsPaint();
}
/// Whether to paint the cursor.
ValueNotifier<bool> get showCursor => _showCursor;
ValueNotifier<bool> _showCursor;
......@@ -701,6 +725,23 @@ class RenderEditable extends RenderBox {
markNeedsPaint();
}
/// The padding applied to text field. Used to determine the bounds when
/// moving the floating cursor.
///
/// Defaults to a padding with left, right set to 3 and top, bottom to 6.
EdgeInsets get floatingCursorAddedMargin => _floatingCursorAddedMargin;
EdgeInsets _floatingCursorAddedMargin;
set floatingCursorAddedMargin(EdgeInsets value) {
if (_floatingCursorAddedMargin == value)
return;
_floatingCursorAddedMargin = value;
markNeedsPaint();
}
bool _floatingCursorOn = false;
Offset _floatingCursorOffset;
TextPosition _floatingCursorTextPosition;
/// If false, [describeSemanticsConfiguration] will not set the
/// configuration's cursor motion or set selection callbacks.
///
......@@ -1205,11 +1246,13 @@ class RenderEditable extends RenderBox {
offset.applyContentDimensions(0.0, _maxScrollExtent);
}
void _paintCaret(Canvas canvas, Offset effectiveOffset) {
void _paintCaret(Canvas canvas, Offset effectiveOffset, TextPosition textPosition) {
assert(_textLayoutLastWidth == constraints.maxWidth);
final Offset caretOffset = _textPainter.getOffsetForCaret(_selection.extent, _caretPrototype);
final Offset caretOffset = _textPainter.getOffsetForCaret(textPosition, _caretPrototype);
// If the floating cursor is enabled, the text cursor's color is [backgroundCursorColor] while
// the floating cursor's color is _cursorColor;
final Paint paint = Paint()
..color = _cursorColor;
..color = _floatingCursorOn ? backgroundCursorColor : _cursorColor;
final Rect caretRect = _caretPrototype.shift(caretOffset + effectiveOffset);
......@@ -1227,6 +1270,112 @@ class RenderEditable extends RenderBox {
}
}
/// Sets the screen position of the floating cursor and the text position
/// closest to the cursor.
void setFloatingCursor(FloatingCursorDragState state, Offset boundedOffset, TextPosition lastTextPosition, { double resetLerpValue }) {
assert(state != null);
assert(boundedOffset != null);
assert(lastTextPosition != null);
if (state == FloatingCursorDragState.Start) {
_relativeOrigin = const Offset(0, 0);
_previousOffset = null;
_resetOriginOnBottom = false;
_resetOriginOnTop = false;
_resetOriginOnRight = false;
_resetOriginOnBottom = false;
}
_floatingCursorOn = state != FloatingCursorDragState.End;
_resetFloatingCursorAnimationValue = resetLerpValue;
if(_floatingCursorOn) {
_floatingCursorOffset = boundedOffset;
_floatingCursorTextPosition = lastTextPosition;
}
markNeedsPaint();
}
void _paintFloatingCaret(Canvas canvas, Offset effectiveOffset) {
assert(_textLayoutLastWidth == constraints.maxWidth);
assert(_floatingCursorOn);
final Paint paint = Paint()..color = _cursorColor;
double sizeAdjustmentX = _kFloatingCaretSizeIncrease.dx;
double sizeAdjustmentY = _kFloatingCaretSizeIncrease.dy;
if(_resetFloatingCursorAnimationValue != null) {
sizeAdjustmentX = ui.lerpDouble(sizeAdjustmentX, 0, _resetFloatingCursorAnimationValue);
sizeAdjustmentY = ui.lerpDouble(sizeAdjustmentY, 0, _resetFloatingCursorAnimationValue);
}
final Rect floatingCaretPrototype = Rect.fromLTRB(_caretPrototype.left - sizeAdjustmentX,
_caretPrototype.top - sizeAdjustmentY,
_caretPrototype.right + sizeAdjustmentX,
_caretPrototype.bottom + sizeAdjustmentY);
final Rect caretRect = floatingCaretPrototype.shift(effectiveOffset);
const Radius floatingCursorRadius = Radius.circular(_kFloatingCaretRadius);
final RRect caretRRect = RRect.fromRectAndRadius(caretRect, floatingCursorRadius);
canvas.drawRRect(caretRRect, paint);
}
// The relative origin in relation to the distance the user has theoretically
// dragged the floating cursor offscreen. This value is used to account for the
// difference in the rendering position and the raw offset value.
Offset _relativeOrigin = const Offset(0, 0);
Offset _previousOffset;
bool _resetOriginOnLeft = false;
bool _resetOriginOnRight = false;
bool _resetOriginOnTop = false;
bool _resetOriginOnBottom = false;
double _resetFloatingCursorAnimationValue;
/// Returns the position within the text field closest to the raw cursor offset.
Offset calculateBoundedFloatingCursorOffset(Offset rawCursorOffset) {
Offset deltaPosition = const Offset(0, 0);
final double topBound = -floatingCursorAddedMargin.top;
final double bottomBound = _textPainter.height - preferredLineHeight + floatingCursorAddedMargin.bottom;
final double leftBound = -floatingCursorAddedMargin.left;
final double rightBound = _textPainter.width + floatingCursorAddedMargin.right;
if (_previousOffset != null)
deltaPosition = rawCursorOffset - _previousOffset;
// If the raw cursor offset has gone off an edge, we want to reset the relative
// origin of the dragging when the user drags back into the field.
if (_resetOriginOnLeft && deltaPosition.dx > 0) {
_relativeOrigin = Offset(rawCursorOffset.dx - leftBound, _relativeOrigin.dy);
_resetOriginOnLeft = false;
} else if (_resetOriginOnRight && deltaPosition.dx < 0) {
_relativeOrigin = Offset(rawCursorOffset.dx - rightBound, _relativeOrigin.dy);
_resetOriginOnRight = false;
}
if (_resetOriginOnTop && deltaPosition.dy > 0) {
_relativeOrigin = Offset(_relativeOrigin.dx, rawCursorOffset.dy - topBound);
_resetOriginOnTop = false;
} else if (_resetOriginOnBottom && deltaPosition.dy < 0) {
_relativeOrigin = Offset(_relativeOrigin.dx, rawCursorOffset.dy - bottomBound);
_resetOriginOnBottom = false;
}
final double currentX = rawCursorOffset.dx - _relativeOrigin.dx;
final double currentY = rawCursorOffset.dy - _relativeOrigin.dy;
final double adjustedX = math.min(math.max(currentX, leftBound), rightBound);
final double adjustedY = math.min(math.max(currentY, topBound), bottomBound);
final Offset adjustedOffset = Offset(adjustedX, adjustedY);
if (currentX < leftBound && deltaPosition.dx < 0) {
_resetOriginOnLeft = true;
} else if(currentX > rightBound && deltaPosition.dx > 0)
_resetOriginOnRight = true;
if (currentY < topBound && deltaPosition.dy < 0)
_resetOriginOnTop = true;
else if (currentY > bottomBound && deltaPosition.dy > 0)
_resetOriginOnBottom = true;
_previousOffset = rawCursorOffset;
return adjustedOffset;
}
void _paintSelection(Canvas canvas, Offset effectiveOffset) {
assert(_textLayoutLastWidth == constraints.maxWidth);
assert(_selectionRects != null);
......@@ -1238,17 +1387,20 @@ class RenderEditable extends RenderBox {
void _paintContents(PaintingContext context, Offset offset) {
assert(_textLayoutLastWidth == constraints.maxWidth);
final Offset effectiveOffset = offset + _paintOffset;
if (_selection != null) {
if (_selection != null && !_floatingCursorOn) {
if (_selection.isCollapsed && _showCursor.value && cursorColor != null) {
_paintCaret(context.canvas, effectiveOffset);
_paintCaret(context.canvas, effectiveOffset, _selection.extent);
} else if (!_selection.isCollapsed && _selectionColor != null) {
_selectionRects ??= _textPainter.getBoxesForSelection(_selection);
_paintSelection(context.canvas, effectiveOffset);
}
}
_textPainter.paint(context.canvas, effectiveOffset);
if (_floatingCursorOn) {
if (_resetFloatingCursorAnimationValue == null)
_paintCaret(context.canvas, effectiveOffset, _floatingCursorTextPosition);
_paintFloatingCaret(context.canvas, _floatingCursorOffset);
}
}
@override
......
packages/flutter/lib/src/services/text_input.dart
View file @ 46878d84
......@@ -4,7 +4,7 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:ui' show TextAffinity, hashValues;
import 'dart:ui' show TextAffinity, hashValues, Offset;
import 'package:flutter/foundation.dart';
......@@ -439,6 +439,40 @@ TextAffinity _toTextAffinity(String affinity) {
return null;
}
/// A floating cursor state the user has induced by force pressing an iOS
/// keyboard.
enum FloatingCursorDragState {
/// A user has just activated a floating cursor.
Start,
/// A user is dragging a floating cursor.
Update,
/// A user has lifted their finger off the screen after using a floating
/// cursor.
End,
}
/// The current state and position of the floating cursor.
class RawFloatingCursorPoint {
/// Creates information for setting the position and state of a floating
/// cursor.
///
/// [state] must not be null and [offset] must not be null if the state is
/// [FloatingCursorDragState.Update].
RawFloatingCursorPoint({
this.offset,
@required this.state,
}) : assert(state != null),
assert(state == FloatingCursorDragState.Update ? offset != null : true);
/// The raw position of the floating cursor as determined by the iOS sdk.
final Offset offset;
/// The state of the floating cursor.
final FloatingCursorDragState state;
}
/// The current text, selection, and composing state for editing a run of text.
@immutable
class TextEditingValue {
......@@ -566,6 +600,9 @@ abstract class TextInputClient {
/// Requests that this client perform the given action.
void performAction(TextInputAction action);
/// Updates the floating cursor position and state.
void updateFloatingCursor(RawFloatingCursorPoint point);
}
/// An interface for interacting with a text input control.
......@@ -648,6 +685,26 @@ TextInputAction _toTextInputAction(String action) {
throw FlutterError('Unknown text input action: $action');
}
FloatingCursorDragState _toTextCursorAction(String state) {
switch (state) {
case 'FloatingCursorDragState.start':
return FloatingCursorDragState.Start;
case 'FloatingCursorDragState.update':
return FloatingCursorDragState.Update;
case 'FloatingCursorDragState.end':
return FloatingCursorDragState.End;
}
throw FlutterError('Unknown text cursor action: $state');
}
RawFloatingCursorPoint _toTextPoint(FloatingCursorDragState state, Map<String, dynamic> encoded) {
assert(state != null, 'You must provide a state to set a new editing point.');
assert(encoded['X'] != null, 'You must provide a value for the horizontal location of the floating cursor.');
assert(encoded['Y'] != null, 'You must provide a value for the vertical location of the floating cursor.');
final Offset offset = state == FloatingCursorDragState.Update ? Offset(encoded['X'], encoded['Y']) : const Offset(0, 0);
return RawFloatingCursorPoint(offset: offset, state: state);
}
class _TextInputClientHandler {
_TextInputClientHandler() {
SystemChannels.textInput.setMethodCallHandler(_handleTextInputInvocation);
......@@ -671,6 +728,9 @@ class _TextInputClientHandler {
case 'TextInputClient.performAction':
_currentConnection._client.performAction(_toTextInputAction(args[1]));
break;
case 'TextInputClient.updateFloatingCursor':
_currentConnection._client.updateFloatingCursor(_toTextPoint(_toTextCursorAction(args[1]), args[2]));
break;
default:
throw MissingPluginException();
}
......
packages/flutter/lib/src/widgets/editable_text.dart
View file @ 46878d84
......@@ -21,6 +21,7 @@ import 'scroll_controller.dart';
import 'scroll_physics.dart';
import 'scrollable.dart';
import 'text_selection.dart';
import 'ticker_provider.dart';
export 'package:flutter/services.dart' show TextEditingValue, TextSelection, TextInputType;
export 'package:flutter/rendering.dart' show SelectionChangedCause;
......@@ -182,9 +183,9 @@ class EditableText extends StatefulWidget {
/// [TextInputType.text] unless [maxLines] is greater than one, when it will
/// default to [TextInputType.multiline].
///
/// The [controller], [focusNode], [style], [cursorColor], [textAlign],
/// [rendererIgnoresPointer], and [enableInteractiveSelection] arguments must
/// not be null.
/// The [controller], [focusNode], [style], [cursorColor], [backgroundCursorColor],
/// [textAlign], [rendererIgnoresPointer], and [enableInteractiveSelection]
/// arguments must not be null.
EditableText({
Key key,
@required this.controller,
......@@ -193,6 +194,7 @@ class EditableText extends StatefulWidget {
this.autocorrect = true,
@required this.style,
@required this.cursorColor,
@required this.backgroundCursorColor,
this.textAlign = TextAlign.start,
this.textDirection,
this.locale,
......@@ -221,6 +223,7 @@ class EditableText extends StatefulWidget {
assert(autocorrect != null),
assert(style != null),
assert(cursorColor != null),
assert(backgroundCursorColor != null),
assert(textAlign != null),
assert(maxLines == null || maxLines > 0),
assert(autofocus != null),
......@@ -324,6 +327,13 @@ class EditableText extends StatefulWidget {
/// Cannot be null.
final Color cursorColor;
/// The color to use when painting the background cursor aligned with the text
/// while rendering the floating cursor.
///
/// Cannot be null. By default it is the disabled grey color from
/// CupertinoColors.
final Color backgroundCursorColor;
/// {@template flutter.widgets.editableText.maxLines}
/// The maximum number of lines for the text to span, wrapping if necessary.
///
......@@ -491,7 +501,7 @@ class EditableText extends StatefulWidget {
}
/// State for a [EditableText].
class EditableTextState extends State<EditableText> with AutomaticKeepAliveClientMixin<EditableText>, WidgetsBindingObserver implements TextInputClient, TextSelectionDelegate {
class EditableTextState extends State<EditableText> with AutomaticKeepAliveClientMixin<EditableText>, WidgetsBindingObserver, TickerProviderStateMixin<EditableText> implements TextInputClient, TextSelectionDelegate {
Timer _cursorTimer;
final ValueNotifier<bool> _showCursor = ValueNotifier<bool>(false);
final GlobalKey _editableKey = GlobalKey();
......@@ -503,6 +513,12 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
final LayerLink _layerLink = LayerLink();
bool _didAutoFocus = false;
// The time it takes for the floating cursor to snap to the text aligned
// cursor position after the user has finished placing it.
static const Duration _floatingCursorResetTime = Duration(milliseconds: 125);
AnimationController _floatingCursorResetController;
@override
bool get wantKeepAlive => widget.focusNode.hasFocus;
......@@ -514,6 +530,8 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
widget.controller.addListener(_didChangeTextEditingValue);
widget.focusNode.addListener(_handleFocusChanged);
_scrollController.addListener(() { _selectionOverlay?.updateForScroll(); });
_floatingCursorResetController = AnimationController(vsync: this);
_floatingCursorResetController.addListener(_onFloatingCursorResetTick);
}
@override
......@@ -595,6 +613,72 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
}
}
// The original position of the caret on FloatingCursorDragState.start.
Rect _startCaretRect;
// The most recent text position as determined by the location of the floating
// cursor.
TextPosition _lastTextPosition;
// The offset of the floating cursor as determined from the first update call.
Offset _pointOffsetOrigin;
// The most recent position of the floating cursor.
Offset _lastBoundedOffset;
// Because the center of the cursor is preferredLineHeight / 2 below the touch
// origin, but the touch origin is used to determine which line the cursor is
// on, we need this offset to correctly render and move the cursor.
Offset get _floatingCursorOffset => Offset(0, renderEditable.preferredLineHeight / 2);
@override
void updateFloatingCursor(RawFloatingCursorPoint point) {
switch(point.state){
case FloatingCursorDragState.Start:
final TextPosition currentTextPosition = TextPosition(offset: renderEditable.selection.baseOffset);
_startCaretRect = renderEditable.getLocalRectForCaret(currentTextPosition);
renderEditable.setFloatingCursor(point.state, _startCaretRect.center - _floatingCursorOffset, currentTextPosition);
break;
case FloatingCursorDragState.Update:
// We want to send in points that are centered around a (0,0) origin, so we cache the
// position on the first update call.
if (_pointOffsetOrigin != null) {
final Offset centeredPoint = point.offset - _pointOffsetOrigin;
final Offset rawCursorOffset = _startCaretRect.center + centeredPoint - _floatingCursorOffset;
_lastBoundedOffset = renderEditable.calculateBoundedFloatingCursorOffset(rawCursorOffset);
_lastTextPosition = renderEditable.getPositionForPoint(renderEditable.localToGlobal(_lastBoundedOffset + _floatingCursorOffset));
renderEditable.setFloatingCursor(point.state, _lastBoundedOffset, _lastTextPosition);
} else {
_pointOffsetOrigin = point.offset;
}
break;
case FloatingCursorDragState.End:
_floatingCursorResetController.value = 0.0;
_floatingCursorResetController.animateTo(1.0, duration: _floatingCursorResetTime, curve: Curves.decelerate);
break;
}
}
void _onFloatingCursorResetTick() {
final Offset finalPosition = renderEditable.getLocalRectForCaret(_lastTextPosition).center - _floatingCursorOffset;
if (_floatingCursorResetController.isCompleted) {
renderEditable.setFloatingCursor(FloatingCursorDragState.End, finalPosition, _lastTextPosition);
if (_lastTextPosition.offset != renderEditable.selection.baseOffset)
// The cause is technically the force cursor, but the cause is listed as tap as the desired functionality is the same.
_handleSelectionChanged(TextSelection.collapsed(offset: _lastTextPosition.offset), renderEditable, SelectionChangedCause.tap);
_startCaretRect = null;
_lastTextPosition = null;
_pointOffsetOrigin = null;
_lastBoundedOffset = null;
} else {
final double lerpValue = _floatingCursorResetController.value;
final double lerpX = ui.lerpDouble(_lastBoundedOffset.dx, finalPosition.dx, lerpValue);
final double lerpY = ui.lerpDouble(_lastBoundedOffset.dy, finalPosition.dy, lerpValue);
renderEditable.setFloatingCursor(FloatingCursorDragState.Update, Offset(lerpX, lerpY), _lastTextPosition, resetLerpValue: lerpValue);
}
}
void _finalizeEditing(bool shouldUnfocus) {
// Take any actions necessary now that the user has completed editing.
if (widget.onEditingComplete != null) {
......@@ -969,6 +1053,7 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
textSpan: buildTextSpan(),
value: _value,
cursorColor: widget.cursorColor,
backgroundCursorColor: widget.backgroundCursorColor,
showCursor: EditableText.debugDeterministicCursor ? ValueNotifier<bool>(true) : _showCursor,
hasFocus: _hasFocus,
maxLines: widget.maxLines,
......@@ -1034,6 +1119,7 @@ class _Editable extends LeafRenderObjectWidget {
this.textSpan,
this.value,
this.cursorColor,
this.backgroundCursorColor,
this.showCursor,
this.hasFocus,
this.maxLines,
......@@ -1060,6 +1146,7 @@ class _Editable extends LeafRenderObjectWidget {
final TextSpan textSpan;
final TextEditingValue value;
final Color cursorColor;
final Color backgroundCursorColor;
final ValueNotifier<bool> showCursor;
final bool hasFocus;
final int maxLines;
......@@ -1084,6 +1171,7 @@ class _Editable extends LeafRenderObjectWidget {
return RenderEditable(
text: textSpan,
cursorColor: cursorColor,
backgroundCursorColor: backgroundCursorColor,
showCursor: showCursor,
hasFocus: hasFocus,
maxLines: maxLines,
......
packages/flutter/test/rendering/editable_test.dart
View file @ 46878d84
// Copyright 2017 The Chromium Authors. All rights reserved.
// Copyright 2017 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 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import '../rendering/mock_canvas.dart';
import '../rendering/recording_canvas.dart';
......@@ -24,6 +26,10 @@ class FakeEditableTextState extends TextSelectionDelegate {
}
void main() {
final TextEditingController controller = TextEditingController();
const TextStyle textStyle = TextStyle();
test('editable intrinsics', () {
final TextSelectionDelegate delegate = FakeEditableTextState();
final RenderEditable editable = RenderEditable(
......@@ -91,4 +97,68 @@ void main() {
paints..clipRect(rect: Rect.fromLTRB(0.0, 0.0, 1000.0, 10.0))
);
});
RenderEditable findRenderEditable(WidgetTester tester) {
final RenderObject root = tester.renderObject(find.byType(EditableText));
expect(root, isNotNull);
RenderEditable renderEditable;
void recursiveFinder(RenderObject child) {
if (child is RenderEditable) {
renderEditable = child;
return;
}
child.visitChildren(recursiveFinder);
}
root.visitChildren(recursiveFinder);
expect(renderEditable, isNotNull);
return renderEditable;
}
testWidgets('Floating cursor is painted', (WidgetTester tester) async {
debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
const String text = 'hello world this is fun and cool and awesome!';
controller.text = text;
final FocusNode focusNode = FocusNode();
await tester.pumpWidget(
MaterialApp(
home: Material(
child: TextField(
controller: controller,
focusNode: focusNode,
style: textStyle,
),
),
),
);
await tester.tap(find.byType(EditableText));
final RenderEditable editable = findRenderEditable(tester);
editable.selection = const TextSelection(baseOffset: 29, extentOffset: 29);
final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Start));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(20, 20)));
await tester.pump();
expect(find.byType(EditableText), paints..rrect(
rrect: RRect.fromRectAndRadius(Rect.fromLTRB(406.5, 0, 409.5, 14.0), const Radius.circular(1.0)), color: const Color(0xff4285f4))
);
// Moves the cursor right a few characters.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-250, 20)));
expect(find.byType(EditableText), paints..rrect(
rrect: RRect.fromRectAndRadius(Rect.fromLTRB(136.5, 0, 139.5, 14.0), const Radius.circular(1.0)), color: const Color(0xff4285f4))
);
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.End));
await tester.pumpAndSettle();
debugDefaultTargetPlatformOverride = null;
});
}
packages/flutter/test/rendering/mock_canvas.dart
View file @ 46878d84
......@@ -1024,16 +1024,49 @@ class _RectPaintPredicate extends _OneParameterPaintPredicate<Rect> {
);
}
class _RRectPaintPredicate extends _OneParameterPaintPredicate<RRect> {
_RRectPaintPredicate({ RRect rrect, Color color, double strokeWidth, bool hasMaskFilter, PaintingStyle style }) : super(
class _RRectPaintPredicate extends _DrawCommandPaintPredicate {
_RRectPaintPredicate({ this.rrect, Color color, double strokeWidth, bool hasMaskFilter, PaintingStyle style }) : super(
#drawRRect,
'a rounded rectangle',
expected: rrect,
2,
1,
color: color,
strokeWidth: strokeWidth,
hasMaskFilter: hasMaskFilter,
style: style,
style: style
);
final RRect rrect;
@override
void verifyArguments(List<dynamic> arguments) {
super.verifyArguments(arguments);
const double eps = .0001;
final RRect actual = arguments[0];
if (rrect != null &&
((actual.left - rrect.left).abs() > eps ||
(actual.right - rrect.right).abs() > eps ||
(actual.top - rrect.top).abs() > eps ||
(actual.bottom - rrect.bottom).abs() > eps ||
(actual.blRadiusX - rrect.blRadiusX).abs() > eps ||
(actual.blRadiusY - rrect.blRadiusY).abs() > eps ||
(actual.brRadiusX - rrect.brRadiusX).abs() > eps ||
(actual.brRadiusY - rrect.brRadiusY).abs() > eps ||
(actual.tlRadiusX - rrect.tlRadiusX).abs() > eps ||
(actual.tlRadiusY - rrect.tlRadiusY).abs() > eps ||
(actual.trRadiusX - rrect.trRadiusX).abs() > eps ||
(actual.trRadiusY - rrect.trRadiusY).abs() > eps)) {
throw 'It called $methodName with RRect, $actual, which was not exactly the expected RRect ($rrect).';
}
}
@override
void debugFillDescription(List<String> description) {
super.debugFillDescription(description);
if (rrect != null) {
description.add('RRect: $rrect');
}
}
}
class _DRRectPaintPredicate extends _TwoParameterPaintPredicate<RRect, RRect> {
......
packages/flutter/test/widgets/editable_text_show_on_screen_test.dart
View file @ 46878d84
......@@ -26,6 +26,7 @@ void main() {
controller: scrollController,
children: <Widget>[
EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -67,6 +68,7 @@ void main() {
height: 200.0,
),
EditableText(
backgroundCursorColor: Colors.grey,
scrollPadding: const EdgeInsets.all(50.0),
controller: controller,
focusNode: focusNode,
......@@ -112,6 +114,7 @@ void main() {
height: 350.0,
),
EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -161,6 +164,7 @@ void main() {
height: 350.0,
),
EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -247,6 +251,7 @@ void main() {
controller: scrollController,
children: <Widget>[
EditableText(
backgroundCursorColor: Colors.grey,
maxLines: null, // multi-line
controller: controller,
focusNode: focusNode,
......@@ -302,6 +307,7 @@ void main() {
height: 200.0,
),
EditableText(
backgroundCursorColor: Colors.grey,
scrollPadding: const EdgeInsets.only(bottom: 300.0),
controller: controller,
focusNode: focusNode,
......
packages/flutter/test/widgets/editable_text_test.dart
View file @ 46878d84
......@@ -42,6 +42,7 @@ void main() {
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
textInputAction: action,
......@@ -67,6 +68,7 @@ void main() {
textDirection: TextDirection.ltr,
child: EditableText(
controller: controller,
backgroundCursorColor: Colors.grey,
focusNode: focusNode,
style: textStyle,
cursorColor: cursorColor,
......@@ -87,6 +89,7 @@ void main() {
await tester.pumpWidget(Directionality(
textDirection: TextDirection.ltr,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -111,6 +114,7 @@ void main() {
autofocus: true,
child: EditableText(
controller: controller,
backgroundCursorColor: Colors.grey,
focusNode: focusNode,
style: textStyle,
cursorColor: cursorColor,
......@@ -272,6 +276,7 @@ void main() {
autofocus: true,
child: EditableText(
controller: controller,
backgroundCursorColor: Colors.grey,
focusNode: focusNode,
keyboardType: TextInputType.multiline,
style: textStyle,
......@@ -301,6 +306,7 @@ void main() {
autofocus: true,
child: EditableText(
controller: controller,
backgroundCursorColor: Colors.grey,
focusNode: focusNode,
maxLines: null,
style: textStyle,
......@@ -329,6 +335,7 @@ void main() {
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
maxLines: null,
......@@ -361,6 +368,7 @@ void main() {
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
keyboardType: TextInputType.phone,
......@@ -392,6 +400,7 @@ void main() {
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
maxLines: 3, // Sets multiline keyboard implicitly.
......@@ -422,6 +431,7 @@ void main() {
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
maxLines: 1, // Sets text keyboard implicitly.
......@@ -451,6 +461,7 @@ void main() {
String changedValue;
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: FocusNode(),
......@@ -494,6 +505,7 @@ void main() {
home: RepaintBoundary(
key: const ValueKey<int>(1),
child: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: FocusNode(),
......@@ -544,6 +556,7 @@ void main() {
home: RepaintBoundary(
key: const ValueKey<int>(1),
child: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: FocusNode(),
......@@ -594,6 +607,7 @@ void main() {
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -628,6 +642,7 @@ void main() {
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -669,6 +684,7 @@ void main() {
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -713,6 +729,7 @@ void main() {
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -757,6 +774,7 @@ void main() {
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -801,6 +819,7 @@ testWidgets(
final Widget widget = MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: TextEditingController(),
focusNode: focusNode,
......@@ -853,6 +872,7 @@ testWidgets(
child: Center(
child: Material(
child: EditableText(
backgroundCursorColor: Colors.grey,
key: editableTextKey,
controller: currentController,
focusNode: FocusNode(),
......@@ -912,6 +932,7 @@ testWidgets(
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -952,6 +973,7 @@ testWidgets(
child: FocusScope(
node: focusScopeNode,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -992,6 +1014,7 @@ testWidgets(
await tester.pumpWidget(
MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
selectionControls: materialTextSelectionControls,
focusNode: focusNode,
......@@ -1034,6 +1057,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1109,6 +1133,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1198,6 +1223,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1297,6 +1323,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1395,6 +1422,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1490,6 +1518,7 @@ testWidgets(
await tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
obscureText: true,
controller: controller,
focusNode: focusNode,
......@@ -1536,6 +1565,7 @@ testWidgets(
MockTextSelectionControls controls, WidgetTester tester) {
return tester.pumpWidget(MaterialApp(
home: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
......@@ -1743,6 +1773,7 @@ testWidgets(
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
autofocus: true,
......@@ -1756,6 +1787,157 @@ testWidgets(
expect(controller.selection.isCollapsed, true);
expect(controller.selection.baseOffset, text.length);
});
RenderEditable findRenderEditable(WidgetTester tester) {
final RenderObject root = tester.renderObject(find.byType(EditableText));
expect(root, isNotNull);
RenderEditable renderEditable;
void recursiveFinder(RenderObject child) {
if (child is RenderEditable) {
renderEditable = child;
return;
}
child.visitChildren(recursiveFinder);
}
root.visitChildren(recursiveFinder);
expect(renderEditable, isNotNull);
return renderEditable;
}
testWidgets('Updating the floating cursor correctly moves the cursor', (WidgetTester tester) async {
const String text = 'hello world this is fun and cool and awesome!';
controller.text = text;
final FocusNode focusNode = FocusNode();
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: FocusScope(
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
cursorColor: cursorColor,
),
),
),
);
await tester.tap(find.byType(EditableText));
final RenderEditable renderEditable = findRenderEditable(tester);
renderEditable.selection = const TextSelection(baseOffset: 29, extentOffset: 29);
expect(controller.selection.baseOffset, 29);
final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Start));
expect(controller.selection.baseOffset, 29);
// Sets the origin.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(20, 20)));
expect(controller.selection.baseOffset, 29);
// Moves the cursor right a few characters.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-250, 20)));
// But we have not yet set the offset because the user is not done placing the cursor.
expect(controller.selection.baseOffset, 29);
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.End));
await tester.pumpAndSettle();
// The cursor has been set.
expect(controller.selection.baseOffset, 10);
});
testWidgets('Cursor gets placed correctly after going out of bounds', (WidgetTester tester) async {
const String text = 'hello world this is fun and cool and awesome!';
controller.text = text;
final FocusNode focusNode = FocusNode();
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: FocusScope(
node: focusScopeNode,
autofocus: true,
child: EditableText(
backgroundCursorColor: Colors.grey,
controller: controller,
focusNode: focusNode,
style: textStyle,
cursorColor: cursorColor,
),
),
),
);
await tester.tap(find.byType(EditableText));
final RenderEditable renderEditable = findRenderEditable(tester);
renderEditable.selection = const TextSelection(baseOffset: 29, extentOffset: 29);
expect(controller.selection.baseOffset, 29);
final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Start));
expect(controller.selection.baseOffset, 29);
// Sets the origin.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(20, 20)));
expect(controller.selection.baseOffset, 29);
// Moves the cursor super far right
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(2090, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(2100, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(2090, 20)));
// After peaking the cursor, we move in the opposite direction.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(1400, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.End));
await tester.pumpAndSettle();
// The cursor has been set.
expect(controller.selection.baseOffset, 8);
// Go in the other direction.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Start));
// Sets the origin.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(20, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-5000, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-5010, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-5000, 20)));
// Move back in the opposite direction only a few hundred.
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
offset: const Offset(-4850, 20)));
editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.End));
await tester.pumpAndSettle();
expect(controller.selection.baseOffset, 11);
});
}
class MockTextSelectionControls extends Mock implements TextSelectionControls {}
......@@ -1769,6 +1951,7 @@ class CustomStyleEditableText extends EditableText {
}) : super(
controller: controller,
cursorColor: cursorColor,
backgroundCursorColor: Colors.grey,
focusNode: focusNode,
style: style,
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab