Changing onDirty & paint to be more performance friendly (cruise-auto…

…mation#403)

* fixes onDirty debounced paint perf issues

* fixes flow false positive error

* uses null/undefined consistently

* restores a comment

* fixes errenously inverted conditional

packages/regl-worldview/src/Worldview.js

@@ -153,24 +153,7 @@ export class WorldviewBase extends React.Component<BaseProps, State> {
     if (this.props.cameraState) {
       worldviewContext.cameraStore.setCameraState(this.props.cameraState);
     }
-
-    // queue up a paint operation on the next frame, if we haven't already
-    if (!this._tick) {
-      this._tick = requestAnimationFrame(() => {
-        this._tick = undefined;
-        try {
-          worldviewContext.paint();
-        } catch (error) {
-          // Regl automatically tries to reconnect when losing the canvas 3d context.
-          // We should log this error, but it's not important to throw it.
-          if (error.message === "(regl) context lost") {
-            console.warn(error);
-          } else {
-            throw error;
-          }
-        }
-      });
-    }
+    worldviewContext.onDirty();
   }
 
   _onDoubleClick = (e: SyntheticMouseEvent<HTMLCanvasElement>) => {

packages/regl-worldview/src/WorldviewContext.js

@@ -6,7 +6,6 @@
 //  found in the LICENSE file in the root directory of this source tree.
 //  You may not use this file except in compliance with the License.
 
-import debounce from "lodash/debounce";
 import * as React from "react";
 import createREGL from "regl";
 import shallowequal from "shallowequal";
@@ -83,6 +82,7 @@ export class WorldviewContext {
   _commands: Set<RawCommand<any>> = new Set();
   _compiled: Map<Function, CompiledReglCommand<any>> = new Map();
   _drawCalls: Map<React.Component<any>, DrawInput> = new Map();
+  _frame: ?AnimationFrameID;
   _paintCalls: Map<PaintFn, PaintFn> = new Map();
   _hitmapObjectIdManager: HitmapObjectIdManager = new HitmapObjectIdManager();
   _cachedReadHitmapCall: ?{
@@ -101,7 +101,6 @@ export class WorldviewContext {
 
   constructor({ dimension, canvasBackgroundColor, cameraState, onCameraStateChange }: ConstructorArgs) {
     // used for children to call paint() directly
-    this.onDirty = this._debouncedPaint;
     this.dimension = dimension;
     this.canvasBackgroundColor = canvasBackgroundColor;
     this.cameraStore = new CameraStore((cameraState: CameraState) => {
@@ -156,6 +155,9 @@ export class WorldviewContext {
     if (this.initializedData) {
       this.initializedData.regl.destroy();
     }
+    if (this._frame) {
+      cancelAnimationFrame(this._frame);
+    }
   }
 
   // compile a command when it is first mounted, and try to register in _commands and _compiled maps
@@ -207,6 +209,20 @@ export class WorldviewContext {
   };
 
   paint() {
+    try {
+      this._paint();
+    } catch (error) {
+      // Regl automatically tries to reconnect when losing the canvas 3d context.
+      // We should log this error, but it's not important to throw it.
+      if (error.message === "(regl) context lost") {
+        console.warn(error);
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  _paint() {
     const start = Date.now();
     this.reglCommandObjects.forEach((cmd) => (cmd.stats.count = 0));
     if (!this.initializedData) {
@@ -225,9 +241,14 @@ export class WorldviewContext {
       paintCall();
     });
     this.counters.render = Date.now() - start;
+    this._frame = undefined;
   }
 
-  _debouncedPaint = debounce(this.paint, 10);
+  onDirty = () => {
+    if (undefined === this._frame) {
+      this._frame = requestAnimationFrame(() => this.paint());
+    }
+  };
 
   readHitmap = queuePromise(
     (