update Control, Marker, and Popup such that they all have draw(px) and move(px) functions. standardization. update tests.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@255 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control.js

@@ -18,16 +18,29 @@ OpenLayers.Control.prototype = {
     },
 
     /**
+    * @param {OpenLayers.Pixel} px
+    *
     * @returns A reference to the DIV DOMElement containing the control
     * @type DOMElement
     */
-    draw: function () {
+    draw: function (px) {
         if (this.div == null) {
             this.div = OpenLayers.Util.createDiv();
         }
+        this.moveTo(px);        
         return this.div;
     },
 
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    moveTo: function (px) {
+        if ((px != null) && (this.div != null)) {
+            this.div.style.left = px.x + "px";
+            this.div.style.top = px.x + "px";
+        }
+    },
+
     /**
     */
     destroy: function () {

lib/OpenLayers/Control/PanZoom.js

@@ -11,7 +11,10 @@ OpenLayers.Control.PanZoom.prototype =
         OpenLayers.Control.prototype.initialize.apply(this, arguments);
     },
 
-    draw: function() {
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    draw: function(px) {
         // initialize our internal div
         OpenLayers.Control.prototype.draw.apply(this);
 
@@ -19,13 +22,12 @@ OpenLayers.Control.PanZoom.prototype =
         this.buttons = new Array();
 
         var sz = new OpenLayers.Size(18,18);
-        var xy = new OpenLayers.Pixel(4,4);
+        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
-        var centered = new OpenLayers.Pixel(xy.x+sz.w/2, xy.y);
 
         this._addButton("panup", "north-mini.png", centered, sz);
-        xy.y = centered.y+sz.h;
+        px.y = centered.y+sz.h;
-        this._addButton("panleft", "west-mini.png", xy, sz);
+        this._addButton("panleft", "west-mini.png", px, sz);
-        this._addButton("panright", "east-mini.png", xy.add(sz.w, 0), sz);
+        this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
         this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
         this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3), sz);
         centered = centered.add(0, sz.h*4);

lib/OpenLayers/Control/PanZoomBar.js

@@ -14,7 +14,10 @@ OpenLayers.Control.PanZoomBar.prototype =
         OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
     },
 
-    draw: function() {
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    draw: function(px) {
         // initialize our internal div
         OpenLayers.Control.prototype.draw.apply(this);
         this.map.events.register("zoomend", this, this.moveZoomBar);
@@ -23,13 +26,12 @@ OpenLayers.Control.PanZoomBar.prototype =
         this.buttons = new Array();
 
         var sz = new OpenLayers.Size(18,18);
-        var xy = new OpenLayers.Pixel(4,4);
+        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
-        var centered = new OpenLayers.Pixel(xy.x+sz.w/2, xy.y);
 
         this._addButton("panup", "north-mini.png", centered, sz);
-        xy.y = centered.y+sz.h;
+        px.y = centered.y+sz.h;
-        this._addButton("panleft", "west-mini.png", xy, sz);
+        this._addButton("panleft", "west-mini.png", px, sz);
-        this._addButton("panright", "east-mini.png", xy.add(sz.w, 0), sz);
+        this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
         this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
         this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3), sz);
         centered = centered.add(0, sz.h*4);

lib/OpenLayers/Map.js

@@ -88,8 +88,11 @@ OpenLayers.Map.prototype = {
         this.layers = [];
         
         this.controls = [];
-        this.addControl( new OpenLayers.Control.PanZoom() );
+        this.addControl(new OpenLayers.Control.PanZoom(),
-        this.addControl( new OpenLayers.Control.MouseDefaults() );
+                        new OpenLayers.Pixel(4,4) );
+                         
+        this.addControl(new OpenLayers.Control.MouseDefaults(),
+                        null );
 
         this.popups = new Array();
 
@@ -139,11 +142,12 @@ OpenLayers.Map.prototype = {
 
     /**
     * @param {OpenLayers.Control} control
+    * @param {OpenLayers.Pixel} px
     */    
-    addControl: function (control) {
+    addControl: function (control, px) {
         control.map = this;
         this.controls.push(control);
-        var div = control.draw();
+        var div = control.draw(px);
         if (div) {
             div.style.zIndex = this.Z_INDEX_BASE['Control'] +
                                 this.controls.length;

lib/OpenLayers/Marker.js

@@ -42,17 +42,27 @@ OpenLayers.Marker.prototype = {
     },
     
     /** 
-    * @param {OpenLayers.Pixel} pixel
+    * @param {OpenLayers.Pixel} px
     * 
     * @return A new DOM Image with this marker<65>s icon set at the 
     *         location passed-in
     * @type DOMElement
     */
-    draw: function(pixel) {
+    draw: function(px) {
-        this.image.style.top = (pixel.y + this.icon.offset.y) + "px"
+        this.image.style.top = (px.y + this.icon.offset.y) + "px"
-        this.image.style.left = (pixel.x + this.icon.offset.x) + "px"; 
+        this.image.style.left = (px.x + this.icon.offset.x) + "px"; 
         return this.image;
     }, 
+
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    moveTo: function (px) {
+        if ((px != null) && (this.div != null)) {
+            this.image.style.top = (px.y + this.icon.offset.y) + "px"
+            this.image.style.left = (px.x + this.icon.offset.x) + "px"; 
+        }
+    },
     
     /** @final @type String */
     CLASS_NAME: "OpenLayers.Marker"

lib/OpenLayers/Popup.js

@@ -89,7 +89,7 @@ OpenLayers.Popup.prototype = {
     * @param {OpenLayers.Pixel} px
     */
     moveTo: function(px) {
-        if (this.div != null) {
+        if ((px != null) && (this.div != null)) {
             this.div.style.left = px.x + "px";
             this.div.style.top = px.y + "px";
         }

tests/test_Control_PanZoom.html

@@ -15,7 +15,8 @@
         control = new OpenLayers.Control.PanZoom();
         t.ok( control instanceof OpenLayers.Control.PanZoom, "new OpenLayers.Control.PanZoom returns object" );
         t.ok( map instanceof OpenLayers.Map, "new OpenLayers.Map creates map" );
-        map.addControl(control);
+        map.addControl(control,
+                       new OpenLayers.Pixel(10,10));
         t.ok( control.map === map, "Control.map is set to the map object" );
         t.ok( map.controls[2] === control, "map.controls contains control" );
         t.eq( control.div.style.zIndex, "253", "Control div zIndexed properly" );
@@ -26,7 +27,8 @@
         var evt = new Object();
         map = new OpenLayers.Map('map');
         control = new OpenLayers.Control.PanZoom();
-        map.addControl(control);
+        map.addControl(control,
+                       new OpenLayers.Pixel(20,20));
         map.setCenter(new OpenLayers.LonLat(0,0), 0);
         control.buttons[0].onmousedown(evt);
         t.eq( map.getCenter().lat, 360/1024*50, "Pan up works correctly" );