bpmn-js 9.2.0 → 9.3.0

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/dist/distribute-horizontally-tool.svg

@@ -0,0 +1 @@
+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

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

@@ -0,0 +1 @@
+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

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/label-editing/LabelEditingProvider.js

@@ -25,6 +25,8 @@ import {
   isLabel
 } from '../../util/LabelUtil';
 
+var HIGH_PRIORITY = 2000;
+
 
 export default function LabelEditingProvider(
     eventBus, bpmnFactory, canvas, directEditing,
@@ -61,7 +63,7 @@ export default function LabelEditingProvider(
   eventBus.on([
     'shape.remove',
     'connection.remove'
-  ], function(event) {
+  ], HIGH_PRIORITY, function(event) {
 
     if (directEditing.isActive(event.element)) {
       directEditing.cancel();

package/lib/features/popup-menu/ReplaceMenuProvider.js

@@ -427,18 +427,19 @@ ReplaceMenuProvider.prototype._getLoopEntries = function(element) {
   var translate = this._translate;
 
   function toggleLoopEntry(event, entry) {
-    var loopCharacteristics = getBusinessObject(element).loopCharacteristics;
+    var newLoopCharacteristics = getBusinessObject(element).loopCharacteristics;
 
     if (entry.active) {
-      loopCharacteristics = undefined;
+      newLoopCharacteristics = undefined;
     } else {
-      if (isUndefined(entry.options.isSequential) || !loopCharacteristics) {
-        loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
+      if (isUndefined(entry.options.isSequential) || !newLoopCharacteristics
+      || !is(newLoopCharacteristics, entry.options.loopCharacteristics)) {
+        newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
       }
 
-      loopCharacteristics.isSequential = entry.options.isSequential;
+      newLoopCharacteristics.isSequential = entry.options.isSequential;
     }
-    self._modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });
+    self._modeling.updateProperties(element, { loopCharacteristics: newLoopCharacteristics });
   }
 
   var businessObject = getBusinessObject(element),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "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.0",
     "diagram-js-direct-editing": "^1.7.0",
     "ids": "^1.0.0",
     "inherits-browser": "0.0.1",