dragToScroll.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import Hooks from './../../pluginHooks';
  2. import EventManager from './../../eventManager';
  3. import { registerPlugin } from './../../plugins';
  4. /**
  5. * @description
  6. * Plugin used to scroll Handsontable by selecting a cell and dragging outside of the visible viewport.
  7. *
  8. * @private
  9. * @class DragToScroll
  10. * @plugin DragToScroll
  11. */
  12. function DragToScroll() {
  13. this.boundaries = null;
  14. this.callback = null;
  15. }
  16. /**
  17. * @param boundaries {Object} compatible with getBoundingClientRect
  18. */
  19. DragToScroll.prototype.setBoundaries = function (boundaries) {
  20. this.boundaries = boundaries;
  21. };
  22. /**
  23. * @param callback {Function}
  24. */
  25. DragToScroll.prototype.setCallback = function (callback) {
  26. this.callback = callback;
  27. };
  28. /**
  29. * Check if mouse position (x, y) is outside of the viewport
  30. * @param x
  31. * @param y
  32. */
  33. DragToScroll.prototype.check = function (x, y) {
  34. var diffX = 0;
  35. var diffY = 0;
  36. if (y < this.boundaries.top) {
  37. // y is less than top
  38. diffY = y - this.boundaries.top;
  39. } else if (y > this.boundaries.bottom) {
  40. // y is more than bottom
  41. diffY = y - this.boundaries.bottom;
  42. }
  43. if (x < this.boundaries.left) {
  44. // x is less than left
  45. diffX = x - this.boundaries.left;
  46. } else if (x > this.boundaries.right) {
  47. // x is more than right
  48. diffX = x - this.boundaries.right;
  49. }
  50. this.callback(diffX, diffY);
  51. };
  52. var dragToScroll;
  53. var instance;
  54. var setupListening = function setupListening(instance) {
  55. instance.dragToScrollListening = false;
  56. var scrollHandler = instance.view.wt.wtTable.holder; // native scroll
  57. dragToScroll = new DragToScroll();
  58. if (scrollHandler === window) {
  59. // not much we can do currently
  60. return;
  61. }
  62. dragToScroll.setBoundaries(scrollHandler.getBoundingClientRect());
  63. dragToScroll.setCallback(function (scrollX, scrollY) {
  64. if (scrollX < 0) {
  65. scrollHandler.scrollLeft -= 50;
  66. } else if (scrollX > 0) {
  67. scrollHandler.scrollLeft += 50;
  68. }
  69. if (scrollY < 0) {
  70. scrollHandler.scrollTop -= 20;
  71. } else if (scrollY > 0) {
  72. scrollHandler.scrollTop += 20;
  73. }
  74. });
  75. instance.dragToScrollListening = true;
  76. };
  77. Hooks.getSingleton().add('afterInit', function () {
  78. var instance = this;
  79. var eventManager = new EventManager(this);
  80. eventManager.addEventListener(document, 'mouseup', function () {
  81. instance.dragToScrollListening = false;
  82. });
  83. eventManager.addEventListener(document, 'mousemove', function (event) {
  84. if (instance.dragToScrollListening) {
  85. dragToScroll.check(event.clientX, event.clientY);
  86. }
  87. });
  88. });
  89. Hooks.getSingleton().add('afterDestroy', function () {
  90. new EventManager(this).clear();
  91. });
  92. Hooks.getSingleton().add('afterOnCellMouseDown', function () {
  93. setupListening(this);
  94. });
  95. Hooks.getSingleton().add('afterOnCellCornerMouseDown', function () {
  96. setupListening(this);
  97. });
  98. export default DragToScroll;