Implement 'preload' props for #3

Examples/Tests/Display2.js

@@ -10,11 +10,12 @@ const shaders = GL.Shaders.create({
 
 class Display2 extends GL.Component {
   render () {
-    const { width, height, children, vertical } = this.props;
+    const { width, height, children, vertical, ...rest } = this.props;
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
     let [t1, t2] = children;
     if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
     return <GL.View
+      {...rest}
       shader={shaders.display2}
       width={width}
       height={height}

Examples/Tests/index.js

@@ -54,7 +54,7 @@ class Demo extends React.Component {
         {txt}
       </Layer>;
 
-    return <Display2 width={600} height={600} vertical>
+    return <Display2 width={600} height={600} vertical preload>
         <Display2 width={600} height={300}>
         <Add width={300} height={300}>
           {txt}

src/GLCanvas.js

@@ -27,6 +27,18 @@ function syncShape (obj, shape) {
   }
 }
 
+function imageObjectToId (image) {
+  return image.uri;
+}
+
+function allPreloaded (loaded, toLoad) {
+  for (let i=0; i<toLoad.length; i++) {
+    if (loaded.indexOf(imageObjectToId(toLoad[i]))===-1)
+      return false;
+  }
+  return true;
+}
+
 class GLCanvas extends Component {
 
   constructor (props) {
@@ -43,19 +55,17 @@ class GLCanvas extends Component {
     this._shaders = {};
     this._fbos = {};
     this._contentTextures = [];
+    this._preloading = props.imagesToPreload.length > 0 ? [] : null;
   }
 
   render () {
-    const { width, height, style } = this.props;
+    const { width, height } = this.props;
     const { scale } = this.state;
     const styles = {
-      ...style,
       width: width+"px",
       height: height+"px"
     };
     return <canvas
-      {...this.props}
-      data={undefined}
       ref="render"
       style={styles}
       width={width * scale}
@@ -89,7 +99,7 @@ class GLCanvas extends Component {
     ]), gl.STATIC_DRAW);
     this._buffer = buffer;
 
-    this.resizeUniformContentTextures(this.props.nbUniforms);
+    this.resizeUniformContentTextures(this.props.nbContentTextures);
     this.syncBlendMode(this.props);
     this.syncData(this.props.data);
   }
@@ -120,8 +130,8 @@ class GLCanvas extends Component {
     }
     if (props.opaque !== this.props.opaque)
       this.syncBlendMode(props);
-    if (props.nbUniforms !== this.props.nbUniforms)
-      this.resizeUniformContentTextures(props.nbUniforms);
+    if (props.nbContentTextures !== this.props.nbContentTextures)
+      this.resizeUniformContentTextures(props.nbContentTextures);
   }
 
   componentDidUpdate () {
@@ -320,9 +330,18 @@ class GLCanvas extends Component {
     recDraw(renderData);
   }
 
-  onImageLoad () {
-    // Any texture image load will trigger a future re-sync of data
-    this.requestSyncData();
+  onImageLoad (loaded) {
+    if (this._preloading) {
+      this._preloading.push(loaded);
+      if (allPreloaded(this._preloading, this.props.imagesToPreload)) {
+        this._preloading = null;
+        this.requestSyncData();
+      }
+    }
+    else {
+      // Any texture image load will trigger a future re-sync of data (if no preloaded)
+      this.requestSyncData();
+    }
   }
 
   // Resize the pool of textures for the contentTextures
@@ -381,11 +400,11 @@ class GLCanvas extends Component {
   }
 
   getDrawingUniforms () {
-    const {nbUniforms} = this.props;
-    if (nbUniforms === 0) return [];
+    const {nbContentTextures} = this.props;
+    if (nbContentTextures === 0) return [];
     const children = React.findDOMNode(this.refs.render).parentNode.children;
     const all = [];
-    for (var i = 0; i < nbUniforms; i++) {
+    for (var i = 0; i < nbContentTextures; i++) {
       all[i] = children[i].firstChild;
     }
     return all;
@@ -411,6 +430,7 @@ class GLCanvas extends Component {
   handleDraw () {
     if (!this._needsDraw) return;
     this._needsDraw = false;
+    if (this._preloading) return;
     this.draw();
   }
 }
@@ -419,7 +439,7 @@ GLCanvas.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   data: PropTypes.object.isRequired,
-  nbUniforms: PropTypes.number.isRequired
+  nbContentTextures: PropTypes.number.isRequired
 };
 
 module.exports = GLCanvas;

src/GLImage.js

@@ -44,7 +44,7 @@ GLImage.prototype = {
         this.clearImage();
         this._loading = null;
         this.image = img;
-        if (this._onload) this._onload();
+        if (this._onload) this._onload(src);
       }, () => {
         this._loading = null;
         this.clearImage();

src/View.js

@@ -18,14 +18,8 @@ const renderVcontent = function (width, height, id, children) {
   return <div key={"content-"+id} style={childrenStyle}>{content}</div>;
 };
 
-const renderVGL = function (props, width, height, data, nbUniforms) {
-  return <GLCanvas
-    {...props}
-    width={width}
-    height={height}
-    data={data}
-    nbUniforms={nbUniforms}
-  />;
+const renderVGL = function (props) {
+  return <GLCanvas {...props} />;
 };
 
 const renderVcontainer = function (style, width, height, contents, renderer) {