Drag.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the Clear BSD license.
  3. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/Handler.js
  7. */
  8. /**
  9. * Class: OpenLayers.Handler.Drag
  10. * The drag handler is used to deal with sequences of browser events related
  11. * to dragging. The handler is used by controls that want to know when
  12. * a drag sequence begins, when a drag is happening, and when it has
  13. * finished.
  14. *
  15. * Controls that use the drag handler typically construct it with callbacks
  16. * for 'down', 'move', and 'done'. Callbacks for these keys are called
  17. * when the drag begins, with each move, and when the drag is done. In
  18. * addition, controls can have callbacks keyed to 'up' and 'out' if they
  19. * care to differentiate between the types of events that correspond with
  20. * the end of a drag sequence. If no drag actually occurs (no mouse move)
  21. * the 'down' and 'up' callbacks will be called, but not the 'done'
  22. * callback.
  23. *
  24. * Create a new drag handler with the <OpenLayers.Handler.Drag> constructor.
  25. *
  26. * Inherits from:
  27. * - <OpenLayers.Handler>
  28. */
  29. OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
  30. /**
  31. * Property: started
  32. * {Boolean} When a mousedown or touchstart event is received, we want to
  33. * record it, but not set 'dragging' until the mouse moves after starting.
  34. */
  35. started: false,
  36. /**
  37. * Property: stopDown
  38. * {Boolean} Stop propagation of mousedown events from getting to listeners
  39. * on the same element. Default is true.
  40. */
  41. stopDown: true,
  42. /**
  43. * Property: dragging
  44. * {Boolean}
  45. */
  46. dragging: false,
  47. /**
  48. * Property: touch
  49. * {Boolean} When a touchstart event is fired, touch will be true and all
  50. * mouse related listeners will do nothing.
  51. */
  52. touch: false,
  53. /**
  54. * Property: last
  55. * {<OpenLayers.Pixel>} The last pixel location of the drag.
  56. */
  57. last: null,
  58. /**
  59. * Property: start
  60. * {<OpenLayers.Pixel>} The first pixel location of the drag.
  61. */
  62. start: null,
  63. /**
  64. * Property: lastMoveEvt
  65. * {Object} The last mousemove event that occurred. Used to
  66. * position the map correctly when our "delay drag"
  67. * timeout expired.
  68. */
  69. lastMoveEvt: null,
  70. /**
  71. * Property: oldOnselectstart
  72. * {Function}
  73. */
  74. oldOnselectstart: null,
  75. /**
  76. * Property: interval
  77. * {Integer} In order to increase performance, an interval (in
  78. * milliseconds) can be set to reduce the number of drag events
  79. * called. If set, a new drag event will not be set until the
  80. * interval has passed.
  81. * Defaults to 0, meaning no interval.
  82. */
  83. interval: 0,
  84. /**
  85. * Property: timeoutId
  86. * {String} The id of the timeout used for the mousedown interval.
  87. * This is "private", and should be left alone.
  88. */
  89. timeoutId: null,
  90. /**
  91. * APIProperty: documentDrag
  92. * {Boolean} If set to true, the handler will also handle mouse moves when
  93. * the cursor has moved out of the map viewport. Default is false.
  94. */
  95. documentDrag: false,
  96. /**
  97. * Property: documentEvents
  98. * {Boolean} Are we currently observing document events?
  99. */
  100. documentEvents: null,
  101. /**
  102. * Constructor: OpenLayers.Handler.Drag
  103. * Returns OpenLayers.Handler.Drag
  104. *
  105. * Parameters:
  106. * control - {<OpenLayers.Control>} The control that is making use of
  107. * this handler. If a handler is being used without a control, the
  108. * handlers setMap method must be overridden to deal properly with
  109. * the map.
  110. * callbacks - {Object} An object containing a single function to be
  111. * called when the drag operation is finished. The callback should
  112. * expect to recieve a single argument, the pixel location of the event.
  113. * Callbacks for 'move' and 'done' are supported. You can also speficy
  114. * callbacks for 'down', 'up', and 'out' to respond to those events.
  115. * options - {Object}
  116. */
  117. initialize: function(control, callbacks, options) {
  118. OpenLayers.Handler.prototype.initialize.apply(this, arguments);
  119. if (this.documentDrag === true) {
  120. var me = this;
  121. this._docMove = function(evt) {
  122. me.mousemove({
  123. xy: {x: evt.clientX, y: evt.clientY},
  124. element: document
  125. });
  126. };
  127. this._docUp = function(evt) {
  128. me.mouseup({xy: {x: evt.clientX, y: evt.clientY}});
  129. };
  130. }
  131. },
  132. /**
  133. * Method: dragstart
  134. * This private method is factorized from mousedown and touchstart methods
  135. *
  136. * Parameters:
  137. * evt - {Event} The event
  138. *
  139. * Returns:
  140. * {Boolean} Let the event propagate.
  141. */
  142. dragstart: function (evt) {
  143. var propagate = true;
  144. this.dragging = false;
  145. if (this.checkModifiers(evt) &&
  146. (OpenLayers.Event.isLeftClick(evt) ||
  147. OpenLayers.Event.isSingleTouch(evt))) {
  148. this.started = true;
  149. this.start = evt.xy;
  150. this.last = evt.xy;
  151. OpenLayers.Element.addClass(
  152. this.map.viewPortDiv, "olDragDown"
  153. );
  154. this.down(evt);
  155. this.callback("down", [evt.xy]);
  156. OpenLayers.Event.stop(evt);
  157. if(!this.oldOnselectstart) {
  158. this.oldOnselectstart = document.onselectstart ?
  159. document.onselectstart : OpenLayers.Function.True;
  160. }
  161. document.onselectstart = OpenLayers.Function.False;
  162. propagate = !this.stopDown;
  163. } else {
  164. this.started = false;
  165. this.start = null;
  166. this.last = null;
  167. }
  168. return propagate;
  169. },
  170. /**
  171. * Method: dragmove
  172. * This private method is factorized from mousemove and touchmove methods
  173. *
  174. * Parameters:
  175. * evt - {Event} The event
  176. *
  177. * Returns:
  178. * {Boolean} Let the event propagate.
  179. */
  180. dragmove: function (evt) {
  181. this.lastMoveEvt = evt;
  182. if (this.started && !this.timeoutId && (evt.xy.x != this.last.x ||
  183. evt.xy.y != this.last.y)) {
  184. if(this.documentDrag === true && this.documentEvents) {
  185. if(evt.element === document) {
  186. this.adjustXY(evt);
  187. // do setEvent manually because the documentEvents are not
  188. // registered with the map
  189. this.setEvent(evt);
  190. } else {
  191. this.removeDocumentEvents();
  192. }
  193. }
  194. if (this.interval > 0) {
  195. this.timeoutId = setTimeout(
  196. OpenLayers.Function.bind(this.removeTimeout, this),
  197. this.interval);
  198. }
  199. this.dragging = true;
  200. this.move(evt);
  201. this.callback("move", [evt.xy]);
  202. if(!this.oldOnselectstart) {
  203. this.oldOnselectstart = document.onselectstart;
  204. document.onselectstart = OpenLayers.Function.False;
  205. }
  206. this.last = evt.xy;
  207. }
  208. return true;
  209. },
  210. /**
  211. * Method: dragend
  212. * This private method is factorized from mouseup and touchend methods
  213. *
  214. * Parameters:
  215. * evt - {Event} The event
  216. *
  217. * Returns:
  218. * {Boolean} Let the event propagate.
  219. */
  220. dragend: function (evt) {
  221. if (this.started) {
  222. if(this.documentDrag === true && this.documentEvents) {
  223. this.adjustXY(evt);
  224. this.removeDocumentEvents();
  225. }
  226. var dragged = (this.start != this.last);
  227. this.started = false;
  228. this.dragging = false;
  229. OpenLayers.Element.removeClass(
  230. this.map.viewPortDiv, "olDragDown"
  231. );
  232. this.up(evt);
  233. this.callback("up", [evt.xy]);
  234. if(dragged) {
  235. this.callback("done", [evt.xy]);
  236. }
  237. document.onselectstart = this.oldOnselectstart;
  238. }
  239. return true;
  240. },
  241. /**
  242. * The four methods below (down, move, up, and out) are used by subclasses
  243. * to do their own processing related to these mouse events.
  244. */
  245. /**
  246. * Method: down
  247. * This method is called during the handling of the mouse down event.
  248. * Subclasses can do their own processing here.
  249. *
  250. * Parameters:
  251. * evt - {Event} The mouse down event
  252. */
  253. down: function(evt) {
  254. },
  255. /**
  256. * Method: move
  257. * This method is called during the handling of the mouse move event.
  258. * Subclasses can do their own processing here.
  259. *
  260. * Parameters:
  261. * evt - {Event} The mouse move event
  262. *
  263. */
  264. move: function(evt) {
  265. },
  266. /**
  267. * Method: up
  268. * This method is called during the handling of the mouse up event.
  269. * Subclasses can do their own processing here.
  270. *
  271. * Parameters:
  272. * evt - {Event} The mouse up event
  273. */
  274. up: function(evt) {
  275. },
  276. /**
  277. * Method: out
  278. * This method is called during the handling of the mouse out event.
  279. * Subclasses can do their own processing here.
  280. *
  281. * Parameters:
  282. * evt - {Event} The mouse out event
  283. */
  284. out: function(evt) {
  285. },
  286. /**
  287. * The methods below are part of the magic of event handling. Because
  288. * they are named like browser events, they are registered as listeners
  289. * for the events they represent.
  290. */
  291. /**
  292. * Method: mousedown
  293. * Handle mousedown events
  294. *
  295. * Parameters:
  296. * evt - {Event}
  297. *
  298. * Returns:
  299. * {Boolean} Let the event propagate.
  300. */
  301. mousedown: function(evt) {
  302. return this.dragstart(evt);
  303. },
  304. /**
  305. * Method: touchstart
  306. * Handle touchstart events
  307. *
  308. * Parameters:
  309. * evt - {Event}
  310. *
  311. * Returns:
  312. * {Boolean} Let the event propagate.
  313. */
  314. touchstart: function(evt) {
  315. if (!this.touch) {
  316. this.touch = true;
  317. // unregister mouse listeners
  318. this.map.events.un({
  319. mousedown: this.mousedown,
  320. mouseup: this.mouseup,
  321. mousemove: this.mousemove,
  322. click: this.click,
  323. scope: this
  324. });
  325. }
  326. return this.dragstart(evt);
  327. },
  328. /**
  329. * Method: mousemove
  330. * Handle mousemove events
  331. *
  332. * Parameters:
  333. * evt - {Event}
  334. *
  335. * Returns:
  336. * {Boolean} Let the event propagate.
  337. */
  338. mousemove: function(evt) {
  339. return this.dragmove(evt);
  340. },
  341. /**
  342. * Method: touchmove
  343. * Handle touchmove events
  344. *
  345. * Parameters:
  346. * evt - {Event}
  347. *
  348. * Returns:
  349. * {Boolean} Let the event propagate.
  350. */
  351. touchmove: function(evt) {
  352. return this.dragmove(evt);
  353. },
  354. /**
  355. * Method: removeTimeout
  356. * Private. Called by mousemove() to remove the drag timeout.
  357. */
  358. removeTimeout: function() {
  359. this.timeoutId = null;
  360. // if timeout expires while we're still dragging (mouseup
  361. // hasn't occurred) then call mousemove to move to the
  362. // correct position
  363. if(this.dragging) {
  364. this.mousemove(this.lastMoveEvt);
  365. }
  366. },
  367. /**
  368. * Method: mouseup
  369. * Handle mouseup events
  370. *
  371. * Parameters:
  372. * evt - {Event}
  373. *
  374. * Returns:
  375. * {Boolean} Let the event propagate.
  376. */
  377. mouseup: function(evt) {
  378. return this.dragend(evt);
  379. },
  380. /**
  381. * Method: touchend
  382. * Handle touchend events
  383. *
  384. * Parameters:
  385. * evt - {Event}
  386. *
  387. * Returns:
  388. * {Boolean} Let the event propagate.
  389. */
  390. touchend: function(evt) {
  391. // override evt.xy with last position since touchend does not have
  392. // any touch position
  393. evt.xy = this.last;
  394. return this.dragend(evt);
  395. },
  396. /**
  397. * Method: mouseout
  398. * Handle mouseout events
  399. *
  400. * Parameters:
  401. * evt - {Event}
  402. *
  403. * Returns:
  404. * {Boolean} Let the event propagate.
  405. */
  406. mouseout: function (evt) {
  407. if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
  408. if(this.documentDrag === true) {
  409. this.addDocumentEvents();
  410. } else {
  411. var dragged = (this.start != this.last);
  412. this.started = false;
  413. this.dragging = false;
  414. OpenLayers.Element.removeClass(
  415. this.map.viewPortDiv, "olDragDown"
  416. );
  417. this.out(evt);
  418. this.callback("out", []);
  419. if(dragged) {
  420. this.callback("done", [evt.xy]);
  421. }
  422. if(document.onselectstart) {
  423. document.onselectstart = this.oldOnselectstart;
  424. }
  425. }
  426. }
  427. return true;
  428. },
  429. /**
  430. * Method: click
  431. * The drag handler captures the click event. If something else registers
  432. * for clicks on the same element, its listener will not be called
  433. * after a drag.
  434. *
  435. * Parameters:
  436. * evt - {Event}
  437. *
  438. * Returns:
  439. * {Boolean} Let the event propagate.
  440. */
  441. click: function (evt) {
  442. // let the click event propagate only if the mouse moved
  443. return (this.start == this.last);
  444. },
  445. /**
  446. * Method: activate
  447. * Activate the handler.
  448. *
  449. * Returns:
  450. * {Boolean} The handler was successfully activated.
  451. */
  452. activate: function() {
  453. var activated = false;
  454. if(OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
  455. this.dragging = false;
  456. activated = true;
  457. }
  458. return activated;
  459. },
  460. /**
  461. * Method: deactivate
  462. * Deactivate the handler.
  463. *
  464. * Returns:
  465. * {Boolean} The handler was successfully deactivated.
  466. */
  467. deactivate: function() {
  468. var deactivated = false;
  469. if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
  470. this.touch = false;
  471. this.started = false;
  472. this.dragging = false;
  473. this.start = null;
  474. this.last = null;
  475. deactivated = true;
  476. OpenLayers.Element.removeClass(
  477. this.map.viewPortDiv, "olDragDown"
  478. );
  479. }
  480. return deactivated;
  481. },
  482. /**
  483. * Method: adjustXY
  484. * Converts event coordinates that are relative to the document body to
  485. * ones that are relative to the map viewport. The latter is the default in
  486. * OpenLayers.
  487. *
  488. * Parameters:
  489. * evt - {Object}
  490. */
  491. adjustXY: function(evt) {
  492. var pos = OpenLayers.Util.pagePosition(this.map.viewPortDiv);
  493. evt.xy.x -= pos[0];
  494. evt.xy.y -= pos[1];
  495. },
  496. /**
  497. * Method: addDocumentEvents
  498. * Start observing document events when documentDrag is true and the mouse
  499. * cursor leaves the map viewport while dragging.
  500. */
  501. addDocumentEvents: function() {
  502. OpenLayers.Element.addClass(document.body, "olDragDown");
  503. this.documentEvents = true;
  504. OpenLayers.Event.observe(document, "mousemove", this._docMove);
  505. OpenLayers.Event.observe(document, "mouseup", this._docUp);
  506. },
  507. /**
  508. * Method: removeDocumentEvents
  509. * Stops observing document events when documentDrag is true and the mouse
  510. * cursor re-enters the map viewport while dragging.
  511. */
  512. removeDocumentEvents: function() {
  513. OpenLayers.Element.removeClass(document.body, "olDragDown");
  514. this.documentEvents = false;
  515. OpenLayers.Event.stopObserving(document, "mousemove", this._docMove);
  516. OpenLayers.Event.stopObserving(document, "mouseup", this._docUp);
  517. },
  518. CLASS_NAME: "OpenLayers.Handler.Drag"
  519. });