Support for background images on cards, style demo home

sky/sdk/lib/painting/box_painter.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 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'dart:sky' show Point, Offset, Size, Rect, Color, Paint, Path;
 
 import 'shadows.dart';
+import 'package:sky/mojo/net/image_cache.dart' as image_cache;
 
 class BorderSide {
   const BorderSide({
     this.color: const Color(0xFF000000),
     this.width: 1.0
   });
   final Color color;
   final double width;
 
   static const none = const BorderSide(width: 0.0);
@@ skipping 94 matching lines @@
                                    this.colorStops, this.tileMode);
   }
 
   final Point center;
   final double radius;
   final List<Color> colors;
   final List<double> colorStops;
   final sky.TileMode tileMode;
 }
 
+enum BackgroundFit { fill, contain, cover, none, scaleDown }
+
+enum BackgroundRepeat { repeat, repeatX, repeatY, noRepeat }
+
+class BackgroundImage {
+  final String src;

[Hixie, 2015/06/26 23:13:26]

I don't think we should have the painter code working with URLs.

I think we should abstract this out into a separate class that handles the image
caching and so forth, which has callbacks for "size changed" and "image
changed". This would also enable us to do animated images.

It's fine if you just file a bug for this or put a TODO or whatever.

[jackson, 2015/06/29 16:53:25]

I'll do this, added a TODO for now.

+  final BackgroundFit fit;
+  final BackgroundRepeat repeat;
+  BackgroundImage({
+    this.src,
+    this.fit: BackgroundFit.scaleDown,
+    this.repeat: BackgroundRepeat.noRepeat
+  }) {
+    image_cache.load(src, (image) {
+      _image = image;
+      _size = new Size(image.width.toDouble(), image.height.toDouble());
+      for (Function listener in _listeners) {
+        listener();
+      }
+    });
+  }
+
+  sky.Image _image;
+  sky.Image get image => _image;
+
+  Size _size;
+
+  final List<Function> _listeners = new List<Function>();
+
+  void addChangeListener(Function listener) {
+    _listeners.add(listener);
+  }
+
+  void removeChangeListener(Function listener) {
+    _listeners.remove(listener);
+  }
+
+  String toString() => 'BackgroundImage($image, $fit, $repeat)';

[Hixie, 2015/06/26 23:13:27]

what does Image.toString() do?

[jackson, 2015/06/29 16:53:24]

I changed it to $src, I think that's fine for now, but I'll update it when I
make the change above.

+}
+
 enum Shape { rectangle, circle }
 
 // This must be immutable, because we won't notice when it changes
 class BoxDecoration {
   const BoxDecoration({
-    this.backgroundColor, // null = don't draw background
+    this.backgroundColor, // null = don't draw background color
+    this.backgroundImage, // null = don't draw background image
     this.border, // null = don't draw border
     this.borderRadius, // null = use more efficient background drawing; note that this must be null for circles
     this.boxShadow, // null = don't draw shadows
     this.gradient, // null = don't allocate gradient objects
     this.shape: Shape.rectangle
   });
 
   final Color backgroundColor;
+  final BackgroundImage backgroundImage;
   final double borderRadius;
   final Border border;
   final List<BoxShadow> boxShadow;
   final Gradient gradient;
   final Shape shape;
 
   String toString([String prefix = '']) {
     List<String> result = [];
     if (backgroundColor != null)
       result.add('${prefix}backgroundColor: $backgroundColor');
+    if (backgroundImage != null)
+      result.add('${prefix}backgroundImage: $backgroundImage');
     if (border != null)
       result.add('${prefix}border: $border');
     if (borderRadius != null)
       result.add('${prefix}borderRadius: $borderRadius');
     if (boxShadow != null)
       result.add('${prefix}boxShadow: ${boxShadow.map((shadow) => shadow.toString())}');
     if (gradient != null)
       result.add('${prefix}gradient: $gradient');
     if (shape != Shape.rectangle)
       result.add('${prefix}shape: $shape');
@@ skipping 54 matching lines @@
           canvas.drawCircle(center, radius, _backgroundPaint);
           break;
         case Shape.rectangle:
           if (_decoration.borderRadius == null)
             canvas.drawRect(rect, _backgroundPaint);
           else
             canvas.drawRRect(new sky.RRect()..setRectXY(rect, _decoration.borderRadius, _decoration.borderRadius), _backgroundPaint);
           break;
       }
     }
 

[Hixie, 2015/06/26 23:13:27]

we're going to want to split this function into subfunctions for each thing it
does soon.

[jackson, 2015/06/29 16:53:25]

Done.

+    if (_decoration.backgroundImage != null) {
+      sky.Image image = _decoration.backgroundImage.image;
+      if (image != null) {
+        Rect src;
+        Rect dst;
+        switch(_decoration.backgroundImage.fit) {
+          case BackgroundFit.fill:
+            src = new Rect.fromSize(_decoration.backgroundImage._size);
+            dst = rect;
+            break;
+          case BackgroundFit.contain:
+            src = new Rect.fromSize(_decoration.backgroundImage._size);
+            if (rect.size.width / rect.size.height > src.size.width / rect.size.height) {
+              dst = new Rect.fromLTRB(0.0, 0.0, rect.size.width, src.size.height * rect.size.width / src.size.width);
+            } else {
+              dst = new Rect.fromLTRB(0.0, 0.0, src.size.width * rect.size.height / src.size.height, rect.size.height);
+            }
+            break;
+          case BackgroundFit.cover:
+            src = new Rect.fromSize(_decoration.backgroundImage._size);
+            if (rect.size.width / rect.size.height > src.size.width / src.size.height) {
+              src = new Rect.fromLTRB(0.0, 0.0, src.size.width, src.size.width * rect.size.height / rect.size.width);
+            } else {
+              src = new Rect.fromLTRB(0.0, 0.0, src.size.height * rect.size.width / rect.size.height, src.size.height);
+            }
+            dst = rect;
+            break;
+          case BackgroundFit.none:
+            assert(false);
+            // src = // new Rect.fromSize(;
+            // dst = // rect;

[Hixie, 2015/06/26 23:13:27]

remove comments here

[jackson, 2015/06/29 16:53:24]

I think for this mode we can just say src = rect and dst = rect.

+            break;
+          case BackgroundFit.scaleDown:
+            src = new Rect.fromSize(_decoration.backgroundImage._size);
+            dst = rect;
+            if (src.size.height > dst.size.height) {
+              dst = new Rect.fromLTRB(0.0, 0.0, src.size.width * dst.size.height / src.size.height, src.size.height);
+            }
+            if (src.size.width > dst.size.width) {
+              dst = new Rect.fromLTRB(0.0, 0.0, dst.size.width, src.size.height * dst.size.width / src.size.width);
+            }
+            break;
+        }
+        canvas.drawImageRect(image, src, dst, new Paint());
+      }
+    }
+
     if (_decoration.border != null) {
       assert(_decoration.borderRadius == null); // TODO(abarth): Implement borders with border radius.
       assert(_decoration.shape == Shape.rectangle); // TODO(ianh): Implement borders on circles.
 
       assert(_decoration.border.top != null);
       assert(_decoration.border.right != null);
       assert(_decoration.border.bottom != null);
       assert(_decoration.border.left != null);
 
       Paint paint = new Paint();
@@ skipping 30 matching lines @@
       path = new Path();
       path.moveTo(rect.left, rect.bottom);
       path.lineTo(rect.left + _decoration.border.left.width, rect.bottom - _decoration.border.bottom.width);
       path.lineTo(rect.left + _decoration.border.left.width, rect.top + _decoration.border.top.width);
       path.lineTo(rect.left, rect.top);
       path.close();
       canvas.drawPath(path, paint);
     }
   }
 }