mirror of https://github.com/flutter/samples.git
[Gallery] Add transformations demo (#291)
* Copy over transformations demo with changes Colors, size and buttons were changed * Remove <Widget>[] * Formatting * Expose gallery theme colors * Run grinder commandspull/295/head
Pierre-Louis
5 years ago
committed by
GitHub
parent
fcac28d65d
commit
7b0fdb2ddb
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,175 @@
|
|||||||
|
// Copyright 2019 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:ui' show Vertices;
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:gallery/l10n/gallery_localizations.dart';
|
||||||
|
import 'transformations_demo_board.dart';
|
||||||
|
import 'transformations_demo_edit_board_point.dart';
|
||||||
|
import 'transformations_demo_gesture_transformable.dart';
|
||||||
|
|
||||||
|
// BEGIN transformationsDemo#1
|
||||||
|
|
||||||
|
class TransformationsDemo extends StatefulWidget {
|
||||||
|
const TransformationsDemo({Key key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
_TransformationsDemoState createState() => _TransformationsDemoState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _TransformationsDemoState extends State<TransformationsDemo> {
|
||||||
|
// The radius of a hexagon tile in pixels.
|
||||||
|
static const _kHexagonRadius = 32.0;
|
||||||
|
// The margin between hexagons.
|
||||||
|
static const _kHexagonMargin = 1.0;
|
||||||
|
// The radius of the entire board in hexagons, not including the center.
|
||||||
|
static const _kBoardRadius = 12;
|
||||||
|
|
||||||
|
bool _reset = false;
|
||||||
|
Board _board = Board(
|
||||||
|
boardRadius: _kBoardRadius,
|
||||||
|
hexagonRadius: _kHexagonRadius,
|
||||||
|
hexagonMargin: _kHexagonMargin,
|
||||||
|
);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final BoardPainter painter = BoardPainter(
|
||||||
|
board: _board,
|
||||||
|
);
|
||||||
|
|
||||||
|
// The scene is drawn by a CustomPaint, but user interaction is handled by
|
||||||
|
// the GestureTransformable parent widget.
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||||
|
appBar: AppBar(
|
||||||
|
automaticallyImplyLeading: false,
|
||||||
|
title:
|
||||||
|
Text(GalleryLocalizations.of(context).demo2dTransformationsTitle),
|
||||||
|
),
|
||||||
|
body: Container(
|
||||||
|
color: backgroundColor,
|
||||||
|
child: LayoutBuilder(
|
||||||
|
builder: (context, constraints) {
|
||||||
|
// Draw the scene as big as is available, but allow the user to
|
||||||
|
// translate beyond that to a visibleSize that's a bit bigger.
|
||||||
|
final Size size = Size(constraints.maxWidth, constraints.maxHeight);
|
||||||
|
final Size visibleSize = Size(size.width * 3, size.height * 2);
|
||||||
|
return GestureTransformable(
|
||||||
|
reset: _reset,
|
||||||
|
onResetEnd: () {
|
||||||
|
setState(() {
|
||||||
|
_reset = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
child: CustomPaint(
|
||||||
|
painter: painter,
|
||||||
|
),
|
||||||
|
boundaryRect: Rect.fromLTWH(
|
||||||
|
-visibleSize.width / 2,
|
||||||
|
-visibleSize.height / 2,
|
||||||
|
visibleSize.width,
|
||||||
|
visibleSize.height,
|
||||||
|
),
|
||||||
|
// Center the board in the middle of the screen. It's drawn centered
|
||||||
|
// at the origin, which is the top left corner of the
|
||||||
|
// GestureTransformable.
|
||||||
|
initialTranslation: Offset(size.width / 2, size.height / 2),
|
||||||
|
onTapUp: _onTapUp,
|
||||||
|
size: size,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
persistentFooterButtons: [resetButton, editButton],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconButton get resetButton {
|
||||||
|
return IconButton(
|
||||||
|
onPressed: () {
|
||||||
|
setState(() {
|
||||||
|
_reset = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tooltip:
|
||||||
|
GalleryLocalizations.of(context).demo2dTransformationsResetTooltip,
|
||||||
|
color: Theme.of(context).colorScheme.surface,
|
||||||
|
icon: const Icon(Icons.replay),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconButton get editButton {
|
||||||
|
return IconButton(
|
||||||
|
onPressed: () {
|
||||||
|
if (_board.selected == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showModalBottomSheet<Widget>(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return Container(
|
||||||
|
width: double.infinity,
|
||||||
|
height: 150,
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: EditBoardPoint(
|
||||||
|
boardPoint: _board.selected,
|
||||||
|
onColorSelection: (color) {
|
||||||
|
setState(() {
|
||||||
|
_board = _board.copyWithBoardPointColor(
|
||||||
|
_board.selected, color);
|
||||||
|
Navigator.pop(context);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tooltip:
|
||||||
|
GalleryLocalizations.of(context).demo2dTransformationsEditTooltip,
|
||||||
|
color: Theme.of(context).colorScheme.surface,
|
||||||
|
icon: const Icon(Icons.edit),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
void _onTapUp(TapUpDetails details) {
|
||||||
|
final Offset scenePoint = details.globalPosition;
|
||||||
|
final BoardPoint boardPoint = _board.pointToBoardPoint(scenePoint);
|
||||||
|
setState(() {
|
||||||
|
_board = _board.copyWithSelected(boardPoint);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// CustomPainter is what is passed to CustomPaint and actually draws the scene
|
||||||
|
// when its `paint` method is called.
|
||||||
|
class BoardPainter extends CustomPainter {
|
||||||
|
const BoardPainter({
|
||||||
|
this.board,
|
||||||
|
});
|
||||||
|
|
||||||
|
final Board board;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void paint(Canvas canvas, Size size) {
|
||||||
|
void drawBoardPoint(BoardPoint boardPoint) {
|
||||||
|
final Color color = boardPoint.color.withOpacity(
|
||||||
|
board.selected == boardPoint ? 0.7 : 1,
|
||||||
|
);
|
||||||
|
final Vertices vertices =
|
||||||
|
board.getVerticesForBoardPoint(boardPoint, color);
|
||||||
|
canvas.drawVertices(vertices, BlendMode.color, Paint());
|
||||||
|
}
|
||||||
|
|
||||||
|
board.forEach(drawBoardPoint);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We should repaint whenever the board changes, such as board.selected.
|
||||||
|
@override
|
||||||
|
bool shouldRepaint(BoardPainter oldDelegate) {
|
||||||
|
return oldDelegate.board != board;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// END
|
||||||
@ -0,0 +1,289 @@
|
|||||||
|
// Copyright 2019 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:collection' show IterableMixin;
|
||||||
|
import 'dart:math';
|
||||||
|
import 'dart:ui' show Vertices;
|
||||||
|
import 'package:flutter/material.dart' hide Gradient;
|
||||||
|
import 'package:vector_math/vector_math_64.dart' show Vector3;
|
||||||
|
|
||||||
|
// BEGIN transformationsDemo#2
|
||||||
|
|
||||||
|
// The entire state of the hex board and abstraction to get information about
|
||||||
|
// it. Iterable so that all BoardPoints on the board can be iterated over.
|
||||||
|
@immutable
|
||||||
|
class Board extends Object with IterableMixin<BoardPoint> {
|
||||||
|
Board({
|
||||||
|
@required this.boardRadius,
|
||||||
|
@required this.hexagonRadius,
|
||||||
|
@required this.hexagonMargin,
|
||||||
|
this.selected,
|
||||||
|
List<BoardPoint> boardPoints,
|
||||||
|
}) : assert(boardRadius > 0),
|
||||||
|
assert(hexagonRadius > 0),
|
||||||
|
assert(hexagonMargin >= 0) {
|
||||||
|
// Set up the positions for the center hexagon where the entire board is
|
||||||
|
// centered on the origin.
|
||||||
|
// Start point of hexagon (top vertex).
|
||||||
|
final Point<double> hexStart = Point<double>(0, -hexagonRadius);
|
||||||
|
final double hexagonRadiusPadded = hexagonRadius - hexagonMargin;
|
||||||
|
final double centerToFlat = sqrt(3) / 2 * hexagonRadiusPadded;
|
||||||
|
positionsForHexagonAtOrigin.addAll(<Offset>[
|
||||||
|
Offset(hexStart.x, hexStart.y),
|
||||||
|
Offset(hexStart.x + centerToFlat, hexStart.y + 0.5 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x + centerToFlat, hexStart.y + 1.5 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x + centerToFlat, hexStart.y + 1.5 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x, hexStart.y + 2 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x, hexStart.y + 2 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x - centerToFlat, hexStart.y + 1.5 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x - centerToFlat, hexStart.y + 1.5 * hexagonRadiusPadded),
|
||||||
|
Offset(hexStart.x - centerToFlat, hexStart.y + 0.5 * hexagonRadiusPadded),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (boardPoints != null) {
|
||||||
|
_boardPoints.addAll(boardPoints);
|
||||||
|
} else {
|
||||||
|
// Generate boardPoints for a fresh board.
|
||||||
|
BoardPoint boardPoint = _getNextBoardPoint(null);
|
||||||
|
while (boardPoint != null) {
|
||||||
|
_boardPoints.add(boardPoint);
|
||||||
|
boardPoint = _getNextBoardPoint(boardPoint);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
final int boardRadius; // Number of hexagons from center to edge.
|
||||||
|
final double hexagonRadius; // Pixel radius of a hexagon (center to vertex).
|
||||||
|
final double hexagonMargin; // Margin between hexagons.
|
||||||
|
final List<Offset> positionsForHexagonAtOrigin = <Offset>[];
|
||||||
|
final BoardPoint selected;
|
||||||
|
final List<BoardPoint> _boardPoints = <BoardPoint>[];
|
||||||
|
|
||||||
|
@override
|
||||||
|
Iterator<BoardPoint> get iterator => _BoardIterator(_boardPoints);
|
||||||
|
|
||||||
|
// For a given q axial coordinate, get the range of possible r values
|
||||||
|
// See the definition of BoardPoint for more information about hex grids and
|
||||||
|
// axial coordinates.
|
||||||
|
_Range _getRRangeForQ(int q) {
|
||||||
|
int rStart;
|
||||||
|
int rEnd;
|
||||||
|
if (q <= 0) {
|
||||||
|
rStart = -boardRadius - q;
|
||||||
|
rEnd = boardRadius;
|
||||||
|
} else {
|
||||||
|
rEnd = boardRadius - q;
|
||||||
|
rStart = -boardRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
return _Range(rStart, rEnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the BoardPoint that comes after the given BoardPoint. If given null,
|
||||||
|
// returns the origin BoardPoint. If given BoardPoint is the last, returns
|
||||||
|
// null.
|
||||||
|
BoardPoint _getNextBoardPoint(BoardPoint boardPoint) {
|
||||||
|
// If before the first element.
|
||||||
|
if (boardPoint == null) {
|
||||||
|
return BoardPoint(-boardRadius, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
final _Range rRange = _getRRangeForQ(boardPoint.q);
|
||||||
|
|
||||||
|
// If at or after the last element.
|
||||||
|
if (boardPoint.q >= boardRadius && boardPoint.r >= rRange.max) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If wrapping from one q to the next.
|
||||||
|
if (boardPoint.r >= rRange.max) {
|
||||||
|
return BoardPoint(boardPoint.q + 1, _getRRangeForQ(boardPoint.q + 1).min);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise we're just incrementing r.
|
||||||
|
return BoardPoint(boardPoint.q, boardPoint.r + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if the board point is actually on the board.
|
||||||
|
bool _validateBoardPoint(BoardPoint boardPoint) {
|
||||||
|
const BoardPoint center = BoardPoint(0, 0);
|
||||||
|
final int distanceFromCenter = getDistance(center, boardPoint);
|
||||||
|
return distanceFromCenter <= boardRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the distance between two BoardPoins.
|
||||||
|
static int getDistance(BoardPoint a, BoardPoint b) {
|
||||||
|
final Vector3 a3 = a.cubeCoordinates;
|
||||||
|
final Vector3 b3 = b.cubeCoordinates;
|
||||||
|
return ((a3.x - b3.x).abs() + (a3.y - b3.y).abs() + (a3.z - b3.z).abs()) ~/
|
||||||
|
2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return the q,r BoardPoint for a point in the scene, where the origin is in
|
||||||
|
// the center of the board in both coordinate systems. If no BoardPoint at the
|
||||||
|
// location, return null.
|
||||||
|
BoardPoint pointToBoardPoint(Offset point) {
|
||||||
|
final BoardPoint boardPoint = BoardPoint(
|
||||||
|
((sqrt(3) / 3 * point.dx - 1 / 3 * point.dy) / hexagonRadius).round(),
|
||||||
|
((2 / 3 * point.dy) / hexagonRadius).round(),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!_validateBoardPoint(boardPoint)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return _boardPoints.firstWhere((boardPointI) {
|
||||||
|
return boardPointI.q == boardPoint.q && boardPointI.r == boardPoint.r;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a scene point for the center of a hexagon given its q,r point.
|
||||||
|
Point<double> boardPointToPoint(BoardPoint boardPoint) {
|
||||||
|
return Point<double>(
|
||||||
|
sqrt(3) * hexagonRadius * boardPoint.q +
|
||||||
|
sqrt(3) / 2 * hexagonRadius * boardPoint.r,
|
||||||
|
1.5 * hexagonRadius * boardPoint.r,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get Vertices that can be drawn to a Canvas for the given BoardPoint.
|
||||||
|
Vertices getVerticesForBoardPoint(BoardPoint boardPoint, Color color) {
|
||||||
|
final Point<double> centerOfHexZeroCenter = boardPointToPoint(boardPoint);
|
||||||
|
|
||||||
|
final List<Offset> positions = positionsForHexagonAtOrigin.map((offset) {
|
||||||
|
return offset.translate(centerOfHexZeroCenter.x, centerOfHexZeroCenter.y);
|
||||||
|
}).toList();
|
||||||
|
|
||||||
|
return Vertices(
|
||||||
|
VertexMode.triangleFan,
|
||||||
|
positions,
|
||||||
|
colors: List<Color>.filled(positions.length, color),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a new board with the given BoardPoint selected.
|
||||||
|
Board copyWithSelected(BoardPoint boardPoint) {
|
||||||
|
if (selected == boardPoint) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
final Board nextBoard = Board(
|
||||||
|
boardRadius: boardRadius,
|
||||||
|
hexagonRadius: hexagonRadius,
|
||||||
|
hexagonMargin: hexagonMargin,
|
||||||
|
selected: boardPoint,
|
||||||
|
boardPoints: _boardPoints,
|
||||||
|
);
|
||||||
|
return nextBoard;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a new board where boardPoint has the given color.
|
||||||
|
Board copyWithBoardPointColor(BoardPoint boardPoint, Color color) {
|
||||||
|
final BoardPoint nextBoardPoint = boardPoint.copyWithColor(color);
|
||||||
|
final int boardPointIndex = _boardPoints.indexWhere((boardPointI) =>
|
||||||
|
boardPointI.q == boardPoint.q && boardPointI.r == boardPoint.r);
|
||||||
|
|
||||||
|
if (elementAt(boardPointIndex) == boardPoint && boardPoint.color == color) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
final List<BoardPoint> nextBoardPoints =
|
||||||
|
List<BoardPoint>.from(_boardPoints);
|
||||||
|
nextBoardPoints[boardPointIndex] = nextBoardPoint;
|
||||||
|
final BoardPoint selectedBoardPoint =
|
||||||
|
boardPoint == selected ? nextBoardPoint : selected;
|
||||||
|
return Board(
|
||||||
|
boardRadius: boardRadius,
|
||||||
|
hexagonRadius: hexagonRadius,
|
||||||
|
hexagonMargin: hexagonMargin,
|
||||||
|
selected: selectedBoardPoint,
|
||||||
|
boardPoints: nextBoardPoints,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BoardIterator extends Iterator<BoardPoint> {
|
||||||
|
_BoardIterator(this.boardPoints);
|
||||||
|
|
||||||
|
final List<BoardPoint> boardPoints;
|
||||||
|
int currentIndex;
|
||||||
|
|
||||||
|
@override
|
||||||
|
BoardPoint current;
|
||||||
|
|
||||||
|
@override
|
||||||
|
bool moveNext() {
|
||||||
|
if (currentIndex == null) {
|
||||||
|
currentIndex = 0;
|
||||||
|
} else {
|
||||||
|
currentIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentIndex >= boardPoints.length) {
|
||||||
|
current = null;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
current = boardPoints[currentIndex];
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// A range of q/r board coordinate values.
|
||||||
|
@immutable
|
||||||
|
class _Range {
|
||||||
|
const _Range(this.min, this.max)
|
||||||
|
: assert(min != null),
|
||||||
|
assert(max != null),
|
||||||
|
assert(min <= max);
|
||||||
|
|
||||||
|
final int min;
|
||||||
|
final int max;
|
||||||
|
}
|
||||||
|
|
||||||
|
// A location on the board in axial coordinates.
|
||||||
|
// Axial coordinates use two integers, q and r, to locate a hexagon on a grid.
|
||||||
|
// https://www.redblobgames.com/grids/hexagons/#coordinates-axial
|
||||||
|
@immutable
|
||||||
|
class BoardPoint {
|
||||||
|
const BoardPoint(
|
||||||
|
this.q,
|
||||||
|
this.r, {
|
||||||
|
this.color = const Color(0xFFCDCDCD),
|
||||||
|
});
|
||||||
|
|
||||||
|
final int q;
|
||||||
|
final int r;
|
||||||
|
final Color color;
|
||||||
|
|
||||||
|
@override
|
||||||
|
String toString() {
|
||||||
|
return 'BoardPoint($q, $r, $color)';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only compares by location.
|
||||||
|
@override
|
||||||
|
bool operator ==(Object other) {
|
||||||
|
if (other.runtimeType != runtimeType) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return other is BoardPoint && other.q == q && other.r == r;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
int get hashCode => hashValues(q, r);
|
||||||
|
|
||||||
|
BoardPoint copyWithColor(Color nextColor) =>
|
||||||
|
BoardPoint(q, r, color: nextColor);
|
||||||
|
|
||||||
|
// Convert from q,r axial coords to x,y,z cube coords.
|
||||||
|
Vector3 get cubeCoordinates {
|
||||||
|
return Vector3(
|
||||||
|
q.toDouble(),
|
||||||
|
r.toDouble(),
|
||||||
|
(-q - r).toDouble(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// END
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
// Copyright 2019 The Flutter team. 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/material.dart';
|
||||||
|
|
||||||
|
// A generic widget for a list of selectable colors.
|
||||||
|
@immutable
|
||||||
|
class ColorPicker extends StatelessWidget {
|
||||||
|
const ColorPicker({
|
||||||
|
@required this.colors,
|
||||||
|
@required this.selectedColor,
|
||||||
|
this.onColorSelection,
|
||||||
|
}) : assert(colors != null),
|
||||||
|
assert(selectedColor != null);
|
||||||
|
|
||||||
|
final Set<Color> colors;
|
||||||
|
final Color selectedColor;
|
||||||
|
final ValueChanged<Color> onColorSelection;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: colors.map((color) {
|
||||||
|
return _ColorPickerSwatch(
|
||||||
|
color: color,
|
||||||
|
selected: color == selectedColor,
|
||||||
|
onTap: () {
|
||||||
|
if (onColorSelection != null) {
|
||||||
|
onColorSelection(color);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// A single selectable color widget in the ColorPicker.
|
||||||
|
@immutable
|
||||||
|
class _ColorPickerSwatch extends StatelessWidget {
|
||||||
|
const _ColorPickerSwatch({
|
||||||
|
@required this.color,
|
||||||
|
@required this.selected,
|
||||||
|
this.onTap,
|
||||||
|
}) : assert(color != null),
|
||||||
|
assert(selected != null);
|
||||||
|
|
||||||
|
final Color color;
|
||||||
|
final bool selected;
|
||||||
|
final Function onTap;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
padding: const EdgeInsets.fromLTRB(2, 0, 2, 0),
|
||||||
|
child: RawMaterialButton(
|
||||||
|
fillColor: color,
|
||||||
|
onPressed: () {
|
||||||
|
if (onTap != null) {
|
||||||
|
onTap();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: !selected
|
||||||
|
? null
|
||||||
|
: const Icon(
|
||||||
|
Icons.check,
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
// Copyright 2019 The Flutter team. 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/material.dart';
|
||||||
|
import 'package:gallery/themes/gallery_theme_data.dart';
|
||||||
|
import 'transformations_demo_board.dart';
|
||||||
|
import 'transformations_demo_color_picker.dart';
|
||||||
|
|
||||||
|
final backgroundColor = Color(0xFF272727);
|
||||||
|
|
||||||
|
// The panel for editing a board point.
|
||||||
|
@immutable
|
||||||
|
class EditBoardPoint extends StatelessWidget {
|
||||||
|
const EditBoardPoint({
|
||||||
|
Key key,
|
||||||
|
@required this.boardPoint,
|
||||||
|
this.onColorSelection,
|
||||||
|
}) : assert(boardPoint != null),
|
||||||
|
super(key: key);
|
||||||
|
|
||||||
|
final BoardPoint boardPoint;
|
||||||
|
final ValueChanged<Color> onColorSelection;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
print(GalleryThemeData.darkColorScheme);
|
||||||
|
|
||||||
|
final boardPointColors = <Color>{
|
||||||
|
Colors.white,
|
||||||
|
GalleryThemeData.darkColorScheme.primary,
|
||||||
|
GalleryThemeData.darkColorScheme.primaryVariant,
|
||||||
|
GalleryThemeData.darkColorScheme.secondary,
|
||||||
|
backgroundColor,
|
||||||
|
};
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'${boardPoint.q}, ${boardPoint.r}',
|
||||||
|
textAlign: TextAlign.right,
|
||||||
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||||
|
),
|
||||||
|
ColorPicker(
|
||||||
|
colors: boardPointColors,
|
||||||
|
selectedColor: boardPoint.color,
|
||||||
|
onColorSelection: onColorSelection,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,620 @@
|
|||||||
|
// Copyright 2019 The Flutter team. 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/material.dart';
|
||||||
|
import 'package:vector_math/vector_math_64.dart' show Vector3;
|
||||||
|
import 'transformations_demo_inertial_motion.dart';
|
||||||
|
|
||||||
|
// BEGIN transformationsDemo#3
|
||||||
|
|
||||||
|
// This widget allows 2D transform interactions on its child in relation to its
|
||||||
|
// parent. The user can transform the child by dragging to pan or pinching to
|
||||||
|
// zoom and rotate. All event callbacks for GestureDetector are supported, and
|
||||||
|
// the coordinates that are given are untransformed and in relation to the
|
||||||
|
// original position of the child.
|
||||||
|
@immutable
|
||||||
|
class GestureTransformable extends StatefulWidget {
|
||||||
|
const GestureTransformable({
|
||||||
|
Key key,
|
||||||
|
// The child to perform the transformations on.
|
||||||
|
@required this.child,
|
||||||
|
// The desired visible size of the widget and the area that is receptive to
|
||||||
|
// gestures. If a widget that's as big as possible is desired, then wrap
|
||||||
|
// this in a LayoutBuilder and pass
|
||||||
|
// `Size(constraints.maxWidth, constraints.maxHeight)`.
|
||||||
|
@required this.size,
|
||||||
|
// The scale will be clamped to between these values. A maxScale of null has
|
||||||
|
// no bounds. minScale must be greater than zero.
|
||||||
|
this.maxScale = 2.5,
|
||||||
|
this.minScale = 0.8,
|
||||||
|
// Transforms will be limited so that the viewport can not view beyond this
|
||||||
|
// Rect. The Rect does not rotate with the rest of the scene, so it is
|
||||||
|
// always aligned with the viewport. A null boundaryRect results in no
|
||||||
|
// limits to the distance that the viewport can be transformed to see.
|
||||||
|
this.boundaryRect,
|
||||||
|
// Initial values for the transform can be provided.
|
||||||
|
this.initialTranslation,
|
||||||
|
this.initialScale,
|
||||||
|
this.initialRotation,
|
||||||
|
// Any and all of the possible transformations can be disabled.
|
||||||
|
this.disableTranslation = false,
|
||||||
|
this.disableScale = false,
|
||||||
|
this.disableRotation = false,
|
||||||
|
// If set to true, this widget will animate back to its initial transform
|
||||||
|
// and call onResetEnd when done. When utilizing reset, onResetEnd should
|
||||||
|
// also be implemented, and it should set reset to false when called.
|
||||||
|
this.reset = false,
|
||||||
|
// Access to event callbacks from GestureDetector. Called with untransformed
|
||||||
|
// coordinates in an Offset.
|
||||||
|
this.onTapDown,
|
||||||
|
this.onTapUp,
|
||||||
|
this.onTap,
|
||||||
|
this.onTapCancel,
|
||||||
|
this.onDoubleTap,
|
||||||
|
this.onLongPress,
|
||||||
|
this.onLongPressUp,
|
||||||
|
this.onVerticalDragDown,
|
||||||
|
this.onVerticalDragStart,
|
||||||
|
this.onVerticalDragUpdate,
|
||||||
|
this.onVerticalDragEnd,
|
||||||
|
this.onVerticalDragCancel,
|
||||||
|
this.onHorizontalDragDown,
|
||||||
|
this.onHorizontalDragStart,
|
||||||
|
this.onHorizontalDragUpdate,
|
||||||
|
this.onHorizontalDragEnd,
|
||||||
|
this.onHorizontalDragCancel,
|
||||||
|
this.onPanDown,
|
||||||
|
this.onPanStart,
|
||||||
|
this.onPanUpdate,
|
||||||
|
this.onPanEnd,
|
||||||
|
this.onPanCancel,
|
||||||
|
this.onResetEnd,
|
||||||
|
this.onScaleStart,
|
||||||
|
this.onScaleUpdate,
|
||||||
|
this.onScaleEnd,
|
||||||
|
}) : assert(child != null),
|
||||||
|
assert(size != null),
|
||||||
|
assert(minScale != null),
|
||||||
|
assert(minScale > 0),
|
||||||
|
assert(disableTranslation != null),
|
||||||
|
assert(disableScale != null),
|
||||||
|
assert(disableRotation != null),
|
||||||
|
assert(reset != null),
|
||||||
|
assert(
|
||||||
|
!reset || onResetEnd != null,
|
||||||
|
'Must implement onResetEnd to use reset.',
|
||||||
|
),
|
||||||
|
super(key: key);
|
||||||
|
|
||||||
|
final Widget child;
|
||||||
|
final Size size;
|
||||||
|
final bool reset;
|
||||||
|
final GestureTapDownCallback onTapDown;
|
||||||
|
final GestureTapUpCallback onTapUp;
|
||||||
|
final GestureTapCallback onTap;
|
||||||
|
final GestureTapCancelCallback onTapCancel;
|
||||||
|
final GestureTapCallback onDoubleTap;
|
||||||
|
final GestureLongPressCallback onLongPress;
|
||||||
|
final GestureLongPressUpCallback onLongPressUp;
|
||||||
|
final GestureDragDownCallback onVerticalDragDown;
|
||||||
|
final GestureDragStartCallback onVerticalDragStart;
|
||||||
|
final GestureDragUpdateCallback onVerticalDragUpdate;
|
||||||
|
final GestureDragEndCallback onVerticalDragEnd;
|
||||||
|
final GestureDragCancelCallback onVerticalDragCancel;
|
||||||
|
final GestureDragDownCallback onHorizontalDragDown;
|
||||||
|
final GestureDragStartCallback onHorizontalDragStart;
|
||||||
|
final GestureDragUpdateCallback onHorizontalDragUpdate;
|
||||||
|
final GestureDragEndCallback onHorizontalDragEnd;
|
||||||
|
final GestureDragCancelCallback onHorizontalDragCancel;
|
||||||
|
final GestureDragDownCallback onPanDown;
|
||||||
|
final GestureDragStartCallback onPanStart;
|
||||||
|
final GestureDragUpdateCallback onPanUpdate;
|
||||||
|
final GestureDragEndCallback onPanEnd;
|
||||||
|
final GestureDragCancelCallback onPanCancel;
|
||||||
|
final VoidCallback onResetEnd;
|
||||||
|
final GestureScaleStartCallback onScaleStart;
|
||||||
|
final GestureScaleUpdateCallback onScaleUpdate;
|
||||||
|
final GestureScaleEndCallback onScaleEnd;
|
||||||
|
final double maxScale;
|
||||||
|
final double minScale;
|
||||||
|
final Rect boundaryRect;
|
||||||
|
final bool disableTranslation;
|
||||||
|
final bool disableScale;
|
||||||
|
final bool disableRotation;
|
||||||
|
final Offset initialTranslation;
|
||||||
|
final double initialScale;
|
||||||
|
final double initialRotation;
|
||||||
|
|
||||||
|
@override
|
||||||
|
_GestureTransformableState createState() => _GestureTransformableState();
|
||||||
|
}
|
||||||
|
|
||||||
|
// A single user event can only represent one of these gestures. The user can't
|
||||||
|
// do multiple at the same time, which results in more precise transformations.
|
||||||
|
enum _GestureType {
|
||||||
|
translate,
|
||||||
|
scale,
|
||||||
|
rotate,
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is public only for access from a unit test.
|
||||||
|
class _GestureTransformableState extends State<GestureTransformable>
|
||||||
|
with TickerProviderStateMixin {
|
||||||
|
Animation<Offset> _animation;
|
||||||
|
AnimationController _controller;
|
||||||
|
Animation<Matrix4> _animationReset;
|
||||||
|
AnimationController _controllerReset;
|
||||||
|
// The translation that will be applied to the scene (not viewport).
|
||||||
|
// A positive x offset moves the scene right, viewport left.
|
||||||
|
// A positive y offset moves the scene down, viewport up.
|
||||||
|
Offset _translateFromScene; // Point where a single translation began.
|
||||||
|
double _scaleStart; // Scale value at start of scaling gesture.
|
||||||
|
double _rotationStart = 0; // Rotation at start of rotation gesture.
|
||||||
|
Rect _boundaryRect;
|
||||||
|
Matrix4 _transform = Matrix4.identity();
|
||||||
|
double _currentRotation = 0;
|
||||||
|
_GestureType gestureType;
|
||||||
|
|
||||||
|
// The transformation matrix that gives the initial home position.
|
||||||
|
Matrix4 get _initialTransform {
|
||||||
|
Matrix4 matrix = Matrix4.identity();
|
||||||
|
if (widget.initialTranslation != null) {
|
||||||
|
matrix = matrixTranslate(matrix, widget.initialTranslation);
|
||||||
|
}
|
||||||
|
if (widget.initialScale != null) {
|
||||||
|
matrix = matrixScale(matrix, widget.initialScale);
|
||||||
|
}
|
||||||
|
if (widget.initialRotation != null) {
|
||||||
|
matrix = matrixRotate(matrix, widget.initialRotation, Offset.zero);
|
||||||
|
}
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return the scene point at the given viewport point.
|
||||||
|
static Offset fromViewport(Offset viewportPoint, Matrix4 transform) {
|
||||||
|
// On viewportPoint, perform the inverse transformation of the scene to get
|
||||||
|
// where the point would be in the scene before the transformation.
|
||||||
|
final Matrix4 inverseMatrix = Matrix4.inverted(transform);
|
||||||
|
final Vector3 untransformed = inverseMatrix.transform3(Vector3(
|
||||||
|
viewportPoint.dx,
|
||||||
|
viewportPoint.dy,
|
||||||
|
0,
|
||||||
|
));
|
||||||
|
return Offset(untransformed.x, untransformed.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the offset of the current widget from the global screen coordinates.
|
||||||
|
// TODO(justinmc): Protect against calling this during first build.
|
||||||
|
static Offset getOffset(BuildContext context) {
|
||||||
|
final RenderBox renderObject = context.findRenderObject() as RenderBox;
|
||||||
|
return renderObject.localToGlobal(Offset.zero);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_boundaryRect = widget.boundaryRect ?? Offset.zero & widget.size;
|
||||||
|
_transform = _initialTransform;
|
||||||
|
_controller = AnimationController(
|
||||||
|
vsync: this,
|
||||||
|
);
|
||||||
|
_controllerReset = AnimationController(
|
||||||
|
vsync: this,
|
||||||
|
);
|
||||||
|
if (widget.reset) {
|
||||||
|
_animateResetInitialize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(GestureTransformable oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.reset && !oldWidget.reset && _animationReset == null) {
|
||||||
|
_animateResetInitialize();
|
||||||
|
} else if (!widget.reset && oldWidget.reset && _animationReset != null) {
|
||||||
|
_animateResetStop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
// A GestureDetector allows the detection of panning and zooming gestures on
|
||||||
|
// its child, which is the CustomPaint.
|
||||||
|
return GestureDetector(
|
||||||
|
behavior: HitTestBehavior.opaque, // Necessary when translating off screen
|
||||||
|
onTapDown: widget.onTapDown == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onTapDown(TapDownDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onTapUp: widget.onTapUp == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onTapUp(TapUpDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onTap: widget.onTap,
|
||||||
|
onTapCancel: widget.onTapCancel,
|
||||||
|
onDoubleTap: widget.onDoubleTap,
|
||||||
|
onLongPress: widget.onLongPress,
|
||||||
|
onLongPressUp: widget.onLongPressUp,
|
||||||
|
onVerticalDragDown: widget.onVerticalDragDown == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onVerticalDragDown(DragDownDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onVerticalDragStart: widget.onVerticalDragStart == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onVerticalDragStart(DragStartDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onVerticalDragUpdate: widget.onVerticalDragUpdate == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onVerticalDragUpdate(DragUpdateDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onVerticalDragEnd: widget.onVerticalDragEnd,
|
||||||
|
onVerticalDragCancel: widget.onVerticalDragCancel,
|
||||||
|
onHorizontalDragDown: widget.onHorizontalDragDown == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onHorizontalDragDown(DragDownDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onHorizontalDragStart: widget.onHorizontalDragStart == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onHorizontalDragStart(DragStartDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onHorizontalDragUpdate: widget.onHorizontalDragUpdate == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onHorizontalDragUpdate(DragUpdateDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onHorizontalDragEnd: widget.onHorizontalDragEnd,
|
||||||
|
onHorizontalDragCancel: widget.onHorizontalDragCancel,
|
||||||
|
onPanDown: widget.onPanDown == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onPanDown(DragDownDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onPanStart: widget.onPanStart == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onPanStart(DragStartDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onPanUpdate: widget.onPanUpdate == null
|
||||||
|
? null
|
||||||
|
: (details) {
|
||||||
|
widget.onPanUpdate(DragUpdateDetails(
|
||||||
|
globalPosition: fromViewport(
|
||||||
|
details.globalPosition - getOffset(context), _transform),
|
||||||
|
));
|
||||||
|
},
|
||||||
|
onPanEnd: widget.onPanEnd,
|
||||||
|
onPanCancel: widget.onPanCancel,
|
||||||
|
onScaleEnd: _onScaleEnd,
|
||||||
|
onScaleStart: _onScaleStart,
|
||||||
|
onScaleUpdate: _onScaleUpdate,
|
||||||
|
child: ClipRect(
|
||||||
|
// The scene is panned/zoomed/rotated using this Transform widget.
|
||||||
|
child: Transform(
|
||||||
|
transform: _transform,
|
||||||
|
child: Container(
|
||||||
|
child: widget.child,
|
||||||
|
height: widget.size.height,
|
||||||
|
width: widget.size.width,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a new matrix representing the given matrix after applying the given
|
||||||
|
// translation.
|
||||||
|
Matrix4 matrixTranslate(Matrix4 matrix, Offset translation) {
|
||||||
|
if (widget.disableTranslation || translation == Offset.zero) {
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clamp translation so the viewport remains inside _boundaryRect.
|
||||||
|
final double scale = _transform.getMaxScaleOnAxis();
|
||||||
|
final Size scaledSize = widget.size / scale;
|
||||||
|
final Rect viewportBoundaries = Rect.fromLTRB(
|
||||||
|
_boundaryRect.left,
|
||||||
|
_boundaryRect.top,
|
||||||
|
_boundaryRect.right - scaledSize.width,
|
||||||
|
_boundaryRect.bottom - scaledSize.height,
|
||||||
|
);
|
||||||
|
// Translation is reversed (a positive translation moves the scene to the
|
||||||
|
// right, viewport to the left).
|
||||||
|
final Rect translationBoundaries = Rect.fromLTRB(
|
||||||
|
-scale * viewportBoundaries.right,
|
||||||
|
-scale * viewportBoundaries.bottom,
|
||||||
|
-scale * viewportBoundaries.left,
|
||||||
|
-scale * viewportBoundaries.top,
|
||||||
|
);
|
||||||
|
final Matrix4 nextMatrix = matrix.clone()
|
||||||
|
..translate(
|
||||||
|
translation.dx,
|
||||||
|
translation.dy,
|
||||||
|
);
|
||||||
|
final Vector3 nextTranslationVector = nextMatrix.getTranslation();
|
||||||
|
final Offset nextTranslation = Offset(
|
||||||
|
nextTranslationVector.x,
|
||||||
|
nextTranslationVector.y,
|
||||||
|
);
|
||||||
|
final bool inBoundaries = translationBoundaries.contains(
|
||||||
|
Offset(nextTranslation.dx, nextTranslation.dy),
|
||||||
|
);
|
||||||
|
if (!inBoundaries) {
|
||||||
|
// TODO(justinmc): Instead of canceling translation when it goes out of
|
||||||
|
// bounds, stop translation at boundary.
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
return nextMatrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a new matrix representing the given matrix after applying the given
|
||||||
|
// scale transform.
|
||||||
|
Matrix4 matrixScale(Matrix4 matrix, double scale) {
|
||||||
|
if (widget.disableScale || scale == 1) {
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
assert(scale != 0);
|
||||||
|
|
||||||
|
// Don't allow a scale that moves the viewport outside of _boundaryRect.
|
||||||
|
final Offset tl = fromViewport(const Offset(0, 0), _transform);
|
||||||
|
final Offset tr = fromViewport(Offset(widget.size.width, 0), _transform);
|
||||||
|
final Offset bl = fromViewport(Offset(0, widget.size.height), _transform);
|
||||||
|
final Offset br = fromViewport(
|
||||||
|
Offset(widget.size.width, widget.size.height),
|
||||||
|
_transform,
|
||||||
|
);
|
||||||
|
if (!_boundaryRect.contains(tl) ||
|
||||||
|
!_boundaryRect.contains(tr) ||
|
||||||
|
!_boundaryRect.contains(bl) ||
|
||||||
|
!_boundaryRect.contains(br)) {
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't allow a scale that results in an overall scale beyond min/max
|
||||||
|
// scale.
|
||||||
|
final double currentScale = _transform.getMaxScaleOnAxis();
|
||||||
|
final double totalScale = currentScale * scale;
|
||||||
|
final double clampedTotalScale = totalScale.clamp(
|
||||||
|
widget.minScale,
|
||||||
|
widget.maxScale,
|
||||||
|
) as double;
|
||||||
|
final double clampedScale = clampedTotalScale / currentScale;
|
||||||
|
return matrix..scale(clampedScale);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a new matrix representing the given matrix after applying the given
|
||||||
|
// rotation transform.
|
||||||
|
// Rotating the scene cannot cause the viewport to view beyond _boundaryRect.
|
||||||
|
Matrix4 matrixRotate(Matrix4 matrix, double rotation, Offset focalPoint) {
|
||||||
|
if (widget.disableRotation || rotation == 0) {
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
final Offset focalPointScene = fromViewport(focalPoint, matrix);
|
||||||
|
return matrix
|
||||||
|
..translate(focalPointScene.dx, focalPointScene.dy)
|
||||||
|
..rotateZ(-rotation)
|
||||||
|
..translate(-focalPointScene.dx, -focalPointScene.dy);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the start of a gesture of _GestureType.
|
||||||
|
void _onScaleStart(ScaleStartDetails details) {
|
||||||
|
if (widget.onScaleStart != null) {
|
||||||
|
widget.onScaleStart(details);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_controller.isAnimating) {
|
||||||
|
_controller.stop();
|
||||||
|
_controller.reset();
|
||||||
|
_animation?.removeListener(_onAnimate);
|
||||||
|
_animation = null;
|
||||||
|
}
|
||||||
|
if (_controllerReset.isAnimating) {
|
||||||
|
_animateResetStop();
|
||||||
|
}
|
||||||
|
|
||||||
|
gestureType = null;
|
||||||
|
setState(() {
|
||||||
|
_scaleStart = _transform.getMaxScaleOnAxis();
|
||||||
|
_translateFromScene = fromViewport(details.focalPoint, _transform);
|
||||||
|
_rotationStart = _currentRotation;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle an update to an ongoing gesture of _GestureType.
|
||||||
|
void _onScaleUpdate(ScaleUpdateDetails details) {
|
||||||
|
double scale = _transform.getMaxScaleOnAxis();
|
||||||
|
if (widget.onScaleUpdate != null) {
|
||||||
|
widget.onScaleUpdate(ScaleUpdateDetails(
|
||||||
|
focalPoint: fromViewport(details.focalPoint, _transform),
|
||||||
|
scale: details.scale,
|
||||||
|
rotation: details.rotation,
|
||||||
|
));
|
||||||
|
}
|
||||||
|
final Offset focalPointScene = fromViewport(
|
||||||
|
details.focalPoint,
|
||||||
|
_transform,
|
||||||
|
);
|
||||||
|
if (gestureType == null) {
|
||||||
|
// Decide which type of gesture this is by comparing the amount of scale
|
||||||
|
// and rotation in the gesture, if any. Scale starts at 1 and rotation
|
||||||
|
// starts at 0. Translate will have 0 scale and 0 rotation because it uses
|
||||||
|
// only one finger.
|
||||||
|
if ((details.scale - 1).abs() > details.rotation.abs()) {
|
||||||
|
gestureType = _GestureType.scale;
|
||||||
|
} else if (details.rotation != 0) {
|
||||||
|
gestureType = _GestureType.rotate;
|
||||||
|
} else {
|
||||||
|
gestureType = _GestureType.translate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setState(() {
|
||||||
|
if (gestureType == _GestureType.scale && _scaleStart != null) {
|
||||||
|
// details.scale gives us the amount to change the scale as of the
|
||||||
|
// start of this gesture, so calculate the amount to scale as of the
|
||||||
|
// previous call to _onScaleUpdate.
|
||||||
|
final double desiredScale = _scaleStart * details.scale;
|
||||||
|
final double scaleChange = desiredScale / scale;
|
||||||
|
_transform = matrixScale(_transform, scaleChange);
|
||||||
|
scale = _transform.getMaxScaleOnAxis();
|
||||||
|
|
||||||
|
// 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 focalPointSceneNext = fromViewport(
|
||||||
|
details.focalPoint,
|
||||||
|
_transform,
|
||||||
|
);
|
||||||
|
_transform =
|
||||||
|
matrixTranslate(_transform, focalPointSceneNext - focalPointScene);
|
||||||
|
} else if (gestureType == _GestureType.rotate && details.rotation != 0) {
|
||||||
|
final double desiredRotation = _rotationStart + details.rotation;
|
||||||
|
_transform = matrixRotate(
|
||||||
|
_transform, _currentRotation - desiredRotation, details.focalPoint);
|
||||||
|
_currentRotation = desiredRotation;
|
||||||
|
} else if (_translateFromScene != null && details.scale == 1) {
|
||||||
|
// Translate so that the same point in the scene is underneath the
|
||||||
|
// focal point before and after the movement.
|
||||||
|
final Offset translationChange = focalPointScene - _translateFromScene;
|
||||||
|
_transform = matrixTranslate(_transform, translationChange);
|
||||||
|
_translateFromScene = fromViewport(details.focalPoint, _transform);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the end of a gesture of _GestureType.
|
||||||
|
void _onScaleEnd(ScaleEndDetails details) {
|
||||||
|
if (widget.onScaleEnd != null) {
|
||||||
|
widget.onScaleEnd(details);
|
||||||
|
}
|
||||||
|
setState(() {
|
||||||
|
_scaleStart = null;
|
||||||
|
_rotationStart = null;
|
||||||
|
_translateFromScene = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
_animation?.removeListener(_onAnimate);
|
||||||
|
_controller.reset();
|
||||||
|
|
||||||
|
// If the scale ended with velocity, animate inertial movement
|
||||||
|
final double velocityTotal = details.velocity.pixelsPerSecond.dx.abs() +
|
||||||
|
details.velocity.pixelsPerSecond.dy.abs();
|
||||||
|
if (velocityTotal == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
final Vector3 translationVector = _transform.getTranslation();
|
||||||
|
final Offset translation = Offset(translationVector.x, translationVector.y);
|
||||||
|
final InertialMotion inertialMotion =
|
||||||
|
InertialMotion(details.velocity, translation);
|
||||||
|
_animation = Tween<Offset>(
|
||||||
|
begin: translation,
|
||||||
|
end: inertialMotion.finalPosition,
|
||||||
|
).animate(_controller);
|
||||||
|
_controller.duration =
|
||||||
|
Duration(milliseconds: inertialMotion.duration.toInt());
|
||||||
|
_animation.addListener(_onAnimate);
|
||||||
|
_controller.fling();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle inertia drag animation.
|
||||||
|
void _onAnimate() {
|
||||||
|
setState(() {
|
||||||
|
// Translate _transform such that the resulting translation is
|
||||||
|
// _animation.value.
|
||||||
|
final Vector3 translationVector = _transform.getTranslation();
|
||||||
|
final Offset translation =
|
||||||
|
Offset(translationVector.x, translationVector.y);
|
||||||
|
final Offset translationScene = fromViewport(translation, _transform);
|
||||||
|
final Offset animationScene = fromViewport(_animation.value, _transform);
|
||||||
|
final Offset translationChangeScene = animationScene - translationScene;
|
||||||
|
_transform = matrixTranslate(_transform, translationChangeScene);
|
||||||
|
});
|
||||||
|
if (!_controller.isAnimating) {
|
||||||
|
_animation?.removeListener(_onAnimate);
|
||||||
|
_animation = null;
|
||||||
|
_controller.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle reset to home transform animation.
|
||||||
|
void _onAnimateReset() {
|
||||||
|
setState(() {
|
||||||
|
_transform = _animationReset.value;
|
||||||
|
});
|
||||||
|
if (!_controllerReset.isAnimating) {
|
||||||
|
_animationReset?.removeListener(_onAnimateReset);
|
||||||
|
_animationReset = null;
|
||||||
|
_controllerReset.reset();
|
||||||
|
widget.onResetEnd();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the reset to home transform animation.
|
||||||
|
void _animateResetInitialize() {
|
||||||
|
_controllerReset.reset();
|
||||||
|
_animationReset = Matrix4Tween(
|
||||||
|
begin: _transform,
|
||||||
|
end: _initialTransform,
|
||||||
|
).animate(_controllerReset);
|
||||||
|
_controllerReset.duration = const Duration(milliseconds: 400);
|
||||||
|
_animationReset.addListener(_onAnimateReset);
|
||||||
|
_controllerReset.forward();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stop a running reset to home transform animation.
|
||||||
|
void _animateResetStop() {
|
||||||
|
_controllerReset.stop();
|
||||||
|
_animationReset?.removeListener(_onAnimateReset);
|
||||||
|
_animationReset = null;
|
||||||
|
_controllerReset.reset();
|
||||||
|
widget.onResetEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
_controllerReset.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// END
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
// Copyright 2019 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:math';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:vector_math/vector_math.dart' show Vector2;
|
||||||
|
|
||||||
|
// Provides calculations for an object moving with inertia and friction using
|
||||||
|
// the equation of motion from physics.
|
||||||
|
// https://en.wikipedia.org/wiki/Equations_of_motion#Constant_translational_acceleration_in_a_straight_line
|
||||||
|
// TODO(justinmc): Can this be replaced with friction_simulation.dart?
|
||||||
|
@immutable
|
||||||
|
class InertialMotion {
|
||||||
|
const InertialMotion(this._initialVelocity, this._initialPosition);
|
||||||
|
|
||||||
|
static const double _kFrictionalAcceleration = 0.01; // How quickly to stop
|
||||||
|
final Velocity _initialVelocity;
|
||||||
|
final Offset _initialPosition;
|
||||||
|
|
||||||
|
// The position when the motion stops.
|
||||||
|
Offset get finalPosition {
|
||||||
|
return _getPositionAt(Duration(milliseconds: duration.toInt()));
|
||||||
|
}
|
||||||
|
|
||||||
|
// The total time that the animation takes start to stop in milliseconds.
|
||||||
|
double get duration {
|
||||||
|
return (_initialVelocity.pixelsPerSecond.dx / 1000 / _acceleration.x).abs();
|
||||||
|
}
|
||||||
|
|
||||||
|
// The acceleration opposing the initial velocity in x and y components.
|
||||||
|
Vector2 get _acceleration {
|
||||||
|
// TODO(justinmc): Find actual velocity instead of summing?
|
||||||
|
final velocityTotal = _initialVelocity.pixelsPerSecond.dx.abs() +
|
||||||
|
_initialVelocity.pixelsPerSecond.dy.abs();
|
||||||
|
final vRatioX = _initialVelocity.pixelsPerSecond.dx / velocityTotal;
|
||||||
|
final vRatioY = _initialVelocity.pixelsPerSecond.dy / velocityTotal;
|
||||||
|
return Vector2(
|
||||||
|
_kFrictionalAcceleration * vRatioX,
|
||||||
|
_kFrictionalAcceleration * vRatioY,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// The position at a given time.
|
||||||
|
Offset _getPositionAt(Duration time) {
|
||||||
|
final xf = _getPosition(
|
||||||
|
r0: _initialPosition.dx,
|
||||||
|
v0: _initialVelocity.pixelsPerSecond.dx / 1000,
|
||||||
|
t: time.inMilliseconds,
|
||||||
|
a: _acceleration.x,
|
||||||
|
);
|
||||||
|
final yf = _getPosition(
|
||||||
|
r0: _initialPosition.dy,
|
||||||
|
v0: _initialVelocity.pixelsPerSecond.dy / 1000,
|
||||||
|
t: time.inMilliseconds,
|
||||||
|
a: _acceleration.y,
|
||||||
|
);
|
||||||
|
return Offset(xf, yf);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Solve the equation of motion to find the position at a given point in time
|
||||||
|
// in one dimension.
|
||||||
|
double _getPosition({double r0, double v0, int t, double a}) {
|
||||||
|
// Stop movement when it would otherwise reverse direction.
|
||||||
|
final stopTime = (v0 / a).abs();
|
||||||
|
if (t > stopTime) {
|
||||||
|
t = stopTime.toInt();
|
||||||
|
}
|
||||||
|
|
||||||
|
return r0 + v0 * t + 0.5 * a * pow(t, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue