make ol.Map inherit from goog.EventTarget, and add an ol.handler.Drag

src/ol.js

@@ -5,9 +5,9 @@ goog.require('ol.bounds');
 goog.require('ol.control.Attribution');
 goog.require('ol.control.Navigation');
 goog.require('ol.control.Zoom');
-goog.require('ol.event.Drag');
 goog.require('ol.event.Events');
 goog.require('ol.event.Scroll');
+goog.require('ol.handler.Drag');
 goog.require("ol.map");
 goog.require("ol.loc");
 goog.require("ol.feature");

src/ol/Map.js

@@ -3,25 +3,28 @@ goog.provide('ol.Map');
 goog.require('ol.Loc');
 goog.require('ol.Bounds');
 goog.require('ol.Projection');
-goog.require('ol.event');
-goog.require('ol.event.Events');
 goog.require('ol.control.Control');
 goog.require('ol.renderer.MapRenderer');
+goog.require('ol.handler.Drag');
 
 goog.require('goog.dom');
 goog.require('goog.math');
 goog.require('goog.asserts');
+goog.require('goog.events.EventTarget');
 
 
 /**
  * @export
  * @constructor
+ * @extends {goog.events.EventTarget}
  *
  * @event layeradd Fires when a layer is added to the map. The event object
  *     contains a 'layer' property referencing the added layer.
  */
 ol.Map = function() {
 
+    goog.base(this);
+
     /**
      * @private
      * @type {ol.Projection}
@@ -100,21 +103,20 @@ ol.Map = function() {
      */
     this.staticOverlay_ = null;
     
-    /**
-     * @private
-     * @type {ol.event.Events}
-     */
-    this.events_ = new ol.event.Events(
-        this, undefined, false, ['drag', 'scroll']
-    );
-    
     /**
      * @private
      * @type {Element}
      */
     this.container_ = null;
 
+    /**
+     * @private
+     * @type {ol.handler.Drag}
+     */
+    this.dragHandler_ = null;
+
 };
+goog.inherits(ol.Map, goog.events.EventTarget);
 
 /**
   @const
@@ -140,7 +142,7 @@ ol.Map.DEFAULT_TILE_SIZE = 256;
   @const
   @type {Array.<string>}
  */
-ol.Map.DEFAULT_CONTROLS = ["attribution", "navigation", "zoom"];
+ol.Map.DEFAULT_CONTROLS = ["navigation"];
 
 /**
  * @return {ol.Loc} Map center in map projection.
@@ -394,7 +396,7 @@ ol.Map.prototype.addLayers = function(layers) {
     for (var i=0, ii=layers.length; i<ii; ++i) {
         layer = layers[i];
         this.layers_.push(layer);
-        this.events_.triggerEvent('layeradd', {'layer': layer});
+        this.dispatchEvent({type: 'layeradd', 'layer': layer});
     }
     this.conditionallyRender();
 };
@@ -470,11 +472,12 @@ ol.Map.prototype.setViewport = function() {
             'class': 'ol-viewport',
             'style': 'width:100%;height:100%;top:0;left:0;position:relative;overflow:hidden'
         }));
+        this.dragHandler_ = new ol.handler.Drag(this, this.viewport_);
     }
-    this.events_.setElement(this.viewport_);
     goog.dom.appendChild(this.container_, this.viewport_);
 };
 
+
 ol.Map.prototype.createRenderer = function() {
     var Renderer = ol.renderer.MapRenderer.pickRendererType(
         ol.Map.preferredRenderers);
@@ -495,13 +498,6 @@ ol.Map.prototype.createRenderer = function() {
     } 
 };
 
-/**
- * @return {ol.event.Events} the events instance for this map
- */
-ol.Map.prototype.getEvents = function() {
-    return this.events_;
-};
-
 /**
  * @param {number} dx pixels to move in x direction
  * @param {number} dy pixels to move in x direction
@@ -541,13 +537,15 @@ ol.Map.prototype.getStaticOverlay = function() {
 };
 
 /**
- * @export
+ * @inheritDoc
  */
-ol.Map.prototype.destroy = function() {
+ol.Map.prototype.disposeInternal = function() {
+    goog.base(this, 'disposeInternal');
     //remove layers, etc.
     for (var key in this) {
         delete this[key];
     }
+    this.dragHandler_.dispose();
 };
 
 

src/ol/control/Navigation.js

@@ -27,9 +27,9 @@ goog.inherits(ol.control.Navigation, ol.control.Control);
 ol.control.Navigation.prototype.activate = function() {
     var active = goog.base(this, 'activate');
     if (active) {
-        var events = this.map_.getEvents();
+        var map = this.map_;
-        events.register("drag", this.moveMap, this);
+        goog.events.listen(map, 'drag', this.moveMap, false, this);
-        events.register("scroll", this.zoomMap, this);
+        goog.events.listen(map, 'scroll', this.zoomMap, false, this);
     }
     return active;
 };
@@ -38,9 +38,9 @@ ol.control.Navigation.prototype.activate = function() {
 ol.control.Navigation.prototype.deactivate = function() {
     var inactive = goog.base(this, 'deactivate');
     if (inactive) {
-        var events = this.map_.getEvents();
+        var map = this.map_;
-        events.unregister("drag", this.moveMap, this);
+        goog.events.unlisten(map, 'drag', this.moveMap, false, this);
-        events.unregister("scroll", this.zoomMap, this);
+        goog.events.unlisten(map, 'scroll', this.zoomMap, false, this);
     }
     return inactive;
 };
@@ -68,4 +68,4 @@ ol.control.Navigation.prototype.zoomMap = function(evt) {
     return false;
 };
 
-ol.control.addControl('navigation', ol.control.Navigation);
+ol.control.addControl('navigation', ol.control.Navigation);

src/ol/event/Drag.js

@@ -1,83 +0,0 @@
-goog.provide('ol.event.Drag');
-
-goog.require('ol.event');
-goog.require('ol.event.ISequence');
-
-goog.require('goog.functions');
-goog.require('goog.fx.Dragger');
-goog.require('goog.fx.DragEvent');
-goog.require('goog.fx.Dragger.EventType');
-
-
-/**
- * Event sequence that provides a 'dragstart', 'drag' and 'dragend' events.
- * Event objects of the 'drag' events have 'deltaX' and 'deltaY' values with
- * the relative pixel movement since the previous 'drag' or 'dragstart' event.
- *
- * @constructor
- * @param {ol.event.Events} target The Events instance that handles events.
- * @implements {ol.event.ISequence}
- * @export
- */
-ol.event.Drag = function(target) {    
-    var previousX = 0, previousY = 0,
-        element = target.getElement(),
-        dragger = new goog.fx.Dragger(element);
-
-    /**
-     * @private
-     * @type {goog.fx.Dragger}
-     */
-    this.dragger_ = dragger;
-    
-    // We want to swallow the click event that gets fired after dragging.
-    var newSequence;
-    function unregisterClickStopper() {
-        target.unregister('click', goog.functions.FALSE, undefined, true);
-    }
-    
-    dragger.defaultAction = function(x, y) {};                
-    dragger.addEventListener(goog.fx.Dragger.EventType.START, function(evt) {
-        evt.target = element;
-        evt.type = 'dragstart';
-        previousX = evt.clientX;
-        previousY = evt.clientY;
-        newSequence = true;
-        target.triggerEvent(evt.type, evt);
-    });
-    dragger.addEventListener(goog.fx.Dragger.EventType.DRAG, function(evt) {
-        evt.target = element;
-        evt.deltaX = evt.clientX - previousX;
-        evt.deltaY = evt.clientY - previousY;
-        previousX = evt.clientX;
-        previousY = evt.clientY;
-        if (newSequence) {
-            // Once we are in the drag sequence, we know that we need to
-            // get rid of the click event that gets fired when we are done
-            // dragging.
-            target.register('click', goog.functions.FALSE, undefined, true);
-            newSequence = false;
-        }
-        target.triggerEvent(evt.type, evt);
-    });
-    dragger.addEventListener(goog.fx.Dragger.EventType.END, function(evt) {
-        evt.target = element;
-        evt.type = 'dragend';
-        target.triggerEvent(evt.type, evt);
-        // Unregister the click stopper in the next cycle
-        window.setTimeout(unregisterClickStopper, 0);
-    });
-    // Don't swallow the click event if our sequence cancels early.
-    dragger.addEventListener(
-        goog.fx.Dragger.EventType.EARLY_CANCEL, unregisterClickStopper
-    );  
-};
-
-/** @inheritDoc */
-ol.event.Drag.prototype.destroy = function() {
-    this.dragger_.dispose();
-    delete this.dragger_;
-};
-
-
-ol.event.addSequenceProvider('drag', ol.event.Drag);

src/ol/handler/Drag.js

@@ -0,0 +1,63 @@
+goog.provide('ol.handler.Drag');
+
+goog.require('goog.fx.Dragger');
+goog.require('goog.events');
+goog.require('goog.Disposable');
+
+/**
+ * @constructor
+ * @extends {goog.Disposable}
+ * @param {ol.Map} map The map instance.
+ * @param {Element} elt The element that will be dragged.
+ */
+ol.handler.Drag = function(map, elt) {
+
+    this.dragger_ = new goog.fx.Dragger(elt);
+    this.dragger_.defaultAction = function() {};
+
+    var prevX = 0, prevY = 0;
+
+    var handleDragStart = function(e) {
+        prevX = e.clientX;
+        prevY = e.clientY;
+        var newE = {
+            type: 'dragstart'
+        };
+        goog.events.dispatchEvent(map, newE);
+    };
+
+    var handleDrag = function(e) {
+        var newE = {
+            type: 'drag',
+            deltaX: e.clientX - prevX,
+            deltaY: e.clientY - prevY
+        };
+        prevX = e.clientX;
+        prevY = e.clientY;
+        goog.events.dispatchEvent(map, newE);
+    };
+
+    var handleDragEnd = function(e) {
+        var newE = {
+            type: 'dragend'
+        };
+        goog.events.dispatchEvent(map, newE);
+    };
+
+    goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.START,
+                       handleDragStart, false, this);
+    goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.DRAG,
+                       handleDrag, false, this);
+    goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.END,
+                       handleDragEnd, false, this);
+};
+goog.inherits(ol.handler.Drag, goog.Disposable);
+
+/**
+ * @inheritDoc
+ */
+ol.handler.Drag.prototype.disposeInternal = function() {
+    goog.base(this, 'disposeInternal');
+    this.dragger_.dispose();
+    delete this.dragger_;
+};