Merge pull request #421 from abarth/rounded_border

Support borders with borderRadius

sky/engine/core/painting/Canvas.cpp

@@ -190,6 +190,16 @@ void Canvas::drawRRect(const RRect* rrect, const Paint* paint)
     m_canvas->drawRRect(rrect->rrect(), paint->paint());
 }
 
+void Canvas::drawDRRect(const RRect* outer, const RRect* inner, const Paint* paint)
+{
+    if (!m_canvas)
+        return;
+    ASSERT(outer);
+    ASSERT(inner);
+    ASSERT(paint);
+    m_canvas->drawDRRect(outer->rrect(), inner->rrect(), paint->paint());
+}
+
 void Canvas::drawOval(const Rect& rect, const Paint* paint)
 {
     if (!m_canvas)

sky/engine/core/painting/Canvas.h

@@ -81,6 +81,7 @@ public:
     void drawPaint(const Paint* paint);
     void drawRect(const Rect& rect, const Paint* paint);
     void drawRRect(const RRect* rrect, const Paint* paint);
+    void drawDRRect(const RRect* outer, const RRect* inner, const Paint* paint);
     void drawOval(const Rect& rect, const Paint* paint);
     void drawCircle(const Point& c, float radius, const Paint* paint);
     void drawPath(const CanvasPath* path, const Paint* paint);

sky/engine/core/painting/Canvas.idl

@@ -29,6 +29,7 @@
   void drawPaint(Paint paint);
   void drawRect(Rect rect, Paint paint);
   void drawRRect(RRect rrect, Paint paint);
+  void drawDRRect(RRect outer, RRect inner, Paint paint);
   void drawOval(Rect rect, Paint paint);
   void drawCircle(Point c, float radius, Paint paint);
   void drawPath(Path path, Paint paint);

sky/engine/core/painting/Rect.dart

@@ -36,6 +36,9 @@ class Rect {
   Rect inflate(double delta) {
     return new Rect.fromLTRB(left - delta, top - delta, right + delta, bottom + delta);
   }
+  Rect deflate(double delta) {
+    return inflate(-delta);
+  }
 
   double get width => right - left;
   double get height => bottom - top;

sky/packages/sky/example/widgets/block_viewport.dart

@@ -91,7 +91,7 @@ class BlockViewportApp extends App {
                 child: new Container(
                   margin: new EdgeDims.all(8.0),
                   decoration: new BoxDecoration(
-                    border: new Border.all(new BorderSide(color: new Color(0xFF000000)))
+                    border: new Border.all(color: new Color(0xFF000000))
                   ),
                   padding: new EdgeDims.all(16.0),
                   child: new BlockViewport(

sky/packages/sky/example/widgets/sector.dart

@@ -114,7 +114,7 @@ class SectorApp extends App {
             child: new Container(
               margin: new EdgeDims.all(8.0),
               decoration: new BoxDecoration(
-                border: new Border.all(new BorderSide(color: new Color(0xFF000000)))
+                border: new Border.all(color: new Color(0xFF000000))
               ),
               padding: new EdgeDims.all(8.0),
               child: new WidgetToRenderBoxAdapter(sectors)

sky/packages/sky/lib/painting/box_painter.dart

@@ -37,11 +37,13 @@ class Border {
     this.left: BorderSide.none
   });
 
-  const Border.all(BorderSide side) :
-    top = side,
-    right = side,
-    bottom = side,
-    left = side;
+  factory Border.all({
+    Color color: const Color(0xFF000000),
+    double width: 1.0
+  }) {
+    BorderSide side = new BorderSide(color: color, width: width);
+    return new Border(top: side, right: side, bottom: side, left: side);
+  }
 
   final BorderSide top;
   final BorderSide right;
@@ -323,6 +325,25 @@ class BoxPainter {
     return _cachedBackgroundPaint;
   }
 
+  bool get _hasUniformBorder {
+    Color color = _decoration.border.top.color;
+    bool hasUniformColor =
+      _decoration.border.right.color == color &&
+      _decoration.border.bottom.color == color &&
+      _decoration.border.left.color == color;
+
+    if (!hasUniformColor)
+      return false;
+
+    double width = _decoration.border.top.width;
+    bool hasUniformWidth =
+      _decoration.border.right.width == width &&
+      _decoration.border.bottom.width == width &&
+      _decoration.border.left.width == width;
+
+    return hasUniformWidth;
+  }
+
   void _paintBackgroundColor(sky.Canvas canvas, Rect rect) {
     if (_decoration.backgroundColor != null || _decoration.boxShadow != null ||
         _decoration.gradient != null) {
@@ -397,8 +418,13 @@ class BoxPainter {
     if (_decoration.border == null)
       return;
 
-    assert(_decoration.borderRadius == null); // TODO(abarth): Implement borders with border radius.
-    assert(_decoration.shape == Shape.rectangle); // TODO(ianh): Implement borders on circles.
+    if (_hasUniformBorder && _decoration.borderRadius != null) {
+      _paintBorderWithRadius(canvas, rect);
+      return;
+    }
+
+    assert(_decoration.borderRadius == null); // TODO(abarth): Support non-uniform rounded borders.
+    assert(_decoration.shape == Shape.rectangle); // TODO(ianh): Support borders on circles.
 
     assert(_decoration.border.top != null);
     assert(_decoration.border.right != null);
@@ -445,6 +471,17 @@ class BoxPainter {
     canvas.drawPath(path, paint);
   }
 
+  void _paintBorderWithRadius(sky.Canvas canvas, Rect rect) {
+    assert(_hasUniformBorder);
+    Color color = _decoration.border.top.color;
+    double width = _decoration.border.top.width;
+    double radius = _decoration.borderRadius;
+
+    sky.RRect outer = new sky.RRect()..setRectXY(rect, radius, radius);
+    sky.RRect inner = new sky.RRect()..setRectXY(rect.deflate(width), radius - width, radius - width);
+    canvas.drawDRRect(outer, inner, new Paint()..color = color);
+  }
+
   void paint(sky.Canvas canvas, Rect rect) {
     _paintBackgroundColor(canvas, rect);
     _paintBackgroundImage(canvas, rect);

sky/tests/resources/display_list.dart

@@ -90,6 +90,10 @@ class TestPaintingCanvas extends PaintingCanvas {
     log("drawRRect($rrect, $paint)");
   }
 
+  void drawDRRect(sky.RRect outer, sky.RRect inner, Paint paint) {
+    log("drawDRRect($outer, $inner, $paint)");
+  }
+
   void drawOval(Rect rect, Paint paint) {
     log("drawOval($rect, $paint)");
   }

sky/tests/widgets/rounded_border-expected.txt

+TestRenderView enabled
+
+PAINT FOR FRAME #1 ----------------------------------------------
+1 | TestPaintingCanvas() constructor: 800.0 x 600.0
+------------------------------------------------------------------------
+
+PAINT FOR FRAME #2 ----------------------------------------------
+2 | TestPaintingCanvas() constructor: 800.0 x 600.0
+2 | paintChild RenderPositionedBox at Point(0.0, 0.0)
+2 |  | TestPaintingCanvas() constructor: 800.0 x 600.0
+2 |  | paintChild RenderConstrainedBox at Point(350.0, 250.0)
+2 |  |  | TestPaintingCanvas() constructor: 800.0 x 600.0
+2 |  |  | paintChild RenderDecoratedBox at Point(350.0, 250.0)
+2 |  |  |  | TestPaintingCanvas() constructor: 800.0 x 600.0
+2 |  |  |  | drawRRect(Instance of 'RRect', Paint(color:Color(0xff0000ff)))
+2 |  |  |  | drawDRRect(Instance of 'RRect', Instance of 'RRect', Paint(color:Color(0x7fff0000)))
+------------------------------------------------------------------------
+PAINTED 2 FRAMES

sky/tests/widgets/rounded_border.dart

+// Copyright 2015 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.
+
+import 'package:sky/widgets/basic.dart';
+
+import '../resources/display_list.dart';
+
+main() async {
+  WidgetTester tester = new WidgetTester();
+
+  await tester.test(() {
+    return new Center(
+      child: new Container(
+        width: 100.0,
+        height: 100.0,
+        decoration: new BoxDecoration(
+          backgroundColor: new Color(0xFF0000FF),
+          borderRadius: 20.0,
+          border: new Border.all(
+            color: const Color(0x7FFF0000),
+            width: 10.0
+          )
+        )
+      )
+    );
+  });
+
+  tester.endTest();
+}