bpmn-js 17.2.2 → 17.3.0

package/lib/features/auto-place/BpmnAutoPlaceUtil.js

@@ -1,5 +1,9 @@
 import { is } from '../../util/ModelUtil';
-import { isAny } from '../modeling/util/ModelingUtil';
+
+import {
+  isAny,
+  isDirectionHorizontal
+} from '../modeling/util/ModelingUtil';
 
 import {
   getMid,
@@ -47,7 +51,7 @@ export function getNewShapePosition(source, element) {
 }
 
 /**
- * Get the position for given new flow node. Try placing the flow node right of
+ * Get the position for given new flow node. Try placing the flow node right/bottom of
  * the source.
  *
  * @param {Shape} source
@@ -60,34 +64,60 @@ export function getFlowNodePosition(source, element) {
   var sourceTrbl = asTRBL(source);
   var sourceMid = getMid(source);
 
-  var horizontalDistance = getConnectedDistance(source, {
+  var placeHorizontally = isDirectionHorizontal(source);
+
+  var placement = placeHorizontally ? {
+    directionHint: 'e',
+    minDistance: 80,
+    baseOrientation: 'left',
+    boundaryOrientation: 'top',
+    start: 'top',
+    end: 'bottom'
+  } : {
+    directionHint: 's',
+    minDistance: 90,
+    baseOrientation: 'top',
+    boundaryOrientation: 'left',
+    start: 'left',
+    end: 'right'
+  };
+
+  var connectedDistance = getConnectedDistance(source, {
     filter: function(connection) {
       return is(connection, 'bpmn:SequenceFlow');
-    }
+    },
+    direction: placement.directionHint
   });
 
   var margin = 30,
-      minDistance = 80,
-      orientation = 'left';
+      minDistance = placement.minDistance,
+      orientation = placement.baseOrientation;
 
   if (is(source, 'bpmn:BoundaryEvent')) {
     orientation = getOrientation(source, source.host, -25);
 
-    if (orientation.indexOf('top') !== -1) {
+    if (orientation.indexOf(placement.boundaryOrientation) !== -1) {
       margin *= -1;
     }
   }
 
-  var position = {
-    x: sourceTrbl.right + horizontalDistance + element.width / 2,
-    y: sourceMid.y + getVerticalDistance(orientation, minDistance)
+  var position = placeHorizontally ? {
+    x: sourceTrbl.right + connectedDistance + element.width / 2,
+    y: sourceMid.y + getDistance(orientation, minDistance, placement)
+  } : {
+    x: sourceMid.x + getDistance(orientation, minDistance, placement),
+    y: sourceTrbl.bottom + connectedDistance + element.height / 2
   };
 
-  var nextPositionDirection = {
-    y: {
-      margin: margin,
-      minDistance: minDistance
-    }
+  var nextPosition = {
+    margin: margin,
+    minDistance: minDistance
+  };
+
+  var nextPositionDirection = placeHorizontally ? {
+    y: nextPosition
+  } : {
+    x: nextPosition
   };
 
   return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
@@ -96,13 +126,14 @@ export function getFlowNodePosition(source, element) {
 /**
  * @param {DirectionTRBL} orientation
  * @param {number} minDistance
+ * @param {{ start: DirectionTRBL, end: DirectionTRBL }} placement
  *
  * @return {number}
  */
-function getVerticalDistance(orientation, minDistance) {
-  if (orientation.includes('top')) {
+function getDistance(orientation, minDistance, placement) {
+  if (orientation.includes(placement.start)) {
     return -1 * minDistance;
-  } else if (orientation.includes('bottom')) {
+  } else if (orientation.includes(placement.end)) {
     return minDistance;
   } else {
     return 0;
@@ -112,7 +143,7 @@ function getVerticalDistance(orientation, minDistance) {
 
 /**
  * Get the position for given text annotation. Try placing the text annotation
- * top-right of the source.
+ * top-right of the source (bottom-right in vertical layouts).
  *
  * @param {Shape} source
  * @param {Shape} element
@@ -123,22 +154,35 @@ export function getTextAnnotationPosition(source, element) {
 
   var sourceTrbl = asTRBL(source);
 
-  var position = {
+  var placeHorizontally = isDirectionHorizontal(source);
+
+  var position = placeHorizontally ? {
     x: sourceTrbl.right + element.width / 2,
     y: sourceTrbl.top - 50 - element.height / 2
+  } : {
+    x: sourceTrbl.right + 50 + element.width / 2,
+    y: sourceTrbl.bottom + element.height / 2
   };
 
   if (isConnection(source)) {
     position = getMid(source);
-    position.x += 100;
-    position.y -= 50;
+    if (placeHorizontally) {
+      position.x += 100;
+      position.y -= 50;
+    } else {
+      position.x += 100;
+      position.y += 50;
+    }
   }
 
-  var nextPositionDirection = {
-    y: {
-      margin: -30,
-      minDistance: 20
-    }
+  var nextPosition = {
+    margin: placeHorizontally ? -30 : 30,
+    minDistance: 20
+  };
+  var nextPositionDirection = placeHorizontally ? {
+    y: nextPosition
+  } : {
+    x: nextPosition
   };
 
   return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
@@ -147,7 +191,7 @@ export function getTextAnnotationPosition(source, element) {
 
 /**
  * Get the position for given new data element. Try placing the data element
- * bottom-right of the source.
+ * bottom-right of the source (bottom-left in vertical layouts).
  *
  * @param {Shape} source
  * @param {Shape} element
@@ -158,16 +202,24 @@ export function getDataElementPosition(source, element) {
 
   var sourceTrbl = asTRBL(source);
 
-  var position = {
+  var placeHorizontally = isDirectionHorizontal(source);
+
+  var position = placeHorizontally ? {
     x: sourceTrbl.right - 10 + element.width / 2,
     y: sourceTrbl.bottom + 40 + element.width / 2
+  } : {
+    x: sourceTrbl.left - 40 - element.width / 2,
+    y: sourceTrbl.bottom - 10 + element.height / 2
   };
 
-  var nextPositionDirection = {
-    x: {
-      margin: 30,
-      minDistance: 30
-    }
+  var nextPosition = {
+    margin: 30,
+    minDistance: 30
+  };
+  var nextPositionDirection = placeHorizontally ? {
+    x: nextPosition
+  } : {
+    y: nextPosition
   };
 
   return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));

package/lib/features/modeling/BpmnLayouter.js

@@ -22,6 +22,8 @@ import {
 
 import { is } from '../../util/ModelUtil';
 
+import { isDirectionHorizontal } from './util/ModelingUtil';
+
 /**
  * @typedef {import('diagram-js/lib/util/Types').Point} Point
  *
@@ -42,6 +44,51 @@ import { is } from '../../util/ModelUtil';
 var ATTACH_ORIENTATION_PADDING = -10,
     BOUNDARY_TO_HOST_THRESHOLD = 40;
 
+// layout all connection between flow elements h:h, except for
+// (1) outgoing of boundary events -> layout based on attach orientation and target orientation
+// (2) incoming/outgoing of gateways -> v:h for outgoing, h:v for incoming
+// (3) loops connect sides clockwise
+var PREFERRED_LAYOUTS_HORIZONTAL = {
+  default: [ 'h:h' ],
+  fromGateway: [ 'v:h' ],
+  toGateway: [ 'h:v' ],
+  loop: {
+    fromTop: [ 't:r' ],
+    fromRight: [ 'r:b' ],
+    fromLeft: [ 'l:t' ],
+    fromBottom: [ 'b:l' ]
+  },
+  boundaryLoop: {
+    alternateHorizontalSide: 'b',
+    alternateVerticalSide: 'l',
+    default: 'v'
+  },
+  messageFlow: [ 'straight', 'v:v' ],
+  subProcess: [ 'straight', 'h:h' ],
+  isHorizontal: true
+};
+
+// for vertical layouts, switch h and v and loop counter-clockwise
+var PREFERRED_LAYOUTS_VERTICAL = {
+  default: [ 'v:v' ],
+  fromGateway: [ 'h:v' ],
+  toGateway: [ 'v:h' ],
+  loop: {
+    fromTop: [ 't:l' ],
+    fromRight: [ 'r:t' ],
+    fromLeft: [ 'l:b' ],
+    fromBottom: [ 'b:r' ]
+  },
+  boundaryLoop: {
+    alternateHorizontalSide: 't',
+    alternateVerticalSide: 'r',
+    default: 'h'
+  },
+  messageFlow: [ 'straight', 'h:h' ],
+  subProcess: [ 'straight', 'v:v' ],
+  isHorizontal: false
+};
+
 var oppositeOrientationMapping = {
   'top': 'bottom',
   'top-right': 'bottom-left',
@@ -94,9 +141,6 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
     connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);
   }
 
-  // TODO(nikku): support vertical modeling
-  // and invert preferredLayouts accordingly
-
   if (is(connection, 'bpmn:Association') ||
       is(connection, 'bpmn:DataAssociation')) {
 
@@ -105,35 +149,36 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
     }
   }
 
+  var layout = isDirectionHorizontal(source) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
+
   if (is(connection, 'bpmn:MessageFlow')) {
-    manhattanOptions = getMessageFlowManhattanOptions(source, target);
+    manhattanOptions = getMessageFlowManhattanOptions(source, target, layout);
   } else if (is(connection, 'bpmn:SequenceFlow') || isCompensationAssociation(source, target)) {
 
-    // layout all connection between flow elements h:h, except for
-    // (1) outgoing of boundary events -> layout based on attach orientation and target orientation
-    // (2) incoming/outgoing of gateways -> v:h for outgoing, h:v for incoming
-    // (3) loops
     if (source === target) {
       manhattanOptions = {
-        preferredLayouts: getLoopPreferredLayout(source, connection)
+        preferredLayouts: getLoopPreferredLayout(source, connection, layout)
       };
     } else if (is(source, 'bpmn:BoundaryEvent')) {
       manhattanOptions = {
-        preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd)
+        preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd, layout)
       };
     } else if (isExpandedSubProcess(source) || isExpandedSubProcess(target)) {
-      manhattanOptions = getSubProcessManhattanOptions(source);
+      manhattanOptions = {
+        preferredLayouts: layout.subProcess,
+        preserveDocking: getSubProcessPreserveDocking(source)
+      };
     } else if (is(source, 'bpmn:Gateway')) {
       manhattanOptions = {
-        preferredLayouts: [ 'v:h' ]
+        preferredLayouts: layout.fromGateway
       };
     } else if (is(target, 'bpmn:Gateway')) {
       manhattanOptions = {
-        preferredLayouts: [ 'h:v' ]
+        preferredLayouts: layout.toGateway
       };
     } else {
       manhattanOptions = {
-        preferredLayouts: [ 'h:h' ]
+        preferredLayouts: layout.default
       };
     }
   }
@@ -163,9 +208,9 @@ function getAttachOrientation(attachedElement) {
   return getOrientation(getMid(attachedElement), hostElement, ATTACH_ORIENTATION_PADDING);
 }
 
-function getMessageFlowManhattanOptions(source, target) {
+function getMessageFlowManhattanOptions(source, target, layout) {
   return {
-    preferredLayouts: [ 'straight', 'v:v' ],
+    preferredLayouts: layout.messageFlow,
     preserveDocking: getMessageFlowPreserveDocking(source, target)
   };
 }
@@ -202,13 +247,6 @@ function getMessageFlowPreserveDocking(source, target) {
   return null;
 }
 
-function getSubProcessManhattanOptions(source) {
-  return {
-    preferredLayouts: [ 'straight', 'h:h' ],
-    preserveDocking: getSubProcessPreserveDocking(source)
-  };
-}
-
 function getSubProcessPreserveDocking(source) {
   return isExpandedSubProcess(source) ? 'target' : 'source';
 }
@@ -271,23 +309,23 @@ function isHorizontalOrientation(orientation) {
   return orientation === 'right' || orientation === 'left';
 }
 
-function getLoopPreferredLayout(source, connection) {
+function getLoopPreferredLayout(source, connection, layout) {
   var waypoints = connection.waypoints;
 
   var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
 
   if (orientation === 'top') {
-    return [ 't:r' ];
+    return layout.loop.fromTop;
   } else if (orientation === 'right') {
-    return [ 'r:b' ];
+    return layout.loop.fromRight;
   } else if (orientation === 'left') {
-    return [ 'l:t' ];
+    return layout.loop.fromLeft;
   }
 
-  return [ 'b:l' ];
+  return layout.loop.fromBottom;
 }
 
-function getBoundaryEventPreferredLayouts(source, target, end) {
+function getBoundaryEventPreferredLayouts(source, target, end, layout) {
   var sourceMid = getMid(source),
       targetMid = getMid(target),
       attachOrientation = getAttachOrientation(source),
@@ -304,31 +342,31 @@ function getBoundaryEventPreferredLayouts(source, target, end) {
   });
 
   if (isLoop) {
-    return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end);
+    return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end, layout);
   }
 
   // source layout
-  sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide);
+  sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide, layout.isHorizontal);
 
   // target layout
-  targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide);
+  targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, layout.isHorizontal);
 
   return [ sourceLayout + ':' + targetLayout ];
 }
 
-function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end) {
-  var orientation = attachedToSide ? attachOrientation : getVerticalOrientation(attachOrientation),
+function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end, layout) {
+  var orientation = attachedToSide ? attachOrientation : layout.isHorizontal ? getVerticalOrientation(attachOrientation) : getHorizontalOrientation(attachOrientation),
       sourceLayout = orientationDirectionMapping[ orientation ],
       targetLayout;
 
   if (attachedToSide) {
     if (isHorizontalOrientation(attachOrientation)) {
-      targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : 'b';
+      targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : layout.boundaryLoop.alternateHorizontalSide;
     } else {
-      targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : 'l';
+      targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : layout.boundaryLoop.alternateVerticalSide;
     }
   } else {
-    targetLayout = 'v';
+    targetLayout = layout.boundaryLoop.default;
   }
 
   return [ sourceLayout + ':' + targetLayout ];
@@ -351,7 +389,7 @@ function areCloseOnAxis(axis, a, b, threshold) {
   return Math.abs(a[ axis ] - b[ axis ]) < threshold;
 }
 
-function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide) {
+function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {
 
   // attached to either top, right, bottom or left side
   if (attachedToSide) {
@@ -360,20 +398,36 @@ function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, atta
 
   // attached to either top-right, top-left, bottom-right or bottom-left corner
 
-  // same vertical or opposite horizontal orientation
-  if (isSame(
-    getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)
-  ) || isOppositeOrientation(
-    getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation)
-  )) {
-    return orientationDirectionMapping[ getVerticalOrientation(attachOrientation) ];
+  var verticalAttachOrientation = getVerticalOrientation(attachOrientation),
+      horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),
+      verticalTargetOrientation = getVerticalOrientation(targetOrientation),
+      horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);
+
+  if (isHorizontal) {
+
+    // same vertical or opposite horizontal orientation
+    if (
+      isSame(verticalAttachOrientation, verticalTargetOrientation) ||
+      isOppositeOrientation(horizontalAttachOrientation, horizontalTargetOrientation)
+    ) {
+      return orientationDirectionMapping[ verticalAttachOrientation ];
+    }
+  } else {
+
+    // same horizontal or opposite vertical orientation
+    if (
+      isSame(horizontalAttachOrientation, horizontalTargetOrientation) ||
+      isOppositeOrientation(verticalAttachOrientation, verticalTargetOrientation)
+    ) {
+      return orientationDirectionMapping[ horizontalAttachOrientation ];
+    }
   }
 
   // fallback
-  return orientationDirectionMapping[ getHorizontalOrientation(attachOrientation) ];
+  return orientationDirectionMapping[ isHorizontal ? horizontalAttachOrientation : verticalAttachOrientation ];
 }
 
-function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide) {
+function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {
 
   // attached to either top, right, bottom or left side
   if (attachedToSide) {
@@ -409,14 +463,19 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta
   }
 
   // attached to either top-right, top-left, bottom-right or bottom-left corner
+  // and orientation is same on the counter-axis
 
-  // orientation is right, left
-  // or same vertical orientation but also right or left
-  if (isHorizontalOrientation(targetOrientation) ||
-    (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)) &&
-      getHorizontalOrientation(targetOrientation))) {
-    return 'h';
+  if (isHorizontal) {
+    if (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation))) {
+      return 'h';
+    } else {
+      return 'v';
+    }
   } else {
-    return 'v';
+    if (isSame(getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation))) {
+      return 'v';
+    } else {
+      return 'h';
+    }
   }
 }

package/lib/features/modeling/util/ModelingUtil.d.ts

@@ -8,5 +8,14 @@
  */
 export function getParent(element: Element, anyType: string | string[]): Element | null;
 
+/**
+ * Determines if the local modeling direction is vertical or horizontal.
+ *
+ * @param element
+ *
+ * @return false for vertical pools, lanes and their children. true otherwise
+ */
+export function isDirectionHorizontal(element: Element): boolean;
+
 type Element = import('../../../model/Types').Element;
 export { is, isAny } from "../../../util/ModelUtil";

package/lib/features/modeling/util/ModelingUtil.js

@@ -4,6 +4,8 @@ export { is, isAny } from '../../../util/ModelUtil';
 
 import { isAny } from '../../../util/ModelUtil';
 
+import { isHorizontal } from '../../../util/DiUtil';
+
 /**
  * @typedef {import('../../../model/Types').Element} Element
  */
@@ -29,4 +31,25 @@ export function getParent(element, anyType) {
   }
 
   return null;
+}
+
+/**
+ * Determines if the local modeling direction is vertical or horizontal.
+ *
+ * @param {Element} element
+ *
+ * @return {boolean} false for vertical pools, lanes and their children. true otherwise
+ */
+export function isDirectionHorizontal(element) {
+
+  var types = [ 'bpmn:Participant', 'bpmn:Lane' ];
+
+  var parent = getParent(element, types);
+  if (parent) {
+    return isHorizontal(parent);
+  } else if (isAny(element, types)) {
+    return isHorizontal(element);
+  }
+
+  return true;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "17.2.2",
+  "version": "17.3.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "index.js",
   "files": [
@@ -69,6 +69,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
+    "axe-core": "^4.9.0",
     "babel-loader": "^9.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "bio-dts": "^0.11.0",