From e318b63dffcadc2598a03754addc1c6408971c3f Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Sun, 10 Dec 2017 23:54:46 +0100
Subject: [PATCH] Handle skipping and unskipping features with renderMode:
 'image'

---
 externs/olx.js                              |   2 +-
 src/ol/renderer/canvas/imagelayer.js        |  12 ++++++++-
 test/rendering/ol/layer/expected/vector.png | Bin 0 -> 1633 bytes
 test/rendering/ol/layer/vector.test.js      |  26 ++++++++++++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 test/rendering/ol/layer/expected/vector.png

diff --git a/externs/olx.js b/externs/olx.js
index 7deab6bc85..65bcf571c9 100644
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -8525,7 +8525,7 @@ olx.view.FitOptions.prototype.callback;
  *     pixelToCoordinateTransform: ol.Transform,
  *     postRenderFunctions: Array.<ol.PostRenderFunction>,
  *     size: ol.Size,
- *     skippedFeatureUids: Object.<string, boolean>,
+ *     skippedFeatureUids: !Object.<string, boolean>,
  *     tileQueue: ol.TileQueue,
  *     time: number,
  *     usedTiles: Object.<string, Object.<string, ol.TileRange>>,
diff --git a/src/ol/renderer/canvas/imagelayer.js b/src/ol/renderer/canvas/imagelayer.js
index b807dee5b6..dd4043ba44 100644
--- a/src/ol/renderer/canvas/imagelayer.js
+++ b/src/ol/renderer/canvas/imagelayer.js
@@ -4,6 +4,7 @@ goog.require('ol');
 goog.require('ol.ImageCanvas');
 goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
+goog.require('ol.array');
 goog.require('ol.extent');
 goog.require('ol.layer.VectorRenderType');
 goog.require('ol.obj');
@@ -35,6 +36,11 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) {
    */
   this.imageTransform_ = ol.transform.create();
 
+  /**
+   * @type {!Array.<string>}
+   */
+  this.skippedFeatures_ = [];
+
   /**
    * @private
    * @type {ol.renderer.canvas.VectorLayer}
@@ -139,11 +145,15 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
           rotation: 0
         }))
       }));
-      if (vectorRenderer.prepareFrame(imageFrameState, layerState) && vectorRenderer.replayGroupChanged) {
+      var skippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
+      if (vectorRenderer.prepareFrame(imageFrameState, layerState) &&
+          (vectorRenderer.replayGroupChanged ||
+          !ol.array.equals(skippedFeatures, this.skippedFeatures_))) {
         context.canvas.width = imageFrameState.size[0] * pixelRatio;
         context.canvas.height = imageFrameState.size[1] * pixelRatio;
         vectorRenderer.composeFrame(imageFrameState, layerState, context);
         this.image_ = new ol.ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas);
+        this.skippedFeatures_ = skippedFeatures;
       }
     } else {
       image = imageSource.getImage(
diff --git a/test/rendering/ol/layer/expected/vector.png b/test/rendering/ol/layer/expected/vector.png
new file mode 100644
index 0000000000000000000000000000000000000000..9227b57208445aeccc0393cdc08cc9bd55243929
GIT binary patch
literal 1633
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

literal 0
HcmV?d00001

diff --git a/test/rendering/ol/layer/vector.test.js b/test/rendering/ol/layer/vector.test.js
index 0f33f50977..2c578d8d34 100644
--- a/test/rendering/ol/layer/vector.test.js
+++ b/test/rendering/ol/layer/vector.test.js
@@ -248,6 +248,32 @@ describe('ol.rendering.layer.Vector', function() {
       });
     });
 
+    it('unskips features correctly with renderMode: \'image\'', function(done) {
+      createMap('canvas');
+      addCircle(500);
+      addPolygon(300);
+      map.skipFeature(source.getFeatures()[1]);
+      map.addLayer(new ol.layer.Vector({
+        renderMode: 'image',
+        source: source,
+        style: new ol.style.Style({
+          fill: new ol.style.Fill({
+            color: 'rgba(255,0,0,0.5)'
+          }),
+          stroke: new ol.style.Stroke({
+            width: 2,
+            color: 'black'
+          })
+        })
+      }));
+      map.renderSync();
+      map.unskipFeature(source.getFeatures()[1]);
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
     it('renders fill/stroke batches correctly with the canvas renderer', function(done) {
       createMap('canvas');
       source = new ol.source.Vector({