Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draw debug rects when flex overflows #121

Merged
merged 3 commits into from
Jul 20, 2015
Merged

Draw debug rects when flex overflows #121

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
370dc13
Draw debug rects when flex overflows
collinjackson Jul 18, 2015
206ca72
abarth feedback
collinjackson Jul 20, 2015
acd51f8
Merge remote-tracking branch 'upstream/master' into baseline5
collinjackson Jul 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 29 additions & 8 deletions sky/sdk/lib/rendering/flex.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
}
}

bool _overflowOccurredDuringLayout = false;
// Set during layout if overflow occurred on the main axis
double _overflow;

void setupParentData(RenderBox child) {
if (child.parentData is! FlexBoxParentData)
Expand Down Expand Up @@ -325,6 +326,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
}
child = child.parentData.nextSibling;
}
_overflow = math.max(0.0, -freeSpace);
freeSpace = math.max(0.0, freeSpace);

// Steps 4-5. Distribute remaining space to flexible children.
double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0;
Expand Down Expand Up @@ -362,7 +365,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
child = child.parentData.nextSibling;
}

// Section 8.2: Axis Alignment using the justify-content property
// Section 8.2: Main Axis Alignment using the justify-content property
double remainingSpace = math.max(0.0, freeSpace - usedSpace);
double leadingSpace;
double betweenSpace;
Expand All @@ -389,20 +392,16 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
break;
}

Size desiredSize;
switch (_direction) {
case FlexDirection.horizontal:
desiredSize = new Size(mainSize, crossSize);
size = constraints.constrain(desiredSize);
size = constraints.constrain(new Size(mainSize, crossSize));
crossSize = size.height;
break;
case FlexDirection.vertical:
desiredSize = new Size(crossSize, mainSize);
size = constraints.constrain(new Size(crossSize, mainSize));
crossSize = size.width;
break;
}
_overflowOccurredDuringLayout = desiredSize != size;

// Position elements
double childMainPosition = leadingSpace;
Expand Down Expand Up @@ -449,7 +448,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
}

void paint(PaintingCanvas canvas, Offset offset) {
if (_overflowOccurredDuringLayout) {
if (_overflow > 0) {
canvas.save();
canvas.clipRect(offset & size);
defaultPaint(canvas, offset);
Expand All @@ -458,4 +457,26 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
defaultPaint(canvas, offset);
}
}

void debugPaintSize(PaintingCanvas canvas, Offset offset) {
super.debugPaintSize(canvas, offset);
if (_overflow <= 0)
return;

// Draw a red rectangle over the overflow area in debug mode
// You should be using a Clip if you want to clip your children
Paint paint = new Paint()..color = const Color(0x7FFF0000);
Rect overflowRect;
switch(direction) {
case FlexDirection.horizontal:
overflowRect = offset + new Offset(size.width, 0.0) &
new Size(_overflow, size.height);
break;
case FlexDirection.vertical:
overflowRect = offset + new Offset(0.0, size.height) &
new Size(size.width, _overflow);
break;
}
canvas.drawRect(overflowRect, paint);
}
}