MouseInteractionSupport.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. define("dojox/geo/charting/MouseInteractionSupport", ["dojo/_base/lang","dojo/_base/declare","dojo/_base/event",
  2. "dojo/_base/connect","dojo/_base/window","dojo/_base/html","dojo/dom","dojo/_base/sniff"],
  3. function(lang, declare, event, connect, win, html, dom, has) {
  4. return declare("dojox.geo.charting.MouseInteractionSupport", null, {
  5. // summary:
  6. // class to handle mouse interactions on a dojox.geo.charting.Map widget
  7. // tags:
  8. // private
  9. _map : null,
  10. _mapClickLocation : null,
  11. _screenClickLocation: null,
  12. _mouseDragListener: null,
  13. _mouseUpListener: null,
  14. _mouseUpClickListener: null,
  15. _mouseDownListener: null,
  16. _mouseMoveListener: null,
  17. _mouseWheelListener: null,
  18. _currentFeature: null,
  19. _cancelMouseClick: null,
  20. _zoomEnabled: false,
  21. _panEnabled: false,
  22. _onDragStartListener: null,
  23. _onSelectStartListener: null,
  24. mouseClickThreshold: 2,
  25. constructor : function(/* Map */map,/*boolean*/options) {
  26. // summary:
  27. // Constructs a new _MouseInteractionSupport instance
  28. // map: dojox.geo.charting.Map
  29. // the Map widget this class provides touch navigation for.
  30. // options: object
  31. // to enable panning and mouse wheel zooming
  32. this._map = map;
  33. this._mapClickLocation = {x: 0,y: 0};
  34. this._screenClickLocation = {x: 0,y: 0};
  35. this._cancelMouseClick = false;
  36. if (options) {
  37. this._zoomEnabled = options.enableZoom;
  38. this._panEnabled = options.enablePan;
  39. if (options.mouseClickThreshold && options.mouseClickThreshold > 0) {
  40. this.mouseClickThreshold = options.mouseClickThreshold;
  41. }
  42. }
  43. },
  44. setEnableZoom: function(enable){
  45. // summary:
  46. // enables mouse zoom on the map
  47. if (enable && !this._mouseWheelListener) {
  48. // enable
  49. var wheelEventName = !has("mozilla") ? "onmousewheel" : "DOMMouseScroll";
  50. this._mouseWheelListener = this._map.surface.connect(wheelEventName, this, this._mouseWheelHandler);
  51. } else if (!enable && this._mouseWheelListener) {
  52. // disable
  53. connect.disconnect(this._mouseWheelListener);
  54. this._mouseWheelListener = null;
  55. }
  56. this._zoomEnabled = enable;
  57. },
  58. setEnablePan: function(enable){
  59. // summary:
  60. // enables mouse panning on the map
  61. this._panEnabled = enable;
  62. },
  63. connect: function() {
  64. // summary:
  65. // connects this mouse support class to the Map component
  66. // install mouse listeners
  67. this._mouseMoveListener = this._map.surface.connect("onmousemove", this, this._mouseMoveHandler);
  68. this._mouseDownListener = this._map.surface.connect("onmousedown", this, this._mouseDownHandler);
  69. if (has("ie")) {
  70. _onDragStartListener = connect.connect(win.doc,"ondragstart",this,event.stop);
  71. _onSelectStartListener = connect.connect(win.doc,"onselectstart",this,event.stop);
  72. }
  73. this.setEnableZoom(this._zoomEnabled);
  74. this.setEnablePan(this._panEnabled);
  75. },
  76. disconnect: function() {
  77. // summary:
  78. // disconnects any installed listeners
  79. // store zoomPan state
  80. var isZoom = this._zoomEnabled;
  81. // disable zoom (disconnects listeners..)
  82. this.setEnableZoom(false);
  83. // restore value
  84. this._zoomEnabled = isZoom;
  85. // disconnect remaining listeners
  86. if (this._mouseMoveListener) {
  87. connect.disconnect(this._mouseMoveListener);
  88. this._mouseMoveListener = null;
  89. connect.disconnect(this._mouseDownListener);
  90. this._mouseDownListener = null;
  91. }
  92. if (this._onDragStartListener) {
  93. connect.disconnect(this._onDragStartListener);
  94. this._onDragStartListener = null;
  95. connect.disconnect(this._onSelectStartListener);
  96. this._onSelectStartListener = null;
  97. }
  98. },
  99. _mouseClickHandler: function(mouseEvent) {
  100. // summary:
  101. // action performed on the map when a mouse click was performed
  102. // mouseEvent: the mouse event
  103. // tags:
  104. // private
  105. var feature = this._getFeatureFromMouseEvent(mouseEvent);
  106. if (feature) {
  107. // call feature handler
  108. feature._onclickHandler(mouseEvent);
  109. } else {
  110. // unselect all
  111. for (var name in this._map.mapObj.features){
  112. this._map.mapObj.features[name].select(false);
  113. }
  114. this._map.onFeatureClick(null);
  115. }
  116. },
  117. _mouseDownHandler: function(mouseEvent){
  118. // summary:
  119. // action performed on the map when a mouse down was performed
  120. // mouseEvent: the mouse event
  121. // tags:
  122. // private
  123. event.stop(mouseEvent);
  124. this._map.focused = true;
  125. // set various status parameters
  126. this._cancelMouseClick = false;
  127. this._screenClickLocation.x = mouseEvent.pageX;
  128. this._screenClickLocation.y = mouseEvent.pageY;
  129. // store map location where mouse down occurred
  130. var containerBounds = this._map._getContainerBounds();
  131. var offX = mouseEvent.pageX - containerBounds.x,
  132. offY = mouseEvent.pageY - containerBounds.y;
  133. var mapPoint = this._map.screenCoordsToMapCoords(offX,offY);
  134. this._mapClickLocation.x = mapPoint.x;
  135. this._mapClickLocation.y = mapPoint.y;
  136. // install drag listener if pan is enabled
  137. if (!has("ie")) {
  138. this._mouseDragListener = connect.connect(win.doc,"onmousemove",this,this._mouseDragHandler);
  139. this._mouseUpClickListener = this._map.surface.connect("onmouseup", this, this._mouseUpClickHandler);
  140. this._mouseUpListener = connect.connect(win.doc,"onmouseup",this, this._mouseUpHandler);
  141. } else {
  142. var node = dom.byId(this._map.container);
  143. this._mouseDragListener = connect.connect(node,"onmousemove",this,this._mouseDragHandler);
  144. this._mouseUpClickListener = this._map.surface.connect("onmouseup", this, this._mouseUpClickHandler);
  145. this._mouseUpListener = this._map.surface.connect("onmouseup", this, this._mouseUpHandler);
  146. this._map.surface.rawNode.setCapture();
  147. }
  148. },
  149. _mouseUpClickHandler: function(mouseEvent) {
  150. if (!this._cancelMouseClick) {
  151. // execute mouse click handler
  152. this._mouseClickHandler(mouseEvent);
  153. }
  154. this._cancelMouseClick = false;
  155. },
  156. _mouseUpHandler: function(mouseEvent) {
  157. // summary:
  158. // action performed on the map when a mouse up was performed
  159. // mouseEvent: the mouse event
  160. // tags:
  161. // private
  162. event.stop(mouseEvent);
  163. this._map.mapObj.marker._needTooltipRefresh = true;
  164. // disconnect listeners
  165. if (this._mouseDragListener) {
  166. connect.disconnect(this._mouseDragListener);
  167. this._mouseDragListener = null;
  168. }
  169. if (this._mouseUpClickListener) {
  170. connect.disconnect(this._mouseUpClickListener);
  171. this._mouseUpClickListener = null;
  172. }
  173. if (this._mouseUpListener) {
  174. connect.disconnect(this._mouseUpListener);
  175. this._mouseUpListener = null;
  176. }
  177. if (has("ie")) {
  178. this._map.surface.rawNode.releaseCapture();
  179. }
  180. },
  181. _getFeatureFromMouseEvent: function(mouseEvent) {
  182. // summary:
  183. // utility function to return the feature located at this mouse event location
  184. // mouseEvent: the mouse event
  185. // returns: dojox.geo.charting.Feature
  186. // the feature found if any, null otherwise.
  187. // tags:
  188. // private
  189. var feature = null;
  190. if (mouseEvent.gfxTarget && mouseEvent.gfxTarget.getParent) {
  191. feature = this._map.mapObj.features[mouseEvent.gfxTarget.getParent().id];
  192. }
  193. return feature;
  194. },
  195. _mouseMoveHandler: function(mouseEvent) {
  196. // summary:
  197. // action performed on the map when a mouse move was performed
  198. // mouseEvent: the mouse event
  199. // tags:
  200. // private
  201. // do nothing more if dragging
  202. if (this._mouseDragListener && this._panEnabled) {
  203. return;
  204. }
  205. // hover and highlight
  206. var feature = this._getFeatureFromMouseEvent(mouseEvent);
  207. // set/unset highlight
  208. if (feature != this._currentFeature) {
  209. if (this._currentFeature) {
  210. // mouse leaving component
  211. this._currentFeature._onmouseoutHandler();
  212. }
  213. this._currentFeature = feature;
  214. if (feature)
  215. feature._onmouseoverHandler();
  216. }
  217. if (feature)
  218. feature._onmousemoveHandler(mouseEvent);
  219. },
  220. _mouseDragHandler: function(mouseEvent){
  221. // summary:
  222. // action performed on the map when a mouse drag was performed
  223. // mouseEvent: the mouse event
  224. // tags:
  225. // private
  226. // prevent browser interaction
  227. event.stop(mouseEvent);
  228. // find out if this the movement discards the "mouse click" gesture
  229. var dx = Math.abs(mouseEvent.pageX - this._screenClickLocation.x);
  230. var dy = Math.abs(mouseEvent.pageY - this._screenClickLocation.y);
  231. if (!this._cancelMouseClick && (dx > this.mouseClickThreshold || dy > this.mouseClickThreshold)) {
  232. // cancel mouse click
  233. this._cancelMouseClick = true;
  234. if (this._panEnabled) {
  235. this._map.mapObj.marker.hide();
  236. }
  237. }
  238. if (!this._panEnabled)
  239. return;
  240. var cBounds = this._map._getContainerBounds();
  241. var offX = mouseEvent.pageX - cBounds.x,
  242. offY = mouseEvent.pageY - cBounds.y;
  243. // compute map offset
  244. var mapPoint = this._map.screenCoordsToMapCoords(offX,offY);
  245. var mapOffsetX = mapPoint.x - this._mapClickLocation.x;
  246. var mapOffsetY = mapPoint.y - this._mapClickLocation.y;
  247. // adjust map center
  248. var currentMapCenter = this._map.getMapCenter();
  249. this._map.setMapCenter(currentMapCenter.x - mapOffsetX, currentMapCenter.y - mapOffsetY);
  250. },
  251. _mouseWheelHandler: function(mouseEvent) {
  252. // summary:
  253. // action performed on the map when a mouse wheel up/down was performed
  254. // mouseEvent: the mouse event
  255. // tags:
  256. // private
  257. // prevent browser interaction
  258. event.stop(mouseEvent);
  259. // hide tooltip
  260. this._map.mapObj.marker.hide();
  261. // event coords within component
  262. var containerBounds = this._map._getContainerBounds();
  263. var offX = mouseEvent.pageX - containerBounds.x,
  264. offY = mouseEvent.pageY - containerBounds.y;
  265. // current map point before zooming
  266. var invariantMapPoint = this._map.screenCoordsToMapCoords(offX,offY);
  267. // zoom increment power
  268. var power = mouseEvent[(has("mozilla") ? "detail" : "wheelDelta")] / (has("mozilla") ? - 3 : 120) ;
  269. var scaleFactor = Math.pow(1.2,power);
  270. this._map.setMapScaleAt(this._map.getMapScale()*scaleFactor ,invariantMapPoint.x,invariantMapPoint.y,false);
  271. this._map.mapObj.marker._needTooltipRefresh = true;
  272. }
  273. });
  274. });