GridSnapping.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. import {
  2. setSnapped,
  3. isSnapped
  4. } from '../snapping/SnapUtil';
  5. import { isCmd } from '../keyboard/KeyboardUtil';
  6. import {
  7. assign,
  8. isNumber
  9. } from 'min-dash';
  10. import {
  11. SPACING,
  12. quantize
  13. } from './GridUtil';
  14. var LOWER_PRIORITY = 1200;
  15. var LOW_PRIORITY = 800;
  16. /**
  17. * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
  18. * and connection segments.
  19. */
  20. export default function GridSnapping(elementRegistry, eventBus, config) {
  21. var active = !config || config.active !== false;
  22. this._eventBus = eventBus;
  23. var self = this;
  24. eventBus.on('diagram.init', LOW_PRIORITY, function() {
  25. self.setActive(active);
  26. });
  27. eventBus.on([
  28. 'create.move',
  29. 'create.end',
  30. 'bendpoint.move.move',
  31. 'bendpoint.move.end',
  32. 'connect.move',
  33. 'connect.end',
  34. 'connectionSegment.move.move',
  35. 'connectionSegment.move.end',
  36. 'resize.move',
  37. 'resize.end',
  38. 'shape.move.move',
  39. 'shape.move.end'
  40. ], LOWER_PRIORITY, function(event) {
  41. var originalEvent = event.originalEvent;
  42. if (!self.active || (originalEvent && isCmd(originalEvent))) {
  43. return;
  44. }
  45. var context = event.context,
  46. gridSnappingContext = context.gridSnappingContext;
  47. if (!gridSnappingContext) {
  48. gridSnappingContext = context.gridSnappingContext = {};
  49. }
  50. [ 'x', 'y' ].forEach(function(axis) {
  51. var options = {};
  52. // allow snapping with offset
  53. var snapOffset = getSnapOffset(event, axis, elementRegistry);
  54. if (snapOffset) {
  55. options.offset = snapOffset;
  56. }
  57. // allow snapping with min and max
  58. var snapConstraints = getSnapConstraints(event, axis);
  59. if (snapConstraints) {
  60. assign(options, snapConstraints);
  61. }
  62. if (!isSnapped(event, axis)) {
  63. self.snapEvent(event, axis, options);
  64. }
  65. });
  66. });
  67. }
  68. /**
  69. * Snap an events x or y with optional min, max and offset.
  70. *
  71. * @param {Object} event
  72. * @param {string} axis
  73. * @param {number} [options.min]
  74. * @param {number} [options.max]
  75. * @param {number} [options.offset]
  76. */
  77. GridSnapping.prototype.snapEvent = function(event, axis, options) {
  78. var snappedValue = this.snapValue(event[ axis ], options);
  79. setSnapped(event, axis, snappedValue);
  80. };
  81. /**
  82. * Expose grid spacing for third parties (i.e. extensions).
  83. *
  84. * @return {number} spacing of grid dots
  85. */
  86. GridSnapping.prototype.getGridSpacing = function() {
  87. return SPACING;
  88. };
  89. /**
  90. * Snap value with optional min, max and offset.
  91. *
  92. * @param {number} value
  93. * @param {Object} options
  94. * @param {number} [options.min]
  95. * @param {number} [options.max]
  96. * @param {number} [options.offset]
  97. */
  98. GridSnapping.prototype.snapValue = function(value, options) {
  99. var offset = 0;
  100. if (options && options.offset) {
  101. offset = options.offset;
  102. }
  103. value += offset;
  104. value = quantize(value, SPACING);
  105. var min, max;
  106. if (options && options.min) {
  107. min = options.min;
  108. if (isNumber(min)) {
  109. min = quantize(min + offset, SPACING, 'ceil');
  110. value = Math.max(value, min);
  111. }
  112. }
  113. if (options && options.max) {
  114. max = options.max;
  115. if (isNumber(max)) {
  116. max = quantize(max + offset, SPACING, 'floor');
  117. value = Math.min(value, max);
  118. }
  119. }
  120. value -= offset;
  121. return value;
  122. };
  123. GridSnapping.prototype.isActive = function() {
  124. return this.active;
  125. };
  126. GridSnapping.prototype.setActive = function(active) {
  127. this.active = active;
  128. this._eventBus.fire('gridSnapping.toggle', { active: active });
  129. };
  130. GridSnapping.prototype.toggleActive = function() {
  131. this.setActive(!this.active);
  132. };
  133. GridSnapping.$inject = [
  134. 'elementRegistry',
  135. 'eventBus',
  136. 'config.gridSnapping'
  137. ];
  138. // helpers //////////
  139. /**
  140. * Get minimum and maximum snap constraints.
  141. * Constraints are cached.
  142. *
  143. * @param {Object} event
  144. * @param {Object} event.context
  145. * @param {string} axis
  146. *
  147. * @returns {boolean|Object}
  148. */
  149. function getSnapConstraints(event, axis) {
  150. var context = event.context,
  151. createConstraints = context.createConstraints,
  152. resizeConstraints = context.resizeConstraints || {},
  153. gridSnappingContext = context.gridSnappingContext,
  154. snapConstraints = gridSnappingContext.snapConstraints;
  155. // cache snap constraints
  156. if (snapConstraints && snapConstraints[ axis ]) {
  157. return snapConstraints[ axis ];
  158. }
  159. if (!snapConstraints) {
  160. snapConstraints = gridSnappingContext.snapConstraints = {};
  161. }
  162. if (!snapConstraints[ axis ]) {
  163. snapConstraints[ axis ] = {};
  164. }
  165. var direction = context.direction;
  166. // create
  167. if (createConstraints) {
  168. if (isHorizontal(axis)) {
  169. snapConstraints.x.min = createConstraints.left;
  170. snapConstraints.x.max = createConstraints.right;
  171. } else {
  172. snapConstraints.y.min = createConstraints.top;
  173. snapConstraints.y.max = createConstraints.bottom;
  174. }
  175. }
  176. // resize
  177. var minResizeConstraints = resizeConstraints.min,
  178. maxResizeConstraints = resizeConstraints.max;
  179. if (minResizeConstraints) {
  180. if (isHorizontal(axis)) {
  181. if (isWest(direction)) {
  182. snapConstraints.x.max = minResizeConstraints.left;
  183. } else {
  184. snapConstraints.x.min = minResizeConstraints.right;
  185. }
  186. } else {
  187. if (isNorth(direction)) {
  188. snapConstraints.y.max = minResizeConstraints.top;
  189. } else {
  190. snapConstraints.y.min = minResizeConstraints.bottom;
  191. }
  192. }
  193. }
  194. if (maxResizeConstraints) {
  195. if (isHorizontal(axis)) {
  196. if (isWest(direction)) {
  197. snapConstraints.x.min = maxResizeConstraints.left;
  198. } else {
  199. snapConstraints.x.max = maxResizeConstraints.right;
  200. }
  201. } else {
  202. if (isNorth(direction)) {
  203. snapConstraints.y.min = maxResizeConstraints.top;
  204. } else {
  205. snapConstraints.y.max = maxResizeConstraints.bottom;
  206. }
  207. }
  208. }
  209. return snapConstraints[ axis ];
  210. }
  211. /**
  212. * Get snap offset.
  213. * Offset is cached.
  214. *
  215. * @param {Object} event
  216. * @param {string} axis
  217. * @param {ElementRegistry} elementRegistry
  218. *
  219. * @returns {number}
  220. */
  221. function getSnapOffset(event, axis, elementRegistry) {
  222. var context = event.context,
  223. shape = event.shape,
  224. gridSnappingContext = context.gridSnappingContext,
  225. snapLocation = gridSnappingContext.snapLocation,
  226. snapOffset = gridSnappingContext.snapOffset;
  227. // cache snap offset
  228. if (snapOffset && isNumber(snapOffset[ axis ])) {
  229. return snapOffset[ axis ];
  230. }
  231. if (!snapOffset) {
  232. snapOffset = gridSnappingContext.snapOffset = {};
  233. }
  234. if (!isNumber(snapOffset[ axis ])) {
  235. snapOffset[ axis ] = 0;
  236. }
  237. if (!shape) {
  238. return snapOffset[ axis ];
  239. }
  240. if (!elementRegistry.get(shape.id)) {
  241. if (isHorizontal(axis)) {
  242. snapOffset[ axis ] += shape[ axis ] + shape.width / 2;
  243. } else {
  244. snapOffset[ axis ] += shape[ axis ] + shape.height / 2;
  245. }
  246. }
  247. if (!snapLocation) {
  248. return snapOffset[ axis ];
  249. }
  250. if (axis === 'x') {
  251. if (/left/.test(snapLocation)) {
  252. snapOffset[ axis ] -= shape.width / 2;
  253. } else if (/right/.test(snapLocation)) {
  254. snapOffset[ axis ] += shape.width / 2;
  255. }
  256. } else {
  257. if (/top/.test(snapLocation)) {
  258. snapOffset[ axis ] -= shape.height / 2;
  259. } else if (/bottom/.test(snapLocation)) {
  260. snapOffset[ axis ] += shape.height / 2;
  261. }
  262. }
  263. return snapOffset[ axis ];
  264. }
  265. function isHorizontal(axis) {
  266. return axis === 'x';
  267. }
  268. function isNorth(direction) {
  269. return direction.indexOf('n') !== -1;
  270. }
  271. function isWest(direction) {
  272. return direction.indexOf('w') !== -1;
  273. }