Use DOM instead of map canvas for ol.render.Box

src/ol/render/box.js

@@ -4,18 +4,30 @@ goog.provide('ol.render.Box');
 
 goog.require('goog.Disposable');
 goog.require('goog.asserts');
-goog.require('goog.events');
 goog.require('ol.geom.Polygon');
-goog.require('ol.render.EventType');
 
 
 
 /**
  * @constructor
  * @extends {goog.Disposable}
- * @param {ol.style.Style} style Style.
+ * @param {string} className CSS class name.
  */
-ol.render.Box = function(style) {
+ol.render.Box = function(className) {
+
+  /**
+   * @type {ol.geom.Polygon}
+   * @private
+   */
+  this.geometry_ = null;
+
+  /**
+   * @type {HTMLDivElement}
+   * @private
+   */
+  this.element_ = /** @type {HTMLDivElement} */ (document.createElement('div'));
+  this.element_.style.position = 'absolute';
+  this.element_.className = 'ol-box ' + className;
 
   /**
    * @private
@@ -23,12 +35,6 @@ ol.render.Box = function(style) {
    */
   this.map_ = null;
 
-  /**
-   * @private
-   * @type {goog.events.Key}
-   */
-  this.postComposeListenerKey_ = null;
-
   /**
    * @private
    * @type {ol.Pixel}
@@ -41,27 +47,68 @@ ol.render.Box = function(style) {
    */
   this.endPixel_ = null;
 
-  /**
-   * @private
-   * @type {ol.geom.Polygon}
-   */
-  this.geometry_ = null;
-
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  this.style_ = style;
-
 };
 goog.inherits(ol.render.Box, goog.Disposable);
 
 
 /**
- * @private
- * @return {ol.geom.Polygon} Geometry.
+ * @inheritDoc
  */
-ol.render.Box.prototype.createGeometry_ = function() {
+ol.render.Box.prototype.disposeInternal = function() {
+  this.setMap(null);
+  goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * @private
+ */
+ol.render.Box.prototype.render_ = function() {
+  var startPixel = this.startPixel_;
+  var endPixel = this.endPixel_;
+  goog.asserts.assert(startPixel, 'this.startPixel_ must be truthy');
+  goog.asserts.assert(endPixel, 'this.endPixel_ must be truthy');
+  var px = 'px';
+  var style = this.element_.style;
+  style.left = Math.min(startPixel[0], endPixel[0]) + px;
+  style.top = Math.min(startPixel[1], endPixel[1]) + px;
+  style.width = Math.abs(endPixel[0] - startPixel[0]) + px;
+  style.height = Math.abs(endPixel[1] - startPixel[1]) + px;
+};
+
+
+/**
+ * @param {ol.Map} map Map.
+ */
+ol.render.Box.prototype.setMap = function(map) {
+  if (this.map_) {
+    this.map_.getViewport().removeChild(this.element_);
+    var style = this.element_.style;
+    style.left = style.top = style.width = style.height = 'inherit';
+  }
+  this.map_ = map;
+  if (this.map_) {
+    this.map_.getViewport().appendChild(this.element_);
+  }
+};
+
+
+/**
+ * @param {ol.Pixel} startPixel Start pixel.
+ * @param {ol.Pixel} endPixel End pixel.
+ */
+ol.render.Box.prototype.setPixels = function(startPixel, endPixel) {
+  this.startPixel_ = startPixel;
+  this.endPixel_ = endPixel;
+  this.createOrUpdateGeometry();
+  this.render_();
+};
+
+
+/**
+ * Creates or updates the cached geometry.
+ */
+ol.render.Box.prototype.createOrUpdateGeometry = function() {
   goog.asserts.assert(this.startPixel_,
       'this.startPixel_ must be truthy');
   goog.asserts.assert(this.endPixel_,
@@ -78,33 +125,11 @@ ol.render.Box.prototype.createGeometry_ = function() {
   var coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
   // close the polygon
   coordinates[4] = coordinates[0].slice();
-  return new ol.geom.Polygon([coordinates]);
-};
-
-
-/**
- * @inheritDoc
- */
-ol.render.Box.prototype.disposeInternal = function() {
-  this.setMap(null);
-};
-
-
-/**
- * @param {ol.render.Event} event Event.
- * @private
- */
-ol.render.Box.prototype.handleMapPostCompose_ = function(event) {
-  var geometry = this.geometry_;
-  goog.asserts.assert(geometry, 'geometry should be defined');
-  var style = this.style_;
-  goog.asserts.assert(style, 'style must be truthy');
-  // use drawAsync(Infinity) to draw above everything
-  event.vectorContext.drawAsync(Infinity, function(render) {
-    render.setFillStrokeStyle(style.getFill(), style.getStroke());
-    render.setTextStyle(style.getText());
-    render.drawPolygonGeometry(geometry, null);
-  });
+  if (!this.geometry_) {
+    this.geometry_ = new ol.geom.Polygon([coordinates]);
+  } else {
+    this.geometry_.setCoordinates([coordinates]);
+  }
 };
 
 
@@ -114,45 +139,3 @@ ol.render.Box.prototype.handleMapPostCompose_ = function(event) {
 ol.render.Box.prototype.getGeometry = function() {
   return this.geometry_;
 };
-
-
-/**
- * @private
- */
-ol.render.Box.prototype.requestMapRenderFrame_ = function() {
-  if (this.map_ && this.startPixel_ && this.endPixel_) {
-    this.map_.render();
-  }
-};
-
-
-/**
- * @param {ol.Map} map Map.
- */
-ol.render.Box.prototype.setMap = function(map) {
-  if (this.postComposeListenerKey_) {
-    goog.events.unlistenByKey(this.postComposeListenerKey_);
-    this.postComposeListenerKey_ = null;
-    this.map_.render();
-    this.map_ = null;
-  }
-  this.map_ = map;
-  if (this.map_) {
-    this.postComposeListenerKey_ = goog.events.listen(
-        map, ol.render.EventType.POSTCOMPOSE, this.handleMapPostCompose_, false,
-        this);
-    this.requestMapRenderFrame_();
-  }
-};
-
-
-/**
- * @param {ol.Pixel} startPixel Start pixel.
- * @param {ol.Pixel} endPixel End pixel.
- */
-ol.render.Box.prototype.setPixels = function(startPixel, endPixel) {
-  this.startPixel_ = startPixel;
-  this.endPixel_ = endPixel;
-  this.geometry_ = this.createGeometry_();
-  this.requestMapRenderFrame_();
-};