define("dojox/geo/charting/TouchInteractionSupport", [ "dojo/_base/lang", "dojo/_base/declare", "dojo/_base/event", "dojo/_base/connect", "dojo/_base/window" ], function(lang,declare,event,connect,win){ return declare("dojox.geo.charting.TouchInteractionSupport",null, { // summary: // A class to handle touch interactions on a dojox/geo/charting/Map component. // tags: // private _map: null, _centerTouchLocation: null, _touchMoveListener: null, _touchEndListener: null, _touchEndTapListener: null, _touchStartListener: null, _initialFingerSpacing: null, _initialScale: null, _tapCount: null, _tapThreshold: null, _lastTap: null, _doubleTapPerformed:false, _oneFingerTouch:false, _tapCancel:false, constructor: function(map){ // summary: // Constructs a new _TouchInteractionSupport instance // map: dojox.geo.charting.Map // the Map widget this class provides touch navigation for. this._map = map; this._centerTouchLocation = {x: 0,y: 0}; this._tapCount = 0; this._lastTap = {x: 0,y: 0}; this._tapThreshold = 100; // square distance in pixels }, connect: function(){ // summary: // install touch listeners this._touchStartListener = this._map.surface.connect("touchstart", this, this._touchStartHandler); }, disconnect: function(){ // summary: // disconnects any installed listeners. Must be called only when disposing of this instance if(this._touchStartListener){ connect.disconnect(this._touchStartListener); this._touchStartListener = null; } }, _getTouchBarycenter: function(touchEvent){ // summary: // returns the midpoint of the two first fingers (or the first finger location if only one) // touchEvent: TouchEvent // a touch event // returns: // the midpoint // tags: // private var touches = touchEvent.touches; var firstTouch = touches[0]; var secondTouch = null; if(touches.length > 1){ secondTouch = touches[1]; }else{ secondTouch = touches[0]; } var containerBounds = this._map._getContainerBounds(); var middleX = (firstTouch.pageX + secondTouch.pageX) / 2.0 - containerBounds.x; var middleY = (firstTouch.pageY + secondTouch.pageY) / 2.0 - containerBounds.y; return {x: middleX,y: middleY}; // dojox/gfx/Point }, _getFingerSpacing: function(touchEvent){ // summary: // computes the distance between the first two fingers // touchEvent: a touch event // returns: // a distance. -1 if less than 2 fingers // tags: // private var touches = touchEvent.touches; var spacing = -1; if(touches.length >= 2){ var dx = (touches[1].pageX - touches[0].pageX); var dy = (touches[1].pageY - touches[0].pageY); spacing = Math.sqrt(dx*dx + dy*dy); } return spacing; }, _isDoubleTap: function(touchEvent){ // summary: // checks whether the specified touchStart event is a double tap // (i.e. follows closely a previous touchStart at approximately the same location) // touchEvent: TouchEvent // a touch event // returns: // true if this event is considered a double tap // tags: // private var isDoubleTap = false; var touches = touchEvent.touches; if((this._tapCount > 0) && touches.length == 1){ // test distance from last tap var dx = (touches[0].pageX - this._lastTap.x); var dy = (touches[0].pageY - this._lastTap.y); var distance = dx*dx + dy*dy; if(distance < this._tapThreshold){ isDoubleTap = true; }else{ this._tapCount = 0; } } this._tapCount++; this._lastTap.x = touches[0].pageX; this._lastTap.y = touches[0].pageY; setTimeout(lang.hitch(this,function(){ this._tapCount = 0;}),300); return isDoubleTap; }, _doubleTapHandler: function(touchEvent){ // summary: // action performed on the map when a double tap was triggered // touchEvent: TouchEvent // a touch event // tags: // private var feature = this._getFeatureFromTouchEvent(touchEvent); if(feature){ this._map.fitToMapArea(feature._bbox, 15, true); }else{ // perform a basic 2x zoom on touch var touches = touchEvent.touches; var containerBounds = this._map._getContainerBounds(); var offX = touches[0].pageX - containerBounds.x; var offY = touches[0].pageY - containerBounds.y; // clicked map point before zooming var mapPoint = this._map.screenCoordsToMapCoords(offX,offY); // zoom increment power this._map.setMapCenterAndScale(mapPoint.x, mapPoint.y,this._map.getMapScale()*2,true); } }, _getFeatureFromTouchEvent: function(touchEvent){ // summary: // utility function to return the feature located at this touch event location // touchEvent: TouchEvent // a touch event // returns: // the feature found if any, null otherwise. // tags: // private var feature = null; if(touchEvent.gfxTarget && touchEvent.gfxTarget.getParent){ feature = this._map.mapObj.features[touchEvent.gfxTarget.getParent().id]; } return feature; // dojox/geo/charting/Feature }, _touchStartHandler: function(touchEvent){ // summary: // action performed on the map when a touch start was triggered // touchEvent: TouchEvent // a touch event // tags: // private event.stop(touchEvent); this._oneFingerTouch = (touchEvent.touches.length == 1); this._tapCancel = !this._oneFingerTouch; // test double tap this._doubleTapPerformed = false; if(this._isDoubleTap(touchEvent)){ //console.log("double tap recognized"); this._doubleTapHandler(touchEvent); this._doubleTapPerformed = true; return; } // compute map midpoint between fingers var middlePoint = this._getTouchBarycenter(touchEvent); var mapPoint = this._map.screenCoordsToMapCoords(middlePoint.x,middlePoint.y); this._centerTouchLocation.x = mapPoint.x; this._centerTouchLocation.y = mapPoint.y; // store initial finger spacing to compute zoom later this._initialFingerSpacing = this._getFingerSpacing(touchEvent); // store initial map scale this._initialScale = this._map.getMapScale(); // install touch move and up listeners (if not done by other fingers before) if(!this._touchMoveListener){ this._touchMoveListener = connect.connect(win.global,"touchmove",this,this._touchMoveHandler); } if(!this._touchEndTapListener){ this._touchEndTapListener = this._map.surface.connect("touchend", this, this._touchEndTapHandler); } if(!this._touchEndListener){ this._touchEndListener = connect.connect(win.global,"touchend",this, this._touchEndHandler); } }, _touchEndTapHandler: function(touchEvent){ // summary: // action performed on the map when a tap was triggered // touchEvent: TouchEvent // a touch event // tags: // private var touches = touchEvent.touches; if(touches.length == 0){ // test potential tap ? if(this._oneFingerTouch && !this._tapCancel){ this._oneFingerTouch = false; setTimeout(lang.hitch(this,function(){ // wait to check if double tap // perform test for single tap //console.log("double tap was performed ? " + this._doubleTapPerformed); if(!this._doubleTapPerformed){ // test distance from last tap var dx = (touchEvent.changedTouches[0].pageX - this._lastTap.x); var dy = (touchEvent.changedTouches[0].pageY - this._lastTap.y); var distance = dx*dx + dy*dy; if(distance < this._tapThreshold){ // single tap ok this._singleTapHandler(touchEvent); } } }), 350); } this._tapCancel = false; } }, _touchEndHandler: function(touchEvent){ // summary: // action performed on the map when a touch end was triggered // touchEvent: TouchEvent // a touch event // tags: // private event.stop(touchEvent); var touches = touchEvent.touches; if(touches.length == 0){ // disconnect listeners only when all fingers are up if(this._touchMoveListener){ connect.disconnect(this._touchMoveListener); this._touchMoveListener = null; } if(this._touchEndListener){ connect.disconnect(this._touchEndListener); this._touchEndListener = null; } }else{ // recompute touch center var middlePoint = this._getTouchBarycenter(touchEvent); var mapPoint = this._map.screenCoordsToMapCoords(middlePoint.x,middlePoint.y); this._centerTouchLocation.x = mapPoint.x; this._centerTouchLocation.y = mapPoint.y; } }, _singleTapHandler: function(touchEvent){ // summary: // action performed on the map when a single tap was triggered // touchEvent: TouchEvent // a touch event // tags: // private var feature = this._getFeatureFromTouchEvent(touchEvent); if(feature){ // call feature handler feature._onclickHandler(touchEvent); }else{ // unselect all for(var name in this._map.mapObj.features){ this._map.mapObj.features[name].select(false); } this._map.onFeatureClick(null); } }, _touchMoveHandler: function(touchEvent){ // summary: // action performed on the map when a touch move was triggered // touchEvent: TouchEvent // a touch event // tags: // private // prevent browser interaction event.stop(touchEvent); // cancel tap if moved too far from first touch location if(!this._tapCancel){ var dx = (touchEvent.touches[0].pageX - this._lastTap.x), dy = (touchEvent.touches[0].pageY - this._lastTap.y); var distance = dx*dx + dy*dy; if(distance > this._tapThreshold){ this._tapCancel = true; } } var middlePoint = this._getTouchBarycenter(touchEvent); // compute map offset var mapPoint = this._map.screenCoordsToMapCoords(middlePoint.x,middlePoint.y), mapOffsetX = mapPoint.x - this._centerTouchLocation.x, mapOffsetY = mapPoint.y - this._centerTouchLocation.y; // compute scale factor var scaleFactor = 1; var touches = touchEvent.touches; if(touches.length >= 2){ var fingerSpacing = this._getFingerSpacing(touchEvent); scaleFactor = fingerSpacing / this._initialFingerSpacing; // scale map this._map.setMapScale(this._initialScale*scaleFactor); } // adjust map center on barycentre var currentMapCenter = this._map.getMapCenter(); this._map.setMapCenter(currentMapCenter.x - mapOffsetX, currentMapCenter.y - mapOffsetY); } }); });