Fixes #11 and #13

Examples/VideoBlur/Blur.js

@@ -28,10 +28,10 @@ function directionForPass (p, factor, total) {
  */
 class Blur extends GL.Component {
   render () {
-    const { width, height, factor, children, passes } = this.props;
+    const { width, height, factor, children, passes, ...rest } = this.props;
 
     const rec = p => p <= 0 ? children :
-      <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
+      <Blur1D {...rest} width={width} height={height} direction={directionForPass(p, factor, passes)}>
         {rec(p-1)}
       </Blur1D>;
 

Examples/VideoBlur/Blur1D.js

@@ -14,8 +14,9 @@ const shaders = GL.Shaders.create({
 
 class Blur1D extends GL.Component {
   render () {
-    const { width, height, direction, children: t } = this.props;
+    const { width, height, direction, children: t, ...rest } = this.props;
     return <GL.View
+      {...rest}
       shader={shaders.blur1D}
       width={width}
       height={height}

Examples/VideoBlur/index.js

@@ -7,24 +7,16 @@ class Demo extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      time: 0,
       blur: 0,
       blurPasses: 2,
       hue: 0
     };
   }
-  componentDidMount () {
-    const loop = time => {
-      requestAnimationFrame(loop);
-      this.setState({ time: time / 1000 });
-    };
-    requestAnimationFrame(loop);
-  }
   render () {
     const { width, height } = this.props;
     const { blur, hue, blurPasses } = this.state;
     return <div style={{ width: width+"px" }}>
-        <Blur width={width} height={height} passes={blurPasses} factor={blur}>
+        <Blur eventsThrough autoRedraw width={width} height={height} passes={blurPasses} factor={blur}>
         <HueRotate hue={hue}>
           <video autoPlay loop>
             <source type="video/mp4" src="video.mp4" />

package.json

@@ -40,6 +40,8 @@
     "gl-react-core": "1.0.0",
     "gl-shader": "^4.0.5",
     "gl-texture2d": "^2.0.9",
-    "invariant": "^2.1.0"
+    "invariant": "^2.1.0",
+    "raf": "^3.1.0",
+    "vendor-prefix": "^0.1.0"
   }
 }

src/GLCanvas.js

@@ -4,6 +4,8 @@ const {
   Component,
   PropTypes
 } = React;
+const raf = require("raf");
+const vendorPrefix = require("vendor-prefix");
 const createShader = require("gl-shader");
 const createTexture = require("gl-texture2d");
 const createFBO = require("gl-fbo");
@@ -40,6 +42,8 @@ function countPreloaded (loaded, toLoad) {
   return nb;
 }
 
+const pointerEventsProperty = vendorPrefix("pointer-events");
+
 class GLCanvas extends Component {
 
   constructor (props) {
@@ -63,17 +67,20 @@ class GLCanvas extends Component {
       this._preloading = null;
       if (this.props.onLoad) this.props.onLoad();
     }
+    this._autoredraw = this.props.autoRedraw;
   }
 
   render () {
     const { width, height,
-      data, nbContentTextures, imagesToPreload, renderId, opaque, onLoad, onProgress, // eslint-disable-line
+      data, nbContentTextures, imagesToPreload, renderId, opaque, onLoad, onProgress, autoRedraw, eventsThrough, // eslint-disable-line
       ...rest
     } = this.props;
     const { scale } = this.state;
     const styles = {
       width: width+"px",
-      height: height+"px"
+      height: height+"px",
+      [pointerEventsProperty]: eventsThrough ? "none" : "auto",
+      position: "relative"
     };
     return <canvas
       {...rest} // eslint-disable-line
@@ -113,6 +120,8 @@ class GLCanvas extends Component {
     this.resizeUniformContentTextures(this.props.nbContentTextures);
     this.syncBlendMode(this.props);
     this.syncData(this.props.data);
+
+    this.checkAutoRedraw();
   }
 
   componentWillUnmount () {
@@ -131,6 +140,7 @@ class GLCanvas extends Component {
     if (this.gl) this.gl.deleteBuffer(this._buffer);
     this.shader = null;
     this.gl = null;
+    if (this._raf) raf.cancel(this._raf);
   }
 
   componentWillReceiveProps (props) {
@@ -143,6 +153,9 @@ class GLCanvas extends Component {
       this.syncBlendMode(props);
     if (props.nbContentTextures !== this.props.nbContentTextures)
       this.resizeUniformContentTextures(props.nbContentTextures);
+
+    this._autoredraw = props.autoRedraw;
+    this.checkAutoRedraw();
   }
 
   componentDidUpdate () {
@@ -151,6 +164,19 @@ class GLCanvas extends Component {
     this.syncData(data);
   }
 
+  checkAutoRedraw () {
+    if (!this._autoredraw || this._raf) return;
+    const loop = () => {
+      if (!this._autoredraw) {
+        delete this._raf;
+        return;
+      }
+      this._raf = raf(loop);
+      this.draw();
+    };
+    this._raf = raf(loop);
+  }
+
   getFBO (id) {
     const fbos = this._fbos; // pool of FBOs
     invariant(id>=0, "fbo id must be a positive integer");
@@ -282,6 +308,7 @@ class GLCanvas extends Component {
   }
 
   draw () {
+    this._needsDraw = false;
     const gl = this.gl;
     const renderData = this._renderData;
     if (!gl || !renderData) return;
@@ -433,7 +460,7 @@ class GLCanvas extends Component {
   requestSyncData () {
     if (this._needsSyncData) return;
     this._needsSyncData = true;
-    requestAnimationFrame(this.handleSyncData);
+    raf(this.handleSyncData);
   }
 
   handleSyncData () {
@@ -444,12 +471,11 @@ class GLCanvas extends Component {
   requestDraw () {
     if (this._needsDraw) return;
     this._needsDraw = true;
-    requestAnimationFrame(this.handleDraw);
+    raf(this.handleDraw);
   }
 
   handleDraw () {
     if (!this._needsDraw) return;
-    this._needsDraw = false;
     if (this._preloading) return;
     this.draw();
   }

src/View.js

@@ -12,8 +12,7 @@ const renderVcontent = function (width, height, id, children) {
     top: 0,
     left: 0,
     width: width+"px",
-    height: height+"px",
-    visibility: "hidden"
+    height: height+"px"
   };
   return <div key={"content-"+id} style={childrenStyle}>{content}</div>;
 };