Refactor mouse position control to use postrender event

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,52 +49,51 @@ 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 {ol.TransformFunction}
+   * @type {ol.TransformFunction|undefined}
    */
-  this.transform_ = ol.Projection.identityTransform;
+  this.transform_ = undefined;
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {ol.Projection}
    */
-  this.mapListenerKeys_ = null;
+  this.transformProjection_ = null;
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {Array.<?number>}
    */
-  this.viewListenerKeys_ = null;
+  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.transform_ = undefined;
-    goog.array.forEach(this.viewListenerKeys_, goog.events.unlistenByKey);
+    this.transformProjection_ = null;
-    this.viewListenerKeys_ = null;
+  } else {
-  }
+    var projection = frameState.view2DState.projection;
-  var view = map.getView();
+    if (projection != this.transformProjection_) {
-  if (goog.isDefAndNotNull(view)) {
+      if (goog.isDef(this.projection_)) {
-    // FIXME works for View2D only
+        this.transform_ = ol.Projection.getTransform(
-    goog.asserts.assert(view instanceof ol.View2D);
+            projection, this.projection_);
-    this.viewListenerKeys_ = [
+      } else {
-      goog.events.listen(
+        this.transform_ = ol.Projection.identityTransform;
-          view, ol.Object.getChangedEventType(ol.View2DProperty.ROTATION),
+      }
-          this.handleViewProjectionChanged_, false, this)
+      this.transformProjection_ = projection;
-    ];
+    }
-    this.handleViewProjectionChanged_();
   }
 };
 
@@ -103,21 +103,21 @@ ol.control.MousePosition.prototype.handleMapViewChanged_ = function() {
  * @protected
  */
 ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
-  var map = this.getMap();
+  var html = this.undefinedHTML_;
-  var eventPosition = goog.style.getRelativePosition(
+  if (goog.isDef(this.transform_)) {
-      browserEvent, map.getViewport());
+    var map = this.getMap();
-  var pixel = new ol.Pixel(eventPosition.x, eventPosition.y);
+    var eventPosition = goog.style.getRelativePosition(
-  var coordinate = map.getCoordinateFromPixel(pixel);
+        browserEvent, map.getViewport());
-  var html;
+    var pixel = new ol.Pixel(eventPosition.x, eventPosition.y);
-  if (!goog.isNull(coordinate)) {
+    var coordinate = map.getCoordinateFromPixel(pixel);
-    coordinate = this.transform_(coordinate);
+    if (!goog.isNull(coordinate)) {
-    if (goog.isDef(this.coordinateFormat_)) {
+      coordinate = this.transform_(coordinate);
-      html = this.coordinateFormat_(coordinate);
+      if (goog.isDef(this.coordinateFormat_)) {
-    } else {
+        html = this.coordinateFormat_(coordinate);
-      html = coordinate.toString();
+      } else {
+        html = coordinate.toString();
+      }
     }
-  } else {
-    html = this.undefinedHtml_;
   }
   this.element.innerHTML = html;
 };
@@ -128,18 +128,7 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
  * @protected
  */
 ol.control.MousePosition.prototype.handleMouseOut = function(browserEvent) {
-  this.element.innerHTML = this.undefinedHtml_;
+  this.element.innerHTML = this.undefinedHTML_;
-};
-
-
-/**
- * @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 +136,20 @@ 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_();
-  }
-};
-
-
-/**
- * @private
- */
-ol.control.MousePosition.prototype.updateTransform_ = function() {
-  var map, view;
-  if (!goog.isNull(map = this.getMap()) &&
-      !goog.isNull(view = map.getView())) {
-    // FIXME works for View2D only
-    goog.asserts.assert(view instanceof ol.View2D);
-    var viewProjection = view.getProjection();
-    if (!goog.isDef(viewProjection) || !goog.isDef(this.projection_)) {
-      this.transform_ = ol.Projection.identityTransform;
-    } else {
-      this.transform_ =
-          ol.Projection.getTransform(viewProjection, this.projection_);
-    }
-  } else {
-    this.transform_ = ol.Projection.identityTransform;
   }
 };