Skip to content

Commit

Permalink
Handle dragging improvements (flutter#114042)
Browse files Browse the repository at this point in the history 
Improves the feel of dragging text selection vertically between lines on mobile.
  • Loading branch information
@justinmc
justinmc committed Nov 1, 2022
1 parent d0afbd7 commit 93b0042
Show file tree
Hide file tree
Showing 4 changed files with 853 additions and 50 deletions.
110 changes: 68 additions & 42 deletions packages/flutter/lib/src/widgets/text_selection.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,13 @@ class TextSelectionOverlay {
);
}

late Offset _dragEndPosition;
// The contact position of the gesture at the current end handle location.
// Updated when the handle moves.
late double _endHandleDragPosition;

// The distance from _endHandleDragPosition to the center of the line that it
// corresponds to.
late double _endHandleDragPositionToCenterOfLine;

void _handleSelectionEndHandleDragStart(DragStartDetails details) {
if (!renderObject.attached) {
Expand All @@ -646,10 +652,17 @@ class TextSelectionOverlay {

// This adjusts for the fact that the selection handles may not
// perfectly cover the TextPosition that they correspond to.
final Offset offsetFromHandleToTextPosition = _getOffsetToTextPositionPoint(_selectionOverlay.endHandleType);
_dragEndPosition = details.globalPosition + offsetFromHandleToTextPosition;

final TextPosition position = renderObject.getPositionForPoint(_dragEndPosition);
_endHandleDragPosition = details.globalPosition.dy;
final Offset endPoint =
renderObject.localToGlobal(_selectionOverlay.selectionEndpoints.last.point);
final double centerOfLine = endPoint.dy - renderObject.preferredLineHeight / 2;
_endHandleDragPositionToCenterOfLine = centerOfLine - _endHandleDragPosition;
final TextPosition position = renderObject.getPositionForPoint(
Offset(
details.globalPosition.dx,
centerOfLine,
),
);

_selectionOverlay.showMagnifier(
_buildMagnifier(
Expand All @@ -660,14 +673,33 @@ class TextSelectionOverlay {
);
}

/// Given a handle position and drag position, returns the position of handle
/// after the drag.
///
/// The handle jumps instantly between lines when the drag reaches a full
/// line's height away from the original handle position. In other words, the
/// line jump happens when the contact point would be located at the same
/// place on the handle at the new line as when the gesture started.
double _getHandleDy(double dragDy, double handleDy) {
final double distanceDragged = dragDy - handleDy;
final int dragDirection = distanceDragged < 0.0 ? -1 : 1;
final int linesDragged =
dragDirection * (distanceDragged.abs() / renderObject.preferredLineHeight).floor();
return handleDy + linesDragged * renderObject.preferredLineHeight;
}

void _handleSelectionEndHandleDragUpdate(DragUpdateDetails details) {
if (!renderObject.attached) {
return;
}
_dragEndPosition += details.delta;

final TextPosition position = renderObject.getPositionForPoint(_dragEndPosition);
final TextSelection currentSelection = TextSelection.fromPosition(position);
_endHandleDragPosition = _getHandleDy(details.globalPosition.dy, _endHandleDragPosition);
final Offset adjustedOffset = Offset(
details.globalPosition.dx,
_endHandleDragPosition + _endHandleDragPositionToCenterOfLine,
);

final TextPosition position = renderObject.getPositionForPoint(adjustedOffset);

if (_selection.isCollapsed) {
_selectionOverlay.updateMagnifier(_buildMagnifier(
Expand All @@ -676,6 +708,7 @@ class TextSelectionOverlay {
renderEditable: renderObject,
));

final TextSelection currentSelection = TextSelection.fromPosition(position);
_handleSelectionHandleChanged(currentSelection, isEnd: true);
return;
}
Expand Down Expand Up @@ -716,7 +749,13 @@ class TextSelectionOverlay {
));
}

late Offset _dragStartPosition;
// The contact position of the gesture at the current start handle location.
// Updated when the handle moves.
late double _startHandleDragPosition;

// The distance from _startHandleDragPosition to the center of the line that
// it corresponds to.
late double _startHandleDragPositionToCenterOfLine;

void _handleSelectionStartHandleDragStart(DragStartDetails details) {
if (!renderObject.attached) {
Expand All @@ -725,10 +764,17 @@ class TextSelectionOverlay {

// This adjusts for the fact that the selection handles may not
// perfectly cover the TextPosition that they correspond to.
final Offset offsetFromHandleToTextPosition = _getOffsetToTextPositionPoint(_selectionOverlay.startHandleType);
_dragStartPosition = details.globalPosition + offsetFromHandleToTextPosition;

final TextPosition position = renderObject.getPositionForPoint(_dragStartPosition);
_startHandleDragPosition = details.globalPosition.dy;
final Offset startPoint =
renderObject.localToGlobal(_selectionOverlay.selectionEndpoints.first.point);
final double centerOfLine = startPoint.dy - renderObject.preferredLineHeight / 2;
_startHandleDragPositionToCenterOfLine = centerOfLine - _startHandleDragPosition;
final TextPosition position = renderObject.getPositionForPoint(
Offset(
details.globalPosition.dx,
centerOfLine,
),
);

_selectionOverlay.showMagnifier(
_buildMagnifier(
Expand All @@ -743,8 +789,13 @@ class TextSelectionOverlay {
if (!renderObject.attached) {
return;
}
_dragStartPosition += details.delta;
final TextPosition position = renderObject.getPositionForPoint(_dragStartPosition);

_startHandleDragPosition = _getHandleDy(details.globalPosition.dy, _startHandleDragPosition);
final Offset adjustedOffset = Offset(
details.globalPosition.dx,
_startHandleDragPosition + _startHandleDragPositionToCenterOfLine,
);
final TextPosition position = renderObject.getPositionForPoint(adjustedOffset);

if (_selection.isCollapsed) {
_selectionOverlay.updateMagnifier(_buildMagnifier(
Expand All @@ -753,7 +804,8 @@ class TextSelectionOverlay {
renderEditable: renderObject,
));

_handleSelectionHandleChanged(TextSelection.fromPosition(position), isEnd: false);
final TextSelection currentSelection = TextSelection.fromPosition(position);
_handleSelectionHandleChanged(currentSelection, isEnd: false);
return;
}

Expand Down Expand Up @@ -813,32 +865,6 @@ class TextSelectionOverlay {
}
}

// Returns the offset that locates a drag on a handle to the correct line of text.
Offset _getOffsetToTextPositionPoint(TextSelectionHandleType type) {
final Size handleSize = selectionControls!.getHandleSize(
renderObject.preferredLineHeight,
);

// Try to shift center of handle to top by half of handle height.
final double halfHandleHeight = handleSize.height / 2;

// [getHandleAnchor] is used to shift the selection endpoint to the top left
// point of the handle rect when building the handle widget.
// The endpoint is at the bottom of the selection rect, which is also at the
// bottom of the line of text.
// Try to shift the top of the handle to the selection endpoint by the dy of
// the handle's anchor.
final double handleAnchorDy = selectionControls!.getHandleAnchor(type, renderObject.preferredLineHeight).dy;

// Try to shift the selection endpoint to the center of the correct line by
// using half of the line height.
final double halfPreferredLineHeight = renderObject.preferredLineHeight / 2;

// The x offset is accurate, so we only need to adjust the y position.
final double offsetYFromHandleToTextPosition = handleAnchorDy - halfHandleHeight - halfPreferredLineHeight;
return Offset(0.0, offsetYFromHandleToTextPosition);
}

void _handleSelectionHandleChanged(TextSelection newSelection, {required bool isEnd}) {
final TextPosition textPosition = isEnd ? newSelection.extent : newSelection.base;
selectionDelegate.userUpdateTextEditingValue(
Expand Down

0 comments on commit 93b0042

Please sign in to comment.