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

Author: devongovett

examples/css-layout/app.js

@@ -23,7 +23,9 @@ var App = React.createClass({
           <Text style={this.getTitleStyle()}>
             Professor PuddinPop
           </Text>
-          <Image src='http://lorempixel.com/360/420/cats/1/' style={this.getImageStyle()} fadeIn={true} />
+          <Group style={this.getImageGroupStyle()}>
+            <Image src='http://lorempixel.com/360/420/cats/1/' style={this.getImageStyle()} fadeIn={true} />
+          </Group>
           <Text style={this.getExcerptStyle()}>
             With these words the Witch fell down in a brown, melted, shapeless mass and began to spread over the clean boards of the kitchen floor.  Seeing that she had really melted away to nothing, Dorothy drew another bucket of water and threw it over the mess.  She then swept it all out the door.  After picking out the silver shoe, which was all that was left of the old woman, she cleaned and dried it with a cloth, and put it on her foot again.  Then, being at last free to do as she chose, she ran out to the courtyard to tell the Lion that the Wicked Witch of the West had come to an end, and that they were no longer prisoners in a strange land.
           </Text>
@@ -51,17 +53,28 @@ var App = React.createClass({
     };
   },
 
-  getImageStyle: function () {
+  getImageGroupStyle: function () {
     return {
+      position: 'relative',
       flex: 1,
       backgroundColor: '#eee'
     };
   },
 
+  getImageStyle: function () {
+    return {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    };
+  },
+
   getTitleStyle: function () {
     return {
       fontFace: FontFace('Georgia'),
-      fontSize: 18,
+      fontSize: 22,
       lineHeight: 28,
       height: 28,
       marginBottom: 10,
@@ -73,7 +86,7 @@ var App = React.createClass({
   getExcerptStyle: function () {
     return {
       fontFace: FontFace('Georgia'),
-      fontSize: 12,
+      fontSize: 17,
       lineHeight: 25,
       marginTop: 15,
       flex: 1,

examples/timeline/components/Page.js

@@ -91,7 +91,7 @@ var Page = React.createClass({
       top: this.getImageHeight() + CONTENT_INSET,
       left: CONTENT_INSET,
       width: this.props.width - 2 * CONTENT_INSET,
-      fontSize: 20,
+      fontSize: 22,
       lineHeight: 30,
       fontFace: FontFace('Avenir Next Condensed, Helvetica, sans-serif', null, {weight: 500})
     };
@@ -102,7 +102,7 @@ var Page = React.createClass({
       left: CONTENT_INSET,
       width: this.props.width - 2 * CONTENT_INSET,
       fontFace: FontFace('Georgia, serif'),
-      fontSize: 12,
+      fontSize: 15,
       lineHeight: 23
     };
   },

lib/CanvasUtils.js

@@ -136,7 +136,7 @@ function drawText (ctx, text, x, y, width, height, fontFace, options) {
   }
 
   ctx.fillStyle = options.color;
-  ctx.font = fontFace.attributes.style + ' normal ' + fontFace.attributes.weight + ' ' + options.fontSize + 'pt ' + fontFace.family;
+  ctx.font = fontFace.attributes.style + ' ' + fontFace.attributes.weight + ' ' + options.fontSize + 'px ' + fontFace.family;
 
   textMetrics.lines.forEach(function (line, index) {
     currText = line.text;

lib/Image.js

@@ -34,6 +34,7 @@ var RawImage = createComponent('Image', LayerMixin, {
     var props = nextComponent.props;
     this.applyLayerProps(prevProps, props);
     this._currentElement = nextComponent;
+    this.node.invalidateLayout();
   },
 
 });

lib/ImageCache.js

@@ -77,16 +77,65 @@ assign(Img.prototype, EventEmitter.prototype, {
 });
 
 var kInstancePoolLength = 300;
-var _instancePool = [];
 
-function getPooledImage (src) {
-  for (var i=0, len=_instancePool.length; i < len; i++) {
-    if (_instancePool[i].getOriginalSrc() === src) {
-      return _instancePool[i];
+var _instancePool = {
+  length: 0,
+  // Keep all the nodes in memory.
+  elements: {
+    
+  },
+  
+  // Push with 0 frequency
+  push: function (hash, data) {
+    this.length++;
+    this.elements[hash] = {
+      hash: hash, // Helps identifying 
+      freq: 0,
+      data: data
+    };
+  },
+  
+  get: function (path) {
+    var element = this.elements[path];
+    
+    if( element ){
+      element.freq++;
+      return element.data;
+    }
+    
+    return null;
+  },
+  
+  // used to explicitely remove the path
+  removeElement: function (path) {
+    // Now almighty GC can claim this soul
+    var element = this.elements[path];
+    delete this.elements[path];
+    this.length--;
+    return element;
+  },
+  
+  _reduceLeastUsed: function (least, currentHash) {
+    var current = _instancePool.elements[currentHash];
+    
+    if( least.freq > current.freq ){
+      return current;
     }
+    
+    return least;
+  },
+  
+  popLeastUsed: function () {
+    var reducer = _instancePool._reduceLeastUsed;
+    var minUsed = Object.keys(this.elements).reduce(reducer, { freq: Infinity });
+    
+    if( minUsed.hash ){
+      return this.removeElement(minUsed.hash);  
+    }
+    
+    return null;
   }
-  return null;
-}
+};
 
 var ImageCache = {
 
@@ -96,14 +145,14 @@ var ImageCache = {
    * @return {Img}
    */
   get: function (src) {
-    var image = getPooledImage(src);
+    var image = _instancePool.get(src);
     if (!image) {
-      // Simple FIFO queue
+      // Awesome LRU
       image = new Img(src);
       if (_instancePool.length >= kInstancePoolLength) {
-        _instancePool.shift().destructor();
+        _instancePool.popLeastUsed().destructor();
       }
-    _instancePool.push(image);
+      _instancePool.push(image.getOriginalSrc(), image);
     }
     return image;
   }

lib/Layer.js

@@ -17,6 +17,7 @@ var Layer = createComponent('Layer', LayerMixin, {
     var props = nextComponent.props;
     this.applyLayerProps(prevProps, props);
     this._currentElement = nextComponent;
+    this.node.invalidateLayout();
   }
 
 });

lib/LayerMixin.js

@@ -81,11 +81,6 @@ var LayerMixin = {
   },
 
   unmountComponent: function() {
-    // Purge backing stores on unmount.
-    var layer = this.node;
-    if (layer.backingStoreId) {
-      DrawingUtils.invalidateBackingStore(layer.backingStoreId);
-    }
     this.destroyEventListeners();
   }
 

lib/Surface.js

@@ -145,8 +145,8 @@ var Surface = React.createClass({
     // Execute pending draw that may have been scheduled during previous frame
     this._frameReady = true;
     if (this._pendingTick) {
-      this.tick();
       this._pendingTick = false;
+      this.batchedTick();
     }
   },
 

lib/Text.js

@@ -33,6 +33,7 @@ var Text = createComponent('Text', LayerMixin, {
     this.applyLayerProps(prevProps, props);
     this.applyTextProps(prevProps, props);
     this._currentElement = nextComponent;
+    this.node.invalidateLayout();
   }
 
 });

lib/__tests__/clamp-test.js

@@ -0,0 +1,17 @@
+jest.dontMock('../clamp.js');
+
+var clamp = require('../clamp');
+
+describe('clamp', function() {
+  it('returns the min if n is less than min', function() {
+    expect(clamp(-1, 0, 1)).toBe(0);
+  });
+
+  it('returns the max if n is greater than max', function() {
+    expect(clamp(2, 0, 1)).toBe(1);
+  });
+
+  it('returns n if n is between min and max', function() {
+    expect(clamp(0.5, 0, 1)).toBe(0.5);
+  });
+});