Skip to content

Commit

Permalink
Merge pull request #121 from collinjackson/baseline5
Browse files Browse the repository at this point in the history
Draw debug rects when flex overflows and debugPaintSizeEnabled
  • Loading branch information
collinjackson committed Jul 20, 2015
2 parents a548d39 + acd51f8 commit a5f6fdb
Showing 1 changed file with 29 additions and 8 deletions.
37 changes: 29 additions & 8 deletions sky/sdk/lib/rendering/flex.dart
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);
}
}

1 comment on commit a5f6fdb

@Hixie
Copy link
Contributor

@Hixie Hixie commented on a5f6fdb Jul 21, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a comment to debug.dart mentioning that debugPaintSizeEnabled also paints overflow for Flex? If you're feeling especially helpful you could also expand on this in rendering/README.md, near the end there's a debugging section that could sorely do with more details.

Please sign in to comment.