Sort miscellaneous properties and add rotation and scale

src/ol/render/canvas/canvasreplay.js

@@ -202,13 +202,16 @@ ol.render.canvas.Replay.prototype.replay_ =
       d = /** @type {number} */ (instruction[1]);
       goog.asserts.assert(goog.isNumber(instruction[2]));
       dd = /** @type {number} */ (instruction[2]);
-      var anchorX = /** @type {number} */ (instruction[3]);
-      var anchorY = /** @type {number} */ (instruction[4]);
-      var width = /** @type {number} */ (instruction[5]);
-      var height = /** @type {number} */ (instruction[6]);
       var image =  /** @type {HTMLCanvasElement|HTMLVideoElement|Image} */
-          (instruction[7]);
+          (instruction[3]);
-      var snapToPixel = /** @type {boolean|undefined} */ (instruction[8]);
+      // Remaining arguments in DRAW_IMAGE are in alphabetical order
+      var anchorX = /** @type {number} */ (instruction[4]);
+      var anchorY = /** @type {number} */ (instruction[5]);
+      var height = /** @type {number} */ (instruction[6]);
+      var rotation = /** @type {number} */ (instruction[7]);
+      var scale = /** @type {number} */ (instruction[8]);
+      var snapToPixel = /** @type {boolean|undefined} */ (instruction[9]);
+      var width = /** @type {number} */ (instruction[10]);
       for (; d < dd; d += 2) {
         var x = pixelCoordinates[d] - anchorX;
         var y = pixelCoordinates[d + 1] - anchorY;
@@ -454,18 +457,6 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) {
 
   goog.base(this, pixelRatio, tolerance);
 
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.anchorX_ = undefined;
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.anchorY_ = undefined;
-
   /**
    * @private
    * @type {HTMLCanvasElement|HTMLVideoElement|Image}
@@ -478,6 +469,18 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) {
    */
   this.image_ = null;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.anchorX_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.anchorY_ = undefined;
+
   /**
    * @private
    * @type {number|undefined}
@@ -488,7 +491,13 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) {
    * @private
    * @type {number|undefined}
    */
-  this.width_ = undefined;
+  this.rotation_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.scale_ = undefined;
 
   /**
    * @private
@@ -496,6 +505,12 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) {
    */
   this.snapToPixel_ = undefined;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.width_ = undefined;
+
 };
 goog.inherits(ol.render.canvas.ImageReplay, ol.render.canvas.Replay);
 
@@ -526,6 +541,8 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorX_));
   goog.asserts.assert(goog.isDef(this.anchorY_));
   goog.asserts.assert(goog.isDef(this.height_));
+  goog.asserts.assert(goog.isDef(this.rotation_));
+  goog.asserts.assert(goog.isDef(this.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
   ol.extent.extend(this.extent_, pointGeometry.getExtent());
   this.beginGeometry(pointGeometry);
@@ -535,14 +552,17 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
   var myEnd = this.drawCoordinates_(
       flatCoordinates, 0, flatCoordinates.length, stride);
   this.instructions.push([
-    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
+    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
-    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    // Remaining arguments to DRAW_IMAGE are in alphabetical order
-    this.image_, this.snapToPixel_
+    this.anchorX_, this.anchorY_, this.height_, this.rotation_, this.scale_,
+    this.snapToPixel_, this.width_
   ]);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
-    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    this.hitDetectionImage_,
-    this.hitDetectionImage_, this.snapToPixel_
+    // Remaining arguments to DRAW_IMAGE are in alphabetical order
+    this.anchorX_, this.anchorY_, this.height_, this.rotation_, this.scale_,
+    this.snapToPixel_, this.width_
   ]);
   this.endGeometry(pointGeometry, data);
 };
@@ -559,6 +579,8 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorX_));
   goog.asserts.assert(goog.isDef(this.anchorY_));
   goog.asserts.assert(goog.isDef(this.height_));
+  goog.asserts.assert(goog.isDef(this.rotation_));
+  goog.asserts.assert(goog.isDef(this.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
   ol.extent.extend(this.extent_, multiPointGeometry.getExtent());
   this.beginGeometry(multiPointGeometry);
@@ -568,14 +590,17 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
   var myEnd = this.drawCoordinates_(
       flatCoordinates, 0, flatCoordinates.length, stride);
   this.instructions.push([
-    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
+    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
-    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    // Remaining arguments to DRAW_IMAGE are in alphabetical order
-    this.image_, this.snapToPixel_
+    this.anchorX_, this.anchorY_, this.height_, this.rotation_, this.scale_,
+    this.snapToPixel_, this.width_
   ]);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
-    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    this.hitDetectionImage_,
-    this.hitDetectionImage_, this.snapToPixel_
+    // Remaining arguments to DRAW_IMAGE are in alphabetical order
+    this.anchorX_, this.anchorY_, this.height_, this.rotation_, this.scale_,
+    this.snapToPixel_, this.width_
   ]);
   this.endGeometry(multiPointGeometry, data);
 };
@@ -592,8 +617,10 @@ ol.render.canvas.ImageReplay.prototype.finish = function() {
   this.hitDetectionImage_ = null;
   this.image_ = null;
   this.height_ = undefined;
-  this.width_ = undefined;
+  this.scale_ = undefined;
+  this.rotation_ = undefined;
   this.snapToPixel_ = undefined;
+  this.width_ = undefined;
 };
 
 
@@ -615,9 +642,11 @@ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   this.anchorY_ = anchor[1];
   this.hitDetectionImage_ = hitDetectionImage;
   this.image_ = image;
-  this.width_ = size[0];
   this.height_ = size[1];
+  this.rotation_ = imageStyle.getRotation();
+  this.scale_ = imageStyle.getScale();
   this.snapToPixel_ = imageStyle.getSnapToPixel();
+  this.width_ = size[0];
 };