Merge pull request #1473 from elemoine/vector-api-zindex

[vector-api] Make canvas immediate API support zIndex

src/ol/render/box.js

@@ -95,11 +95,15 @@ ol.render.Box.prototype.disposeInternal = function() {
  * @private
  */
 ol.render.Box.prototype.handleMapPostCompose_ = function(event) {
+  var geometry = this.geometry_;
+  goog.asserts.assert(!goog.isNull(geometry));
   var style = this.style_;
   goog.asserts.assert(!goog.isNull(style));
-  var render = event.getRender();
+  // use drawAsync(Infinity) to draw above everything
-  render.setFillStrokeStyle(style.getFill(), style.getStroke());
+  event.getRender().drawAsync(Infinity, function(render) {
-  render.drawPolygonGeometry(this.geometry_, null);
+    render.setFillStrokeStyle(style.getFill(), style.getStroke());
+    render.drawPolygonGeometry(geometry, null);
+  });
 };
 
 

src/ol/render/canvas/canvasimmediate.exports

@@ -1,3 +1,4 @@
+@exportProperty ol.render.canvas.Immediate.prototype.drawAsync
 @exportProperty ol.render.canvas.Immediate.prototype.drawFeature
 @exportProperty ol.render.canvas.Immediate.prototype.drawPointGeometry
 @exportProperty ol.render.canvas.Immediate.prototype.drawLineStringGeometry

src/ol/render/canvas/canvasimmediate.js

@@ -4,7 +4,9 @@
 
 goog.provide('ol.render.canvas.Immediate');
 
+goog.require('goog.array');
 goog.require('goog.asserts');
+goog.require('goog.object');
 goog.require('goog.vec.Mat4');
 goog.require('ol.color');
 goog.require('ol.extent');
@@ -26,6 +28,13 @@ goog.require('ol.vec.Mat4');
  */
 ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform) {
 
+  /**
+   * @private
+   * @type {Object.<string,
+   *        Array.<function(ol.render.canvas.Immediate)>>}
+   */
+  this.callbacksByZIndex_ = {};
+
   /**
    * @private
    * @type {CanvasRenderingContext2D}
@@ -240,6 +249,20 @@ ol.render.canvas.Immediate.prototype.drawRings_ =
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Immediate.prototype.drawAsync = function(zIndex, callback) {
+  var zIndexKey = zIndex.toString();
+  var callbacks = this.callbacksByZIndex_[zIndexKey];
+  if (goog.isDef(callbacks)) {
+    callbacks.push(callback);
+  } else {
+    this.callbacksByZIndex_[zIndexKey] = [callback];
+  }
+};
+
+
 /**
  * @inheritDoc
  */
@@ -249,12 +272,18 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) {
       !ol.extent.intersects(this.extent_, geometry.getExtent())) {
     return;
   }
-  this.setFillStrokeStyle(style.getFill(), style.getStroke());
+  var zIndex = style.getZIndex();
-  this.setImageStyle(style.getImage());
+  if (!goog.isDef(zIndex)) {
-  var renderGeometry =
+    zIndex = 0;
-      ol.render.canvas.Immediate.GEOMETRY_RENDERES_[geometry.getType()];
+  }
-  goog.asserts.assert(goog.isDef(renderGeometry));
+  this.drawAsync(zIndex, function(render) {
-  renderGeometry.call(this, geometry, null);
+    render.setFillStrokeStyle(style.getFill(), style.getStroke());
+    render.setImageStyle(style.getImage());
+    var renderGeometry =
+        ol.render.canvas.Immediate.GEOMETRY_RENDERES_[geometry.getType()];
+    goog.asserts.assert(goog.isDef(renderGeometry));
+    renderGeometry.call(render, geometry, null);
+  });
 };
 
 
@@ -402,6 +431,23 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
 };
 
 
+/**
+ * FIXME: empty description for jsdoc
+ */
+ol.render.canvas.Immediate.prototype.flush = function() {
+  /** @type {Array.<number>} */
+  var zs = goog.array.map(goog.object.getKeys(this.callbacksByZIndex_), Number);
+  goog.array.sort(zs);
+  var i, ii, callbacks, j, jj;
+  for (i = 0, ii = zs.length; i < ii; ++i) {
+    callbacks = this.callbacksByZIndex_[zs[i].toString()];
+    for (j = 0, jj = callbacks.length; j < jj; ++j) {
+      callbacks[j](this);
+    }
+  }
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/render/canvas/canvasreplay.js

@@ -366,6 +366,12 @@ ol.render.canvas.Replay.prototype.reverseHitDetectionInstructions_ =
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Replay.prototype.drawAsync = goog.abstractMethod;
+
+
 /**
  * @inheritDoc
  */

src/ol/render/irender.js

@@ -11,6 +11,14 @@ ol.render.IRender = function() {
 };
 
 
+/**
+ * @param {number} zIndex Z index.
+ * @param {function(ol.render.canvas.Immediate)} callback Callback.
+ */
+ol.render.IRender.prototype.drawAsync = function(zIndex, callback) {
+};
+
+
 /**
  * @param {ol.Feature} feature Feature.
  * @param {ol.style.Style} style Style.

src/ol/render/webgl/webglimmediate.js

@@ -13,6 +13,13 @@ ol.render.webgl.Immediate = function(context, pixelRatio) {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.webgl.Immediate.prototype.drawAsync = function(zIndex, callback) {
+};
+
+
 /**
  * @param {ol.Feature} feature Feature.
  * @param {ol.style.Style} style Style.

src/ol/renderer/canvas/canvaslayerrenderer.js

@@ -90,6 +90,7 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ =
     var composeEvent = new ol.render.Event(type, layer, render, frameState,
         context, null);
     layer.dispatchEvent(composeEvent);
+    render.flush();
   }
 };
 

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -109,6 +109,7 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ =
     var composeEvent = new ol.render.Event(type, map, render, frameState,
         context, null);
     map.dispatchEvent(composeEvent);
+    render.flush();
   }
 };