feat: implement rules for alignment and distribution

Closes #1691

assets/bpmn-js.css

@@ -129,10 +129,10 @@
 }
 
 [data-popup="align-elements"] .djs-popup-body .entry {
-  height: 22px;
-  width: 22px;
+  height: 20px;
+  width: 20px;
 
-  padding: 8px 10px;
+  padding: 6px 8px;
 }
 
 [data-popup="align-elements"] .djs-popup-body .entry img {

lib/features/align-elements/AlignElementsMenuProvider.js

@@ -17,19 +17,21 @@ var ALIGNMENT_OPTIONS = [
 /**
  * A provider for align elements popup menu.
  */
-export default function AlignElementsMenuProvider(popupMenu, alignElements, translate) {
+export default function AlignElementsMenuProvider(popupMenu, alignElements, translate, rules) {
 
   this._alignElements = alignElements;
   this._translate = translate;
   this._popupMenu = popupMenu;
+  this._rules = rules;
 
   popupMenu.registerProvider('align-elements', this);
 }
 
 AlignElementsMenuProvider.$inject = [
   'popupMenu',
   'alignElements',
-  'translate'
+  'translate',
+  'rules'
 ];
 
 AlignElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
@@ -43,9 +45,7 @@ AlignElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
 };
 
 AlignElementsMenuProvider.prototype._isAllowed = function(elements) {
-
-  // TODO(barmac): implement
-  return true;
+  return this._rules.allowed('elements.align', { elements: elements });
 };
 
 AlignElementsMenuProvider.prototype._getEntries = function(elements) {

lib/features/align-elements/BpmnAlignElements.js

@@ -0,0 +1,39 @@
+import inherits from 'inherits-browser';
+
+import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
+import { getParents } from 'diagram-js/lib/util/Elements';
+
+import {
+  filter
+} from 'min-dash';
+
+/**
+ * Rule provider for alignment of BPMN elements.
+ */
+export default function BpmnAlignElements(eventBus) {
+  RuleProvider.call(this, eventBus);
+}
+
+BpmnAlignElements.$inject = [ 'eventBus' ];
+
+inherits(BpmnAlignElements, RuleProvider);
+
+BpmnAlignElements.prototype.init = function() {
+  this.addRule('elements.align', function(context) {
+    var elements = context.elements;
+
+    // filter out elements which cannot be aligned
+    var filteredElements = filter(elements, function(element) {
+      return !(element.waypoints || element.host || element.labelTarget);
+    });
+
+    // filter out elements which are children of any of the selected elements
+    filteredElements = getParents(filteredElements);
+
+    if (filteredElements.length < 2) {
+      return false;
+    }
+
+    return filteredElements;
+  });
+};

lib/features/align-elements/index.js

@@ -4,6 +4,7 @@ import PopupMenuModule from 'diagram-js/lib/features/popup-menu';
 
 import AlignElementsContextPadProvider from './AlignElementsContextPadProvider';
 import AlignElementsMenuProvider from './AlignElementsMenuProvider';
+import BpmnAlignElements from './BpmnAlignElements';
 
 export default {
   __depends__: [
@@ -13,8 +14,10 @@ export default {
   ],
   __init__: [
     'alignElementsContextPadProvider',
-    'alignElementsMenuProvider'
+    'alignElementsMenuProvider',
+    'bpmnAlignElements'
   ],
   alignElementsContextPadProvider: [ 'type', AlignElementsContextPadProvider ],
-  alignElementsMenuProvider: [ 'type', AlignElementsMenuProvider ]
+  alignElementsMenuProvider: [ 'type', AlignElementsMenuProvider ],
+  bpmnAlignElements: [ 'type', BpmnAlignElements]
 };