react -> react-native: Zdog and Tests step3 Zdog works well

flyskywhy · Jan 1, 2023 · 7855e91 · 7855e91
1 parent 1c90a53
commit 7855e91
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/app/components/ZdogAndTests.js b/app/components/ZdogAndTests.js
@@ -1,11 +1,16 @@
 import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
+import Zdog from 'zdog';
+
+var isLooping = false;
+
+let isSpinning = null;
 
 // ref to https://codepen.io/clarke-nicol/pen/OezRdM
-function main() {
+function main(canvas) {
   let illo = new Zdog.Illustration({
-    element: ".zdog-canvas",
+    element: canvas,
     dragRotate: true,
     onDragStart: function() {
       isSpinning = false;
@@ -187,7 +192,8 @@ function main() {
 
   let ticker = 0;
   let cycleCount = 200;
-  let isSpinning = true;
+  // let isSpinning = true;
+  isSpinning = true;
 
   function animate() {
     let progress = ticker / cycleCount;
@@ -200,6 +206,11 @@ function main() {
     ticker++;
 
     illo.updateRenderGraph();
+
+    if (!isLooping) {
+      return;
+    }
+
     requestAnimationFrame( animate );
   }
   animate();
@@ -231,6 +242,11 @@ export default class ZdogAndTests extends Component {
     }
   }
 
+  componentWillUnmount() {
+    isLooping = false;
+    isSpinning = null;
+  }
+
   initCanvas = (canvas) => {
     if (this.canvas) {
       return;
@@ -253,16 +269,23 @@ export default class ZdogAndTests extends Component {
   };
 
   drawSome = async () => {
+    if (isSpinning !== null) {
+      isSpinning = !isSpinning;
+      return;
+    }
+
+    isLooping = true;
+
     // On Android, sometimes this.isGReactTextureViewReady is false e.g.
     // navigate from a canvas page into a drawer item page with
     // react-navigation on Android, the canvas page will be maintain
     // mounted by react-navigation, then if you continually call
     // this drawSome() in some loop, it's wasting CPU and GPU,
     // if you don't care about such wasting, you can delete
     // this.isGReactTextureViewReady and related onIsReady.
-    // if (this.isGReactTextureViewReady) {
-    //   main();
-    // }
+    if (this.canvas && this.isGReactTextureViewReady) {
+      main(this.canvas);
+    }
   };
 
   takePicture = () => {

diff --git a/package.json b/package.json
@@ -58,7 +58,8 @@
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
     "resource-loader": "^4.0.0-rc4",
-    "webgl-utils.js": "^1.1.0"
+    "webgl-utils.js": "^1.1.0",
+    "zdog": "1.1.3"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "3.0.1",