Update package version to 4.6.4

This reverts commit fca0b0771d, reversing
changes made to c3db3e2f6f.

changelog/v4.6.2.md

@@ -0,0 +1,7 @@
+# 4.6.2
+
+The v4.6.2 release fixes a regression that could cause tremendous amounts of unneeded vector data to be fetched from the source.
+
+## Fixes
+
+ * [#7546](https://github.com/openlayers/openlayers/pull/7546) - Do not request features for wrapped extent ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.3.md

@@ -0,0 +1,7 @@
+# 4.6.3
+
+The v4.6.3 release fixes a performance issue when `renderMode: 'image'` is set on an `ol.layer.Vector`.
+
+## Fixes
+
+ * [#7554](https://github.com/openlayers/openlayers/pull/7554) - Only compose image vector frame when the replay group has changed ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.4.md

@@ -0,0 +1,7 @@
+# 4.6.4
+
+The v4.6.4 release fixes a feature selection issue when `renderMode: 'image'` is set on an `ol.layer.Vector`.
+
+## Fixes
+
+ * [#7559](https://github.com/openlayers/openlayers/pull/7559) - Handle skipping and unskipping features with renderMode: 'image' ([@ahocevar](https://github.com/ahocevar))

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>>,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.6.1",
+  "version": "4.6.4",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "4.6.1",
+  "version": "4.6.4",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",

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}
@@ -127,8 +133,9 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
         projection = sourceProjection;
       }
     }
-    if (this.vectorRenderer_) {
+    var vectorRenderer = this.vectorRenderer_;
-      var context = this.vectorRenderer_.context;
+    if (vectorRenderer) {
+      var context = vectorRenderer.context;
       var imageFrameState = /** @type {olx.FrameState} */ (ol.obj.assign({}, frameState, {
         size: [
           ol.extent.getWidth(renderedExtent) / viewResolution,
@@ -138,12 +145,16 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
           rotation: 0
         }))
       }));
-      if (this.vectorRenderer_.prepareFrame(imageFrameState, layerState)) {
+      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;
-        this.vectorRenderer_.composeFrame(imageFrameState, layerState, context);
+        vectorRenderer.composeFrame(imageFrameState, layerState, context);
+        this.image_ = new ol.ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas);
+        this.skippedFeatures_ = skippedFeatures;
       }
-      this.image_ = new ol.ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas);
     } else {
       image = imageSource.getImage(
           renderedExtent, viewResolution, pixelRatio, projection);

src/ol/renderer/canvas/vectorlayer.js

@@ -69,6 +69,12 @@ ol.renderer.canvas.VectorLayer = function(vectorLayer) {
    */
   this.replayGroup_ = null;
 
+  /**
+   * A new replay group had to be created by `prepareFrame()`
+   * @type {boolean}
+   */
+  this.replayGroupChanged = true;
+
   /**
    * @type {CanvasRenderingContext2D}
    */
@@ -181,11 +187,11 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     ol.render.canvas.rotateAtOffset(replayContext, -rotation,
         width / 2, height / 2);
     replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
-    if (vectorSource.getWrapX() && projection.canWrapX()) {
+    if (vectorSource.getWrapX() && projection.canWrapX() &&
+        !ol.extent.containsExtent(projectionExtent, extent)) {
       var startX = extent[0];
       var worldWidth = ol.extent.getWidth(projectionExtent);
       var world = 0;
-      startX -= worldWidth;
       var offsetX;
       while (startX < projectionExtent[0]) {
         --world;
@@ -196,7 +202,6 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
       }
       world = 0;
       startX = extent[2];
-      startX += worldWidth;
       while (startX > projectionExtent[2]) {
         ++world;
         offsetX = worldWidth * world;
@@ -326,7 +331,8 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
       vectorLayerRenderBuffer * resolution);
   var projectionExtent = viewState.projection.getExtent();
 
-  if (vectorSource.getWrapX() && viewState.projection.canWrapX()) {
+  if (vectorSource.getWrapX() && viewState.projection.canWrapX() &&
+      !ol.extent.containsExtent(projectionExtent, frameState.extent)) {
     // For the replay group, we need an extent that intersects the real world
     // (-180° to +180°). To support geometries in a coordinate range from -540°
     // to +540°, we add at least 1 world width on each side of the projection
@@ -343,6 +349,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
       this.renderedRevision_ == vectorLayerRevision &&
       this.renderedRenderOrder_ == vectorLayerRenderOrder &&
       ol.extent.containsExtent(this.renderedExtent_, extent)) {
+    this.replayGroupChanged = false;
     return true;
   }
 
@@ -400,6 +407,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
   this.renderedExtent_ = extent;
   this.replayGroup_ = replayGroup;
 
+  this.replayGroupChanged = true;
   return true;
 };
 

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({

test/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -290,6 +290,14 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       ], buffer));
     });
 
+    it('sets replayGroupChanged correctly', function() {
+      frameState.extent = [-10000, -10000, 10000, 10000];
+      renderer.prepareFrame(frameState, {});
+      expect(renderer.replayGroupChanged).to.be(true);
+      renderer.prepareFrame(frameState, {});
+      expect(renderer.replayGroupChanged).to.be(false);
+    });
+
   });
 
 });

test/spec/ol/source/vector.test.js

@@ -1,10 +1,12 @@
-
-
 goog.require('ol.events');
 goog.require('ol.Collection');
 goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.LineString');
+goog.require('ol.layer.Vector');
+goog.require('ol.loadingstrategy');
 goog.require('ol.proj');
 goog.require('ol.source.Vector');
 
@@ -417,6 +419,44 @@ describe('ol.source.Vector', function() {
 
   describe('#loadFeatures', function() {
 
+    describe('with the "bbox" strategy', function() {
+
+
+      it('requests the view extent plus render buffer', function(done) {
+        var center = [-97.6114, 38.8403];
+        var source = new ol.source.Vector({
+          strategy: ol.loadingstrategy.bbox,
+          loader: function(extent) {
+            setTimeout(function() {
+              var lonLatExtent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');
+              expect(lonLatExtent[0]).to.roughlyEqual(-99.261474609, 1e-9);
+              expect(lonLatExtent[2]).to.roughlyEqual(-95.965576171, 1e-9);
+              done();
+            }, 0);
+          }
+        });
+        var div = document.createElement('div');
+        div.style.width = div.style.height = '100px';
+        document.body.appendChild(div);
+        var map = new ol.Map({
+          target: div,
+          layers: [
+            new ol.layer.Vector({
+              source: source
+            })
+          ],
+          view: new ol.View({
+            center: ol.proj.fromLonLat(center),
+            zoom: 7
+          })
+        });
+        map.renderSync();
+        map.setTarget(null);
+        document.body.removeChild(div);
+      });
+
+    });
+
     describe('with no loader and the "all" strategy', function() {
 
       it('stores the infinity extent in the Rtree', function() {