chore(main): release 18.13.0

Author: github-actions[bot]

.release-please-manifest.json

@@ -2,5 +2,5 @@
   "pull-request-title-pattern": "chore: release v${version}",
   "changelog-sections": "[{\"type\":\"feat\",\"section\":\"Features\",\"hidden\":false},{\"type\":\"fix\",\"section\":\"Bug Fixes\",\"hidden\":false},{\"type\":\"deps\",\"section\":\"Dependency Updates\",\"hidden\":false}]",
   "changelog-type": "github",
-  ".": "18.12.1"
+  ".": "18.13.0"
 }

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documen
 
 ___Note:__ Yet to be released changes appear here._
 
+## 18.13.0
+
+* `FEAT`: allow to create child elements from the context pad ([#2391](https://github.com/bpmn-io/bpmn-js/issues/2391))
+
 ## 18.12.1
 
 * `FIX`: correctly replace non-interrupting event with an interrupting one ([#2313](https://github.com/bpmn-io/bpmn-js/issues/2313))

lib/features/modeling/BpmnLayouter.js

@@ -44,50 +44,50 @@ import { isDirectionHorizontal } from './util/ModelingUtil';
  */
 
 var ATTACH_ORIENTATION_PADDING = -10,
-    BOUNDARY_TO_HOST_THRESHOLD = 40;
+  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' ],
+  default: ['h:h'],
+  fromGateway: ['v:h'],
+  toGateway: ['h:v'],
   loop: {
-    fromTop: [ 't:r' ],
-    fromRight: [ 'r:b' ],
-    fromLeft: [ 'l:t' ],
-    fromBottom: [ 'b:l' ]
+    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' ],
+  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' ],
+  default: ['v:v'],
+  fromGateway: ['h:v'],
+  toGateway: ['v:h'],
   loop: {
-    fromTop: [ 't:l' ],
-    fromRight: [ 'r:t' ],
-    fromLeft: [ 'l:b' ],
-    fromBottom: [ 'b:r' ]
+    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' ],
+  messageFlow: ['straight', 'h:h'],
+  subProcess: ['straight', 'v:v'],
   isHorizontal: false
 };
 
@@ -123,34 +123,34 @@ inherits(BpmnLayouter, BaseLayouter);
  *
  * @return {Point[]}
  */
-BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
+BpmnLayouter.prototype.layoutConnection = function (connection, hints) {
   if (!hints) {
     hints = {};
   }
 
   var source = hints.source || connection.source,
-      target = hints.target || connection.target,
-      waypoints = hints.waypoints || connection.waypoints,
-      connectionStart = hints.connectionStart,
-      connectionEnd = hints.connectionEnd,
-      elementRegistry = this._elementRegistry;
+    target = hints.target || connection.target,
+    waypoints = hints.waypoints || connection.waypoints,
+    connectionStart = hints.connectionStart,
+    connectionEnd = hints.connectionEnd,
+    elementRegistry = this._elementRegistry;
 
   var manhattanOptions,
-      updatedWaypoints;
+    updatedWaypoints;
 
   if (!connectionStart) {
-    connectionStart = getConnectionDocking(waypoints && waypoints[ 0 ], source);
+    connectionStart = getConnectionDocking(waypoints && waypoints[0], source);
   }
 
   if (!connectionEnd) {
-    connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);
+    connectionEnd = getConnectionDocking(waypoints && waypoints[waypoints.length - 1], target);
   }
 
   if (is(connection, 'bpmn:Association') ||
-      is(connection, 'bpmn:DataAssociation')) {
+    is(connection, 'bpmn:DataAssociation')) {
 
     if (waypoints && !isCompensationAssociation(source, target)) {
-      return [].concat([ connectionStart ], waypoints.slice(1, -1), [ connectionEnd ]);
+      return [].concat([connectionStart], waypoints.slice(1, -1), [connectionEnd]);
     }
   }
 
@@ -201,7 +201,7 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
     ));
   }
 
-  return updatedWaypoints || [ connectionStart, connectionEnd ];
+  return updatedWaypoints || [connectionStart, connectionEnd];
 };
 
 
@@ -332,14 +332,14 @@ function getLoopPreferredLayout(source, connection, layout) {
 
 function getBoundaryEventPreferredLayouts(source, target, end, layout) {
   var sourceMid = getMid(source),
-      targetMid = getMid(target),
-      attachOrientation = getAttachOrientation(source),
-      sourceLayout,
-      targetLayout;
+    targetMid = getMid(target),
+    attachOrientation = getAttachOrientation(source),
+    sourceLayout,
+    targetLayout;
 
   var isLoop = isSame(source.host, target);
 
-  var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);
+  var attachedToSide = isAnyOrientation(attachOrientation, ['top', 'right', 'bottom', 'left']);
 
   var targetOrientation = getOrientation(targetMid, sourceMid, {
     x: source.width / 2 + target.width / 2,
@@ -356,13 +356,13 @@ function getBoundaryEventPreferredLayouts(source, target, end, layout) {
   // target layout
   targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, layout.isHorizontal);
 
-  return [ sourceLayout + ':' + targetLayout ];
+  return [sourceLayout + ':' + targetLayout];
 }
 
 function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end, layout) {
   var orientation = attachedToSide ? attachOrientation : layout.isHorizontal ? getVerticalOrientation(attachOrientation) : getHorizontalOrientation(attachOrientation),
-      sourceLayout = orientationDirectionMapping[ orientation ],
-      targetLayout;
+    sourceLayout = orientationDirectionMapping[orientation],
+    targetLayout;
 
   if (attachedToSide) {
     if (isHorizontalOrientation(attachOrientation)) {
@@ -374,7 +374,7 @@ function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, t
     targetLayout = layout.boundaryLoop.default;
   }
 
-  return [ sourceLayout + ':' + targetLayout ];
+  return [sourceLayout + ':' + targetLayout];
 }
 
 function shouldConnectToSameSide(axis, source, target, end) {
@@ -391,22 +391,22 @@ function shouldConnectToSameSide(axis, source, target, end) {
 }
 
 function areCloseOnAxis(axis, a, b, threshold) {
-  return Math.abs(a[ axis ] - b[ axis ]) < threshold;
+  return Math.abs(a[axis] - b[axis]) < threshold;
 }
 
 function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {
 
   // attached to either top, right, bottom or left side
   if (attachedToSide) {
-    return orientationDirectionMapping[ attachOrientation ];
+    return orientationDirectionMapping[attachOrientation];
   }
 
   // attached to either top-right, top-left, bottom-right or bottom-left corner
 
   var verticalAttachOrientation = getVerticalOrientation(attachOrientation),
-      horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),
-      verticalTargetOrientation = getVerticalOrientation(targetOrientation),
-      horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);
+    horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),
+    verticalTargetOrientation = getVerticalOrientation(targetOrientation),
+    horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);
 
   if (isHorizontal) {
 
@@ -415,7 +415,7 @@ function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, atta
       isSame(verticalAttachOrientation, verticalTargetOrientation) ||
       isOppositeOrientation(horizontalAttachOrientation, horizontalTargetOrientation)
     ) {
-      return orientationDirectionMapping[ verticalAttachOrientation ];
+      return orientationDirectionMapping[verticalAttachOrientation];
     }
   } else {
 
@@ -424,12 +424,12 @@ function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, atta
       isSame(horizontalAttachOrientation, horizontalTargetOrientation) ||
       isOppositeOrientation(verticalAttachOrientation, verticalTargetOrientation)
     ) {
-      return orientationDirectionMapping[ horizontalAttachOrientation ];
+      return orientationDirectionMapping[horizontalAttachOrientation];
     }
   }
 
   // fallback
-  return orientationDirectionMapping[ isHorizontal ? horizontalAttachOrientation : verticalAttachOrientation ];
+  return orientationDirectionMapping[isHorizontal ? horizontalAttachOrientation : verticalAttachOrientation];
 }
 
 function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {
@@ -467,22 +467,38 @@ 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
+  // attached to either top-right, top-left, bottom-right or bottom-left corner,
+  // or strictly above/below or left/right of the target. In the corner case,
+  // the orientation is compared on the counter-axis to decide the layout.
+
+  var verticalAttachOrientation = getVerticalOrientation(attachOrientation),
+    horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),
+    verticalTargetOrientation = getVerticalOrientation(targetOrientation),
+    horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);
+
+  // If the target is strictly above/below (no horizontal orientation)
+  if (verticalTargetOrientation && !horizontalTargetOrientation) {
+    return 'v';
+  }
+
+  // If the target is strictly left/right (no vertical orientation)
+  if (horizontalTargetOrientation && !verticalTargetOrientation) {
+    return 'h';
+  }
 
   if (isHorizontal) {
-    if (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation))) {
+    if (isSame(verticalAttachOrientation, verticalTargetOrientation)) {
       return 'h';
     } else {
       return 'v';
     }
   } else {
-    if (isSame(getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation))) {
+    if (isSame(horizontalAttachOrientation, horizontalTargetOrientation)) {
       return 'v';
     } else {
       return 'h';
     }
   }
 }
 
-BpmnLayouter.$inject = [ 'elementRegistry' ];
+BpmnLayouter.$inject = ['elementRegistry'];

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "18.12.1",
+  "version": "18.13.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "lib/index.js",
   "files": [