Implement RenderImage and Image for Sky

sky/examples/raw/interactive_flex.dart

Index: sky/examples/raw/interactive_flex.dart
diff --git a/sky/examples/raw/interactive_flex.dart b/sky/examples/raw/interactive_flex.dart
new file mode 100644
index 0000000000000000000000000000000000000000..6689aed4544b95c3895baea6452b7bcfd4d1cdb0
--- /dev/null
+++ b/sky/examples/raw/interactive_flex.dart
@@ -0,0 +1,116 @@
+// 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:sky';
+import 'dart:math';
+import 'package:sky/framework/net/image_cache.dart' as image_cache;
+import 'package:sky/framework/app.dart';
+import 'package:sky/framework/rendering/box.dart';
+import 'package:sky/framework/rendering/block.dart';
+import 'package:sky/framework/rendering/flex.dart';
+import 'package:sky/framework/rendering/image.dart';
+import 'package:sky/framework/rendering/node.dart';
+import 'package:sky/framework/rendering/paragraph.dart';
+
+class RenderSolidColor extends RenderDecoratedBox {
+  final Size desiredSize;
+  final int backgroundColor;
+
+  RenderSolidColor(int backgroundColor, { this.desiredSize: const Size.infinite() })
+      : backgroundColor = backgroundColor,
+        super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
+
+  Size getIntrinsicDimensions(BoxConstraints constraints) {
+    return constraints.constrain(desiredSize);
+  }
+
+  void performLayout() {
+    size = constraints.constrain(desiredSize);
+  }
+
+  void handlePointer(PointerEvent event) {
+    if (event.type == 'pointerdown')
+      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
+    else if (event.type == 'pointerup')
+      decoration = new BoxDecoration(backgroundColor: backgroundColor);
+  }
+}

[abarth-chromium, 2015/06/03 00:16:31]

Can we not copy/paste this class for the Nth time?

[jackson, 2015/06/03 17:41:43]

Done.

+
+class RenderImageResizable extends RenderImage {
+  RenderImageResizable(String src, double width, double height)

[abarth-chromium, 2015/06/03 00:16:31]

The caller should pass in a sky.Size instead of width and height separately.

[jackson, 2015/06/03 17:41:43]

Done.

+      : _src = src,
+        _startingSize = new Size(width, height),
+        super(src, width, height) {
+  }
+
+  final String _src;
+  final Size _startingSize;
+  double lastX = null;
+  double lastY = null;
+  double growX = 0.0;
+  double growY = 0.0;
+  double swipeSize = 0.0;
+
+  void handlePointer(PointerEvent event) {
+    if (event.type == 'pointermove') {
+      growX = clamp(min: 0.0, value: growX + event.x - lastX);
+      growY = clamp(min: 0.0, value: growY + event.y - lastY);

[abarth-chromium, 2015/06/03 00:16:30]

Rather than using clamp, you can just use math.max

[jackson, 2015/06/03 17:41:43]

Done.

+      double newWidth = _startingSize.width == null ? null : _startingSize.width + growX;
+      double newHeight = _startingSize.height == null ? null : _startingSize.height + growY;
+      configure(_src, newWidth, newHeight);

[abarth-chromium, 2015/06/03 00:16:31]

This leans pretty heavily on the image cache.  Should we instead just have a
setter for the desiredSize so that a client can set the size of the image
without needing to remember the URL of the image?

[jackson, 2015/06/03 17:41:43]

Done.

+      markNeedsLayout();

[abarth-chromium, 2015/06/03 00:16:31]

This class shouldn't need to markNeedsLayout here.  The call to configure should
mark us for layout if the size change necessitated a layout.

[jackson, 2015/06/03 17:41:43]

Done.

+    }
+    lastX = event.x;
+    lastY = event.y;

[abarth-chromium, 2015/06/03 00:16:31]

This code will get really confused by multitouch.

It might be better to build an explicit state machine that looks for
pointerdown, remembers the pointer id and the startPoint, then looks at
pointermove and checks the pointer id and does math from there.

[jackson, 2015/06/03 17:41:43]

Done.

[jackson, 2015/06/03 22:06:25]

Done.

+  }
+}
+
+AppView app;
+RenderDecoratedBox root;
+
+void main() {
+  RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
+
+  root = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: 0xFF333333),
+    child: flexRoot
+  );
+
+  void addFlexChildSolidColor(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
+    RenderSolidColor child = new RenderSolidColor(backgroundColor);
+    parent.add(child);
+    child.parentData.flex = flex;
+  }
+
+  // Yellow bar at top
+  addFlexChildSolidColor(flexRoot, 0xFFFFFF00, flex: 1);
+
+  var row = new RenderFlex(direction: FlexDirection.Horizontal);
+
+  // Purple cell
+  addFlexChildSolidColor(row, 0xFF0000FF, flex: 1);
+
+  // Resizeable image
+  RenderImage image1 = new RenderImageResizable("https://www.dartlang.org/logos/dart-logo.png", 100.0, 100.0);

[abarth-chromium, 2015/06/03 00:16:30]

image1   <--- is there another image?

[jackson, 2015/06/03 17:41:43]

Done.

+  row.add(new RenderPadding(const EdgeDims(10.0, 10.0, 10.0, 10.0), image1));

[abarth-chromium, 2015/06/03 00:16:31]

const EdgeDims.all(10.0)

[jackson, 2015/06/03 17:41:43]

Done.

+
+  // The internet is a beautiful place.  https://baconipsum.com/
+  String meatyString = """Bacon ipsum dolor amet ham fatback tri-tip, prosciutto
+porchetta bacon kevin meatball meatloaf pig beef ribs chicken. Brisket ribeye
+andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola
+alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
+Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
+  RenderParagraph paragraph = new RenderParagraph(text: meatyString, color: 0xFF009900);
+  row.add(paragraph);
+  paragraph.parentData.flex = 2;
+
+  var decoratedRow = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
+    child: row
+  );
+
+  flexRoot.add(decoratedRow);
+  decoratedRow.parentData.flex = 3;
+  app = new AppView(root);
+}