Implement new control architecture

src/ol/control/mouseposition.js

@@ -1,53 +1,66 @@
 // FIXME should listen on appropriate pane, once it is defined
 
 goog.provide('ol.control.MousePosition');
+goog.provide('ol.control.MousePositionOptions');
 
 goog.require('goog.events');
 goog.require('goog.events.EventType');
+goog.require('goog.style');
 goog.require('ol.MapProperty');
 goog.require('ol.Object');
+goog.require('ol.Pixel');
 goog.require('ol.Projection');
 goog.require('ol.TransformFunction');
 goog.require('ol.control.Control');
 
 
+/**
+ * @typedef {{coordinateFormat: (ol.CoordinateFormatType|undefined),
+ *            map: (ol.Map|undefined),
+ *            projection: (ol.Projection|undefined),
+ *            target: (Element|undefined),
+ *            undefinedHtml: (string|undefined)}}
+ */
+ol.control.MousePositionOptions;
+
+
 
 /**
  * @constructor
  * @extends {ol.control.Control}
- * @param {ol.Map} map Map.
- * @param {ol.Projection=} opt_projection Projection.
- * @param {ol.CoordinateFormatType=} opt_coordinateFormat Coordinate format.
- * @param {string=} opt_undefinedHTML Undefined HTML.
+ * @param {ol.control.MousePositionOptions} mousePositionOptions Mouse position
+ *     options.
  */
-ol.control.MousePosition =
-    function(map, opt_projection, opt_coordinateFormat, opt_undefinedHTML) {
+ol.control.MousePosition = function(mousePositionOptions) {
 
-  goog.base(this, map);
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
+    'class': 'ol-mouse-position'
+  });
+
+  goog.base(this, {
+    element: element,
+    map: mousePositionOptions.map,
+    target: mousePositionOptions.target
+  });
 
   /**
    * @private
-   * @type {Element}
+   * @type {ol.Projection|undefined}
    */
-  this.divElement_ = goog.dom.createElement(goog.dom.TagName.DIV);
-
-  /**
-   * @private
-   * @type {ol.Projection}
-   */
-  this.projection_ = opt_projection || null;
+  this.projection_ = mousePositionOptions.projection;
 
   /**
    * @private
    * @type {ol.CoordinateFormatType|undefined}
    */
-  this.coordinateFormat_ = opt_coordinateFormat;
+  this.coordinateFormat_ = mousePositionOptions.coordinateFormat;
 
   /**
    * @private
    * @type {string}
    */
-  this.undefinedHTML_ = opt_undefinedHTML || '';
+  this.undefinedHtml_ = goog.isDef(mousePositionOptions.undefinedHtml) ?
+      mousePositionOptions.undefinedHtml : '';
 
   /**
    * @private
@@ -55,15 +68,11 @@ ol.control.MousePosition =
    */
   this.transform_ = ol.Projection.identityTransform;
 
-  goog.events.listen(map,
-      ol.Object.getChangedEventType(ol.MapProperty.PROJECTION),
-      this.handleMapProjectionChanged, false, this);
-
-  goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEMOVE,
-      this.handleMouseMove, false, this);
-
-  goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEOUT,
-      this.handleMouseOut, false, this);
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.listenerKeys_ = [];
 
   this.handleMapProjectionChanged();
 
@@ -71,28 +80,20 @@ ol.control.MousePosition =
 goog.inherits(ol.control.MousePosition, ol.control.Control);
 
 
-/**
- * @inheritDoc
- */
-ol.control.MousePosition.prototype.getElement = function() {
-  return this.divElement_;
-};
-
-
 /**
  * @protected
  */
 ol.control.MousePosition.prototype.handleMapProjectionChanged = function() {
   var map = this.getMap();
   var mapProjection = map.getProjection();
-  if (!goog.isDef(mapProjection) || goog.isNull(this.projection_)) {
+  if (!goog.isDef(mapProjection) || !goog.isDef(this.projection_)) {
     this.transform_ = ol.Projection.identityTransform;
   } else {
     this.transform_ =
         ol.Projection.getTransform(mapProjection, this.projection_);
   }
   // FIXME should we instead re-calculate using the last known mouse position?
-  this.divElement_.innerHTML = this.undefinedHTML_;
+  this.element.innerHTML = this.undefinedHtml_;
 };
 
 
@@ -102,7 +103,9 @@ ol.control.MousePosition.prototype.handleMapProjectionChanged = function() {
  */
 ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
   var map = this.getMap();
-  var pixel = new ol.Pixel(browserEvent.offsetX, browserEvent.offsetY);
+  var eventPosition = goog.style.getRelativePosition(
+      browserEvent, map.getViewport());
+  var pixel = new ol.Pixel(eventPosition.x, eventPosition.y);
   var coordinate = map.getCoordinateFromPixel(pixel);
   var html;
   if (goog.isDef(coordinate)) {
@@ -113,9 +116,9 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
       html = coordinate.toString();
     }
   } else {
-    html = this.undefinedHTML_;
+    html = this.undefinedHtml_;
   }
-  this.divElement_.innerHTML = html;
+  this.element.innerHTML = html;
 };
 
 
@@ -124,5 +127,29 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
  * @protected
  */
 ol.control.MousePosition.prototype.handleMouseOut = function(browserEvent) {
-  this.divElement_.innerHTML = this.undefinedHTML_;
+  this.element.innerHTML = this.undefinedHtml_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.MousePosition.prototype.setMap = function(map) {
+  if (goog.isNull(this.listenerKeys_)) {
+    goog.array.forEach(this.listenerKeys_, goog.events.unlistenByKey);
+  }
+  this.listenerKeys_ = null;
+  goog.base(this, 'setMap', map);
+  if (!goog.isNull(map)) {
+    var viewport = map.getViewport();
+    this.listenerKeys = [
+      goog.events.listen(map,
+          ol.Object.getChangedEventType(ol.MapProperty.PROJECTION),
+          this.handleMapProjectionChanged, false, this),
+      goog.events.listen(viewport, goog.events.EventType.MOUSEMOVE,
+          this.handleMouseMove, false, this),
+      goog.events.listen(viewport, goog.events.EventType.MOUSEOUT,
+          this.handleMouseOut, false, this)
+    ];
+  }
 };