Merge pull request #118 from twpayne/mouse-position-control-refactoring

Mouse position control refactoring

examples/side-by-side.js

@@ -43,7 +43,7 @@ domMap.getControls().push(new ol.control.MousePosition({
   coordinateFormat: ol.Coordinate.toStringHDMS,
   projection: ol.Projection.getFromCode('EPSG:4326'),
   target: document.getElementById('domMousePosition'),
-  undefinedHtml: ' '
+  undefinedHTML: ' '
 }));
 
 var webglMap = new ol.Map({
@@ -59,7 +59,7 @@ webglMap.getControls().push(new ol.control.MousePosition({
   coordinateFormat: ol.Coordinate.toStringHDMS,
   projection: ol.Projection.getFromCode('EPSG:4326'),
   target: document.getElementById('webglMousePosition'),
-  undefinedHtml: ' '
+  undefinedHTML: ' '
 }));
 
 var keyboardInteraction = new ol.interaction.Keyboard();

src/objectliterals.exports

@@ -7,7 +7,7 @@
 @exportObjectLiteralProperty ol.control.MousePositionOptions.map ol.Map|undefined
 @exportObjectLiteralProperty ol.control.MousePositionOptions.projection ol.Projection|undefined
 @exportObjectLiteralProperty ol.control.MousePositionOptions.target Element|undefined
-@exportObjectLiteralProperty ol.control.MousePositionOptions.undefinedHtml string|undefined
+@exportObjectLiteralProperty ol.control.MousePositionOptions.undefinedHTML string|undefined
 
 @exportObjectLiteral ol.control.ZoomOptions
 @exportObjectLiteralProperty ol.control.ZoomOptions.delta number|undefined

src/ol/control/mousepositioncontrol.js

@@ -3,6 +3,7 @@
 
 goog.provide('ol.control.MousePosition');
 
+goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.style');
@@ -48,8 +49,20 @@ ol.control.MousePosition = function(mousePositionOptions) {
    * @private
    * @type {string}
    */
-  this.undefinedHtml_ = goog.isDef(mousePositionOptions.undefinedHtml) ?
+  this.undefinedHTML_ = goog.isDef(mousePositionOptions.undefinedHTML) ?
-      mousePositionOptions.undefinedHtml : '';
+      mousePositionOptions.undefinedHTML : '';
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.renderedHTML_ = element.innerHTML;
+
+  /**
+   * @private
+   * @type {ol.Projection}
+   */
+  this.mapProjection_ = null;
 
   /**
    * @private
@@ -59,42 +72,38 @@ ol.control.MousePosition = function(mousePositionOptions) {
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {ol.Projection}
    */
-  this.mapListenerKeys_ = null;
+  this.renderedProjection_ = null;
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {ol.Pixel}
    */
-  this.viewListenerKeys_ = null;
+  this.lastMouseMovePixel_ = null;
+
+  /**
+   * @private
+   * @type {Array.<?number>}
+   */
+  this.listenerKeys_ = null;
 
-  this.handleViewProjectionChanged_();
 };
 goog.inherits(ol.control.MousePosition, ol.control.Control);
 
 
 /**
- * @private
+ * @param {ol.MapEvent} mapEvent Map event.
+ * @protected
  */
-ol.control.MousePosition.prototype.handleMapViewChanged_ = function() {
+ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) {
-  var map = this.getMap();
+  var frameState = mapEvent.frameState;
-  goog.asserts.assert(!goog.isNull(map));
+  if (goog.isNull(frameState)) {
-  if (!goog.isNull(this.viewListenerKeys_)) {
+    this.mapProjection_ = null;
-    goog.array.forEach(this.viewListenerKeys_, goog.events.unlistenByKey);
+  } else {
-    this.viewListenerKeys_ = null;
+    this.mapProjection_ = frameState.view2DState.projection;
-  }
-  var view = map.getView();
-  if (goog.isDefAndNotNull(view)) {
-    // FIXME works for View2D only
-    goog.asserts.assert(view instanceof ol.View2D);
-    this.viewListenerKeys_ = [
-      goog.events.listen(
-          view, ol.Object.getChangedEventType(ol.View2DProperty.ROTATION),
-          this.handleViewProjectionChanged_, false, this)
-    ];
-    this.handleViewProjectionChanged_();
   }
+  this.updateHTML_(this.lastMouseMovePixel_);
 };
 
 
@@ -107,19 +116,8 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
   var eventPosition = goog.style.getRelativePosition(
       browserEvent, map.getViewport());
   var pixel = new ol.Pixel(eventPosition.x, eventPosition.y);
-  var coordinate = map.getCoordinateFromPixel(pixel);
+  this.updateHTML_(pixel);
-  var html;
+  this.lastMouseMovePixel_ = pixel;
-  if (!goog.isNull(coordinate)) {
-    coordinate = this.transform_(coordinate);
-    if (goog.isDef(this.coordinateFormat_)) {
-      html = this.coordinateFormat_(coordinate);
-    } else {
-      html = coordinate.toString();
-    }
-  } else {
-    html = this.undefinedHtml_;
-  }
-  this.element.innerHTML = html;
 };
 
 
@@ -128,18 +126,8 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
  * @protected
  */
 ol.control.MousePosition.prototype.handleMouseOut = function(browserEvent) {
-  this.element.innerHTML = this.undefinedHtml_;
+  this.updateHTML_(null);
-};
+  this.lastMouseMovePixel_ = null;
-
-
-/**
- * @private
- */
-ol.control.MousePosition.prototype.handleViewProjectionChanged_ = function() {
-  this.updateTransform_();
-  // FIXME should we instead re-calculate using the last known
-  // mouse position?
-  this.element.innerHTML = this.undefinedHtml_;
 };
 
 
@@ -147,44 +135,54 @@ ol.control.MousePosition.prototype.handleViewProjectionChanged_ = function() {
  * @inheritDoc
  */
 ol.control.MousePosition.prototype.setMap = function(map) {
-  if (!goog.isNull(this.mapListenerKeys_)) {
+  if (!goog.isNull(this.listenerKeys_)) {
-    goog.array.forEach(this.mapListenerKeys_, goog.events.unlistenByKey);
+    goog.array.forEach(this.listenerKeys_, goog.events.unlistenByKey);
-    this.mapListenerKeys_ = null;
+    this.listenerKeys_ = null;
   }
   goog.base(this, 'setMap', map);
   if (!goog.isNull(map)) {
     var viewport = map.getViewport();
-    this.listenerKeys = [
+    this.listenerKeys_ = [
       goog.events.listen(viewport, goog.events.EventType.MOUSEMOVE,
           this.handleMouseMove, false, this),
       goog.events.listen(viewport, goog.events.EventType.MOUSEOUT,
           this.handleMouseOut, false, this),
-      goog.events.listen(map,
+      goog.events.listen(map, ol.MapEventType.POSTRENDER,
-          ol.Object.getChangedEventType(ol.MapProperty.VIEW),
+          this.handleMapPostrender, false, this)
-          this.handleMapViewChanged_, false, this)
     ];
-    this.updateTransform_();
   }
 };
 
 
 /**
+ * @param {?ol.Pixel} pixel Pixel.
  * @private
  */
-ol.control.MousePosition.prototype.updateTransform_ = function() {
+ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
-  var map, view;
+  var html = this.undefinedHTML_;
-  if (!goog.isNull(map = this.getMap()) &&
+  if (!goog.isNull(pixel)) {
-      !goog.isNull(view = map.getView())) {
+    if (this.renderedProjection_ != this.mapProjection_) {
-    // FIXME works for View2D only
+      if (goog.isDef(this.projection_)) {
-    goog.asserts.assert(view instanceof ol.View2D);
+        this.transform_ = ol.Projection.getTransform(
-    var viewProjection = view.getProjection();
+            this.mapProjection_, this.projection_);
-    if (!goog.isDef(viewProjection) || !goog.isDef(this.projection_)) {
+      } else {
-      this.transform_ = ol.Projection.identityTransform;
+        this.transform_ = ol.Projection.identityTransform;
-    } else {
+      }
-      this.transform_ =
+      this.renderedProjection_ = this.mapProjection_;
-          ol.Projection.getTransform(viewProjection, this.projection_);
     }
-  } else {
+    var map = this.getMap();
-    this.transform_ = ol.Projection.identityTransform;
+    var coordinate = map.getCoordinateFromPixel(pixel);
+    if (!goog.isNull(coordinate)) {
+      coordinate = this.transform_(coordinate);
+      if (goog.isDef(this.coordinateFormat_)) {
+        html = this.coordinateFormat_(coordinate);
+      } else {
+        html = coordinate.toString();
+      }
+    }
+  }
+  if (!goog.isDef(this.renderedHTML_) || html != this.renderedHTML_) {
+    this.element.innerHTML = html;
+    this.renderedHTML_ = html;
   }
 };