Merge branch 'master' of github.com:Flipboard/react-canvas into unicode-linebreaking

devongovett · devongovett · commit e0c8c4600e15 · 2015-02-14T18:35:48.000-08:00
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This project is a work-in-progress. Though much of the code is in production on
 
 ## Motivation
 
-Having a long history of building interfaces geared toward mobile devices, we found that the reason mobile web apps feel slow when compared to native apps is the DOM. CSS animations and transitions are the fastest path to smooth animations on the web, but they have several limitiations. React Canvas leverages the fact that most modern mobile browsers now have hardware accelerated canvas.
+Having a long history of building interfaces geared toward mobile devices, we found that the reason mobile web apps feel slow when compared to native apps is the DOM. CSS animations and transitions are the fastest path to smooth animations on the web, but they have several limitations. React Canvas leverages the fact that most modern mobile browsers now have hardware accelerated canvas.
 
 While there have been other attempts to bind canvas drawing APIs to React, they are more focused on visualizations and games. Where React Canvas differs is in the focus on building application user interfaces. The fact that it renders to canvas is an implementation detail.
 
@@ -175,6 +175,11 @@ npm install
 npm start
 ```
 
-This will start a live reloading server on port 8080.
+This will start a live reloading server on port 8080. To override the default server and live reload ports, run `npm start` with PORT and/or RELOAD_PORT environment variables.
 
 **A note on NODE_ENV and React**: running the examples with `NODE_ENV=production` will noticeably improve scrolling performance. This is because React skips propType validation in production mode.
+
+## Contributing
+
+We welcome pull requests for bug fixes, new features, and improvements to React Canvas. Contributors to the main repository must accept Flipboard's Apache-style [Individual Contributor License Agreement (CLA)](https://docs.google.com/forms/d/1gh9y6_i8xFn6pA15PqFeye19VqasuI9-bGp_e0owy74/viewform) before any changes can be merged.
+
diff --git a/examples/css-layout/index.html b/examples/css-layout/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>ReactCanvas: css-layout</title>
   <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
   <script src="/examples/common/touch-emulator.js"></script>
@@ -14,4 +14,4 @@
   <div id="main"></div>
   <script src="/build/css-layout.js"></script>
 </body>
-</html>
+</html>
diff --git a/examples/listview/index.html b/examples/listview/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>ReactCanvas: ListView</title>
   <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
   <script src="/examples/common/touch-emulator.js"></script>
@@ -14,4 +14,4 @@
   <div id="main"></div>
   <script src="/build/listview.js"></script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>ReactCanvas: Timeline</title>
   <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
   <script src="/examples/common/touch-emulator.js"></script>
@@ -14,4 +14,4 @@
   <div id="main"></div>
   <script src="/build/timeline.js"></script>
 </body>
-</html>
+</html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,12 +1,14 @@
 var gulp = require('gulp');
-var clean = require('gulp-clean');
+var del = require('del');
 var connect = require('gulp-connect');
 var webpack = require('gulp-webpack');
 var webpackConfig = require('./webpack.config.js');
 
+var port = process.env.PORT || 8080;
+var reloadPort = process.env.RELOAD_PORT || 35729;
+
 gulp.task('clean', function () {
-  return gulp.src('build', {read: false})
-    .pipe(clean());
+  del(['build']);
 });
 
 gulp.task('build', function () {
@@ -17,7 +19,10 @@ gulp.task('build', function () {
 
 gulp.task('serve', function () {
   connect.server({
-    livereload: true
+    port: port,
+    livereload: {
+      port: reloadPort
+    }
   });
 });
 
diff --git a/lib/Group.js b/lib/Group.js
@@ -23,6 +23,7 @@ var Group = createComponent('Group', LayerMixin, ContainerMixin, {
     this.applyLayerProps(prevProps, props);
     this.updateChildren(props.children, transaction, context);
     this._currentElement = nextComponent;
+    this.node.invalidateLayout();
   },
 
   unmountComponent: function () {
diff --git a/lib/Image.js b/lib/Image.js
@@ -76,13 +76,21 @@ var Image = React.createClass({
   render: function () {
     var rawImage;
     var imageStyle = assign({}, this.props.style);
+    var style = assign({}, this.props.style);
+    var backgroundStyle = assign({}, this.props.style);
     var useBackingStore = this.state.loaded ? this.props.useBackingStore : false;
 
     // Hide the image until loaded.
     imageStyle.alpha = this.state.imageAlpha;
 
+    // Hide opaque background if image loaded so that images with transparent
+    // do not render on top of solid color.
+    style.backgroundColor = imageStyle.backgroundColor = null;
+    backgroundStyle.alpha = clamp(1 - this.state.imageAlpha, 0, 1);
+
     return (
-      React.createElement(Group, {ref: 'main', style: this.props.style},
+      React.createElement(Group, {ref: 'main', style: style},
+        React.createElement(Layer, {ref: 'background', style: backgroundStyle}),
         React.createElement(RawImage, {ref: 'image', src: this.props.src, style: imageStyle, useBackingStore: useBackingStore})
       )
     );
diff --git a/lib/LayerMixin.js b/lib/LayerMixin.js
@@ -53,6 +53,7 @@ var LayerMixin = {
     layer.alpha = style.alpha;
     layer.backgroundColor = style.backgroundColor;
     layer.borderColor = style.borderColor;
+    layer.borderWidth = style.borderWidth;
     layer.borderRadius = style.borderRadius;
     layer.clipRect = style.clipRect;
     layer.frame = FrameUtils.make(style.left || 0, style.top || 0, style.width || 0, style.height || 0);
diff --git a/lib/hitTest.js b/lib/hitTest.js
@@ -21,7 +21,13 @@ function hitTest (e, rootLayer, rootNode) {
     touchX -= rootNodeBox.left;
     touchY -= rootNodeBox.top;
   }
-  return getLayerAtPoint(rootLayer, e.type, FrameUtils.make(touchX, touchY, 1, 1));
+  return getLayerAtPoint(
+    rootLayer,
+    e.type,
+    FrameUtils.make(touchX, touchY, 1, 1),
+    rootLayer.translateX || 0,
+    rootLayer.translateY || 0
+  );
 }
 
 /**
@@ -48,11 +54,11 @@ function getHitHandle (type) {
 /**
  * @private
  */
-function getLayerAtPoint (root, type, point) {
+function getLayerAtPoint (root, type, point, tx, ty) {
   var layer = null;
   var hitHandle = getHitHandle(type);
   var sortedChildren;
-  var hitFrame = root.frame;
+  var hitFrame = FrameUtils.clone(root.frame);
 
   // Early bail for non-visible layers
   if (typeof root.alpha === 'number' && root.alpha < 0.01) {
@@ -63,7 +69,13 @@ function getLayerAtPoint (root, type, point) {
   if (root.children) {
     sortedChildren = root.children.slice().reverse().sort(sortByZIndexDescending);
     for (var i=0, len=sortedChildren.length; i < len; i++) {
-      layer = getLayerAtPoint(sortedChildren[i], type, point);
+      layer = getLayerAtPoint(
+        sortedChildren[i],
+        type,
+        point,
+        tx + (root.translateX || 0),
+        ty + (root.translateY || 0)
+      );
       if (layer) {
         break;
       }
@@ -78,6 +90,15 @@ function getLayerAtPoint (root, type, point) {
     );
   }
 
+  // Check for x/y translation
+  if (tx) {
+    hitFrame.x += tx;
+  }
+
+  if (ty) {
+    hitFrame.y += ty;
+  }
+
   // No child layer at the given point. Try the parent layer.
   if (!layer && root[hitHandle] && FrameUtils.intersects(hitFrame, point)) {
     layer = root;
diff --git a/package.json b/package.json
@@ -21,15 +21,15 @@
     "url": "https://github.com/Flipboard/react-canvas/issues"
   },
   "devDependencies": {
-    "react": "^0.13.0-beta.1",
-    "webpack": "^1.5.3",
-    "transform-loader": "^0.2.1",
+    "del": "^1.1.1",
     "envify": "^3.2.0",
-    "jsx-loader": "^0.12.2",
     "gulp": "^3.8.10",
     "gulp-connect": "^2.2.0",
     "gulp-webpack": "^1.2.0",
-    "gulp-clean": "^0.3.1"
+    "jsx-loader": "^0.12.2",
+    "react": "^0.13.0-beta.1",
+    "transform-loader": "^0.2.1",
+    "webpack": "^1.5.3"
   },
   "peerDependencies": {
     "react": "^0.13.0-beta.1"
