bpmn-js 9.2.2 → 9.3.2

package/lib/Modeler.js

@@ -10,7 +10,7 @@ import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
 import TouchModule from 'diagram-js/lib/navigation/touch';
 import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
 
-import AlignElementsModule from 'diagram-js/lib/features/align-elements';
+import AlignElementsModule from './features/align-elements';
 import AutoPlaceModule from './features/auto-place';
 import AutoResizeModule from './features/auto-resize';
 import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';

package/lib/features/align-elements/AlignElementsContextPadProvider.js

@@ -0,0 +1,87 @@
+import {
+  assign
+} from 'min-dash';
+
+import ICONS from './AlignElementsIcons';
+
+var LOW_PRIORITY = 900;
+
+/**
+ * A provider for align elements context pad button
+ */
+export default function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
+
+  contextPad.registerProvider(LOW_PRIORITY, this);
+
+  this._contextPad = contextPad;
+  this._popupMenu = popupMenu;
+  this._translate = translate;
+  this._canvas = canvas;
+}
+
+AlignElementsContextPadProvider.$inject = [
+  'contextPad',
+  'popupMenu',
+  'translate',
+  'canvas'
+];
+
+AlignElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+  var actions = {};
+
+  if (this._isAllowed(elements)) {
+    assign(actions, this._getEntries(elements));
+  }
+
+  return actions;
+};
+
+AlignElementsContextPadProvider.prototype._isAllowed = function(elements) {
+  return !this._popupMenu.isEmpty(elements, 'align-elements');
+};
+
+AlignElementsContextPadProvider.prototype._getEntries = function(elements) {
+  var self = this;
+
+  return {
+    'align-elements': {
+      group: 'align-elements',
+      title: self._translate('Align elements'),
+      imageUrl: ICONS['align'],
+      action: {
+        click: function(event, elements) {
+          var position = self._getMenuPosition(elements);
+
+          assign(position, {
+            cursor: {
+              x: event.x,
+              y: event.y
+            }
+          });
+
+          self._popupMenu.open(elements, 'align-elements', position);
+        }
+      }
+    }
+  };
+};
+
+AlignElementsContextPadProvider.prototype._getMenuPosition = function(elements) {
+  var Y_OFFSET = 5;
+
+  var diagramContainer = this._canvas.getContainer(),
+      pad = this._contextPad.getPad(elements).html;
+
+  var diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect();
+
+  var top = padRect.top - diagramRect.top;
+  var left = padRect.left - diagramRect.left;
+
+  var pos = {
+    x: left,
+    y: top + padRect.height + Y_OFFSET
+  };
+
+  return pos;
+};

package/lib/features/align-elements/AlignElementsIcons.js

@@ -0,0 +1,15 @@
+/**
+ * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
+ * and then replace respective icons with the optimized data URIs in `./dist`.
+ */
+var icons = {
+  align:  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202000%202000%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M200%20150v1700%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22700%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%221150%22%20width%3D%22700%22%20height%3D%22700%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  bottom: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%201650h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22350%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22850%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  center: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M900%20150v1500%22%2F%3E%3Crect%20x%3D%22250%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  left:   'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M100%20150v1500%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  right:  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M1650%20150v1500%22%2F%3E%3Crect%20x%3D%22350%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22850%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  top:    'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%20150h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22150%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22150%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  middle: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%20900h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22250%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22500%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E'
+};
+
+export default icons;

package/lib/features/align-elements/AlignElementsMenuProvider.js

@@ -0,0 +1,72 @@
+import ICONS from './AlignElementsIcons';
+
+import {
+  assign,
+  forEach,
+} from 'min-dash';
+
+var ALIGNMENT_OPTIONS = [
+  'left',
+  'center',
+  'right',
+  'top',
+  'middle',
+  'bottom'
+];
+
+/**
+ * A provider for align elements popup menu.
+ */
+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',
+  'rules'
+];
+
+AlignElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
+  var entries = {};
+
+  if (this._isAllowed(elements)) {
+    assign(entries, this._getEntries(elements));
+  }
+
+  return entries;
+};
+
+AlignElementsMenuProvider.prototype._isAllowed = function(elements) {
+  return this._rules.allowed('elements.align', { elements: elements });
+};
+
+AlignElementsMenuProvider.prototype._getEntries = function(elements) {
+  var alignElements = this._alignElements,
+      translate = this._translate,
+      popupMenu = this._popupMenu;
+
+  var entries = {};
+
+  forEach(ALIGNMENT_OPTIONS, function(alignment) {
+    entries[ 'align-elements-' + alignment ] = {
+      group: 'align',
+      title: translate('Align elements ' + alignment),
+      className: 'bjs-align-elements-menu-entry',
+      imageUrl: ICONS[alignment],
+      action: function(event, entry) {
+        alignElements.trigger(elements, alignment);
+        popupMenu.close();
+      }
+    };
+  });
+
+  return entries;
+};

package/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;
+  });
+};

package/lib/features/align-elements/index.js

@@ -0,0 +1,23 @@
+import AlignElementsModule from 'diagram-js/lib/features/align-elements';
+import ContextPadModule from 'diagram-js/lib/features/context-pad';
+import PopupMenuModule from 'diagram-js/lib/features/popup-menu';
+
+import AlignElementsContextPadProvider from './AlignElementsContextPadProvider';
+import AlignElementsMenuProvider from './AlignElementsMenuProvider';
+import BpmnAlignElements from './BpmnAlignElements';
+
+export default {
+  __depends__: [
+    AlignElementsModule,
+    ContextPadModule,
+    PopupMenuModule
+  ],
+  __init__: [
+    'alignElementsContextPadProvider',
+    'alignElementsMenuProvider',
+    'bpmnAlignElements'
+  ],
+  alignElementsContextPadProvider: [ 'type', AlignElementsContextPadProvider ],
+  alignElementsMenuProvider: [ 'type', AlignElementsMenuProvider ],
+  bpmnAlignElements: [ 'type', BpmnAlignElements]
+};

package/lib/features/align-elements/resources/align-bottom-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="150" y1="1650" x2="1650" y2="1650" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="150" y="350" width="600" height="1300" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="1050" y="850" width="600" height="800" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-horizontal-center-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="900" y1="150" x2="900" y2="1650" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="250" y="150" width="1300" height="600" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="500" y="1050" width="800" height="600" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-left-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="100" y1="150" x2="100" y2="1650" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="100" y="150" width="1300" height="600" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="100" y="1050" width="800" height="600" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-right-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="1650" y1="150" x2="1650" y2="1650" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="350" y="150" width="1300" height="600" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="850" y="1050" width="800" height="600" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+  <line x1="200" y1="150" x2="200" y2="1850" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="500" y="150" width="1300" height="700" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="500" y="1150" width="700" height="700" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-top-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="150" y1="150" x2="1650" y2="150" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="150" y="150" width="600" height="1300" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="1050" y="150" width="600" height="800" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/align-elements/resources/align-vertical-center-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <line x1="150" y1="900" x2="1650" y2="900" style="stroke:currentColor;stroke-width:100;stroke-linecap:round;"/>
+  <rect x="150" y="250" width="600" height="1300" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="1050" y="500" width="600" height="800" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/distribute-elements/BpmnDistributeElements.js

@@ -1,3 +1,8 @@
+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';
@@ -11,10 +16,19 @@ import {
  * Registers element exclude filters for elements that
  * currently do not support distribution.
  */
-export default function BpmnDistributeElements(distributeElements) {
+export default function BpmnDistributeElements(distributeElements, eventBus, rules) {
+  RuleProvider.call(this, eventBus);
+}
+
+BpmnDistributeElements.$inject = [ 'distributeElements', 'eventBus', 'rules' ];
+
+inherits(BpmnDistributeElements, RuleProvider);
+
+BpmnDistributeElements.prototype.init = function() {
+  this.addRule('elements.distribute', function(context) {
+    var elements = context.elements;
 
-  distributeElements.registerFilter(function(elements) {
-    return filter(elements, function(element) {
+    elements = filter(elements, function(element) {
       var cannotDistribute = isAny(element, [
         'bpmn:Association',
         'bpmn:BoundaryEvent',
@@ -22,14 +36,20 @@ export default function BpmnDistributeElements(distributeElements) {
         'bpmn:DataOutputAssociation',
         'bpmn:Lane',
         'bpmn:MessageFlow',
-        'bpmn:Participant',
         'bpmn:SequenceFlow',
         'bpmn:TextAnnotation'
       ]);
 
       return !(element.labelTarget || cannotDistribute);
     });
-  });
-}
 
-BpmnDistributeElements.$inject = [ 'distributeElements' ];
+    // filter out elements which are children of any of the selected elements
+    elements = getParents(elements);
+
+    if (elements.length < 3) {
+      return false;
+    }
+
+    return elements;
+  });
+};

package/lib/features/distribute-elements/DistributeElementsIcons.js

@@ -0,0 +1,10 @@
+/**
+ * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
+ * and then replace respective icons with the optimized data URIs in `./dist`.
+ */
+var icons = {
+  horizontal: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linejoin%3Around%22%20d%3D%22M450%20400V150h900v250%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22450%22%20width%3D%22600%22%20height%3D%221200%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22450%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+  vertical: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linejoin%3Around%22%20d%3D%22M400%201350H150V450h250%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%22150%22%20width%3D%221200%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
+};
+
+export default icons;

package/lib/features/distribute-elements/DistributeElementsMenuProvider.js

@@ -0,0 +1,69 @@
+import ICONS from './DistributeElementsIcons';
+
+import { assign } from 'min-dash';
+
+var LOW_PRIORITY = 900;
+
+/**
+ * A provider for distribute elements popup menu.
+ */
+export default function DistributeElementsMenuProvider(
+    popupMenu, distributeElements, translate, rules) {
+  this._distributeElements = distributeElements;
+  this._translate = translate;
+  this._popupMenu = popupMenu;
+  this._rules = rules;
+
+  popupMenu.registerProvider('align-elements', LOW_PRIORITY, this);
+}
+
+DistributeElementsMenuProvider.$inject = [
+  'popupMenu',
+  'distributeElements',
+  'translate',
+  'rules'
+];
+
+DistributeElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
+  var entries = {};
+
+  if (this._isAllowed(elements)) {
+    assign(entries, this._getEntries(elements));
+  }
+
+  return entries;
+};
+
+DistributeElementsMenuProvider.prototype._isAllowed = function(elements) {
+  return this._rules.allowed('elements.distribute', { elements: elements });
+};
+
+DistributeElementsMenuProvider.prototype._getEntries = function(elements) {
+  var distributeElements = this._distributeElements,
+      translate = this._translate,
+      popupMenu = this._popupMenu;
+
+  var entries = {
+    'distribute-elements-horizontal': {
+      group: 'distribute',
+      title: translate('Distribute elements horizontally'),
+      className: 'bjs-align-elements-menu-entry',
+      imageUrl: ICONS['horizontal'],
+      action: function(event, entry) {
+        distributeElements.trigger(elements, 'horizontal');
+        popupMenu.close();
+      }
+    },
+    'distribute-elements-vertical': {
+      group: 'distribute',
+      title: translate('Distribute elements vertically'),
+      imageUrl: ICONS['vertical'],
+      action: function(event, entry) {
+        distributeElements.trigger(elements, 'vertical');
+        popupMenu.close();
+      }
+    },
+  };
+
+  return entries;
+};

package/lib/features/distribute-elements/index.js

@@ -1,12 +1,19 @@
 import DistributeElementsModule from 'diagram-js/lib/features/distribute-elements';
+import PopupMenuModule from 'diagram-js/lib/features/popup-menu';
 
 import BpmnDistributeElements from './BpmnDistributeElements';
+import DistributeElementsMenuProvider from './DistributeElementsMenuProvider';
 
 
 export default {
   __depends__: [
+    PopupMenuModule,
     DistributeElementsModule
   ],
-  __init__: [ 'bpmnDistributeElements' ],
-  bpmnDistributeElements: [ 'type', BpmnDistributeElements ]
+  __init__: [
+    'bpmnDistributeElements',
+    'distributeElementsMenuProvider'
+  ],
+  bpmnDistributeElements: [ 'type', BpmnDistributeElements ],
+  distributeElementsMenuProvider: [ 'type', DistributeElementsMenuProvider ]
 };

package/lib/features/distribute-elements/resources/distribute-horizontally-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <polyline points="450 400 450 150 1350 150 1350 400" style="fill:none;stroke:currentColor;stroke-width:100;stroke-linejoin:round;"/>
+  <rect x="150" y="450" width="600" height="1200" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="1050" y="450" width="600" height="800" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/distribute-elements/resources/distribute-vertically-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
+  <polyline points="400 1350 150 1350 150 450 400 450" style="fill:none;stroke:currentColor;stroke-width:100;stroke-linejoin:round;"/>
+  <rect x="450" y="150" width="1200" height="600" rx="1" style="fill:none;stroke:currentColor;stroke-width:100;"></rect>
+  <rect x="450" y="1050" width="800" height="600" rx="1" style="fill:currentColor;stroke:currentColor;stroke-width:100;opacity:.5;"></rect>
+</svg>

package/lib/features/modeling/behavior/ReplaceElementBehaviour.js

@@ -1,6 +1,6 @@
 import inherits from 'inherits-browser';
 
-import { forEach } from 'min-dash';
+import { forEach, reduce } from 'min-dash';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
@@ -30,10 +30,14 @@ export default function ReplaceElementBehaviour(
         target = context.parent,
         elements = context.elements;
 
-    var canReplace = bpmnRules.canReplace(elements, target);
+    var elementReplacements = reduce(elements, function(replacements, element) {
+      var canReplace = bpmnRules.canReplace([ element ], element.host || element.parent || target);
 
-    if (canReplace) {
-      this.replaceElements(elements, canReplace.replacements);
+      return canReplace ? replacements.concat(canReplace.replacements) : replacements;
+    }, []);
+
+    if (elementReplacements.length) {
+      this.replaceElements(elements, elementReplacements);
     }
   }, this);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "9.2.2",
+  "version": "9.3.2",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "index.js",
   "files": [
@@ -100,7 +100,7 @@
   "dependencies": {
     "bpmn-moddle": "^7.1.2",
     "css.escape": "^1.5.1",
-    "diagram-js": "^8.5.0",
+    "diagram-js": "^8.7.1",
     "diagram-js-direct-editing": "^1.7.0",
     "ids": "^1.0.0",
     "inherits-browser": "0.0.1",

package/test/helper/index.js

@@ -267,6 +267,31 @@ export function createViewer(container, viewerInstance, xml, diagramId) {
   });
 }
 
+function logConfigured(type, force) {
+  var url = new URL(window.location.href);
+
+  var log = ('searchParams' in url) && url.searchParams.get('log') || '';
+
+  return force || log.includes('save-xml');
+}
+
+/**
+ * Enable logging on a modeler instance.
+ *
+ * @param  {import('bpmn-js')} modeler
+ * @param  {boolean} [force=false]
+ */
+export function enableLogging(modeler, force) {
+
+  var saveXML = logConfigured('save-xml', force);
+
+  saveXML && modeler.on('commandStack.changed', function() {
+    modeler.saveXML({ format: true }).then(function(result) {
+      console.log(result.xml);
+    });
+  });
+}
+
 export function setBpmnJS(instance) {
   BPMN_JS = instance;
 }