[OpenLayers-Commits] r11432 - in sandbox/pinch/lib: . OpenLayers
OpenLayers/Control OpenLayers/Handler
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Feb 24 11:35:00 EST 2011
Author: tschaub
Date: 2011-02-24 08:35:00 -0800 (Thu, 24 Feb 2011)
New Revision: 11432
Added:
sandbox/pinch/lib/OpenLayers/Control/PinchZoom.js
Modified:
sandbox/pinch/lib/OpenLayers.js
sandbox/pinch/lib/OpenLayers/Control/TouchNavigation.js
sandbox/pinch/lib/OpenLayers/Events.js
sandbox/pinch/lib/OpenLayers/Handler/Pinch.js
Log:
Adding the pinch navigation control.
Added: sandbox/pinch/lib/OpenLayers/Control/PinchZoom.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Control/PinchZoom.js (rev 0)
+++ sandbox/pinch/lib/OpenLayers/Control/PinchZoom.js 2011-02-24 16:35:00 UTC (rev 11432)
@@ -0,0 +1,177 @@
+/* Copyright (c) 2006-2010 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Handler/Pinch.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PinchZoom
+ *
+ * Inherits:
+ * - <OpenLayers.Control>
+ */
+OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
+
+ /**
+ * Property: type
+ * {OpenLayers.Control.TYPES}
+ */
+ type: OpenLayers.Control.TYPE_TOOL,
+
+ /**
+ * Property: containerOrigin
+ * {Object} Cached object representing the layer container origin (in pixels).
+ */
+ containerOrigin: null,
+
+ /**
+ * Property: pinchOrigin
+ * {Object} Cached object representing the pinch start (in pixels).
+ */
+ pinchOrigin: null,
+
+ /**
+ * Property: currentCenter
+ * {Object} Cached object representing the latest pinch center (in pixels).
+ */
+ currentCenter: null,
+
+ /**
+ * Constructor: OpenLayers.Control.PinchZoom
+ * Create a control for zooming with pinch gestures. This works on devices
+ * with multi-touch support.
+ *
+ * Parameters:
+ * options - {Object} An optional object whose properties will be set on
+ * the control
+ */
+ initialize: function(options) {
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ this.handler = new OpenLayers.Handler.Pinch(this, {
+ start: this.pinchStart,
+ move: this.pinchMove,
+ done: this.pinchDone
+ }, this.handlerOptions);
+ },
+
+ /**
+ * APIMethod: activate
+ * Activate this control. Must be called after the control is added to a
+ * map.
+ *
+ * Returns:
+ * {Boolean} The control was successfully activated.
+ */
+ activate: function() {
+ var activated = OpenLayers.Control.prototype.activate.apply(this,arguments);
+ if (activated) {
+ this.map.events.on({
+ moveend: this.updateContainerOrigin,
+ scope: this
+ });
+ this.updateContainerOrigin();
+ }
+ return activated;
+ },
+
+ /**
+ * APIMethod: deactivate
+ * Deactivate this control.
+ *
+ * Returns:
+ * {Boolean} The control was successfully deactivated.
+ */
+ deactivate: function() {
+ var deactivated = OpenLayers.Control.prototype.deactivate.apply(this,arguments);
+ if (this.map && this.map.events) {
+ this.map.events.un({
+ moveend: this.updateContainerOrigin,
+ scope: this
+ });
+ }
+ return deactivated;
+ },
+
+ /**
+ * Method: updateContainerOrigin
+ * Must be called each time the layer container origin changes.
+ */
+ updateContainerOrigin: function() {
+ var container = this.map.layerContainerDiv;
+ this.containerOrigin = {
+ x: parseInt(container.style.left, 10),
+ y: parseInt(container.style.top, 10)
+ };
+ },
+
+ /**
+ * Method: pinchStart
+ *
+ * Parameters:
+ * evt - {Event}
+ * pinchData - {Object} pinch data object related to the current touchmove
+ * of the pinch gesture. This give us the current scale of the pinch.
+ */
+ pinchStart: function(evt, pinchData) {
+ this.pinchOrigin = evt.xy;
+ },
+
+ /**
+ * Method: pinchMove
+ *
+ * Parameters:
+ * evt - {Event}
+ * pinchData - {Object} pinch data object related to the current touchmove
+ * of the pinch gesture. This give us the current scale of the pinch.
+ */
+ pinchMove: function(evt, pinchData) {
+ var scale = pinchData.scale;
+ var containerOrigin = this.containerOrigin;
+ var pinchOrigin = this.pinchOrigin;
+ var current = evt.xy;
+
+ var dx = (current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x);
+ var dy = (current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y);
+
+ var style = this.map.layerContainerDiv.style;
+ var transform = "translate(" + dx + "px, " + dy + "px) scale(" + scale + ")";
+ style['-webkit-transform'] = transform;
+ style['-moz-transform'] = transform;
+
+ this.currentCenter = current;
+ },
+
+ /**
+ * Method: pinchDone
+ *
+ * Parameters:
+ * evt - {Event}
+ * start - {Object} pinch data object related to the touchstart event that
+ * started the pinch gesture.
+ * last - {Object} pinch data object related to the last touchmove event
+ * of the pinch gesture. This give us the final scale of the pinch.
+ */
+ pinchDone: function(evt, start, last) {
+ var zoom = this.map.getZoomForResolution(this.map.getResolution() / last.scale, true);
+ var resolution = this.map.getResolutionForZoom(zoom);
+
+ var location = this.map.getLonLatFromPixel(this.pinchOrigin);
+ var zoomPixel = this.currentCenter;
+ var size = this.map.getSize();
+
+ location.lon += resolution * ((size.w / 2) - zoomPixel.x);
+ location.lat -= resolution * ((size.h / 2) - zoomPixel.y);
+
+ this.map.setCenter(location, zoom);
+
+ var style = this.map.layerContainerDiv.style;
+ style['-webkit-transform'] = "";
+ style['-moz-transform'] = "";
+ },
+
+ CLASS_NAME: "OpenLayers.Control.PinchZoom"
+
+});
Modified: sandbox/pinch/lib/OpenLayers/Control/TouchNavigation.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Control/TouchNavigation.js 2011-02-24 16:29:53 UTC (rev 11431)
+++ sandbox/pinch/lib/OpenLayers/Control/TouchNavigation.js 2011-02-24 16:35:00 UTC (rev 11432)
@@ -5,14 +5,15 @@
/**
* @requires OpenLayers/Control/DragPan.js
+ * @requires OpenLayers/Control/PinchZoom.js
* @requires OpenLayers/Handler/Click.js
*/
/**
* Class: OpenLayers.Control.TouchNavigation
* The navigation control handles map browsing with touch events (dragging,
- * double-tapping, and tap with two fingers). Create a new navigation
- * control with the <OpenLayers.Control.TouchNavigation> control.
+ * double-tapping, tap with two fingers, and pinch zoom). Create a new
+ * control with the <OpenLayers.Control.TouchNavigation> constructor.
*
* Inherits:
* - <OpenLayers.Control>
@@ -32,6 +33,18 @@
dragPanOptions: null,
/**
+ * Property: pinchZoom
+ * {<OpenLayers.Control.PinchZoom>}
+ */
+ pinchZoom: null,
+
+ /**
+ * APIProprety: pinchZoomOptions
+ * {Object} Options passed to the PinchZoom control.
+ */
+ pinchZoomOptions: null,
+
+ /**
* APIProperty: documentDrag
* {Boolean} Allow panning of the map by dragging outside map viewport.
* Default is false.
@@ -70,6 +83,10 @@
this.dragPan.destroy();
}
this.dragPan = null;
+ if (this.pinchZoom) {
+ this.pinchZoom.destroy();
+ delete this.pinchZoom;
+ }
OpenLayers.Control.prototype.destroy.apply(this,arguments);
},
@@ -79,6 +96,7 @@
activate: function() {
if(OpenLayers.Control.prototype.activate.apply(this,arguments)) {
this.dragPan.activate();
+ this.pinchZoom.activate();
this.handlers.click.activate();
return true;
}
@@ -91,12 +109,13 @@
deactivate: function() {
if(OpenLayers.Control.prototype.deactivate.apply(this,arguments)) {
this.dragPan.deactivate();
+ this.pinchZoom.deactivate();
this.handlers.click.deactivate();
return true;
}
return false;
},
-
+
/**
* Method: draw
*/
@@ -119,6 +138,9 @@
}, this.dragPanOptions)
);
this.dragPan.draw();
+ this.pinchZoom = new OpenLayers.Control.PinchZoom(
+ OpenLayers.Util.extend({map: this.map}, this.pinchZoomOptions)
+ );
},
/**
Modified: sandbox/pinch/lib/OpenLayers/Events.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Events.js 2011-02-24 16:29:53 UTC (rev 11431)
+++ sandbox/pinch/lib/OpenLayers/Events.js 2011-02-24 16:35:00 UTC (rev 11432)
@@ -821,10 +821,20 @@
// noone's listening, bail out
return;
}
- // add clientX & clientY to all events - only corresponds to the first touch
- if (evt.touches && evt.touches[0]) {
- evt.clientX = evt.touches[0].clientX;
- evt.clientY = evt.touches[0].clientY;
+ // add clientX & clientY to all events - corresponds to average x, y
+ var touches = evt.touches;
+ if (touches && touches[0]) {
+ var x = 0;
+ var y = 0;
+ var num = touches.length;
+ var touch;
+ for (var i=0; i<num; ++i) {
+ touch = touches[i];
+ x += touch.clientX;
+ y += touch.clientY;
+ }
+ evt.clientX = x / num;
+ evt.clientY = y / num;
}
if (this.includeXY) {
evt.xy = this.getMousePosition(evt);
Modified: sandbox/pinch/lib/OpenLayers/Handler/Pinch.js
===================================================================
--- sandbox/pinch/lib/OpenLayers/Handler/Pinch.js 2011-02-24 16:29:53 UTC (rev 11431)
+++ sandbox/pinch/lib/OpenLayers/Handler/Pinch.js 2011-02-24 16:35:00 UTC (rev 11432)
@@ -120,13 +120,15 @@
* {Boolean} Let the event propagate.
*/
touchmove: function(evt) {
+ var propagate = true;
if (this.started && OpenLayers.Event.isMultiTouch(evt)) {
this.pinching = true;
var current = this.getPinchData(evt);
this.callback("move", [evt, current]);
this.last = current;
+ propagate = false;
}
- return true;
+ return propagate;
},
/**
Modified: sandbox/pinch/lib/OpenLayers.js
===================================================================
--- sandbox/pinch/lib/OpenLayers.js 2011-02-24 16:29:53 UTC (rev 11431)
+++ sandbox/pinch/lib/OpenLayers.js 2011-02-24 16:35:00 UTC (rev 11432)
@@ -182,6 +182,7 @@
"OpenLayers/Control/ZoomToMaxExtent.js",
"OpenLayers/Control/DragPan.js",
"OpenLayers/Control/Navigation.js",
+ "OpenLayers/Control/PinchZoom.js",
"OpenLayers/Control/TouchNavigation.js",
"OpenLayers/Control/MouseDefaults.js",
"OpenLayers/Control/MousePosition.js",
More information about the Commits
mailing list