Simplify the renderer function API

examples/street-labels.js

@@ -25,7 +25,8 @@ function collectDrawData(letter, x, y, angle) {
 }
 
 var style = new ol.style.Style({
-  renderer: function(coords, geometry, feature) {
+  renderer: function(coords, context) {
+    var feature = context.feature;
     var text = feature.get('name');
     if (text) {
       // Only create label when geometry has a long and straight segment

examples/vector-label-decluttering.js

@@ -70,9 +70,9 @@ var styles = [
     })
   }),
   new ol.style.Style({
-    renderer: function(coord, geometry, feature, state) {
+    renderer: function(coords, state) {
       var pixelRatio = state.pixelRatio;
-      var text = feature.get('name');
+      var text = state.feature.get('name');
       var canvas = textCache[text];
       if (!canvas) {
         // Draw the label to its own canvas and cache it.
@@ -87,7 +87,7 @@ var styles = [
         context.fillText(text, 0, 0);
       }
       // The 3rd value of the coordinate is the measure of the extent width
-      var extentWidth = geometry.getCoordinates()[2] / resolution * pixelRatio;
+      var extentWidth = state.geometry.getCoordinates()[2] / resolution * pixelRatio;
       if (extentWidth > canvas.width) {
         // Only consider labels not wider than their country's bounding box
         createLabel(canvas, text, coord);

externs/olx.js

@@ -4402,6 +4402,8 @@ olx.render;
 
 /**
  * @typedef {{context: CanvasRenderingContext2D,
+ *     feature: (ol.Feature|ol.render.Feature),
+ *     geometry: ol.geom.SimpleGeometry,
  *     pixelRatio: number,
  *     resolution: number,
  *     rotation: number}}

src/ol/render/canvas/replay.js

@@ -90,7 +90,7 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
 
   /**
    * @private
-   * @type {ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>}
+   * @type {Object.<number,ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>>}
    */
   this.coordinateCache_ = {};
 
@@ -326,16 +326,14 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   var prevX, prevY, roundX, roundY;
   var pendingFill = 0;
   var pendingStroke = 0;
+  var coordinateCache = this.coordinateCache_;
 
-  /**
+  var state = /** @type {olx.render.State} */ ({
-   * @type {olx.render.State}
-   */
-  var state = {
     context: context,
     pixelRatio: pixelRatio,
     resolution: this.resolution,
     rotation: viewRotation
-  };
+  });
 
   // When the batch size gets too big, performance decreases. 200 is a good
   // balance between batch size and number of fill/stroke instructions.
@@ -344,7 +342,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   while (i < ii) {
     var instruction = instructions[i];
     var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var feature, fill, stroke, text, x, y;
+    var /** @type {ol.Feature|ol.render.Feature} */ feature, fill, stroke, text, x, y;
     switch (type) {
       case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
         feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -396,17 +394,21 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         dd = instruction[2];
         var geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]);
         var renderer = instruction[4];
-        var coords;
+        var fn = instruction.length == 6 ? instruction[5] : undefined;
-        if (instruction.length == 6) {
+        state.geometry = geometry;
-          var fn = instruction[5];
+        state.feature = feature;
-          if (!(d in this.coordinateCache_)) {
+        if (!(i in coordinateCache)) {
-            this.coordinateCache_[d] = [];
+          coordinateCache[i] = [];
         }
-          coords = fn(pixelCoordinates, d, dd, 2, this.coordinateCache_[d]);
+        var coords = coordinateCache[i];
+        if (fn) {
+          fn(pixelCoordinates, d, dd, 2, coords);
         } else {
-          coords = pixelCoordinates.slice(d, dd);
+          coords[0] = pixelCoordinates[d];
+          coords[1] = pixelCoordinates[d + 1];
+          coords.length = 2;
         }
-        renderer(coords, geometry, feature, state);
+        renderer(coords, state);
         ++i;
         break;
       case ol.render.canvas.Instruction.DRAW_IMAGE:

src/ol/typedefs.js

@@ -627,14 +627,12 @@ ol.StyleGeometryFunction;
 
 
 /**
- * Custom renderer function. Takes 4 arguments:
+ * Custom renderer function. Takes two arguments:
  *
  * 1. The pixel coordinates of the geometry in GeoJSON notation.
- * 2. The original {@link ol.geom.SimpleGeometry}.
+ * 2. The {@link olx.render.State} of the layer renderer.
- * 3. The underlying {@link ol.Feature} or {@link ol.render.Feature}.
- * 4. The {@link olx.render.State} of the layer renderer.
  *
- * @typedef {function(Array,ol.geom.SimpleGeometry,(ol.Feature|ol.render.Feature),olx.render.State)}
+ * @typedef {function((ol.Coordinate|Array<ol.Coordinate>|Array.<Array.<ol.Coordinate>>),olx.render.State)}
  */
 ol.StyleRenderFunction;
 

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

@@ -207,9 +207,19 @@ describe('ol.render.canvas.ReplayGroup', function() {
     });
 
     it('calls the renderer function configured for the style', function() {
-      var spy = sinon.spy();
+      var calls = [];
       var style = new ol.style.Style({
-        renderer: spy
+        renderer: function(coords, state) {
+          calls.push({
+            coords: coords,
+            geometry: state.geometry,
+            feature: state.feature,
+            context: state.context,
+            pixelRatio: state.pixelRatio,
+            rotation: state.rotation,
+            resolution: state.resolution
+          });
+        }
       });
       var point = new ol.Feature(new ol.geom.Point([45, 90]));
       var multipoint = new ol.Feature(new ol.geom.MultiPoint(
@@ -233,24 +243,28 @@ describe('ol.render.canvas.ReplayGroup', function() {
       ol.renderer.vector.renderFeature(replay, geometrycollection, style, 1);
       ol.transform.scale(transform, 0.1, 0.1);
       replay.replay(context, 1, transform, 0, {});
-      expect(spy.callCount).to.be(9);
+      expect(calls.length).to.be(9);
-      expect(spy.firstCall.args.length).to.be(4);
+      expect(calls[0].geometry).to.be(point.getGeometry());
-      expect(spy.firstCall.args[1]).to.be(point.getGeometry());
+      expect(calls[0].feature).to.be(point);
-      expect(spy.firstCall.args[2]).to.be(point);
+      expect(calls[0].context).to.be(context);
-      expect(spy.firstCall.args[3].context).to.be(context);
+      expect(calls[0].pixelRatio).to.be(1);
-      expect(spy.firstCall.args[3].pixelRatio).to.be(1);
+      expect(calls[0].rotation).to.be(0);
-      expect(spy.firstCall.args[3].rotation).to.be(0);
+      expect(calls[0].resolution).to.be(1);
-      expect(spy.firstCall.args[3].resolution).to.be(1);
+      expect(calls[0].coords).to.eql([4.5, 9]);
-      expect(spy.getCall(0).args[0]).to.eql([4.5, 9]);
+      expect(calls[1].feature).to.be(multipoint);
-      expect(spy.getCall(1).args[0][0]).to.eql([4.5, 9]);
+      expect(calls[1].coords[0]).to.eql([4.5, 9]);
-      expect(spy.getCall(2).args[0][0]).to.eql([4.5, 9]);
+      expect(calls[2].feature).to.be(linestring);
-      expect(spy.getCall(3).args[0][0][0]).to.eql([4.5, 9]);
+      expect(calls[2].coords[0]).to.eql([4.5, 9]);
-      expect(spy.getCall(4).args[0][0][0]).to.eql([-9, -4.5]);
+      expect(calls[3].feature).to.be(multilinestring);
-      expect(spy.getCall(5).args[0][0][0][0]).to.eql([-9, -4.5]);
+      expect(calls[3].coords[0][0]).to.eql([4.5, 9]);
-      expect(spy.getCall(6).args[2]).to.be(geometrycollection);
+      expect(calls[4].feature).to.be(polygon);
-      expect(spy.getCall(6).args[1].getCoordinates()).to.eql([45, 90]);
+      expect(calls[4].coords[0][0]).to.eql([-9, -4.5]);
-      expect(spy.getCall(7).args[1].getCoordinates()[0]).to.eql([45, 90]);
+      expect(calls[5].feature).to.be(multipolygon);
-      expect(spy.getCall(8).args[1].getCoordinates()[0][0]).to.eql([-90, -45]);
+      expect(calls[5].coords[0][0][0]).to.eql([-9, -4.5]);
+      expect(calls[6].feature).to.be(geometrycollection);
+      expect(calls[6].geometry.getCoordinates()).to.eql([45, 90]);
+      expect(calls[7].geometry.getCoordinates()[0]).to.eql([45, 90]);
+      expect(calls[8].geometry.getCoordinates()[0][0]).to.eql([-90, -45]);
     });
   });