[OpenLayers-Commits] r11542 - in sandbox/pinch: . examples lib/OpenLayers lib/OpenLayers/Control lib/OpenLayers/Layer tests tests/Control tools

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Fri Feb 25 19:01:00 EST 2011


Author: tschaub
Date: 2011-02-25 16:01:00 -0800 (Fri, 25 Feb 2011)
New Revision: 11542

Modified:
   sandbox/pinch/
   sandbox/pinch/examples/browser.html
   sandbox/pinch/examples/browser.js
   sandbox/pinch/lib/OpenLayers/Control/Navigation.js
   sandbox/pinch/lib/OpenLayers/Layer.js
   sandbox/pinch/lib/OpenLayers/Layer/EventPane.js
   sandbox/pinch/lib/OpenLayers/Layer/Grid.js
   sandbox/pinch/lib/OpenLayers/Map.js
   sandbox/pinch/tests/Control/Navigation.html
   sandbox/pinch/tests/Map.html
   sandbox/pinch/tools/update_dev_dir.sh
Log:
Merge -r11522:11541 from trunk.


Property changes on: sandbox/pinch
___________________________________________________________________
Modified: svn:mergeinfo
   - /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11431-11532
   + /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11431-11541

Modified: sandbox/pinch/examples/browser.html
===================================================================
--- sandbox/pinch/examples/browser.html	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/examples/browser.html	2011-02-26 00:01:00 UTC (rev 11542)
@@ -11,6 +11,10 @@
         .olControlAttribution {
             bottom: 5px;
         }
+
+        .tester {
+            margin: 3px;
+        }
     </style>
     <script type="text/javascript">
         function init() {
@@ -79,12 +83,15 @@
 </head>
 <body onload="init()">
 <h1 id="title">Browser detection</h1>
+
 <div id="tags">
-  browser, vendor, mobile, events, HTML5, gesture, touch
-</div> 
+    browser, vendor, mobile, events, HTML5, gesture, touch
+</div>
+
 <p id="shortdesc">
     The goal of this script is to inform about the capacity of the browser used by the user.
 </p>
+
 <div id="docs">
     <p>
         See the <a href="browser.js" target="_blank">
@@ -95,7 +102,50 @@
 <h1>Your browser information</h1>
 
 <div id="result">
+</div>
 
+<h1>Click or touch the red square to get information about the selected events</h1>
+
+<div>
+    <div class="tester">
+        <INPUT TYPE=CHECKBOX ID="clickID" checked>click<BR>
+        <INPUT TYPE=CHECKBOX ID="dblclickID">dblclick<BR>
+        <INPUT TYPE=CHECKBOX ID="mousedownID">mousedown<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseupID">mouseup<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseoverID">mouseover<BR>
+        <INPUT TYPE=CHECKBOX ID="mousemoveID">mousemove<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseoutID">mouseout<BR>
+        <INPUT TYPE=CHECKBOX ID="touchstartID">touchstart<BR>
+        <INPUT TYPE=CHECKBOX ID="touchendID">touchend<BR>
+        <INPUT TYPE=CHECKBOX ID="touchmoveID">touchmove<BR>
+        <INPUT TYPE=CHECKBOX ID="touchcancelID">touchcancel<BR>
+        <INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
+        <INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
+        <INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
+    </div>
+
+    <div style="height: 200px;width: 200px;" class="tester">
+        <div id="box" style="height: 200px; width: 200px; background: none repeat scroll 0% 0% red; "
+             onclick="click(event)"
+             ondblclick="dblclick(event)"
+             onmousedown="mousedown(event)"
+             onmouseup="mouseup(event)"
+             onmouseover="mouseover(event)"
+             onmousemove="mousemove(event)"
+             onmouseout="mouseout(event)"
+             ontouchstart="touchstart(event)"
+             ontouchend="touchend(event)"
+             ontouchmove="touchmove(event)"
+             ontouchcancel="touchcancel(event)"
+             ongesturestart="gesturestart(event)"
+             ongesturechange="gesturechange(event)"
+             ongestureend="gestureend(event)">
+        </div>
+    </div>
+
+    <div id="log" class="tester"></div>
 </div>
+
+
 </body>
 </html>

Modified: sandbox/pinch/examples/browser.js
===================================================================
--- sandbox/pinch/examples/browser.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/examples/browser.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -49,4 +49,193 @@
             );
     div.innerHTML = div.innerHTML + "<br>";
 }
+var counter = 1;
 
+function log(title, detail) {
+    var logDiv = document.getElementById("log");
+    idString = "'id" + counter + "'";
+    var newlink = document.createElement('a');
+    newlink.setAttribute('href', "javascript:toggle_visibility(" + idString + ")");
+    newlink.innerHTML = counter + ". " + title;
+    var br1 = document.createElement('br');
+    logDiv.appendChild(newlink);
+    logDiv.appendChild(br1);
+
+    var childDiv = document.createElement('div');
+    childDiv.setAttribute("id", idString.replace("'", "").replace("'", ""));
+    childDiv.setAttribute("style", 'display: none; margin-left : 5px;');
+    childDiv.innerHTML = detail;
+    var br2 = document.createElement('br');
+    logDiv.appendChild(childDiv);
+
+    counter = counter + 1;
+}
+
+function inspect(obj) {
+    if (typeof obj === "undefined") {
+        return "undefined";
+    }
+    var _props = [];
+
+    for (var i in obj) {
+        _props.push(i + " : " + obj[i]);
+    }
+    return " {" + _props.join(",<br>") + "} ";
+}
+
+function click(e) {
+    if (document.getElementById("clickID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function dblclick(e) {
+    if (document.getElementById("dblclickID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mousedown(e) {
+    if (document.getElementById("mousedownID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseup(e) {
+    if (document.getElementById("mouseupID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseover(e) {
+    if (document.getElementById("mouseoverID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mousemove(e) {
+    if (document.getElementById("mousemoveID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseout(e) {
+    if (document.getElementById("mouseoutID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchstart(e) {
+    if (document.getElementById("touchstartID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchend(e) {
+    if (document.getElementById("touchendID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchmove(e) {
+    if (document.getElementById("touchmoveID").checked) {
+        var targetEvent = e.touches.item(0);
+        var box = document.getElementById("box");
+        box.style.left = targetEvent.clientX + "px";
+        box.style.top = targetEvent.clientY + "px";
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchcancel(e) {
+    if (document.getElementById("touchcancelID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gesturestart(e) {
+    if (document.getElementById("gesturestartID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gesturechange(e) {
+    if (document.getElementById("gesturechangeID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gestureend(e) {
+    if (document.getElementById("gestureendID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function toggle_visibility(id) {
+    var e = document.getElementById(id);
+    if (e.style.display == 'block') {
+        e.style.display = 'none';
+    } else {
+        e.style.display = 'block';
+    }
+}
+
+
+

Modified: sandbox/pinch/lib/OpenLayers/Control/Navigation.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Control/Navigation.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/lib/OpenLayers/Control/Navigation.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -163,6 +163,7 @@
         }
 
         var clickCallbacks = { 
+            'click': this.defaultClick,
             'dblclick': this.defaultDblClick, 
             'dblrightclick': this.defaultDblRightClick 
         };
@@ -190,6 +191,18 @@
     },
 
     /**
+     * Method: defaultClick
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    defaultClick: function (evt) {
+        if (evt.lastTouches && evt.lastTouches.length == 2) {
+            this.map.zoomOut();
+        }
+    },
+
+    /**
      * Method: defaultDblClick 
      * 
      * Parameters:

Modified: sandbox/pinch/lib/OpenLayers/Layer/EventPane.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Layer/EventPane.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/lib/OpenLayers/Layer/EventPane.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -211,6 +211,22 @@
         OpenLayers.Layer.prototype.setZIndex.apply(this, arguments);
         this.pane.style.zIndex = parseInt(this.div.style.zIndex) + 1;
     },
+    
+    /**
+     * Method: moveByPx
+     * Move the layer based on pixel vector. To be implemented by subclasses.
+     *
+     * Parameters:
+     * dx - {Number} The x coord of the displacement vector.
+     * dy - {Number} The y coord of the displacement vector.
+     */
+    moveByPx: function(dx, dy) {
+        OpenLayers.Layer.prototype.moveByPx.apply(this, arguments);
+        
+        if (this.dragPanMapObject) {
+            this.dragPanMapObject(dx, -dy);
+        }
+    },
 
     /**
      * Method: moveTo

Modified: sandbox/pinch/lib/OpenLayers/Layer/Grid.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Layer/Grid.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/lib/OpenLayers/Layer/Grid.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -251,19 +251,37 @@
                 if (forceReTile || !tilesBounds.containsBounds(bounds, true)) {
                     this.initGriddedTiles(bounds);
                 } else {
-                    // we might have to shift our buffer tiles, schedule
-                    // that
-                    if (this.timerId != null) {
-                        window.clearTimeout(this.timerId);
-                    }
-                    this.timerId = window.setTimeout(
-                        this._moveGriddedTiles,
-                        this.tileLoadingDelay
-                    );
+                    this.scheduleMoveGriddedTiles();
                 }
             }
         }
     },
+
+    /**
+     * Method: moveByPx
+     * Move the layer based on pixel vector.
+     *
+     * Parameters:
+     * dx - {Number}
+     * dy - {Number}
+     */
+    moveByPx: function(dx, dy) {
+        this.scheduleMoveGriddedTiles();
+    },
+
+    /**
+     * Method: scheduleMoveGriddedTiles
+     * Schedule the move of tiles.
+     */
+    scheduleMoveGriddedTiles: function() {
+        if (this.timerId != null) {
+            window.clearTimeout(this.timerId);
+        }
+        this.timerId = window.setTimeout(
+            this._moveGriddedTiles,
+            this.tileLoadingDelay
+        );
+    },
     
     /**
      * APIMethod: setTileSize
@@ -682,7 +700,9 @@
         var shifted = true;
         var buffer = this.buffer || 1;
         var tlLayer = this.grid[0][0].position;
-        var tlViewPort = this.map.getViewPortPxFromLayerPx(tlLayer);
+        var offsetX = parseInt(this.map.layerContainerDiv.style.left);
+        var offsetY = parseInt(this.map.layerContainerDiv.style.top);
+        tlViewPort = tlLayer.add(offsetX, offsetY);
         if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) {
             this.shiftColumn(true);
         } else if (tlViewPort.x < -this.tileSize.w * buffer) {

Modified: sandbox/pinch/lib/OpenLayers/Layer.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Layer.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/lib/OpenLayers/Layer.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -570,6 +570,17 @@
     },
 
     /**
+     * Method: moveByPx
+     * Move the layer based on pixel vector. To be implemented by subclasses.
+     *
+     * Parameters:
+     * dx - {Number} The x coord of the displacement vector.
+     * dy - {Number} The y coord of the displacement vector.
+     */
+    moveByPx: function(dx, dy) {
+    },
+
+    /**
      * Method: setMap
      * Set the map property for the layer. This is done through an accessor
      *     so that subclasses can override this and take special action once 
@@ -1201,22 +1212,17 @@
      */
     getLonLatFromViewPortPx: function (viewPortPx) {
         var lonlat = null;
-        if (viewPortPx != null) {
-            var size = this.map.getSize();
-            var center = this.map.getCenter();
-            if (center) {
-                var res  = this.map.getResolution();
-        
-                var delta_x = viewPortPx.x - (size.w / 2);
-                var delta_y = viewPortPx.y - (size.h / 2);
-            
-                lonlat = new OpenLayers.LonLat(center.lon + delta_x * res ,
-                                             center.lat - delta_y * res); 
+        var map = this.map;
+        if (viewPortPx != null && map.minPx) {
+            var res = map.getResolution();
+            var maxExtent = map.getMaxExtent();
+            var lon = (viewPortPx.x - map.minPx.x) * res + maxExtent.left;
+            var lat = (map.minPx.y - viewPortPx.y) * res + maxExtent.top;
+            lonlat = new OpenLayers.LonLat(lon, lat);
 
-                if (this.wrapDateLine) {
-                    lonlat = lonlat.wrapDateLine(this.maxExtent);
-                }
-            } // else { DEBUG STATEMENT }
+            if (this.wrapDateLine) {
+                lonlat = lonlat.wrapDateLine(this.maxExtent);
+            }
         }
         return lonlat;
     },

Modified: sandbox/pinch/lib/OpenLayers/Map.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Map.js	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/lib/OpenLayers/Map.js	2011-02-26 00:01:00 UTC (rev 11542)
@@ -416,6 +416,23 @@
     paddingForPopups : null,
     
     /**
+     * Property: minPx
+     * {<OpenLayers.Pixel>} Lower left of maxExtent in viewport pixel space.
+     *     Used to verify in moveByPx that the new location we're moving to
+     *     is valid. It is also used in the getLonLatFromViewPortPx function
+     *     of Layer.
+     */
+    minPx: null,
+    
+    /**
+     * Property: maxPx
+     * {<OpenLayers.Pixel>} Top right of maxExtent in viewport pixel space.
+     *     Used to verify in moveByPx that the new location we're moving to
+     *     is valid.
+     */
+    maxPx: null,
+    
+    /**
      * Constructor: OpenLayers.Map
      * Constructor for a new OpenLayers.Map instance.  There are two possible
      *     ways to call the map constructor.  See the examples below.
@@ -1140,7 +1157,7 @@
             if (OpenLayers.Util.indexOf(this.layers, newBaseLayer) != -1) {
 
                 // preserve center and scale when changing base layers
-                var center = this.getCenter();
+                var center = this.getCachedCenter();
                 var newResolution = OpenLayers.Util.getResolutionFromScale(
                     this.getScale(), newBaseLayer.units
                 );
@@ -1402,7 +1419,7 @@
                     this.layers[i].onMapResize();                
                 }
     
-                var center = this.getCenter();
+                var center = this.getCachedCenter();
     
                 if (this.baseLayer != null && center != null) {
                     var zoom = this.getZoom();
@@ -1453,7 +1470,7 @@
         var extent = null;
         
         if (center == null) {
-            center = this.getCenter();
+            center = this.getCachedCenter();
         }                
         if (resolution == null) {
             resolution = this.getResolution();
@@ -1493,12 +1510,27 @@
      */
     getCenter: function () {
         var center = null;
-        if (this.center) {
-            center = this.center.clone();
+        var cachedCenter = this.getCachedCenter();
+        if (cachedCenter) {
+            center = cachedCenter.clone();
         }
         return center;
     },
 
+    /**
+     * Method: getCachedCenter
+     *
+     * Returns:
+     * {<OpenLayers.LonLat>}
+     */
+    getCachedCenter: function() {
+        if (!this.center && this.size) {
+            this.center = this.getLonLatFromViewPortPx(
+                new OpenLayers.Pixel(this.size.w / 2, this.size.h / 2)
+            );
+        }
+        return this.center;
+    },
 
     /**
      * APIMethod: getZoom
@@ -1527,22 +1559,30 @@
             animate: true,
             dragging: false
         });
-        // getCenter
-        var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
+        if (options.dragging) {
+            if (dx != 0 || dy != 0) {
+                this.moveByPx(dx, dy);
+            }
+        } else {
+            // if we don't have a center, we were using moveByPx previously
+            var forceSetCenter = !this.center;
+            
+            // getCenter
+            var centerPx = this.getViewPortPxFromLonLat(this.getCachedCenter());
 
-        // adjust
-        var newCenterPx = centerPx.add(dx, dy);
-        
-        // only call setCenter if not dragging or there has been a change
-        if (!options.dragging || !newCenterPx.equals(centerPx)) {
-            var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
-            if (options.animate) {
-                this.panTo(newCenterLonLat);
-            } else {
-                this.setCenter(newCenterLonLat, null, options.dragging);
-            }    
-        }
+            // adjust
+            var newCenterPx = centerPx.add(dx, dy);
 
+            if (forceSetCenter || !newCenterPx.equals(centerPx)) {
+                var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
+                if (options.animate) {
+                    this.panTo(newCenterLonLat);
+                } else {
+                    this.setCenter(newCenterLonLat, null, options.dragging);
+                }    
+            }
+        }        
+
    },
    
    /** 
@@ -1558,7 +1598,7 @@
             if (!this.panTween) {
                 this.panTween = new OpenLayers.Tween(this.panMethod);
             }
-            var center = this.getCenter();
+            var center = this.getCachedCenter();
 
             // center will not change, don't do nothing
             if (lonlat.lon == center.lon &&
@@ -1566,31 +1606,25 @@
                 return;
             }
 
-            var from = {
-                lon: center.lon,
-                lat: center.lat
-            };
-            var to = {
-                lon: lonlat.lon,
-                lat: lonlat.lat
-            };
-            this.panTween.start(from, to, this.panDuration, {
+            var from = this.getPixelFromLonLat(center);
+            var to = this.getPixelFromLonLat(lonlat);
+            var vector = { x: to.x - from.x, y: to.y - from.y };
+            var last = { x: 0, y: 0 };
+
+            this.panTween.start( { x: 0, y: 0 }, vector, this.panDuration, {
                 callbacks: {
-                    start: OpenLayers.Function.bind(function(lonlat) {
+                    start: OpenLayers.Function.bind(function() {
                         this.events.triggerEvent("movestart");
                     }, this),
-                    eachStep: OpenLayers.Function.bind(function(lonlat) {
-                        lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
-                        this.moveTo(lonlat, this.zoom, {
-                            'dragging': true,
-                            'noEvent': true
-                        });
+                    eachStep: OpenLayers.Function.bind(function(px) {
+                        var x = px.x - last.x,
+                            y = px.y - last.y;
+                        this.moveByPx(x, y);
+                        last.x = Math.round(px.x);
+                        last.y = Math.round(px.y);
                     }, this),
-                    done: OpenLayers.Function.bind(function(lonlat) {
-                        lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
-                        this.moveTo(lonlat, this.zoom, {
-                            'noEvent': true
-                        });
+                    done: OpenLayers.Function.bind(function(px) {
+                        this.moveTo(lonlat, this.zoom, {noEvent: true});
                         this.events.triggerEvent("moveend");
                     }, this)
                 }
@@ -1621,6 +1655,71 @@
             'caller': 'setCenter'
         });
     },
+    
+    /** 
+     * Method: moveByPx
+     * Drag the map by pixels.
+     *
+     * Parameters:
+     * dx - {Number}
+     * dy - {Number}
+     */
+    moveByPx: function(dx, dy) {
+        dx = Math.round(dx);
+        dy = Math.round(dy);
+        var hw = this.size.w / 2;
+        var hh = this.size.h / 2;
+        var x = hw + dx;
+        var y = hh + dy;
+        var valid = y <= this.maxPx.y &&
+                    y >= this.minPx.y;
+        var minX, maxX;
+        if (this.baseLayer.wrapDateLine === true) {
+            minX = this.minPx.x, maxX = this.maxPx.x;
+        } else {
+            valid = valid &&
+                    x <= this.maxPx.x &&
+                    x >= this.minPx.x;
+        }
+        if (this.restrictedExtent && valid) {
+            valid = !(this.maxPx.x - x < hw ||
+                      x - this.minPx.x < hw ||
+                      this.maxPx.y - y < hh ||
+                      y - this.minPx.y < hh);
+        }
+        if (valid) {
+            this.center = null;
+            if (dx) {
+                this.layerContainerDiv.style.left =
+                    parseInt(this.layerContainerDiv.style.left) - dx + "px";
+                this.minPx.x -= dx;
+                this.maxPx.x -= dx;
+                if (this.baseLayer.wrapDateLine === true) {
+                    if (this.maxPx.x > maxX) {
+                        this.maxPx.x -= (maxX - minX);
+                    };
+                    if (this.minPx.x < minX) {
+                        this.minPx.x += (maxX - minX);
+                    };
+                }
+            }
+            if (dy) {
+                this.layerContainerDiv.style.top =
+                    parseInt(this.layerContainerDiv.style.top) - dy + "px";
+                this.minPx.y -= dy;
+                this.maxPx.y -= dy;
+            }
+            var layer, i, len;
+            for (i=0, len=this.layers.length; i<len; ++i) {
+                layer = this.layers[i];
+                if (layer.visibility) {
+                    layer.moveByPx(dx, dy);
+                    layer.events.triggerEvent("move");
+                }
+            }
+            this.events.triggerEvent("move");
+        }
+    },
 
     /**
      * Method: moveTo
@@ -1651,14 +1750,14 @@
             this.panTween.stop();
         }    
              
-        if (!this.center && !this.isValidLonLat(lonlat)) {
+        if (!this.getCachedCenter() && !this.isValidLonLat(lonlat)) {
             lonlat = this.maxExtent.getCenterLonLat();
         }
 
         if(this.restrictedExtent != null) {
             // In 3.0, decide if we want to change interpretation of maxExtent.
             if(lonlat == null) { 
-                lonlat = this.getCenter(); 
+                lonlat = this.center; 
             }
             if(zoom == null) { 
                 zoom = this.getZoom(); 
@@ -1705,7 +1804,7 @@
             }
 
             if (centerChanged) {
-                if ((!zoomChanged) && (this.center)) { 
+                if (!zoomChanged && this.center) { 
                     // if zoom hasnt changed, just slide layerContainer
                     //  (must be done before setting this.center to new value)
                     this.centerLayerContainer(lonlat);
@@ -1713,16 +1812,28 @@
                 this.center = lonlat.clone();
             }
 
+            var res = zoomChanged ?
+                this.getResolutionForZoom(zoom) : this.getResolution();
             // (re)set the layerContainerDiv's location
-            if ((zoomChanged) || (this.layerContainerOrigin == null)) {
-                this.layerContainerOrigin = this.center.clone();
+            if (zoomChanged || this.layerContainerOrigin == null) {
+                this.layerContainerOrigin = this.getCachedCenter();
                 this.layerContainerDiv.style.left = "0px";
                 this.layerContainerDiv.style.top  = "0px";
+                var maxExtent = this.getMaxExtent({restricted: true});
+                var maxExtentCenter = maxExtent.getCenterLonLat();
+                var lonDelta = this.center.lon - maxExtentCenter.lon;
+                var latDelta = maxExtentCenter.lat - this.center.lat;
+                var extentWidth = Math.round(maxExtent.getWidth() / res);
+                var extentHeight = Math.round(maxExtent.getHeight() / res);
+                var left = (this.size.w - extentWidth) / 2 - lonDelta / res;
+                var top = (this.size.h - extentHeight) / 2 - latDelta / res;
+                this.minPx = new OpenLayers.Pixel(left, top);
+                this.maxPx = new OpenLayers.Pixel(left + extentWidth, top + extentHeight);
             }
 
             if (zoomChanged) {
                 this.zoom = zoom;
-                this.resolution = this.getResolutionForZoom(zoom);
+                this.resolution = res;
                 // zoom level has changed, increment viewRequestID.
                 this.viewRequestID++;
             }    
@@ -1804,14 +1915,23 @@
      * lonlat - {<OpenLayers.LonLat>}
      */
     centerLayerContainer: function (lonlat) {
-
         var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
         var newPx = this.getViewPortPxFromLonLat(lonlat);
 
         if ((originPx != null) && (newPx != null)) {
-            this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
-            this.layerContainerDiv.style.top  = Math.round(originPx.y - newPx.y) + "px";
-        }
+            var oldLeft = parseInt(this.layerContainerDiv.style.left);
+            var oldTop = parseInt(this.layerContainerDiv.style.top);
+            var newLeft = Math.round(originPx.x - newPx.x);
+            var newTop = Math.round(originPx.y - newPx.y);
+            this.layerContainerDiv.style.left = newLeft + "px";
+            this.layerContainerDiv.style.top  = newTop + "px";
+            var dx = oldLeft - newLeft;
+            var dy = oldTop - newTop;
+            this.minPx.x -= dx;
+            this.maxPx.x -= dx;
+            this.minPx.y -= dy;
+            this.maxPx.y -= dy;
+        }        
     },
 
     /**
@@ -2225,7 +2345,7 @@
         var size = this.getSize();
         var w_deg = size.w * res;
         var h_deg = size.h * res;
-        var center = this.getCenter();
+        var center = this.getCachedCenter();
 
         var extent = new OpenLayers.Bounds(center.lon - w_deg / 2,
                                            center.lat - h_deg / 2,
@@ -2337,8 +2457,8 @@
      * {<OpenLayers.Size>} The geodesic size of the pixel in kilometers.
      */
     getGeodesicPixelSize: function(px) {
-        var lonlat = px ? this.getLonLatFromPixel(px) : (this.getCenter() ||
-            new OpenLayers.LonLat(0, 0));
+        var lonlat = px ? this.getLonLatFromPixel(px) : (
+            this.getCachedCenter() || new OpenLayers.LonLat(0, 0));
         var res = this.getResolution();
         var left = lonlat.add(-res / 2, 0);
         var right = lonlat.add(res / 2, 0);

Modified: sandbox/pinch/tests/Control/Navigation.html
===================================================================
--- sandbox/pinch/tests/Control/Navigation.html	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/tests/Control/Navigation.html	2011-02-26 00:01:00 UTC (rev 11542)
@@ -118,6 +118,27 @@
         t.eq(nav.zoomWheelEnabled, true, "mouse wheel activated");
         t.eq(wheel.active, true, "mouse wheel handler activated");
     }
+
+    function test_touches_zoom(t) {
+        t.plan(3);
+        var nav = new OpenLayers.Control.Navigation({zoomWheelEnabled: false});
+        var map = new OpenLayers.Map({
+            div: "map",
+            controls: [nav],
+            layers: [
+                new OpenLayers.Layer(null, {isBaseLayer: true})
+            ],
+            center: new OpenLayers.LonLat(0, 0),
+            zoom: 3
+        });
+        t.eq(map.getZoom(), 3, "map zoom starts at 3");
+        nav.handlers.click.callback("click", [{lastTouches: ["foo", "bar"]}]);
+        t.eq(map.getZoom(), 2, "map zooms out with a two touch tap");
+        nav.handlers.click.callback("click", [{}]);
+        t.eq(map.getZoom(), 2, "map doesn't do anything with click");
+        
+        map.destroy();
+    }
     
     function test_documentDrag(t) {
         
@@ -149,5 +170,6 @@
   </script>
 </head>
 <body>
+    <div id="map" style="width: 256px; height: 256px"></div>
 </body>
 </html>

Modified: sandbox/pinch/tests/Map.html
===================================================================
--- sandbox/pinch/tests/Map.html	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/tests/Map.html	2011-02-26 00:01:00 UTC (rev 11542)
@@ -1323,7 +1323,7 @@
         var m = {
             'baseLayer': { 'units': {} },
             'getSize': function() { return {'w': 10, 'h': 15}; },
-            'getCenter': function() { return {'lon': -5, 'lat': -25}; },
+            'getCachedCenter': function() { return {'lon': -5, 'lat': -25}; },
             'zoomToExtent': function(extent, closest) {
                 t.ok(extent.equals(g_ExpectedExtent), "extent correctly calculated for zoomToExtent()");
                 t.ok(closest == g_Closest, "closest correctly passed on to zoomToExtent()");
@@ -1701,6 +1701,41 @@
         map.destroy();
     }    
 
+    function test_moveByPx(t) {
+        t.plan(8);
+
+        var map = new OpenLayers.Map({
+            div: 'map',
+            maxExtent: new OpenLayers.Bounds(-50, -50, 50, 50),
+            restrictedExtent: new OpenLayers.Bounds(-10, -10, 10, 10),
+            layers: [
+                new OpenLayers.Layer('name', {isBaseLayer: true})
+            ]
+        });
+        map.zoomToExtent(new OpenLayers.Bounds(-1, -1, 1, 1));
+
+        // check initial state
+        t.eq(map.layerContainerDiv.style.left, '0px', 'layer container left correct');
+        t.eq(map.layerContainerDiv.style.top, '0px', 'layer container top correct');
+
+        // move to a valid position
+        map.moveByPx(-455, 455);
+        t.eq(map.layerContainerDiv.style.left, '455px', 'layer container left correct');
+        t.eq(map.layerContainerDiv.style.top, '-455px', 'layer container top correct');
+
+        // move outside the max extent
+        map.moveByPx(-4500, 4500);
+        t.eq(map.layerContainerDiv.style.left, '455px', 'layer container left correct');
+        t.eq(map.layerContainerDiv.style.top, '-455px', 'layer container top correct');
+
+        // move outside the restricted extent
+        map.moveByPx(-500, 500);
+        t.eq(map.layerContainerDiv.style.left, '455px', 'layer container left correct');
+        t.eq(map.layerContainerDiv.style.top, '-455px', 'layer container top correct');
+
+        map.destroy();
+    }
+
   </script>
 </head>
 <body>

Modified: sandbox/pinch/tools/update_dev_dir.sh
===================================================================
--- sandbox/pinch/tools/update_dev_dir.sh	2011-02-25 20:23:45 UTC (rev 11541)
+++ sandbox/pinch/tools/update_dev_dir.sh	2011-02-26 00:01:00 UTC (rev 11542)
@@ -19,14 +19,18 @@
     python exampleparser.py
     cd /osgeo/openlayers/docs/dev/build
     ./build.py -c closure tests.cfg
+    ./build.py -c closure mobile.cfg OpenLayers.mobile.js
     
     cp OpenLayers.js ..
+    cp OpenLayers.mobile.js ..
+
     cd ..
     for i in google ie6-style style; do
         csstidy theme/default/$i.css --template=highest theme/default/$i.tidy.css
         cp theme/default/$i.tidy.css theme/default/$i.css
     done
 
+    sed -i -e 's!../lib/OpenLayers.js\?mobile!../OpenLayers.mobile.js!' examples/*.html
     sed -i -e 's!../lib/OpenLayers.js!../OpenLayers.js!' examples/*.html
     naturaldocs -i /osgeo/openlayers/docs/dev/lib -o HTML /osgeo/openlayers/dev/apidocs -p /osgeo/openlayers/docs/dev/apidoc_config -s Default OL >/dev/null
     naturaldocs -i /osgeo/openlayers/docs/dev/lib -o HTML /osgeo/openlayers/dev/docs -p /osgeo/openlayers/docs/dev/doc_config -s Default OL >/dev/null



More information about the Commits mailing list