address PR comments

raphamorim · Jan 25, 2020 · 99137b7 · 99137b7
1 parent 9a73a34
commit 99137b7
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 20 deletions.
diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js
@@ -46,12 +46,12 @@ class App extends Component {
 
     Promise.all(images).then(() => {
       console.log('images loaded');
-      // this.setState({ loaded: true })
+      this.setState({ loaded: true })
     });
 
-    setTimeout(() => {
-      this.setState({ loaded: true })
-    }, 100)
+    //setTimeout(() => {
+      //this.setState({ loaded: true })
+    //}, 100)
   }
 
   render() {
@@ -66,12 +66,17 @@ class App extends Component {
       );
     }
 
-    return (
-      <View style={{ backgroundColor: '#1C1E21', width, height }}>
+   return (
+      <View style={{ backgroundColor: 'orange', width, height }}>
         { !loaded ? <Loader/> : <Store/> }
       </View>
     )
   }
 }
 
+/*
+ * TODO: Fix update type Render
+ * TODO: Fix heritage issue
+ */
+
 render(<App />, document.getElementById('root'));
diff --git a/packages/playground/src/Loader.js b/packages/playground/src/Loader.js
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: width / 2 - 40,
     top: height / 4,
-    backgroundColor: '#1C1E21',
+    backgroundColor: 'blue'
   }
 });
 

diff --git a/packages/playground/src/Spinner.js b/packages/playground/src/Spinner.js
@@ -3,13 +3,15 @@ class Spinner {
     console.log(error, errorInfo);
   }
 
-  // reset(prevProps, parentStyle, canvas) {
-  //   const {ctx} = canvas;
-  //   parentStyle.backgroundColor // white
-  //   if (ctx) {
-  //     ctx.clearRect(0, 0, 18, 18);
-  //   }
-  // }
+  /*
+ reset(prevProps, parentStyle, canvas) {
+     const {ctx} = canvas;
+     console.log(parentStyle.backgroundColor) // white
+     if (ctx) {
+       ctx.clearRect(0, 0, 18, 18);
+     }
+  }
+  */
 
   render(props, canvas) {
     const {ctx} = canvas;

diff --git a/packages/playground/src/Store.js b/packages/playground/src/Store.js
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
     height,
     width,
     backgroundColor: 'white',
-    color: 'orange'
+    color: 'black'
   }
 });
 

diff --git a/packages/react-ape/renderer/core/render.js b/packages/react-ape/renderer/core/render.js
@@ -8,6 +8,7 @@
  *
  */
 
+import { clearCanvas } from './canvas';
 import type {CanvasComponentContext, Layout, ApeElement} from '../types';
 
 function renderApeElement(
@@ -22,6 +23,8 @@ function renderApeQueue(
   onFinish: () => mixed
 ) {
   if (apeContextGlobal && apeContextGlobal.renderQueue.length) {
+    //clearCanvas(apeContextGlobal, true);
+
     // TODO: Move to request animation frame
     apeContextGlobal.renderQueue.forEach(element => {
       renderApeElement(apeContextGlobal, element);

diff --git a/packages/react-ape/renderer/elements/View.js b/packages/react-ape/renderer/elements/View.js
@@ -14,6 +14,7 @@ class View {
     this.type = 'View';
     this.spatialGeometry = {};
     this.renderQueue = [];
+    this.previousRect = null;
   }
 
   appendChild(fn) {
@@ -35,11 +36,26 @@ class View {
     return this.renderQueue;
   }
 
-  clear() {
-    // noop
+  clear(apeContext, parentLayout) {
+    const { ctx } = apeContext;
+    const { style } = parentLayout;
+    // Draw entire View using parent style (without children)
+    if (this.previousRect) {
+      const previousStroke = ctx.strokeStyle;
+      ctx.beginPath();
+      const { x, y, width, height } = this.previousRect;
+      ctx.rect(x, y, width, height);
+      console.log(style.backgroundColor);
+      ctx.strokeStyle = style.backgroundColor || 'transparent';
+      ctx.fillStyle = style.backgroundColor || 'transparent';
+      ctx.fill();
+      ctx.stroke();
+      ctx.closePath();
+    }
   }
 
   render(apeContext) {
+    console.log('view');
     const {ctx, getSurfaceHeight, setSurfaceHeight} = apeContext;
     const {style = {}} = this.props;
 
@@ -58,6 +74,7 @@ class View {
     ctx.globalCompositeOperation = 'destination-over';
     ctx.beginPath();
     ctx.rect(x, y, width, height);
+    this.previousRect = {x, y, width, height};
     ctx.strokeStyle = style.borderColor || 'transparent';
     ctx.fillStyle = style.backgroundColor || 'transparent';
     ctx.fill();

diff --git a/packages/react-ape/renderer/reactApeRenderer.js b/packages/react-ape/renderer/reactApeRenderer.js
@@ -190,7 +190,9 @@ const ReactApeFiber = reconciler({
   },
 
   removeChild(parentInstance, child) {
-    // parentInstance.removeChild(child);
+    if (child.type && child.type === 'View') {
+      child.clear(apeContextGlobal, parentInstance.getLayoutDefinitions());
+    }
   },
 
   removeChildFromContainer(parentInstance, child) {
@@ -202,7 +204,6 @@ const ReactApeFiber = reconciler({
   },
 
   commitUpdate(instance, updatePayload, type, oldProps, newProps) {
-    // noop
   },
 
   commitMount(instance, updatePayload, type, oldProps, newProps) {
@@ -244,7 +245,6 @@ const ReactApeRenderer = {
     }
 
     ReactApeFiber.updateContainer(reactApeElement, root, null, callback);
-
     return ReactApeFiber.getPublicRootInstance(root);
   },
 };