Skip to content

F
Front-End
Commit 7a2c38ab authored by Adam Barth's avatar Adam Barth
Browse files
Options

Merge pull request #1903 from abarth/auto_simplify 

Simplify the AutoLayout API
parents ce278e97 4408c820
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 176 deletions
examples/layers/rendering/autolayout.dart
View file @ 7a2c38ab
......@@ -9,38 +9,38 @@ import 'package:cassowary/cassowary.dart' as al;
import 'package:flutter/rendering.dart';
class _MyAutoLayoutDelegate extends AutoLayoutDelegate {
AutoLayoutParams p1 = new AutoLayoutParams();
AutoLayoutParams p2 = new AutoLayoutParams();
AutoLayoutParams p3 = new AutoLayoutParams();
AutoLayoutParams p4 = new AutoLayoutParams();
AutoLayoutRect p1 = new AutoLayoutRect();
AutoLayoutRect p2 = new AutoLayoutRect();
AutoLayoutRect p3 = new AutoLayoutRect();
AutoLayoutRect p4 = new AutoLayoutRect();
List<al.Constraint> getConstraints(AutoLayoutParams parentParams) {
List<al.Constraint> getConstraints(AutoLayoutRect parent) {
return <al.Constraint>[
// Sum of widths of each box must be equal to that of the container
(p1.width + p2.width + p3.width == parentParams.width) as al.Constraint,
parent.width.equals(p1.width + p2.width + p3.width),
// The boxes must be stacked left to right
p1.rightEdge <= p2.leftEdge,
p2.rightEdge <= p3.leftEdge,
p1.right <= p2.left,
p2.right <= p3.left,
// The widths of the first and the third boxes should be equal
(p1.width == p3.width) as al.Constraint,
p1.width.equals(p3.width),
// The width of the second box should be twice as much as that of the first
// and third
(p2.width * al.cm(2.0) == p1.width) as al.Constraint,
p1.width.equals(p2.width * al.cm(2.0)),
// The height of the three boxes should be equal to that of the container
(p1.height == p2.height) as al.Constraint,
(p2.height == p3.height) as al.Constraint,
(p3.height == parentParams.height) as al.Constraint,
p1.height.equals(p2.height),
p2.height.equals(p3.height),
p3.height.equals(parent.height),
// The fourth box should be half as wide as the second and must be attached
// to the right edge of the same (by its center)
(p4.width == p2.width / al.cm(2.0)) as al.Constraint,
(p4.height == al.cm(50.0)) as al.Constraint,
(p4.horizontalCenter == p2.rightEdge) as al.Constraint,
(p4.verticalCenter == p2.height / al.cm(2.0)) as al.Constraint,
p4.width.equals(p2.width / al.cm(2.0)),
p4.height.equals(al.cm(50.0)),
p4.horizontalCenter.equals(p2.right),
p4.verticalCenter.equals(p2.height / al.cm(2.0)),
];
}
......@@ -76,10 +76,10 @@ void main() {
AutoLayoutParentData parentData3 = c3.parentData;
AutoLayoutParentData parentData4 = c4.parentData;
parentData1.params = delegate.p1;
parentData2.params = delegate.p2;
parentData3.params = delegate.p3;
parentData4.params = delegate.p4;
parentData1.rect = delegate.p1;
parentData2.rect = delegate.p2;
parentData3.rect = delegate.p3;
parentData4.rect = delegate.p4;
new RenderingFlutterBinding(root: root);
}
examples/layers/widgets/autolayout.dart
View file @ 7a2c38ab
......@@ -8,58 +8,42 @@ import 'package:cassowary/cassowary.dart' as al;
import 'package:flutter/widgets.dart';
class _MyAutoLayoutDelegate extends AutoLayoutDelegate {
AutoLayoutParams p1 = new AutoLayoutParams();
AutoLayoutParams p2 = new AutoLayoutParams();
AutoLayoutParams p3 = new AutoLayoutParams();
AutoLayoutParams p4 = new AutoLayoutParams();
AutoLayoutRect p1 = new AutoLayoutRect();
AutoLayoutRect p2 = new AutoLayoutRect();
AutoLayoutRect p3 = new AutoLayoutRect();
AutoLayoutRect p4 = new AutoLayoutRect();
List<al.Constraint> getConstraints(AutoLayoutParams parentParams) {
List<al.Constraint> getConstraints(AutoLayoutRect parent) {
return <al.Constraint>[
// Sum of widths of each box must be equal to that of the container
(p1.width + p2.width + p3.width == parentParams.width) as al.Constraint,
parent.width.equals(p1.width + p2.width + p3.width),
// The boxes must be stacked left to right
p1.rightEdge <= p2.leftEdge,
p2.rightEdge <= p3.leftEdge,
p1.right <= p2.left,
p2.right <= p3.left,
// The widths of the first and the third boxes should be equal
(p1.width == p3.width) as al.Constraint,
p1.width.equals(p3.width),
// The width of the second box should be twice as much as that of the first
// and third
(p2.width * al.cm(2.0) == p1.width) as al.Constraint,
p1.width.equals(p2.width * al.cm(2.0)),
// The height of the three boxes should be equal to that of the container
(p1.height == p2.height) as al.Constraint,
(p2.height == p3.height) as al.Constraint,
(p3.height == parentParams.height) as al.Constraint,
p1.height.equals(p2.height),
p2.height.equals(p3.height),
p3.height.equals(parent.height),
// The fourth box should be half as wide as the second and must be attached
// to the right edge of the same (by its center)
(p4.width == p2.width / al.cm(2.0)) as al.Constraint,
(p4.height == al.cm(50.0)) as al.Constraint,
(p4.horizontalCenter == p2.rightEdge) as al.Constraint,
(p4.verticalCenter == p2.height / al.cm(2.0)) as al.Constraint,
p4.width.equals(p2.width / al.cm(2.0)),
p4.height.equals(al.cm(50.0)),
p4.horizontalCenter.equals(p2.right),
p4.verticalCenter.equals(p2.height / al.cm(2.0)),
];
}
bool shouldUpdateConstraints(AutoLayoutDelegate oldDelegate) => true;
}
class ColoredBox extends StatelessComponent {
ColoredBox({ Key key, this.params, this.color }) : super(key: key);
final AutoLayoutParams params;
final Color color;
Widget build(BuildContext context) {
return new AutoLayoutChild(
params: params,
child: new DecoratedBox(
decoration: new BoxDecoration(backgroundColor: color)
)
);
}
bool shouldUpdateConstraints(_MyAutoLayoutDelegate oldDelegate) => true;
}
class ColoredBoxes extends StatefulComponent {
......@@ -73,10 +57,30 @@ class _ColoredBoxesState extends State<ColoredBoxes> {
return new AutoLayout(
delegate: delegate,
children: <Widget>[
new ColoredBox(params: delegate.p1, color: const Color(0xFFFF0000)),
new ColoredBox(params: delegate.p2, color: const Color(0xFF00FF00)),
new ColoredBox(params: delegate.p3, color: const Color(0xFF0000FF)),
new ColoredBox(params: delegate.p4, color: const Color(0xFFFFFFFF)),
new AutoLayoutChild(
rect: delegate.p1,
child: new DecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFF0000))
)
),
new AutoLayoutChild(
rect: delegate.p2,
child: new DecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FF00))
)
),
new AutoLayoutChild(
rect: delegate.p3,
child: new DecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFF0000FF))
)
),
new AutoLayoutChild(
rect: delegate.p4,
child: new DecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF))
)
),
]
);
}
......
packages/cassowary/lib/equation_member.dart
View file @ 7a2c38ab
......@@ -15,7 +15,7 @@ abstract class _EquationMember {
Constraint operator <=(_EquationMember m) => asExpression() <= m;
operator ==(_EquationMember m) => asExpression() == m;
Constraint equals(_EquationMember m) => asExpression().equals(m);
Expression operator +(_EquationMember m) => asExpression() + m;
......
packages/cassowary/lib/expression.dart
View file @ 7a2c38ab
......@@ -57,8 +57,8 @@ class Expression extends _EquationMember {
Constraint operator <=(_EquationMember value) =>
_createConstraint(value, Relation.lessThanOrEqualTo);
operator ==(_EquationMember value) =>
_createConstraint(value, Relation.equalTo); // analyzer says "Type check failed" // analyzer says "The return type 'Constraint' is not a 'bool', as defined by the method '=='"
Constraint equals(_EquationMember value) =>
_createConstraint(value, Relation.equalTo);
Expression operator +(_EquationMember m) {
if (m is ConstantMember) {
......
packages/cassowary/test/cassowary_test.dart
View file @ 7a2c38ab
......@@ -243,7 +243,7 @@ void main() {
expect(c1.expression.constant, -20.0);
expect(c1.relation, Relation.greaterThanOrEqualTo);
var c2 = (right - left == cm(30.0)) as Constraint;
var c2 = (right - left).equals(cm(30.0));
expect(c2 is Constraint, true);
expect(c2.expression.constant, -30.0);
expect(c2.relation, Relation.equalTo);
......@@ -438,7 +438,7 @@ void main() {
Solver s = new Solver();
expect(s.addConstraint((right + left == mid * cm(2.0)) as Constraint),
expect(s.addConstraint((right + left).equals(mid * cm(2.0))),
Result.success);
expect(s.addConstraint(right - left >= cm(100.0)), Result.success);
expect(s.addConstraint(left >= cm(0.0)), Result.success);
......@@ -460,7 +460,7 @@ void main() {
var c = (left >= cm(0.0));
expect(s.addConstraints([
(left + right == cm(2.0) * mid) as Constraint,
(left + right).equals(cm(2.0) * mid),
(right - left >= cm(100.0)),
c
]), Result.success);
......@@ -476,7 +476,7 @@ void main() {
Solver s = new Solver();
expect(s.addConstraint((right + left == mid * cm(2.0)) as Constraint),
expect(s.addConstraint((right + left).equals(mid * cm(2.0))),
Result.success);
expect(s.addConstraint(right - left >= cm(100.0)), Result.success);
expect(s.addConstraint(left >= cm(0.0)), Result.success);
......@@ -496,7 +496,7 @@ void main() {
var right = new Param(100.0);
var c1 = right >= left;
var c2 = right <= left;
var c3 = (right == left) as Constraint;
var c3 = right.equals(left);
Solver s = new Solver();
expect(s.addConstraint(c1), Result.success);
......@@ -519,9 +519,9 @@ void main() {
solver.suggestValueForVariable(container.variable, 100.0);
solver.addConstraint((p1 >= cm(30.0)) | Priority.strong);
solver.addConstraint(((p1 == p3) as Constraint) | Priority.medium);
solver.addConstraint((p2 == cm(2.0) * p1) as Constraint);
solver.addConstraint((container == (p1 + p2 + p3)) as Constraint);
solver.addConstraint(p1.equals(p3) | Priority.medium);
solver.addConstraint(p2.equals(cm(2.0) * p1));
solver.addConstraint(container.equals(p1 + p2 + p3));
solver.flushUpdates();
......@@ -541,7 +541,7 @@ void main() {
expect(s.addEditVariable(mid.variable, Priority.strong), Result.success);
expect(s.addConstraint((mid * cm(2.0) == left + right) as Constraint),
expect(s.addConstraint((mid * cm(2.0)).equals(left + right)),
Result.success);
expect(s.addConstraint(left >= cm(0.0)), Result.success);
......@@ -565,7 +565,7 @@ void main() {
expect(s.addEditVariable(mid.variable, Priority.strong), Result.success);
expect(s.addConstraint((mid * cm(2.0) == left + right) as Constraint),
expect(s.addConstraint((mid * cm(2.0)).equals(left + right)),
Result.success);
expect(s.addConstraint(left >= cm(10.0)), Result.success);
......@@ -590,7 +590,7 @@ void main() {
Param left = new Param();
Param right = new Param();
expect((left == right).runtimeType, Constraint);
expect(left.equals(right).runtimeType, Constraint);
});
test('bulk_add_edit_variables', () {
......
packages/flutter/lib/src/rendering/auto_layout.dart
View file @ 7a2c38ab
// Copyright 2015 The Chromium Authors. All rights reserved.
// Copyright 2016 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.
......@@ -10,45 +10,78 @@ import 'object.dart';
/// Hosts the edge parameters and vends useful methods to construct expressions
/// for constraints. Also sets up and manages implicit constraints and edit
/// variables.
class AutoLayoutParams {
AutoLayoutParams() {
_leftEdge = new al.Param.withContext(this);
_rightEdge = new al.Param.withContext(this);
_topEdge = new al.Param.withContext(this);
_bottomEdge = new al.Param.withContext(this);
class AutoLayoutRect {
AutoLayoutRect() {
_left = new al.Param();
_right = new al.Param();
_top = new al.Param();
_bottom = new al.Param();
}
/// The render box with which these parameters are associated.
RenderBox _renderBox;
al.Param _left;
al.Param _right;
al.Param _top;
al.Param _bottom;
al.Param _leftEdge;
al.Param _rightEdge;
al.Param _topEdge;
al.Param _bottomEdge;
al.Param get left => _left;
al.Param get right => _right;
al.Param get top => _top;
al.Param get bottom => _bottom;
al.Param get leftEdge => _leftEdge;
al.Param get rightEdge => _rightEdge;
al.Param get topEdge => _topEdge;
al.Param get bottomEdge => _bottomEdge;
al.Expression get width => _right - _left;
al.Expression get height => _bottom - _top;
al.Expression get width => _rightEdge - _leftEdge;
al.Expression get height => _bottomEdge - _topEdge;
al.Expression get horizontalCenter => (_left + _right) / al.cm(2.0);
al.Expression get verticalCenter => (_top + _bottom) / al.cm(2.0);
al.Expression get horizontalCenter => (_leftEdge + _rightEdge) / al.cm(2.0);
al.Expression get verticalCenter => (_topEdge + _bottomEdge) / al.cm(2.0);
List<al.Constraint> contains(AutoLayoutRect other) {
return <al.Constraint>[
other.left >= left,
other.right <= right,
other.top >= top,
other.bottom <= bottom,
];
}
}
class AutoLayoutParentData extends ContainerBoxParentDataMixin<RenderBox> {
AutoLayoutParentData(this._renderBox);
final RenderBox _renderBox;
AutoLayoutRect get rect => _rect;
AutoLayoutRect _rect;
void set rect(AutoLayoutRect value) {
if (_rect == value)
return;
if (_rect != null)
_removeImplicitConstraints();
_rect = value;
if (_rect != null)
_addImplicitConstraints();
}
BoxConstraints get _constraintsFromSolver {
return new BoxConstraints.tightFor(
width: _rect._right.value - _rect._left.value,
height: _rect._bottom.value - _rect._top.value
);
}
Offset get _offsetFromSolver {
return new Offset(_rect._left.value, _rect._top.value);
}
List<al.Constraint> _implicitConstraints;
void _addImplicitConstraints() {
assert(_renderBox != null);
if (_renderBox.parent == null)
if (_renderBox.parent == null || _rect == null)
return;
final List<al.Constraint> implicit = _constructImplicitConstraints();
assert(implicit != null && implicit.isNotEmpty);
assert(_renderBox.parent is RenderAutoLayout);
final RenderAutoLayout parent = _renderBox.parent;
final AutoLayoutParentData parentData = _renderBox.parentData;
final List<al.Constraint> implicit = parentData._constructImplicitConstraints();
if (implicit == null || implicit.isEmpty)
return;
final al.Result result = parent._solver.addConstraints(implicit);
assert(result == al.Result.success);
parent.markNeedsLayout();
......@@ -57,9 +90,7 @@ class AutoLayoutParams {
void _removeImplicitConstraints() {
assert(_renderBox != null);
if (_renderBox.parent == null)
return;
if (_implicitConstraints == null || _implicitConstraints.isEmpty)
if (_renderBox.parent == null || _implicitConstraints == null || _implicitConstraints.isEmpty)
return;
assert(_renderBox.parent is RenderAutoLayout);
final RenderAutoLayout parent = _renderBox.parent;
......@@ -68,36 +99,6 @@ class AutoLayoutParams {
parent.markNeedsLayout();
_implicitConstraints = null;
}
}
class AutoLayoutParentData extends ContainerBoxParentDataMixin<RenderBox> {
AutoLayoutParentData(this._renderBox);
final RenderBox _renderBox;
AutoLayoutParams get params => _params;
AutoLayoutParams _params;
void set params(AutoLayoutParams value) {
if (_params == value)
return;
if (_params != null) {
_params._removeImplicitConstraints();
_params._renderBox = null;
}
_params = value;
if (_params != null) {
assert(_params._renderBox == null);
_params._renderBox = _renderBox;
_params._addImplicitConstraints();
}
}
BoxConstraints get _constraints {
return new BoxConstraints.tightFor(
width: _params._rightEdge.value - _params._leftEdge.value,
height: _params._bottomEdge.value - _params._topEdge.value
);
}
/// Returns the set of implicit constraints that need to be applied to all
/// instances of this class when they are moved into a render object with an
......@@ -105,8 +106,9 @@ class AutoLayoutParentData extends ContainerBoxParentDataMixin<RenderBox> {
/// may return null.
List<al.Constraint> _constructImplicitConstraints() {
return <al.Constraint>[
_params._leftEdge >= al.cm(0.0), // The left edge must be positive.
_params._rightEdge >= _params._leftEdge, // Width must be positive.
_rect._left >= al.cm(0.0), // The left edge must be positive.
_rect._right >= _rect._left, // Width must be positive.
// Why don't we need something similar for the top and the bottom?
];
}
}
......@@ -114,7 +116,7 @@ class AutoLayoutParentData extends ContainerBoxParentDataMixin<RenderBox> {
abstract class AutoLayoutDelegate {
const AutoLayoutDelegate();
List<al.Constraint> getConstraints(AutoLayoutParams parentParams);
List<al.Constraint> getConstraints(AutoLayoutRect parent);
bool shouldUpdateConstraints(AutoLayoutDelegate oldDelegate);
}
......@@ -127,10 +129,10 @@ class RenderAutoLayout extends RenderBox
List<RenderBox> children
}) : _delegate = delegate, _needToUpdateConstraints = (delegate != null) {
_solver.addEditVariables(<al.Variable>[
_params._leftEdge.variable,
_params._rightEdge.variable,
_params._topEdge.variable,
_params._bottomEdge.variable
_rect._left.variable,
_rect._right.variable,
_rect._top.variable,
_rect._bottom.variable
], al.Priority.required - 1);
addAll(children);
......@@ -157,19 +159,22 @@ class RenderAutoLayout extends RenderBox
bool _needToUpdateConstraints;
final AutoLayoutParams _params = new AutoLayoutParams();
final AutoLayoutRect _rect = new AutoLayoutRect();
final al.Solver _solver = new al.Solver();
final List<al.Constraint> _explicitConstraints = new List<al.Constraint>();
void _addExplicitConstraints(List<al.Constraint> constraints) {
if (constraints == null || constraints.isEmpty)
void _setExplicitConstraints(List<al.Constraint> constraints) {
assert(constraints != null);
if (constraints.isEmpty)
return;
if (_solver.addConstraints(constraints) == al.Result.success)
_explicitConstraints.addAll(constraints);
}
void _clearExplicitConstraints() {
if (_explicitConstraints.isEmpty)
return;
if (_solver.removeConstraints(_explicitConstraints) == al.Result.success)
_explicitConstraints.clear();
}
......@@ -178,13 +183,13 @@ class RenderAutoLayout extends RenderBox
// Make sure to call super first to setup the parent data
super.adoptChild(child);
final AutoLayoutParentData childParentData = child.parentData;
childParentData._params?._addImplicitConstraints();
childParentData._addImplicitConstraints();
assert(child.parentData == childParentData);
}
void dropChild(RenderObject child) {
final AutoLayoutParentData childParentData = child.parentData;
childParentData._params?._removeImplicitConstraints();
childParentData._removeImplicitConstraints();
assert(child.parentData == childParentData);
super.dropChild(child);
}
......@@ -200,42 +205,40 @@ class RenderAutoLayout extends RenderBox
size = constraints.biggest;
}
Size _previousSize;
void performLayout() {
// Step 1: Update constraints if needed.
bool needToFlushUpdates = false;
if (_needToUpdateConstraints) {
_clearExplicitConstraints();
if (_delegate != null)
_addExplicitConstraints(_delegate.getConstraints(_params));
_setExplicitConstraints(_delegate.getConstraints(_rect));
_needToUpdateConstraints = false;
needToFlushUpdates = true;
}
// Step 2: Update dimensions of this render object.
_solver
..suggestValueForVariable(_params._leftEdge.variable, 0.0)
..suggestValueForVariable(_params._topEdge.variable, 0.0)
..suggestValueForVariable(_params._bottomEdge.variable, size.height)
..suggestValueForVariable(_params._rightEdge.variable, size.width);
// Step 3: Resolve solver updates and flush parameters
// We don't iterate over the children, instead, we ask the solver to tell
// us the updated parameters. Attached to the parameters (via the context)
// are the AutoLayoutParams instances.
for (AutoLayoutParams update in _solver.flushUpdates()) {
RenderBox child = update._renderBox;
if (child != null)
_layoutChild(child);
if (size != _previousSize) {
_solver
..suggestValueForVariable(_rect._left.variable, 0.0)
..suggestValueForVariable(_rect._top.variable, 0.0)
..suggestValueForVariable(_rect._bottom.variable, size.height)
..suggestValueForVariable(_rect._right.variable, size.width);
_previousSize = size;
needToFlushUpdates = true;
}
}
void _layoutChild(RenderBox child) {
assert(debugDoingThisLayout);
assert(child.parent == this);
final AutoLayoutParentData childParentData = child.parentData;
child.layout(childParentData._constraints);
childParentData.offset = new Offset(childParentData._params._leftEdge.value,
childParentData._params._topEdge.value);
assert(child.parentData == childParentData);
if (needToFlushUpdates)
_solver.flushUpdates();
RenderBox child = firstChild;
while (child != null) {
final AutoLayoutParentData childParentData = child.parentData;
child.layout(childParentData._constraintsFromSolver);
childParentData.offset = childParentData._offsetFromSolver;
assert(child.parentData == childParentData);
child = childParentData.nextSibling;
}
}
bool hitTestChildren(HitTestResult result, { Point position }) {
......
packages/flutter/lib/src/widgets/auto_layout.dart
View file @ 7a2c38ab
......@@ -7,7 +7,7 @@ import 'package:flutter/rendering.dart';
import 'framework.dart';
export 'package:flutter/rendering.dart' show
AutoLayoutParams,
AutoLayoutRect,
AutoLayoutDelegate;
class AutoLayout extends MultiChildRenderObjectWidget {
......@@ -27,16 +27,16 @@ class AutoLayout extends MultiChildRenderObjectWidget {
}
class AutoLayoutChild extends ParentDataWidget<AutoLayout> {
AutoLayoutChild({ Key key, this.params, Widget child })
: super(key: key, child: child);
AutoLayoutChild({ AutoLayoutRect rect, Widget child })
: rect = rect, super(key: new ObjectKey(rect), child: child);
final AutoLayoutParams params;
final AutoLayoutRect rect;
void applyParentData(RenderObject renderObject) {
assert(renderObject.parentData is AutoLayoutParentData);
final AutoLayoutParentData parentData = renderObject.parentData;
// AutoLayoutParentData filters out redundant writes and marks needs layout
// as appropriate.
parentData.params = params;
parentData.rect = rect;
}
}
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