Add support for eventsThrough and autoRedraw props

Related to https://github.com/ProjectSeptemberInc/gl-react/commit/c7a937c71f7c5238a32453a6c87197119f22364b

Examples/Simple/Blur.js

@@ -4,8 +4,8 @@ const Blur1D = require("./Blur1D");
 
 class Blur extends GL.Component {
   render () {
-    const { width, height, factor, children } = this.props;
-    return <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
+    const { width, height, factor, children, ...rest } = this.props;
+    return <Blur1D {...rest} width={width} height={height} direction={[ factor, 0 ]}>
       <Blur1D width={width} height={height} direction={[ 0, factor ]}>
         {children}
       </Blur1D>

Examples/Simple/Blur1D.js

@@ -35,8 +35,9 @@ void main () {
 
 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/Simple/HueRotate.js

@@ -24,10 +24,11 @@ void main() {
   }
 });
 
-class HueRotate extends React.Component {
+class HueRotate extends GL.Component {
   render () {
-    const { width, height, hue, children: tex } = this.props;
+    const { width, height, hue, children: tex, ...rest } = this.props;
     return <GL.View
+      {...rest}
       shader={shaders.hueRotate}
       width={width}
       height={height}

Examples/Simple/index.ios.js

@@ -8,6 +8,9 @@ const {
   TextInput,
   ScrollView,
   SliderIOS,
+  SwitchIOS,
+  ProgressViewIOS,
+  ActivityIndicatorIOS,
 } = React;
 
 const HelloGL = require("./HelloGL");
@@ -26,18 +29,23 @@ class Simple extends React.Component {
       hue: 0,
       progress: 0,
       factor: 0,
-      text: "and I will return leading the pack"
+      text: "and I will return leading the pack",
+      switch1: false,
+      switch2: false,
+      switch3: false,
     };
   }
 
   render () {
-
     const {
       saturationFactor,
       hue,
       text,
       progress,
-      factor
+      factor,
+      switch1,
+      switch2,
+      switch3,
     } = this.state;
 
     return <ScrollView style={styles.container}>
@@ -68,6 +76,7 @@ class Simple extends React.Component {
         <Text style={styles.demoTitle}>3. Hue Rotate on Text+Image</Text>
         <View style={styles.demo}>
           <HueRotate
+            autoRedraw
             width={256}
             height={180}
             hue={hue}>
@@ -124,6 +133,39 @@ class Simple extends React.Component {
             onValueChange={factor => this.setState({ factor })} />
         </View>
 
+
+        <Text style={styles.demoTitle}>8. Blur (2-pass) over UI</Text>
+        <View style={styles.demo}>
+          <Blur
+            autoRedraw
+            eventsThrough
+            width={256}
+            height={160}
+            factor={factor}>
+            <Blur
+              width={256}
+              height={160}
+              factor={factor/2}>
+              <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
+                <View style={{ width: 256, height: 160, padding: 10 }}>
+                  <SliderIOS
+                    style={{ height: 80 }}
+                    maximumValue={2}
+                    onValueChange={factor => this.setState({ factor })}
+                  />
+                <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
+                  <SwitchIOS style={{flex:1}} value={switch1} onValueChange={switch1 => this.setState({ switch1 })} />
+                  <SwitchIOS style={{flex:1}} value={switch2} onValueChange={switch2 => this.setState({ switch2 })} />
+                  <SwitchIOS style={{flex:1}} value={switch3} onValueChange={switch3 => this.setState({ switch3 })} />
+                </View>
+                <ProgressViewIOS progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
+
+                </View>
+              </HueRotate>
+            </Blur>
+          </Blur>
+        </View>
+
       </View>
     </ScrollView>;
   }

RNGL/GLCanvas.h

@@ -5,6 +5,8 @@
 
 @property (nonatomic) GLData *data;
 @property (nonatomic) BOOL opaque;
+@property (nonatomic) BOOL autoRedraw;
+@property (nonatomic) BOOL eventsThrough;
 @property (nonatomic) NSNumber *nbContentTextures;
 @property (nonatomic) NSNumber *renderId;
 @property (nonatomic) NSArray *imagesToPreload;

RNGL/GLCanvas.m

@@ -31,6 +31,10 @@
   
   NSMutableArray *_preloaded;
   BOOL _preloadingDone;
+  
+  CADisplayLink *displayLink;
+  
+  NSTimer *animationTimer;
 }
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
@@ -107,6 +111,29 @@ NSString* srcResource (id res)
   }
 }
 
+- (void)setAutoRedraw:(BOOL)autoRedraw
+{
+  if (autoRedraw) {
+    if (!animationTimer)
+      animationTimer = // FIXME: can we do better than this?
+      [NSTimer scheduledTimerWithTimeInterval:1.0/60.0
+                                       target:self
+                                     selector:@selector(setNeedsDisplay)
+                                     userInfo:nil
+                                      repeats:YES];
+  }
+  else {
+    if (animationTimer) {
+      [animationTimer invalidate];
+    }
+  }
+}
+
+- (void)setEventsThrough:(BOOL)eventsThrough
+{
+  self.userInteractionEnabled = !eventsThrough;
+}
+
 - (void)setData:(GLData *)data
 {
   _data = data;
@@ -302,12 +329,13 @@ NSString* srcResource (id res)
 
 - (void)drawRect:(CGRect)rect
 {
+  
   if (!_preloadingDone) {
     glClearColor(0.0, 0.0, 0.0, 0.0);
     glClear(GL_COLOR_BUFFER_BIT);
     return;
   }
-  BOOL needsDeferredRendering = _nbContentTextures > 0;
+  BOOL needsDeferredRendering = _nbContentTextures > 0 && !_autoRedraw;
   if (needsDeferredRendering && !_deferredRendering) {
     dispatch_async(dispatch_get_main_queue(), ^{
       _deferredRendering = true;
@@ -315,12 +343,12 @@ NSString* srcResource (id res)
     });
   }
   else {
-    [self render:rect];
+    [self render];
     _deferredRendering = false;
   }
 }
 
-- (void)render:(CGRect)rect
+- (void)render
 {
   if (!_renderData) return;
 

RNGL/GLCanvasManager.m

@@ -20,6 +20,8 @@ RCT_EXPORT_MODULE();
 
 RCT_EXPORT_VIEW_PROPERTY(nbContentTextures, NSNumber);
 RCT_EXPORT_VIEW_PROPERTY(opaque, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(autoRedraw, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(eventsThrough, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(data, GLData);
 RCT_EXPORT_VIEW_PROPERTY(renderId, NSNumber);
 RCT_EXPORT_VIEW_PROPERTY(imagesToPreload, NSArray);