Merge pull request #800 from fredj/control_object

Make ol.control.Control extends ol.Object

examples/mouse-position.html

@@ -30,11 +30,6 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <select id="projection">
-            <option value="EPSG:4326">EPSG:4326</option>
-            <option value="EPSG:3857">EPSG:3857</option>
-          </select>
-          <div style="display: inline-block;" id="mouse-position"></div>
         </div>
       </div>
 
@@ -48,7 +43,23 @@
           </div>
           <div id="tags">mouse-position, openstreetmap</div>
         </div>
+        <div class="span8 pull-right">
+          <div id="mouse-position">&nbsp;</div>
+        </div>
+      </div>
 
+      <div class="row-fluid">
+        <div class="span8">
+          <form>
+            <label>Projection </label>
+            <select id="projection">
+              <option value="EPSG:4326">EPSG:4326</option>
+              <option value="EPSG:3857">EPSG:3857</option>
+            </select>
+            <label>Precision </label>
+            <input id="precision" type="number" min="0" max="12" value="4"/>
+          </form>
+        </div>
       </div>
 
     </div>

examples/mouse-position.js

@@ -4,10 +4,12 @@ goog.require('ol.View2D');
 goog.require('ol.control.MousePosition');
 goog.require('ol.control.defaults');
 goog.require('ol.coordinate');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
-var control = new ol.control.MousePosition({
+var mousePositionControl = new ol.control.MousePosition({
   coordinateFormat: ol.coordinate.createStringXY(4),
   projection: 'EPSG:4326',
   // comment the following two lines to have the mouse position
@@ -18,7 +20,7 @@ var control = new ol.control.MousePosition({
 });
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [control]),
+  controls: ol.control.defaults({}, [mousePositionControl]),
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.OSM()
@@ -32,6 +34,13 @@ var map = new ol.Map({
   })
 });
 
-document.getElementById('projection').addEventListener('change', function() {
+var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
-  control.setProjection(this.value);
+projectionSelect.on('change:value', function() {
-}, false);
+  mousePositionControl.setProjection(ol.proj.get(projectionSelect.getValue()));
+});
+
+var precisionInput = new ol.dom.Input(document.getElementById('precision'));
+precisionInput.on('change:value', function() {
+  var format = ol.coordinate.createStringXY(precisionInput.getValue());
+  mousePositionControl.setCoordinateFormat(format);
+});

examples/scale-line.html

@@ -30,6 +30,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <select id="units">
+            <option value="degrees">degrees</option>
+            <option value="imperial">imperial</option>
+            <option value="metric">metric</option>
+          </select>
         </div>
       </div>
 

examples/scale-line.js

@@ -2,17 +2,17 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.control.ScaleLine');
-goog.require('ol.control.ScaleLineUnits');
 goog.require('ol.control.defaults');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
 
+var scaleLineControl = new ol.control.ScaleLine();
+
 var map = new ol.Map({
   controls: ol.control.defaults({}, [
-    new ol.control.ScaleLine({
+    scaleLineControl
-      units: ol.control.ScaleLineUnits.IMPERIAL
-    })
   ]),
   layers: [
     new ol.layer.TileLayer({
@@ -26,3 +26,7 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+
+var unitsSelect = new ol.dom.Input(document.getElementById('units'));
+unitsSelect.bindTo('value', scaleLineControl, 'units');

src/ol/control/control.js

@@ -1,10 +1,10 @@
 goog.provide('ol.control.Control');
 
-goog.require('goog.Disposable');
 goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('ol.MapEventType');
+goog.require('ol.Object');
 
 
 
@@ -13,7 +13,7 @@ goog.require('ol.MapEventType');
  * (buttons) or to show annotations (status bars).
  *
  * @constructor
- * @extends {goog.Disposable}
+ * @extends {ol.Object}
  * @implements {oli.control.Control}
  * @param {ol.control.ControlOptions} options Control options.
  */
@@ -50,7 +50,7 @@ ol.control.Control = function(options) {
   }
 
 };
-goog.inherits(ol.control.Control, goog.Disposable);
+goog.inherits(ol.control.Control, ol.Object);
 
 
 /**

src/ol/control/mousepositioncontrol.exports

@@ -1,4 +1,2 @@
 @exportClass ol.control.MousePosition ol.control.MousePositionOptions
 @exportProperty ol.control.MousePosition.prototype.setMap
-@exportProperty ol.control.MousePosition.prototype.getProjection
-@exportProperty ol.control.MousePosition.prototype.setProjection

src/ol/control/mousepositioncontrol.js

@@ -10,6 +10,7 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.style');
 goog.require('ol.CoordinateFormatType');
+goog.require('ol.Object');
 goog.require('ol.Pixel');
 goog.require('ol.Projection');
 goog.require('ol.TransformFunction');
@@ -17,6 +18,15 @@ goog.require('ol.control.Control');
 goog.require('ol.proj');
 
 
+/**
+ * @enum {string}
+ */
+ol.control.MousePositionProperty = {
+  PROJECTION: 'projection',
+  COORDINATE_FORMAT: 'coordinateFormat'
+};
+
+
 
 /**
  * Create a new control to show the position of the mouse in the map's
@@ -53,17 +63,16 @@ ol.control.MousePosition = function(opt_options) {
     target: options.target
   });
 
-  /**
+  goog.events.listen(this,
-   * @private
+      ol.Object.getChangeEventType(ol.control.MousePositionProperty.PROJECTION),
-   * @type {ol.Projection}
+      this.handleProjectionChanged_, false, this);
-   */
-  this.projection_ = ol.proj.get(options.projection);
 
-  /**
+  if (goog.isDef(options.coordinateFormat)) {
-   * @private
+    this.setCoordinateFormat(options.coordinateFormat);
-   * @type {ol.CoordinateFormatType|undefined}
+  }
-   */
+  if (goog.isDef(options.projection)) {
-  this.coordinateFormat_ = options.coordinateFormat;
+    this.setProjection(ol.proj.get(options.projection));
+  }
 
   /**
    * @private
@@ -118,11 +127,37 @@ ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) {
 
 
 /**
- * @return {ol.Projection} projection.
+ * @private
+ */
+ol.control.MousePosition.prototype.handleProjectionChanged_ = function() {
+  this.transform_ = null;
+};
+
+
+/**
+ * @return {ol.CoordinateFormatType|undefined} projection.
+ */
+ol.control.MousePosition.prototype.getCoordinateFormat = function() {
+  return /** @type {ol.CoordinateFormatType|undefined} */ (
+      this.get(ol.control.MousePositionProperty.COORDINATE_FORMAT));
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'getCoordinateFormat',
+    ol.control.MousePosition.prototype.getCoordinateFormat);
+
+
+/**
+ * @return {ol.Projection|undefined} projection.
  */
 ol.control.MousePosition.prototype.getProjection = function() {
-  return this.projection_;
+  return /** @type {ol.Projection|undefined} */ (
+      this.get(ol.control.MousePositionProperty.PROJECTION));
 };
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'getProjection',
+    ol.control.MousePosition.prototype.getProjection);
 
 
 /**
@@ -166,12 +201,27 @@ ol.control.MousePosition.prototype.setMap = function(map) {
 
 
 /**
- * @param {ol.ProjectionLike} projection Projection.
+ * @param {ol.CoordinateFormatType} format Coordinate format.
+ */
+ol.control.MousePosition.prototype.setCoordinateFormat = function(format) {
+  this.set(ol.control.MousePositionProperty.COORDINATE_FORMAT, format);
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'setCoordinateFormat',
+    ol.control.MousePosition.prototype.setCoordinateFormat);
+
+
+/**
+ * @param {ol.Projection} projection Projection.
  */
 ol.control.MousePosition.prototype.setProjection = function(projection) {
-  this.projection_ = ol.proj.get(projection);
+  this.set(ol.control.MousePositionProperty.PROJECTION, projection);
-  this.transform_ = null;
 };
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'setProjection',
+    ol.control.MousePosition.prototype.setProjection);
 
 
 /**
@@ -182,9 +232,10 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
   var html = this.undefinedHTML_;
   if (!goog.isNull(pixel)) {
     if (goog.isNull(this.transform_)) {
-      if (!goog.isNull(this.projection_)) {
+      var projection = this.getProjection();
+      if (goog.isDef(projection)) {
         this.transform_ = ol.proj.getTransformFromProjections(
-            this.mapProjection_, this.projection_);
+            this.mapProjection_, projection);
       } else {
         this.transform_ = ol.proj.identityTransform;
       }
@@ -193,8 +244,9 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
     var coordinate = map.getCoordinateFromPixel(pixel);
     if (!goog.isNull(coordinate)) {
       this.transform_(coordinate, coordinate);
-      if (goog.isDef(this.coordinateFormat_)) {
+      var coordinateFormat = this.getCoordinateFormat();
-        html = this.coordinateFormat_(coordinate);
+      if (goog.isDef(coordinateFormat)) {
+        html = coordinateFormat(coordinate);
       } else {
         html = coordinate.toString();
       }

src/ol/control/scalelinecontrol.js

@@ -1,21 +1,32 @@
 goog.provide('ol.control.ScaleLine');
+goog.provide('ol.control.ScaleLineProperty');
 goog.provide('ol.control.ScaleLineUnits');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.events');
 goog.require('goog.math');
 goog.require('goog.style');
-goog.require('ol.FrameState');
+goog.require('ol.Object');
 goog.require('ol.ProjectionUnits');
 goog.require('ol.TransformFunction');
+goog.require('ol.View2DState');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.proj');
 goog.require('ol.sphere.NORMAL');
 
 
+/**
+ * @enum {string}
+ */
+ol.control.ScaleLineProperty = {
+  UNITS: 'units'
+};
+
+
 /**
  * @enum {string}
  */
@@ -71,16 +82,15 @@ ol.control.ScaleLine = function(opt_options) {
 
   /**
    * @private
-   * @type {number}
+   * @type {?ol.View2DState}
    */
-  this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64;
+  this.view2DState_ = null;
 
   /**
    * @private
-   * @type {ol.control.ScaleLineUnits}
+   * @type {number}
    */
-  this.units_ = goog.isDef(options.units) ?
+  this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64;
-      options.units : ol.control.ScaleLineUnits.METRIC;
 
   /**
    * @private
@@ -112,6 +122,12 @@ ol.control.ScaleLine = function(opt_options) {
     target: options.target
   });
 
+  goog.events.listen(
+      this, ol.Object.getChangeEventType(ol.control.ScaleLineProperty.UNITS),
+      this.handleUnitsChanged_, false, this);
+
+  this.setUnits(options.units || ol.control.ScaleLineUnits.METRIC);
+
 };
 goog.inherits(ol.control.ScaleLine, ol.control.Control);
 
@@ -123,21 +139,60 @@ goog.inherits(ol.control.ScaleLine, ol.control.Control);
 ol.control.ScaleLine.LEADING_DIGITS = [1, 2, 5];
 
 
+/**
+ * @return {ol.control.ScaleLineUnits|undefined} units.
+ */
+ol.control.ScaleLine.prototype.getUnits = function() {
+  return /** @type {ol.control.ScaleLineUnits|undefined} */ (
+      this.get(ol.control.ScaleLineProperty.UNITS));
+};
+goog.exportProperty(
+    ol.control.ScaleLine.prototype,
+    'getUnits',
+    ol.control.ScaleLine.prototype.getUnits);
+
+
 /**
  * @inheritDoc
  */
 ol.control.ScaleLine.prototype.handleMapPostrender = function(mapEvent) {
-  this.updateElement_(mapEvent.frameState);
+  var frameState = mapEvent.frameState;
+  if (goog.isNull(frameState)) {
+    this.view2DState_ = null;
+  } else {
+    this.view2DState_ = frameState.view2DState;
+  }
+  this.updateElement_();
 };
 
 
 /**
- * @param {?ol.FrameState} frameState Frame state.
  * @private
  */
-ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
+ol.control.ScaleLine.prototype.handleUnitsChanged_ = function() {
+  this.updateElement_();
+};
 
-  if (goog.isNull(frameState)) {
+
+/**
+ * @param {ol.control.ScaleLineUnits} units Units.
+ */
+ol.control.ScaleLine.prototype.setUnits = function(units) {
+  this.set(ol.control.ScaleLineProperty.UNITS, units);
+};
+goog.exportProperty(
+    ol.control.ScaleLine.prototype,
+    'setUnits',
+    ol.control.ScaleLine.prototype.setUnits);
+
+
+/**
+ * @private
+ */
+ol.control.ScaleLine.prototype.updateElement_ = function() {
+  var view2DState = this.view2DState_;
+
+  if (goog.isNull(view2DState)) {
     if (this.renderedVisible_) {
       goog.style.showElement(this.element_, false);
       this.renderedVisible_ = false;
@@ -145,7 +200,6 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var view2DState = frameState.view2DState;
   var center = view2DState.center;
   var projection = view2DState.projection;
   var pointResolution =
@@ -153,9 +207,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
   var projectionUnits = projection.getUnits();
 
   var cosLatitude;
+  var units = this.getUnits();
   if (projectionUnits == ol.ProjectionUnits.DEGREES &&
-      (this.units_ == ol.control.ScaleLineUnits.METRIC ||
+      (units == ol.control.ScaleLineUnits.METRIC ||
-       this.units_ == ol.control.ScaleLineUnits.IMPERIAL)) {
+       units == ol.control.ScaleLineUnits.IMPERIAL)) {
 
     // Convert pointResolution from degrees to meters
     this.toEPSG4326_ = null;
@@ -165,7 +220,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
 
   } else if ((projectionUnits == ol.ProjectionUnits.FEET ||
       projectionUnits == ol.ProjectionUnits.METERS) &&
-      this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+      units == ol.control.ScaleLineUnits.DEGREES) {
 
     // Convert pointResolution from meters or feet to degrees
     if (goog.isNull(this.toEPSG4326_)) {
@@ -181,21 +236,19 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     projectionUnits = ol.ProjectionUnits.DEGREES;
 
   } else {
-
     this.toEPSG4326_ = null;
-
   }
 
   goog.asserts.assert(
-      ((this.units_ == ol.control.ScaleLineUnits.METRIC ||
+      ((units == ol.control.ScaleLineUnits.METRIC ||
-        this.units_ == ol.control.ScaleLineUnits.IMPERIAL) &&
+        units == ol.control.ScaleLineUnits.IMPERIAL) &&
        projectionUnits == ol.ProjectionUnits.METERS) ||
-      (this.units_ == ol.control.ScaleLineUnits.DEGREES &&
+      (units == ol.control.ScaleLineUnits.DEGREES &&
        projectionUnits == ol.ProjectionUnits.DEGREES));
 
   var nominalCount = this.minWidth_ * pointResolution;
   var suffix = '';
-  if (this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+  if (units == ol.control.ScaleLineUnits.DEGREES) {
     if (nominalCount < 1 / 60) {
       suffix = '\u2033'; // seconds
       pointResolution *= 3600;
@@ -205,7 +258,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     } else {
       suffix = '\u00b0'; // degrees
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.IMPERIAL) {
+  } else if (units == ol.control.ScaleLineUnits.IMPERIAL) {
     if (nominalCount < 0.9144) {
       suffix = 'in';
       pointResolution /= 0.0254;
@@ -216,10 +269,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
       suffix = 'mi';
       pointResolution /= 1609.344;
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.NAUTICAL) {
+  } else if (units == ol.control.ScaleLineUnits.NAUTICAL) {
     pointResolution /= 1852;
     suffix = 'nm';
-  } else if (this.units_ == ol.control.ScaleLineUnits.METRIC) {
+  } else if (units == ol.control.ScaleLineUnits.METRIC) {
     if (nominalCount < 1) {
       suffix = 'mm';
       pointResolution *= 1000;
@@ -229,7 +282,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
       suffix = 'km';
       pointResolution /= 1000;
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.US) {
+  } else if (units == ol.control.ScaleLineUnits.US) {
     if (nominalCount < 0.9144) {
       suffix = 'in';
       pointResolution *= 39.37;