[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