Add support for polygons to canvas replay

src/ol/renderer/vector.js

@@ -38,7 +38,7 @@ ol.renderer.vector.renderLineStringGeometry_ =
   window.console.log({batchingLineString: lineStringGeometry}); // FIXME
   var batch = batchGroup.getBatch(
       style.zIndex, ol.replay.BatchType.STROKE_LINE);
-  batch.setStrokeStyle(style.stroke);
+  batch.setFillStrokeStyle(null, style.stroke);
   batch.drawLineStringGeometry(lineStringGeometry);
 };
 

src/ol/replay/canvas/canvasbatchgroup.js

@@ -10,6 +10,7 @@ goog.require('goog.object');
 goog.require('ol.replay');
 goog.require('ol.replay.IBatch');
 goog.require('ol.replay.IBatchGroup');
+goog.require('ol.style.fill');
 goog.require('ol.style.stroke');
 
 
@@ -19,16 +20,18 @@ goog.require('ol.style.stroke');
 ol.replay.canvas.InstructionType = {
   BEGIN_PATH: 0,
   CLOSE_PATH: 1,
-  DRAW_LINE_STRING_GEOMETRY: 2,
+  FILL: 2,
-  FILL: 3,
+  MOVE_TO_LINE_TO: 3,
-  SET_STROKE_STYLE: 4,
+  SET_FILL_STYLE: 4,
-  STROKE: 5
+  SET_STROKE_STYLE: 5,
+  STROKE: 6
 };
 
 
 /**
  * @typedef {{beginPath: boolean,
  *            fillPending: boolean,
+ *            fillStyle: ?ol.style.Fill,
  *            strokePending: boolean,
  *            strokeStyle: ?ol.style.Stroke}}
  */
@@ -74,6 +77,7 @@ ol.replay.canvas.Batch = function() {
   this.state_ = {
     beginPath: true,
     fillPending: false,
+    fillStyle: null,
     strokePending: false,
     strokeStyle: null
   };
@@ -139,16 +143,21 @@ ol.replay.canvas.Batch.prototype.draw = function(context, transform) {
         ol.replay.canvas.InstructionType.CLOSE_PATH) {
       context.closePath();
     } else if (instruction.type ==
-        ol.replay.canvas.InstructionType.DRAW_LINE_STRING_GEOMETRY) {
+        ol.replay.canvas.InstructionType.FILL) {
+      context.fill();
+    } else if (instruction.type ==
+        ol.replay.canvas.InstructionType.MOVE_TO_LINE_TO) {
       context.moveTo(pixelCoordinates[i], pixelCoordinates[i + 1]);
       goog.asserts.assert(goog.isNumber(instruction.argument));
-      var ii = /** @type {number} */ (instruction.argument);
+      var end = /** @type {number} */ (instruction.argument);
-      for (i += 2; i < ii; i += 2) {
+      for (i += 2; i < end; i += 2) {
         context.lineTo(pixelCoordinates[i], pixelCoordinates[i + 1]);
       }
     } else if (instruction.type ==
-        ol.replay.canvas.InstructionType.FILL) {
+        ol.replay.canvas.InstructionType.SET_FILL_STYLE) {
-      context.fill();
+      goog.asserts.assert(goog.isObject(instruction.argument));
+      var fillStyle = /** @type {ol.style.Fill} */ (instruction.argument);
+      context.fillStyle = fillStyle.color;
     } else if (instruction.type ==
         ol.replay.canvas.InstructionType.SET_STROKE_STYLE) {
       goog.asserts.assert(goog.isObject(instruction.argument));
@@ -180,6 +189,26 @@ ol.replay.canvas.Batch.prototype.drawLineStringGeometry =
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.replay.canvas.Batch.prototype.drawPolygonGeometry =
+    function(polygonGeometry) {
+  goog.asserts.assert(!goog.isNull(this.state_));
+  var rings = polygonGeometry.getRings();
+  var i, ii;
+  for (i = 0, ii = rings.length; i < ii; ++i) {
+    this.beginPath_();
+    this.instructions_.push({
+      type: ol.replay.canvas.InstructionType.MOVE_TO_LINE_TO,
+      argument: this.appendCoordinates_(rings[i], true)
+    });
+  }
+  this.state_.fillPending = true;
+  this.state_.strokePending = true;
+};
+
+
 /**
  * FIXME empty description for jsdoc
  */
@@ -217,11 +246,19 @@ ol.replay.canvas.Batch.prototype.flush_ = function(finish) {
 /**
  * @inheritDoc
  */
-ol.replay.canvas.Batch.prototype.setStrokeStyle = function(strokeStyle) {
+ol.replay.canvas.Batch.prototype.setFillStrokeStyle =
+    function(fillStyle, strokeStyle) {
   goog.asserts.assert(!goog.isNull(this.state_));
   // FIXME should only change styles before draws
-  if (goog.isNull(this.state_.strokeStyle) ||
+  if (!ol.style.fill.equals(this.state_.fillStyle, fillStyle)) {
-      !ol.style.stroke.equals(this.state_.strokeStyle, strokeStyle)) {
+    this.flush_(false);
+    this.instructions_.push({
+      type: ol.replay.canvas.InstructionType.SET_FILL_STYLE,
+      argument: fillStyle
+    });
+    this.state_.fillStyle = fillStyle;
+  }
+  if (!ol.style.stroke.equals(this.state_.strokeStyle, strokeStyle)) {
     this.flush_(false);
     this.instructions_.push({
       type: ol.replay.canvas.InstructionType.SET_STROKE_STYLE,
@@ -320,5 +357,8 @@ ol.replay.canvas.BatchGroup.prototype.isEmpty = function() {
  * @type {Object.<ol.replay.BatchType, function(new: ol.replay.canvas.Batch)>}
  */
 ol.replay.canvas.BATCH_CONSTRUCTORS_ = {
-  'strokeLine': ol.replay.canvas.Batch
+  'fillRing': ol.replay.canvas.Batch,
+  'fillStrokeRing': ol.replay.canvas.Batch,
+  'strokeLine': ol.replay.canvas.Batch,
+  'strokeRing': ol.replay.canvas.Batch
 };

src/ol/replay/ibatchgroup.js

@@ -9,9 +9,9 @@ goog.require('goog.functions');
  */
 ol.replay.BatchType = {
   FILL_RING: 'fillRing',
+  FILL_STROKE_RING: 'fillStrokeRing',
   POINT: 'point',
   STROKE_LINE: 'strokeLine',
-  STROKE_FILL_RING: 'strokeFillRing',
   STROKE_RING: 'strokeRing'
 };
 
@@ -33,9 +33,18 @@ ol.replay.IBatch.prototype.drawLineStringGeometry =
 
 
 /**
- * @param {ol.style.Stroke} strokeStyle Stroke style.
+ * @param {ol.geom.Polygon} polygonGeometry Polygon geometry.
  */
-ol.replay.IBatch.prototype.setStrokeStyle = function(strokeStyle) {
+ol.replay.IBatch.prototype.drawPolygonGeometry = function(polygonGeometry) {
+};
+
+
+/**
+ * @param {?ol.style.Fill} fillStyle Fill style.
+ * @param {?ol.style.Stroke} strokeStyle Stroke style.
+ */
+ol.replay.IBatch.prototype.setFillStrokeStyle =
+    function(fillStyle, strokeStyle) {
 };