Fix a small lag in the heatmap feature layer.

The transform needs to be set in an animation frame that is scheduled via the map's scheduling mechanism.
OpenGeoscience · Jan 16, 2017 · 742e4f6 · 742e4f6
1 parent 3a22b01
commit 742e4f6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/src/canvas/canvasRenderer.js b/src/canvas/canvasRenderer.js
@@ -24,7 +24,6 @@ var canvasRenderer = function (arg) {
   renderer.call(this, arg);
 
   var m_this = this,
-      m_renderAnimFrameRef = null,
       m_clearCanvas = true,
       s_init = this._init,
       s_exit = this._exit;
@@ -88,32 +87,35 @@ var canvasRenderer = function (arg) {
    */
   ////////////////////////////////////////////////////////////////////////////
   this._render = function () {
-    if (m_renderAnimFrameRef === null) {
-      m_renderAnimFrameRef = window.requestAnimationFrame(function () {
-        m_renderAnimFrameRef = null;
-
-        var layer = m_this.layer(),
-            map = layer.map(),
-            camera = map.camera(),
-            viewport = camera._viewport;
-
-        // Clear the canvas.
-        if (m_clearCanvas) {
-          m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
-          m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
-        }
-
-        var features = layer.features();
-        for (var i = 0; i < features.length; i += 1) {
-          if (features[i].visible()) {
-            features[i]._renderOnCanvas(m_this.context2d, map);
-          }
-        }
-      });
-    }
+    m_this.layer().map().scheduleAnimationFrame(this._renderFrame);
     return m_this;
   };
 
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+   * Render during an animation frame callback.
+   */
+  ////////////////////////////////////////////////////////////////////////////
+  this._renderFrame = function () {
+    var layer = m_this.layer(),
+        map = layer.map(),
+        camera = map.camera(),
+        viewport = camera._viewport;
+
+    // Clear the canvas.
+    if (m_clearCanvas) {
+      m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
+      m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
+    }
+
+    var features = layer.features();
+    for (var i = 0; i < features.length; i += 1) {
+      if (features[i].visible()) {
+        features[i]._renderOnCanvas(m_this.context2d, map);
+      }
+    }
+  };
+
   ////////////////////////////////////////////////////////////////////////////
   /**
    * Exit

diff --git a/src/canvas/heatmapFeature.js b/src/canvas/heatmapFeature.js
@@ -38,6 +38,7 @@ var canvas_heatmapFeature = function (arg) {
       m_typedClampedBuffer,
       m_typedBufferData,
       m_heatMapPosition,
+      m_heatMapTransform,
       s_exit = this._exit,
       s_init = this._init,
       s_update = this._update,
@@ -349,6 +350,8 @@ var canvas_heatmapFeature = function (arg) {
 
       context2d.setTransform(1, 0, 0, 1, 0, 0);
       context2d.clearRect(0, 0, viewport.width, viewport.height);
+      m_heatMapTransform = '';
+      map.scheduleAnimationFrame(m_this._setTransform, false);
       layer.canvas().css({transform: ''});
 
       m_this._createCircle();
@@ -408,6 +411,16 @@ var canvas_heatmapFeature = function (arg) {
     return m_this;
   };
 
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+   * Update the css transform for the layer as part of an animation frame.
+   * @protected
+   */
+  ////////////////////////////////////////////////////////////////////////////
+  this._setTransform = function () {
+    m_this.layer().canvas()[0].style.transform = m_heatMapTransform;
+  };
+
   ////////////////////////////////////////////////////////////////////////////
   /**
    * Animate pan (and zoom)
@@ -434,8 +447,9 @@ var canvas_heatmapFeature = function (arg) {
         ' scale(' + scale + ')' +
         ' rotate(' + ((rotation - m_heatMapPosition.rotation) * 180 / Math.PI) + 'deg)';
 
-    m_this.layer().canvas()[0].style.transform = transform;
+    map.scheduleAnimationFrame(m_this._setTransform);
 
+    m_heatMapTransform = transform;
     m_heatMapPosition.lastScale = scale;
     m_heatMapPosition.lastOrigin.x = origin.x;
     m_heatMapPosition.lastOrigin.y = origin.y;