bpmn-auto-layout 0.1.0 → 0.2.0

package/README.md

@@ -3,26 +3,27 @@
 
 # bpmn-auto-layout
 
-Get a layouted diagram of a bpmn-process without graphical representation.
+[![CI](https://github.com/bpmn-io/bpmn-auto-layout/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/bpmn-auto-layout/actions/workflows/CI.yml)
+
+Get a layouted diagram of a BPMN process without graphical representation.
 
 
 ## Usage
 
-__Preconditions:__ The diagram has to have __exactly one single startevent__.
+This library works in [Node.js](https://nodejs.org/) and in the browser.
 
-```javascript
-var AutoLayout = require('bpmn-auto-layout');
+To layout diagrams these must have __exactly one single start event__.
 
-var diagramXML = '<bpmn:defintions ...></bpmn:defintions>';
+```javascript
+import AutoLayout from 'bpmn-auto-layout';
 
-var autoLayout = new AutoLayout();
+const diagramXML = '<bpmn:defintions ...></bpmn:defintions>';
 
-(async () => {
-  var layoutedDiagramXML = await autoLayout.layoutProcess(diagramXML);
+const autoLayout = new AutoLayout();
 
-  console.log(layoutedDiagramXML);
-})();
+const layoutedDiagramXML = await autoLayout.layoutProcess(diagramXML);
 
+console.log(layoutedDiagramXML);
 ```
 
 
@@ -31,6 +32,16 @@ var autoLayout = new AutoLayout();
 *   [Issues](https://github.com/bpmn-io/bpmn-auto-layout/issues)
 
 
+## Building
+
+```sh
+npm install
+npm run all
+```
+
+As part of the test run, visual test cases are generated to `test/generated/test.html`.
+
+
 ## License
 
-Use under the terms of the [MIT license](http://opensource.org/licenses/MIT).
+MIT

package/index.js

@@ -1 +1 @@
-module.exports = require('./lib/AutoLayout');
+export { default } from './lib/AutoLayout.js';

package/lib/AutoLayout.js

@@ -1,72 +1,56 @@
-var BpmnModdle = require('bpmn-moddle');
-var Tree = require('./Tree');
-var DiFactory = require('./DiFactory');
+import BpmnModdle from 'bpmn-moddle';
 
-var DiUtil = require('./DiUtil');
-
-var is = DiUtil.is;
-var getExpandedBounds = DiUtil.getExpandedBounds;
-var getBendpoints = DiUtil.getBendpoints;
+import Tree from './Tree.js';
+import DiFactory from './DiFactory.js';
+import { is,getExpandedBounds, getBendpoints } from './DiUtil.js';
 
 var PADDING_NODE = 'padding_node';
 
 
-function AutoLayout() {
+export default function AutoLayout() {
   this.moddle = new BpmnModdle();
   this.DiFactory = new DiFactory(this.moddle);
   this.nodeCount = -1;
 }
 
-module.exports = AutoLayout;
-
-AutoLayout.prototype.layoutProcess = function(xmlStr, callback) {
+AutoLayout.prototype.layoutProcess = async function(xmlStr) {
   var self = this;
   var moddle = this.moddle;
   var createDiPlane = this.DiFactory.createDiPlane.bind(this.DiFactory);
   var createDiDiagram = this.DiFactory.createDiDiagram.bind(this.DiFactory);
 
-  return new Promise(function(resolve, reject) {
-
-    moddle.fromXML(xmlStr, function(error, moddleWithoutDi) {
-      if (error) {
-        return reject(error);
-      }
-
-      // create new di section
-      var root = moddleWithoutDi.get('rootElements').find(el => el.$type === 'bpmn:Process');
-      var rootDi = createDiPlane({
-        id: 'BPMNPlane_1',
-        bpmnElement: root
-      });
-      var newDiagram = createDiDiagram({
-        id: 'BPMNDiagram_1',
-        plane: rootDi
-      });
-      moddleWithoutDi.diagrams = [newDiagram];
-
-      // build the tree layout
-      self.tree = new Tree('Process');
-      self._addTreeNode(root, root.flowElements);
-      self._buildTreeBreadFirstSearch(root);
-      console.log('tree built');
-      self.tree.UpdateTree();
-      console.log('tree updated');
-
-      // create di
-      self._layoutTreeBreadFirstSearch(root, rootDi);
-      console.log('bpmn element layout complete');
+  try {
+    var { rootElement: moddleWithoutDi } = await moddle.fromXML(xmlStr);
 
-      moddle.toXML(moddleWithoutDi, function(err, result) {
-
-        if (err) {
-          return reject(err);
-        }
-
-        return resolve(result);
-      });
+    // create new di section
+    var root = moddleWithoutDi.get('rootElements').find(el => el.$type === 'bpmn:Process');
+    var rootDi = createDiPlane({
+      id: 'BPMNPlane_1',
+      bpmnElement: root
     });
-  });
-
+    var newDiagram = createDiDiagram({
+      id: 'BPMNDiagram_1',
+      plane: rootDi
+    });
+    moddleWithoutDi.diagrams = [ newDiagram ];
+
+    // build the tree layout
+    self.tree = new Tree();
+    self._addTreeNode(root, root.flowElements);
+    self._buildTreeBreadFirstSearch(root);
+    console.log('tree built');
+    self.tree.UpdateTree();
+    console.log('tree updated');
+
+    // create di
+    self._layoutTreeBreadFirstSearch(root, rootDi);
+    console.log('bpmn element layout complete');
+
+    var { xml: result } = await moddle.toXML(moddleWithoutDi);
+    return Promise.resolve(result);
+  } catch (error) {
+    return Promise.reject(error);
+  }
 };
 
 AutoLayout.prototype._buildTreeBreadFirstSearch = function(rootFlowElement) {
@@ -74,7 +58,7 @@ AutoLayout.prototype._buildTreeBreadFirstSearch = function(rootFlowElement) {
   var children = rootFlowElement.flowElements;
 
   // queue holds visited elements
-  var queue = children ? [...children] : [];
+  var queue = children ? [ ...children ] : [];
   var elementOrConnection;
   var outgoings;
   while (queue.length !== 0) {
@@ -159,7 +143,7 @@ AutoLayout.prototype._explodeSubprocess = function(flowElement, flowElements) {
         self.tree.addParentToNode(child.id, subprocessNode.id);
       });
     }
-    var childNodes = [...subprocessNode.children].filter(child => {
+    var childNodes = [ ...subprocessNode.children ].filter(child => {
       return !subprocessStartNodes.find(startNode => startNode.id === child.id);
     });
     childNodes.forEach(childNode => {
@@ -174,7 +158,7 @@ AutoLayout.prototype._explodeSubprocess = function(flowElement, flowElements) {
 
     // remove parents from subprocessStartNodes
     subprocessStartNodes.forEach(subprocessStartNode => {
-      var parents = [...subprocessStartNode.parents];
+      var parents = [ ...subprocessStartNode.parents ];
       parents.forEach(parentNode => {
         this.tree.removeParentFromNode(subprocessStartNode.id, parentNode.id);
       });
@@ -250,7 +234,7 @@ AutoLayout.prototype._balanceTreeNodeParentLevels = function(node) {
   var maxParentLevel = node._getLevel() - 1;
 
   // pad out levels such that node parents are at same level
-  var oldParents = [...node.parents];
+  var oldParents = [ ...node.parents ];
   oldParents.forEach(parent => {
     let padParent = parent;
     while (padParent._getLevel() < maxParentLevel) {
@@ -260,8 +244,8 @@ AutoLayout.prototype._balanceTreeNodeParentLevels = function(node) {
 
       // console messaging
       var message = 'Added ' + PADDING_NODE + padParent.id + ' between ' +
-      oldParent.dsc + (oldParent.dsc === PADDING_NODE ? oldParent.id : '') + ' and ' +
-      node.dsc + (node.dsc === PADDING_NODE ? node.id : '');
+          oldParent.dsc + (oldParent.dsc === PADDING_NODE ? oldParent.id : '') + ' and ' +
+          node.dsc + (node.dsc === PADDING_NODE ? node.id : '');
       console.log(message);
 
       // sort out parents
@@ -290,7 +274,7 @@ AutoLayout.prototype._layoutTreeBreadFirstSearch = function(parentFlowElement, r
   }
 
   // queue holds visited elements
-  var queue = startEvents ? [...startEvents] : [];
+  var queue = startEvents ? [ ...startEvents ] : [];
   var elementOrConnection;
   var outgoings;
   while (queue.length !== 0) {
@@ -342,8 +326,8 @@ AutoLayout.prototype._groupElement = function(elementOrConnection, group, parent
   } else {
     this._layoutGroup(group, parentDi);
     group = {
-      elements: elementOrConnection.$type === 'bpmn:SequenceFlow' ? [] : [elementOrConnection],
-      connections: elementOrConnection.$type === 'bpmn:SequenceFlow' ? [elementOrConnection] : [],
+      elements: elementOrConnection.$type === 'bpmn:SequenceFlow' ? [] : [ elementOrConnection ],
+      connections: elementOrConnection.$type === 'bpmn:SequenceFlow' ? [ elementOrConnection ] : [],
       distance: elementOrConnection.dist
     };
   }
@@ -430,7 +414,7 @@ AutoLayout.prototype._layoutConnections = function(group, parentDi) {
       // this connection needs to accommodate padding nodes
       // check for any padding nodes and go through those coords
       var oldPoints = connectionDi.waypoint;
-      var newPoints = [oldPoints[0]];
+      var newPoints = [ oldPoints[0] ];
 
       // get node for sourceRef
       var pathNodes = getPathToTarget(sourceNode, targetRef.id);
@@ -486,7 +470,7 @@ function getPathToTarget(sourceNode, targetId) {
     return undefined;
   }
   if (sourceNode.dsc === targetId) {
-    return [sourceNode];
+    return [ sourceNode ];
   }
   if (sourceNode.children) {
     let pathToTarget;
@@ -499,7 +483,7 @@ function getPathToTarget(sourceNode, targetId) {
       }
     });
     if (pathToTarget) {
-      return [sourceNode, ...pathToTarget];
+      return [ sourceNode, ...pathToTarget ];
     }
   }
   return undefined;

package/lib/DiFactory.js

@@ -1,23 +1,12 @@
 'use strict';
 
-var map = require('min-dash').map;
-var assign = require('min-dash').assign;
-var pick = require('min-dash').pick;
+import { map, assign, pick } from 'min-dash';
+import { is, connectRectangles, getExpandedBounds } from './DiUtil.js';
 
-var DiUtil = require('./DiUtil');
-
-var is = DiUtil.is;
-var connectRectangles = DiUtil.connectRectangles;
-var getExpandedBounds = DiUtil.getExpandedBounds;
-
-
-function DiFactory(moddle) {
+export default function DiFactory(moddle) {
   this._model = moddle;
 }
 
-module.exports = DiFactory;
-
-
 DiFactory.prototype._isExpanded = function(element) {
   return element && element.flowElements ? element.flowElements.length > 0 : false;
 };
@@ -52,7 +41,7 @@ DiFactory.prototype.createDiWaypoints = function(waypoints) {
 };
 
 DiFactory.prototype.createDiWaypoint = function(point) {
-  return this.create('dc:Point', pick(point, ['x', 'y']));
+  return this.create('dc:Point', pick(point, [ 'x', 'y' ]));
 };
 
 DiFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
@@ -132,7 +121,7 @@ DiFactory.prototype._getDefaultSize = function(element) {
     return { width: 50, height: 50 };
   }
 
-  if (is(elementType, 'bpmn:StartEvent') || is(elementType, 'bpmn:EndEvent')) {
+  if (is(elementType, 'bpmn:Event')) {
     return { width: 36, height: 36 };
   }
 

package/lib/DiUtil.js

@@ -138,12 +138,12 @@ function getBendpoints(a, b, directions) {
 
   // one point, next to a
   if (directions === 'h:v') {
-    return [{ x: b.x, y: a.y }];
+    return [ { x: b.x, y: a.y } ];
   } else
 
   // one point, above a
   if (directions === 'v:h') {
-    return [{ x: a.x, y: b.y }];
+    return [ { x: a.x, y: b.y } ];
   } else {
 
     // vertical edge xmid
@@ -248,7 +248,7 @@ function is(type, expected) {
   return findType;
 }
 
-module.exports = {
+export {
   getExpandedBounds,
   connectRectangles,
   connectPoints,

package/lib/Tree.js

@@ -80,11 +80,11 @@ TreeNode.prototype._getLastChild = function() {
   return this._getChildAt(this._getChildrenCount() - 1);
 };
 
-function Tree() {
+export default function Tree() {
   this.config = {
     iMaxDepth: 1000,
-    iLevelSeparation: 20,
-    iSiblingSeparation: 20,
+    iLevelSeparation: 40,
+    iSiblingSeparation: 40,
     iSubtreeSeparation: 60,
     topXAdjustment: 0,
     topYAdjustment: 0
@@ -101,8 +101,6 @@ function Tree() {
   this.iLastSearch = 0;
 }
 
-module.exports = Tree;
-
 // Layout algorithm
 Tree._firstWalk = function(tree, node, level, prevSiblings = []) {
 
@@ -128,7 +126,7 @@ Tree._firstWalk = function(tree, node, level, prevSiblings = []) {
     var n = node._getChildrenCount();
     for (var i = 0; i < n; i++) {
       var iChild = node._getChildAt(i);
-      Tree._firstWalk(tree, iChild, level + 1, [...prevSiblings, iChild.id]);
+      Tree._firstWalk(tree, iChild, level + 1, [ ...prevSiblings, iChild.id ]);
     }
     var midPoint = node._getChildrenCenter(tree);
     midPoint -= tree._getNodeSize(node) / 2;
@@ -213,10 +211,10 @@ Tree._secondWalk = function(tree, node, level, X, Y, prevSiblings = []) {
     }
 
     if (node._getChildrenCount() !== 0) {
-      Tree._secondWalk(tree, node._getFirstChild(), level + 1, X + node.modifier, Y + maxsizeTmp + tree.config.iLevelSeparation, [...prevSiblings, node.id]);
+      Tree._secondWalk(tree, node._getFirstChild(), level + 1, X + node.modifier, Y + maxsizeTmp + tree.config.iLevelSeparation, [ ...prevSiblings, node.id ]);
     }
     var rightSibling = node._getRightSibling();
-    if (rightSibling != null && !prevSiblings.includes(rightSibling.id)) { Tree._secondWalk(tree, rightSibling, level, X, Y, [...prevSiblings, node.id]); }
+    if (rightSibling != null && !prevSiblings.includes(rightSibling.id)) { Tree._secondWalk(tree, rightSibling, level, X, Y, [ ...prevSiblings, node.id ]); }
   }
 };
 

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "bpmn-auto-layout",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Layout BPMN diagrams, generating missing DI information",
   "main": "index.js",
+  "type": "module",
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "all": "run-s lint test",
     "lint": "eslint .",
@@ -23,13 +27,17 @@
   },
   "homepage": "https://github.com/bpmn-io/bpmn-auto-layout#readme",
   "dependencies": {
-    "bpmn-moddle": "^6.0.0",
+    "bpmn-moddle": "^8.0.1",
     "min-dash": "^3.5.2"
   },
   "devDependencies": {
-    "eslint": "^6.7.2",
-    "eslint-plugin-bpmn-io": "^0.10.0",
-    "mocha": "^6.2.2",
+    "eslint": "^8.41.0",
+    "eslint-plugin-bpmn-io": "^1.0.0",
+    "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5"
+  },
+  "engines": {
+    "node": ">= 10.0.0",
+    "npm": ">= 6.0.0"
   }
 }

package/.travis.yml

@@ -1,5 +0,0 @@
-language: node_js
-node_js: '10'
-
-script:
-  - npm run all