Merge pull request #2027 from tonio/rotate

Add a rotate control

src/ol/control/controldefaults.js

@@ -3,6 +3,7 @@ goog.provide('ol.control');
 goog.require('ol.Collection');
 goog.require('ol.control.Attribution');
 goog.require('ol.control.Logo');
+goog.require('ol.control.Rotate');
 goog.require('ol.control.Zoom');
 
 
@@ -20,25 +21,25 @@ ol.control.defaults = function(opt_options) {
   var zoomControl = goog.isDef(options.zoom) ?
       options.zoom : true;
   if (zoomControl) {
-    var zoomControlOptions = goog.isDef(options.zoomOptions) ?
-        options.zoomOptions : undefined;
-    controls.push(new ol.control.Zoom(zoomControlOptions));
+    controls.push(new ol.control.Zoom(options.zoomOptions));
+  }
+
+  var rotateControl = goog.isDef(options.rotate) ?
+      options.rotate : true;
+  if (rotateControl) {
+    controls.push(new ol.control.Rotate(options.rotateOptions));
   }
 
   var attributionControl = goog.isDef(options.attribution) ?
       options.attribution : true;
   if (attributionControl) {
-    var attributionControlOptions = goog.isDef(options.attributionOptions) ?
-        options.attributionOptions : undefined;
-    controls.push(new ol.control.Attribution(attributionControlOptions));
+    controls.push(new ol.control.Attribution(options.attributionOptions));
   }
 
   var logoControl = goog.isDef(options.logo) ?
       options.logo : true;
   if (logoControl) {
-    var logoControlOptions = goog.isDef(options.logoOptions) ?
-        options.logoOptions : undefined;
-    controls.push(new ol.control.Logo(logoControlOptions));
+    controls.push(new ol.control.Logo(options.logoOptions));
   }
 
   return controls;

src/ol/control/fullscreencontrol.js

@@ -64,10 +64,10 @@ ol.control.FullScreen = function(opt_options) {
       googx.dom.fullscreen.EventType.CHANGE,
       this.handleFullScreenChange_, false, this);
 
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
-        (!googx.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '')
-  }, button);
+  var cssClasses = this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE +
+      ' ' + ol.css.CLASS_CONTROL +
+      (!googx.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '');
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
 
   goog.base(this, {
     element: element,

src/ol/control/rotatecontrol.js

@@ -0,0 +1,139 @@
+// FIXME works for View2D only
+
+goog.provide('ol.control.Rotate');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.View2D');
+goog.require('ol.animation');
+goog.require('ol.control.Control');
+goog.require('ol.css');
+goog.require('ol.easing');
+goog.require('ol.pointer.PointerEventHandler');
+
+
+
+/**
+ * Create a new control with a button, to reset rotation to 0.
+ * To style this control use css selector `.ol-rotate`.
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {olx.control.RotateOptions=} opt_options Rotate options.
+ * @todo api
+ */
+ol.control.Rotate = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  var className = goog.isDef(options.className) ?
+      options.className : 'ol-rotate';
+
+  var label = goog.dom.createDom(goog.dom.TagName.SPAN,
+      { 'class': 'ol-compass' },
+      goog.isDef(options.label) ? options.label : '\u21E7');
+  this.label_ = label;
+
+  var tipLabel = goog.isDef(options.tipLabel) ?
+      options.tipLabel : 'Reset rotation';
+
+  var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip'
+  }, tipLabel);
+  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': className + '-reset ol-has-tooltip',
+    'name' : 'ResetRotation',
+    'type' : 'button'
+  }, tip, label);
+
+  var handler = new ol.pointer.PointerEventHandler(button);
+  this.registerDisposable(handler);
+  goog.events.listen(handler, ol.pointer.EventType.POINTERUP,
+      ol.control.Rotate.prototype.resetNorth_, false, this);
+
+  goog.events.listen(button, [
+    goog.events.EventType.MOUSEOUT,
+    goog.events.EventType.FOCUSOUT
+  ], function() {
+    this.blur();
+  }, false);
+
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+
+  goog.base(this, {
+    element: element,
+    target: options.target
+  });
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 250;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.autoHide_ = goog.isDef(options.autoHide) ? options.autoHide : true;
+
+  element.style.opacity = (this.autoHide_) ? 0 : 1;
+
+};
+goog.inherits(ol.control.Rotate, ol.control.Control);
+
+
+/**
+ * @param {ol.pointer.PointerEvent} pointerEvent The pointer event to handle.
+ * @private
+ */
+ol.control.Rotate.prototype.resetNorth_ = function(pointerEvent) {
+  pointerEvent.browserEvent.preventDefault();
+  // prevent the anchor from getting appended to the url
+  var map = this.getMap();
+  // FIXME works for View2D only
+  var view = map.getView();
+  goog.asserts.assert(goog.isDef(view));
+  var view2D = view.getView2D();
+  goog.asserts.assertInstanceof(view2D, ol.View2D);
+  var currentRotation = view2D.getRotation();
+  while (currentRotation < -Math.PI) {
+    currentRotation += 2 * Math.PI;
+  }
+  while (currentRotation > Math.PI) {
+    currentRotation -= 2 * Math.PI;
+  }
+  if (goog.isDef(currentRotation)) {
+    if (this.duration_ > 0) {
+      map.beforeRender(ol.animation.rotate({
+        rotation: currentRotation,
+        duration: this.duration_,
+        easing: ol.easing.easeOut
+      }));
+    }
+    view2D.setRotation(0);
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.Rotate.prototype.handleMapPostrender = function(mapEvent) {
+  var frameState = mapEvent.frameState;
+  if (goog.isNull(frameState)) {
+    return;
+  }
+  var rotation = frameState.view2DState.rotation;
+  var transform = 'rotate(' + rotation * 360 / (Math.PI * 2) + 'deg)';
+  if (this.autoHide_) {
+    this.element.style.opacity = (rotation === 0) ? 0 : 1;
+  }
+  this.label_.style.msTransform = transform;
+  this.label_.style.webkitTransform = transform;
+  this.label_.style.transform = transform;
+};

src/ol/control/zoomcontrol.js

@@ -85,7 +85,8 @@ ol.control.Zoom = function(opt_options) {
     this.blur();
   }, false);
 
-  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
       outElement);
 

src/ol/control/zoomtoextentcontrol.js

@@ -39,14 +39,10 @@ ol.control.ZoomToExtent = function(opt_options) {
   var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
     'role' : 'tooltip'
   }, tipLabel);
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
-  });
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'class': 'ol-has-tooltip'
   });
   goog.dom.appendChild(button, tip);
-  goog.dom.appendChild(element, button);
 
   var buttonHandler = new ol.pointer.PointerEventHandler(button);
   this.registerDisposable(buttonHandler);
@@ -60,6 +56,10 @@ ol.control.ZoomToExtent = function(opt_options) {
     this.blur();
   }, false);
 
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+
   goog.base(this, {
     element: element,
     target: options.target

src/ol/css.js

@@ -17,3 +17,12 @@ ol.css.CLASS_UNSELECTABLE = 'ol-unselectable';
  * @type {string}
  */
 ol.css.CLASS_UNSUPPORTED = 'ol-unsupported';
+
+
+/**
+ * The CSS class for controls.
+ *
+ * @const
+ * @type {string}
+ */
+ol.css.CLASS_CONTROL = 'ol-control';