AlignElementsContextPadProvider.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import {
  2. assign
  3. } from 'min-dash';
  4. import ICONS from './AlignElementsIcons';
  5. /**
  6. * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
  7. * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').default} ContextPad
  8. * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu
  9. * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
  10. *
  11. * @typedef {import('../../model/Types').Element} Element
  12. * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').ContextPadEntries} ContextPadEntries
  13. * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default} ContextPadProvider
  14. */
  15. var LOW_PRIORITY = 900;
  16. /**
  17. * A provider for the `Align elements` context pad entry.
  18. *
  19. * @implements {ContextPadProvider}
  20. *
  21. * @param {ContextPad} contextPad
  22. * @param {PopupMenu} popupMenu
  23. * @param {Translate} translate
  24. * @param {Canvas} canvas
  25. */
  26. export default function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
  27. contextPad.registerProvider(LOW_PRIORITY, this);
  28. this._contextPad = contextPad;
  29. this._popupMenu = popupMenu;
  30. this._translate = translate;
  31. this._canvas = canvas;
  32. }
  33. AlignElementsContextPadProvider.$inject = [
  34. 'contextPad',
  35. 'popupMenu',
  36. 'translate',
  37. 'canvas'
  38. ];
  39. /**
  40. * @param {Element[]} elements
  41. *
  42. * @return {ContextPadEntries}
  43. */
  44. AlignElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
  45. var actions = {};
  46. if (this._isAllowed(elements)) {
  47. assign(actions, this._getEntries(elements));
  48. }
  49. return actions;
  50. };
  51. AlignElementsContextPadProvider.prototype._isAllowed = function(elements) {
  52. return !this._popupMenu.isEmpty(elements, 'align-elements');
  53. };
  54. AlignElementsContextPadProvider.prototype._getEntries = function() {
  55. var self = this;
  56. return {
  57. 'align-elements': {
  58. group: 'align-elements',
  59. title: self._translate('Align elements'),
  60. html: `<div class="entry">${ICONS['align']}</div>`,
  61. action: {
  62. click: function(event, target) {
  63. var position = self._getMenuPosition(target);
  64. assign(position, {
  65. cursor: {
  66. x: event.x,
  67. y: event.y
  68. }
  69. });
  70. self._popupMenu.open(target, 'align-elements', position);
  71. }
  72. }
  73. }
  74. };
  75. };
  76. AlignElementsContextPadProvider.prototype._getMenuPosition = function(elements) {
  77. var Y_OFFSET = 5;
  78. var pad = this._contextPad.getPad(elements).html;
  79. var padRect = pad.getBoundingClientRect();
  80. var pos = {
  81. x: padRect.left,
  82. y: padRect.bottom + Y_OFFSET
  83. };
  84. return pos;
  85. };