Fixing request animation frame callback issue. (#31)

The issue could result in multiple animation frame requests in succession cancelling one another out. Can result in choppy interactions or what looks like an update issue.
heavyai · Oct 31, 2019 · f2e2ded · f2e2ded
1 parent 5d41220
commit f2e2ded
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/dist/mapd-draw-dev.js b/dist/mapd-draw-dev.js
diff --git a/dist/mapd-draw.js b/dist/mapd-draw.js
diff --git a/src/engine/draw-engine.js b/src/engine/draw-engine.js
@@ -409,7 +409,7 @@ export default class DrawEngine extends EventHander {
     )
 
     this._renderFrameCb = this.renderAll.bind(this)
-    this._renderRequestId = 0
+    this._renderRequestTime = 0
     this._ids = {
       shapeId: 1
     }
@@ -599,10 +599,7 @@ export default class DrawEngine extends EventHander {
   }
 
   _rerenderCb() {
-    if (this._renderRequestId) {
-      window.cancelAnimationFrame(this._renderRequestId)
-    }
-    this._renderRequestId = window.requestAnimationFrame(this._renderFrameCb)
+    window.requestAnimationFrame(this._renderFrameCb)
   }
 
   _reorderCb(event) {
@@ -634,9 +631,17 @@ export default class DrawEngine extends EventHander {
     })
   }
 
-  renderAll() {
+  renderAll(timestamp) {
+    if (timestamp) {
+      if (timestamp <= this._renderRequestTime) {
+        return
+      }
+      this._renderRequestTime = timestamp
+    } else {
+      this._renderRequestTime = performance.now()
+    }
+
     const ctx = this._drawCtx
-    // ctx.clearRect(0, 0, this.width, this.height)
     ctx.clearRect(
       0,
       0,