Skip to content

F
Front-End
Unverified Commit 7ddf42ea authored by Callum Moffat's avatar Callum Moffat Committed by GitHub
Browse files
Options

InteractiveViewer parameter to return to pre-3.3 trackpad/Magic Mouse behaviour (#114280) 

* trackpadPanShouldActAsZoom

* Address feedback

* Move constant, add blank lines
parent 71f92073
Expand all Show whitespace changes
Inline Side-by-side
Showing with 501 additions and 79 deletions
packages/flutter/lib/src/widgets/gesture_detector.dart
View file @ 7ddf42ea
......@@ -288,6 +288,8 @@ class GestureDetector extends StatelessWidget {
this.behavior,
this.excludeFromSemantics = false,
this.dragStartBehavior = DragStartBehavior.start,
this.trackpadScrollCausesScale = false,
this.trackpadScrollToScaleFactor = kDefaultTrackpadScrollToScaleFactor,
this.supportedDevices,
}) : assert(excludeFromSemantics != null),
assert(dragStartBehavior != null),
......@@ -1014,6 +1016,12 @@ class GestureDetector extends StatelessWidget {
/// If set to null, events from all device types will be recognized. Defaults to null.
final Set<PointerDeviceKind>? supportedDevices;
/// {@macro flutter.gestures.scale.trackpadScrollCausesScale}
final bool trackpadScrollCausesScale;
/// {@macro flutter.gestures.scale.trackpadScrollToScaleFactor}
final Offset trackpadScrollToScaleFactor;
@override
Widget build(BuildContext context) {
final Map<Type, GestureRecognizerFactory> gestures = <Type, GestureRecognizerFactory>{};
......@@ -1186,7 +1194,9 @@ class GestureDetector extends StatelessWidget {
..onUpdate = onScaleUpdate
..onEnd = onScaleEnd
..dragStartBehavior = dragStartBehavior
..gestureSettings = gestureSettings;
..gestureSettings = gestureSettings
..trackpadScrollCausesScale = trackpadScrollCausesScale
..trackpadScrollToScaleFactor = trackpadScrollToScaleFactor;
},
);
}
......
packages/flutter/lib/src/widgets/interactive_viewer.dart
View file @ 7ddf42ea
......@@ -85,9 +85,10 @@ class InteractiveViewer extends StatefulWidget {
this.onInteractionUpdate,
this.panEnabled = true,
this.scaleEnabled = true,
this.scaleFactor = 200.0,
this.scaleFactor = kDefaultMouseScrollToScaleFactor,
this.transformationController,
this.alignment,
this.trackpadScrollCausesScale = false,
required Widget this.child,
}) : assert(alignPanAxis != null),
assert(panAxis != null),
......@@ -103,6 +104,7 @@ class InteractiveViewer extends StatefulWidget {
assert(maxScale >= minScale),
assert(panEnabled != null),
assert(scaleEnabled != null),
assert(trackpadScrollCausesScale != null),
// boundaryMargin must be either fully infinite or fully finite, but not
// a mix of both.
assert(
......@@ -143,6 +145,7 @@ class InteractiveViewer extends StatefulWidget {
this.scaleFactor = 200.0,
this.transformationController,
this.alignment,
this.trackpadScrollCausesScale = false,
required InteractiveViewerWidgetBuilder this.builder,
}) : assert(panAxis != null),
assert(builder != null),
......@@ -156,6 +159,7 @@ class InteractiveViewer extends StatefulWidget {
assert(maxScale >= minScale),
assert(panEnabled != null),
assert(scaleEnabled != null),
assert(trackpadScrollCausesScale != null),
// boundaryMargin must be either fully infinite or fully finite, but not
// a mix of both.
assert(
......@@ -295,10 +299,12 @@ class InteractiveViewer extends StatefulWidget {
/// * [panEnabled], which is similar but for panning.
final bool scaleEnabled;
/// {@macro flutter.gestures.scale.trackpadScrollCausesScale}
final bool trackpadScrollCausesScale;
/// Determines the amount of scale to be performed per pointer scroll.
///
/// Defaults to 200.0, which was arbitrarily chosen to feel natural for most
/// trackpads and mousewheels on all supported platforms.
/// Defaults to [kDefaultMouseScrollToScaleFactor].
///
/// Increasing this value above the default causes scaling to feel slower,
/// while decreasing it causes scaling to feel faster.
......@@ -556,7 +562,10 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
final GlobalKey _childKey = GlobalKey();
final GlobalKey _parentKey = GlobalKey();
Animation<Offset>? _animation;
Animation<double>? _scaleAnimation;
late Offset _scaleAnimationFocalPoint;
late AnimationController _controller;
late AnimationController _scaleController;
Axis? _currentAxis; // Used with panAxis.
Offset? _referenceFocalPoint; // Point where the current gesture began.
double? _scaleStart; // Scale value at start of scaling gesture.
......@@ -795,6 +804,12 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
_animation?.removeListener(_onAnimate);
_animation = null;
}
if (_scaleController.isAnimating) {
_scaleController.stop();
_scaleController.reset();
_scaleAnimation?.removeListener(_onScaleAnimate);
_scaleAnimation = null;
}
_gestureType = null;
_currentAxis = null;
......@@ -809,6 +824,7 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
// handled with GestureDetector's scale gesture.
void _onScaleUpdate(ScaleUpdateDetails details) {
final double scale = _transformationController!.value.getMaxScaleOnAxis();
_scaleAnimationFocalPoint = details.localFocalPoint;
final Offset focalPointScene = _transformationController!.toScene(
details.localFocalPoint,
);
......@@ -913,19 +929,20 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
_referenceFocalPoint = null;
_animation?.removeListener(_onAnimate);
_scaleAnimation?.removeListener(_onScaleAnimate);
_controller.reset();
_scaleController.reset();
if (!_gestureIsSupported(_gestureType)) {
_currentAxis = null;
return;
}
// If the scale ended with enough velocity, animate inertial movement.
if (_gestureType != _GestureType.pan || details.velocity.pixelsPerSecond.distance < kMinFlingVelocity) {
if (_gestureType == _GestureType.pan) {
if (details.velocity.pixelsPerSecond.distance < kMinFlingVelocity) {
_currentAxis = null;
return;
}
final Vector3 translationVector = _transformationController!.value.getTranslation();
final Offset translation = Offset(translationVector.x, translationVector.y);
final FrictionSimulation frictionSimulationX = FrictionSimulation(
......@@ -952,6 +969,29 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
_controller.duration = Duration(milliseconds: (tFinal * 1000).round());
_animation!.addListener(_onAnimate);
_controller.forward();
} else if (_gestureType == _GestureType.scale) {
if (details.scaleVelocity.abs() < 0.1) {
_currentAxis = null;
return;
}
final double scale = _transformationController!.value.getMaxScaleOnAxis();
final FrictionSimulation frictionSimulation = FrictionSimulation(
widget.interactionEndFrictionCoefficient * widget.scaleFactor,
scale,
details.scaleVelocity / 10
);
final double tFinal = _getFinalTime(details.scaleVelocity.abs(), widget.interactionEndFrictionCoefficient, effectivelyMotionless: 0.1);
_scaleAnimation = Tween<double>(
begin: scale,
end: frictionSimulation.x(tFinal)
).animate(CurvedAnimation(
parent: _scaleController,
curve: Curves.decelerate
));
_scaleController.duration = Duration(milliseconds: (tFinal * 1000).round());
_scaleAnimation!.addListener(_onScaleAnimate);
_scaleController.forward();
}
}
// Handle mousewheel and web trackpad scroll events.
......@@ -1085,6 +1125,38 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
);
}
// Handle inertia scale animation.
void _onScaleAnimate() {
if (!_scaleController.isAnimating) {
_currentAxis = null;
_scaleAnimation?.removeListener(_onScaleAnimate);
_scaleAnimation = null;
_scaleController.reset();
return;
}
final double desiredScale = _scaleAnimation!.value;
final double scaleChange = desiredScale / _transformationController!.value.getMaxScaleOnAxis();
final Offset referenceFocalPoint = _transformationController!.toScene(
_scaleAnimationFocalPoint,
);
_transformationController!.value = _matrixScale(
_transformationController!.value,
scaleChange,
);
// While scaling, translate such that the user's two fingers stay on
// the same places in the scene. That means that the focal point of
// the scale should be on the same place in the scene before and after
// the scale.
final Offset focalPointSceneScaled = _transformationController!.toScene(
_scaleAnimationFocalPoint,
);
_transformationController!.value = _matrixTranslate(
_transformationController!.value,
focalPointSceneScaled - referenceFocalPoint,
);
}
void _onTransformationControllerChange() {
// A change to the TransformationController's value is a change to the
// state.
......@@ -1101,6 +1173,9 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
_controller = AnimationController(
vsync: this,
);
_scaleController = AnimationController(
vsync: this
);
}
@override
......@@ -1131,6 +1206,7 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
@override
void dispose() {
_controller.dispose();
_scaleController.dispose();
_transformationController!.removeListener(_onTransformationControllerChange);
if (widget.transformationController == null) {
_transformationController!.dispose();
......@@ -1181,6 +1257,8 @@ class _InteractiveViewerState extends State<InteractiveViewer> with TickerProvid
onScaleEnd: _onScaleEnd,
onScaleStart: _onScaleStart,
onScaleUpdate: _onScaleUpdate,
trackpadScrollCausesScale: widget.trackpadScrollCausesScale,
trackpadScrollToScaleFactor: Offset(0, -1/widget.scaleFactor),
child: child,
),
);
......@@ -1305,8 +1383,7 @@ enum _GestureType {
// Given a velocity and drag, calculate the time at which motion will come to
// a stop, within the margin of effectivelyMotionless.
double _getFinalTime(double velocity, double drag) {
const double effectivelyMotionless = 10.0;
double _getFinalTime(double velocity, double drag, {double effectivelyMotionless = 10}) {
return math.log(effectivelyMotionless / velocity) / math.log(drag / 100);
}
......
packages/flutter/test/gestures/scale_test.dart
View file @ 7ddf42ea
......@@ -1173,4 +1173,196 @@ void main() {
),
);
});
testGesture('scale trackpadScrollCausesScale', (GestureTester tester) {
final ScaleGestureRecognizer scale = ScaleGestureRecognizer(
dragStartBehavior: DragStartBehavior.start,
trackpadScrollCausesScale: true
);
bool didStartScale = false;
Offset? updatedFocalPoint;
scale.onStart = (ScaleStartDetails details) {
didStartScale = true;
updatedFocalPoint = details.focalPoint;
};
double? updatedScale;
Offset? updatedDelta;
scale.onUpdate = (ScaleUpdateDetails details) {
updatedScale = details.scale;
updatedFocalPoint = details.focalPoint;
updatedDelta = details.focalPointDelta;
};
bool didEndScale = false;
scale.onEnd = (ScaleEndDetails details) {
didEndScale = true;
};
final TestPointer pointer1 = TestPointer(2, PointerDeviceKind.trackpad);
final PointerPanZoomStartEvent start = pointer1.panZoomStart(Offset.zero);
scale.addPointerPanZoom(start);
tester.closeArena(2);
expect(didStartScale, isFalse);
expect(updatedScale, isNull);
expect(updatedFocalPoint, isNull);
expect(updatedDelta, isNull);
expect(didEndScale, isFalse);
tester.route(start);
expect(didStartScale, isTrue);
didStartScale = false;
expect(updatedScale, isNull);
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedDelta, isNull);
expect(didEndScale, isFalse);
// Zoom in by scrolling up.
tester.route(pointer1.panZoomUpdate(Offset.zero, pan: const Offset(0, -200)));
expect(didStartScale, isFalse);
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedScale, math.e);
updatedScale = null;
expect(updatedDelta, Offset.zero);
updatedDelta = null;
expect(didEndScale, isFalse);
// A horizontal scroll should do nothing.
tester.route(pointer1.panZoomUpdate(Offset.zero, pan: const Offset(200, -200)));
expect(didStartScale, isFalse);
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedScale, math.e);
updatedScale = null;
expect(updatedDelta, Offset.zero);
updatedDelta = null;
expect(didEndScale, isFalse);
// End.
tester.route(pointer1.panZoomEnd());
expect(didStartScale, isFalse);
expect(updatedFocalPoint, isNull);
expect(updatedScale, isNull);
expect(updatedDelta, isNull);
expect(didEndScale, isTrue);
didEndScale = false;
// Try with a different trackpadScrollToScaleFactor
scale.trackpadScrollToScaleFactor = const Offset(1/125, 0);
final PointerPanZoomStartEvent start2 = pointer1.panZoomStart(Offset.zero);
scale.addPointerPanZoom(start2);
tester.closeArena(2);
expect(didStartScale, isFalse);
expect(updatedScale, isNull);
expect(updatedFocalPoint, isNull);
expect(updatedDelta, isNull);
expect(didEndScale, isFalse);
tester.route(start2);
expect(didStartScale, isTrue);
didStartScale = false;
expect(updatedScale, isNull);
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedDelta, isNull);
expect(didEndScale, isFalse);
// Zoom in by scrolling left.
tester.route(pointer1.panZoomUpdate(Offset.zero, pan: const Offset(125, 0)));
expect(didStartScale, isFalse);
didStartScale = false;
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedScale, math.e);
updatedScale = null;
expect(updatedDelta, Offset.zero);
updatedDelta = null;
expect(didEndScale, isFalse);
// A vertical scroll should do nothing.
tester.route(pointer1.panZoomUpdate(Offset.zero, pan: const Offset(125, 125)));
expect(didStartScale, isFalse);
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(updatedScale, math.e);
updatedScale = null;
expect(updatedDelta, Offset.zero);
updatedDelta = null;
expect(didEndScale, isFalse);
// End.
tester.route(pointer1.panZoomEnd());
expect(didStartScale, isFalse);
expect(updatedFocalPoint, isNull);
expect(updatedScale, isNull);
expect(updatedDelta, isNull);
expect(didEndScale, isTrue);
didEndScale = false;
scale.dispose();
});
testGesture('scale ending velocity', (GestureTester tester) {
final ScaleGestureRecognizer scale = ScaleGestureRecognizer(
dragStartBehavior: DragStartBehavior.start,
trackpadScrollCausesScale: true
);
bool didStartScale = false;
Offset? updatedFocalPoint;
scale.onStart = (ScaleStartDetails details) {
didStartScale = true;
updatedFocalPoint = details.focalPoint;
};
bool didEndScale = false;
double? scaleEndVelocity;
scale.onEnd = (ScaleEndDetails details) {
didEndScale = true;
scaleEndVelocity = details.scaleVelocity;
};
final TestPointer pointer1 = TestPointer(2, PointerDeviceKind.trackpad);
final PointerPanZoomStartEvent start = pointer1.panZoomStart(Offset.zero);
scale.addPointerPanZoom(start);
tester.closeArena(2);
expect(didStartScale, isFalse);
expect(updatedFocalPoint, isNull);
expect(didEndScale, isFalse);
tester.route(start);
expect(didStartScale, isTrue);
didStartScale = false;
expect(updatedFocalPoint, Offset.zero);
updatedFocalPoint = null;
expect(didEndScale, isFalse);
// Zoom in by scrolling up.
for (int i = 0; i < 100; i++) {
tester.route(pointer1.panZoomUpdate(
Offset.zero,
pan: Offset(0, i * -10),
timeStamp: Duration(milliseconds: i * 25)
));
}
// End.
tester.route(pointer1.panZoomEnd(timeStamp: const Duration(milliseconds: 2500)));
expect(didStartScale, isFalse);
expect(updatedFocalPoint, isNull);
expect(didEndScale, isTrue);
didEndScale = false;
expect(scaleEndVelocity, moreOrLessEquals(281.41454098027765));
scale.dispose();
});
}
packages/flutter/test/widgets/interactive_viewer_test.dart
View file @ 7ddf42ea
......@@ -1802,6 +1802,78 @@ void main() {
await tester.pump();
expect(transformationController.value.getMaxScaleOnAxis(), 2.5); // capped at maxScale (2.5)
});
testWidgets('trackpadScrollCausesScale', (WidgetTester tester) async {
final TransformationController transformationController = TransformationController();
const double boundaryMargin = 50.0;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: Center(
child: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(boundaryMargin),
transformationController: transformationController,
trackpadScrollCausesScale: true,
child: const SizedBox(width: 200.0, height: 200.0),
),
),
),
),
);
expect(transformationController.value.getMaxScaleOnAxis(), 1.0);
// Send a vertical scroll.
final TestPointer pointer = TestPointer(1, PointerDeviceKind.trackpad);
final Offset center = tester.getCenter(find.byType(SizedBox));
await tester.sendEventToBinding(pointer.panZoomStart(center));
await tester.pump();
expect(transformationController.value.getMaxScaleOnAxis(), 1.0);
await tester.sendEventToBinding(pointer.panZoomUpdate(center, pan: const Offset(0, -81)));
await tester.pump();
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.499302500056767));
// Send a horizontal scroll (should have no effect).
await tester.sendEventToBinding(pointer.panZoomUpdate(center, pan: const Offset(81, -81)));
await tester.pump();
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.499302500056767));
});
testWidgets('Scaling inertia', (WidgetTester tester) async {
final TransformationController transformationController = TransformationController();
const double boundaryMargin = 50.0;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: Center(
child: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(boundaryMargin),
transformationController: transformationController,
trackpadScrollCausesScale: true,
child: const SizedBox(width: 200.0, height: 200.0),
),
),
),
),
);
expect(transformationController.value.getMaxScaleOnAxis(), 1.0);
// Send a vertical scroll fling, which will cause inertia.
await tester.trackpadFling(
find.byType(InteractiveViewer),
const Offset(0, -100),
3000
);
await tester.pump();
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.6487212707001282));
await tester.pump(const Duration(milliseconds: 80));
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.7966838346780103));
await tester.pumpAndSettle();
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.9984509673751225));
await tester.pump(const Duration(seconds: 10));
expect(transformationController.value.getMaxScaleOnAxis(), moreOrLessEquals(1.9984509673751225));
});
});
group('getNearestPointOnLine', () {
......
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