Snapping.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import {
  2. bind,
  3. debounce,
  4. forEach,
  5. isNumber,
  6. isObject
  7. } from 'min-dash';
  8. import {
  9. isSnapped,
  10. setSnapped
  11. } from './SnapUtil';
  12. import {
  13. append as svgAppend,
  14. attr as svgAttr,
  15. classes as svgClasses,
  16. create as svgCreate
  17. } from 'tiny-svg';
  18. var SNAP_TOLERANCE = 7;
  19. export var SNAP_LINE_HIDE_DELAY = 1000;
  20. /**
  21. * Generic snapping feature.
  22. *
  23. * @param {EventBus} eventBus
  24. * @param {Canvas} canvas
  25. */
  26. export default function Snapping(canvas) {
  27. this._canvas = canvas;
  28. // delay hide by 1000 seconds since last snap
  29. this._asyncHide = debounce(bind(this.hide, this), SNAP_LINE_HIDE_DELAY);
  30. }
  31. Snapping.$inject = [ 'canvas' ];
  32. /**
  33. * Snap an event to given snap points.
  34. *
  35. * @param {Event} event
  36. * @param {SnapPoints} snapPoints
  37. */
  38. Snapping.prototype.snap = function(event, snapPoints) {
  39. var context = event.context,
  40. snapContext = context.snapContext,
  41. snapLocations = snapContext.getSnapLocations();
  42. var snapping = {
  43. x: isSnapped(event, 'x'),
  44. y: isSnapped(event, 'y')
  45. };
  46. forEach(snapLocations, function(location) {
  47. var snapOrigin = snapContext.getSnapOrigin(location);
  48. var snapCurrent = {
  49. x: event.x + snapOrigin.x,
  50. y: event.y + snapOrigin.y
  51. };
  52. // snap both axis if not snapped already
  53. forEach([ 'x', 'y' ], function(axis) {
  54. var locationSnapping;
  55. if (!snapping[axis]) {
  56. locationSnapping = snapPoints.snap(snapCurrent, location, axis, SNAP_TOLERANCE);
  57. if (locationSnapping !== undefined) {
  58. snapping[axis] = {
  59. value: locationSnapping,
  60. originValue: locationSnapping - snapOrigin[axis]
  61. };
  62. }
  63. }
  64. });
  65. // no need to continue snapping
  66. if (snapping.x && snapping.y) {
  67. return false;
  68. }
  69. });
  70. // show snap lines
  71. this.showSnapLine('vertical', snapping.x && snapping.x.value);
  72. this.showSnapLine('horizontal', snapping.y && snapping.y.value);
  73. // snap event
  74. forEach([ 'x', 'y' ], function(axis) {
  75. var axisSnapping = snapping[axis];
  76. if (isObject(axisSnapping)) {
  77. setSnapped(event, axis, axisSnapping.originValue);
  78. }
  79. });
  80. };
  81. Snapping.prototype._createLine = function(orientation) {
  82. var root = this._canvas.getLayer('snap');
  83. var line = svgCreate('path');
  84. svgAttr(line, { d: 'M0,0 L0,0' });
  85. svgClasses(line).add('djs-snap-line');
  86. svgAppend(root, line);
  87. return {
  88. update: function(position) {
  89. if (!isNumber(position)) {
  90. svgAttr(line, { display: 'none' });
  91. } else {
  92. if (orientation === 'horizontal') {
  93. svgAttr(line, {
  94. d: 'M-100000,' + position + ' L+100000,' + position,
  95. display: ''
  96. });
  97. } else {
  98. svgAttr(line, {
  99. d: 'M ' + position + ',-100000 L ' + position + ', +100000',
  100. display: ''
  101. });
  102. }
  103. }
  104. }
  105. };
  106. };
  107. Snapping.prototype._createSnapLines = function() {
  108. this._snapLines = {
  109. horizontal: this._createLine('horizontal'),
  110. vertical: this._createLine('vertical')
  111. };
  112. };
  113. Snapping.prototype.showSnapLine = function(orientation, position) {
  114. var line = this.getSnapLine(orientation);
  115. if (line) {
  116. line.update(position);
  117. }
  118. this._asyncHide();
  119. };
  120. Snapping.prototype.getSnapLine = function(orientation) {
  121. if (!this._snapLines) {
  122. this._createSnapLines();
  123. }
  124. return this._snapLines[orientation];
  125. };
  126. Snapping.prototype.hide = function() {
  127. forEach(this._snapLines, function(snapLine) {
  128. snapLine.update();
  129. });
  130. };