MoveCanvas.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import {
  2. set as cursorSet,
  3. unset as cursorUnset
  4. } from '../../util/Cursor';
  5. import {
  6. install as installClickTrap
  7. } from '../../util/ClickTrap';
  8. import {
  9. delta as deltaPos
  10. } from '../../util/PositionUtil';
  11. import {
  12. event as domEvent,
  13. closest as domClosest
  14. } from 'min-dom';
  15. import {
  16. toPoint
  17. } from '../../util/Event';
  18. var THRESHOLD = 15;
  19. /**
  20. * Move the canvas via mouse.
  21. *
  22. * @param {EventBus} eventBus
  23. * @param {Canvas} canvas
  24. */
  25. export default function MoveCanvas(eventBus, canvas) {
  26. var context;
  27. // listen for move on element mouse down;
  28. // allow others to hook into the event before us though
  29. // (dragging / element moving will do this)
  30. eventBus.on('element.mousedown', 500, function(e) {
  31. return handleStart(e.originalEvent);
  32. });
  33. function handleMove(event) {
  34. var start = context.start,
  35. position = toPoint(event),
  36. delta = deltaPos(position, start);
  37. if (!context.dragging && length(delta) > THRESHOLD) {
  38. context.dragging = true;
  39. installClickTrap(eventBus);
  40. cursorSet('grab');
  41. }
  42. if (context.dragging) {
  43. var lastPosition = context.last || context.start;
  44. delta = deltaPos(position, lastPosition);
  45. canvas.scroll({
  46. dx: delta.x,
  47. dy: delta.y
  48. });
  49. context.last = position;
  50. }
  51. // prevent select
  52. event.preventDefault();
  53. }
  54. function handleEnd(event) {
  55. domEvent.unbind(document, 'mousemove', handleMove);
  56. domEvent.unbind(document, 'mouseup', handleEnd);
  57. context = null;
  58. cursorUnset();
  59. }
  60. function handleStart(event) {
  61. // event is already handled by '.djs-draggable'
  62. if (domClosest(event.target, '.djs-draggable')) {
  63. return;
  64. }
  65. // reject non-left left mouse button or modifier key
  66. if (event.button || event.ctrlKey || event.shiftKey || event.altKey) {
  67. return;
  68. }
  69. context = {
  70. start: toPoint(event)
  71. };
  72. domEvent.bind(document, 'mousemove', handleMove);
  73. domEvent.bind(document, 'mouseup', handleEnd);
  74. // we've handled the event
  75. return true;
  76. }
  77. }
  78. MoveCanvas.$inject = [
  79. 'eventBus',
  80. 'canvas'
  81. ];
  82. // helpers ///////
  83. function length(point) {
  84. return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
  85. }