bpmn-js 17.2.2 → 17.4.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v17.2.2
+ * bpmn-js - bpmn-modeler v17.4.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2024-04-12
+ * Date: 2024-04-26
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -27000,7 +27000,7 @@
 
     var scale = isDefined(config && config.scale) ? config.scale : {
       min: 1,
-      max: 1.5
+      max: 1
     };
 
     this._overlaysConfig = {
@@ -27994,7 +27994,8 @@
   function getPopupStyle(props) {
     return {
       transform: `scale(${props.scale})`,
-      width: `${props.width}px`
+      width: `${props.width}px`,
+      'transform-origin': 'top left'
     };
   }
 
@@ -28057,7 +28058,7 @@
 
     var scale = isDefined(config && config.scale) ? config.scale : {
       min: 1,
-      max: 1.5
+      max: 1
     };
 
     this._config = {
@@ -29474,6 +29475,27 @@
     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
+   */
+  function isDirectionHorizontal(element) {
+
+    var types = [ 'bpmn:Participant', 'bpmn:Lane' ];
+
+    var parent = getParent(element, types);
+    if (parent) {
+      return isHorizontal$3(parent);
+    } else if (isAny(element, types)) {
+      return isHorizontal$3(element);
+    }
+
+    return true;
+  }
+
   /**
    * @typedef {import('../../model/Types').Shape} Shape
    *
@@ -29506,7 +29528,7 @@
   }
 
   /**
-   * 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
@@ -29519,34 +29541,60 @@
     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$1(connection, 'bpmn:SequenceFlow');
-      }
+      },
+      direction: placement.directionHint
     });
 
     var margin = 30,
-        minDistance = 80,
-        orientation = 'left';
+        minDistance = placement.minDistance,
+        orientation = placement.baseOrientation;
 
     if (is$1(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$2(orientation, minDistance, placement)
+    } : {
+      x: sourceMid.x + getDistance$2(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));
@@ -29555,13 +29603,14 @@
   /**
    * @param {DirectionTRBL} orientation
    * @param {number} minDistance
+   * @param {{ start: DirectionTRBL, end: DirectionTRBL }} placement
    *
    * @return {number}
    */
-  function getVerticalDistance(orientation, minDistance) {
-    if (orientation.includes('top')) {
+  function getDistance$2(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;
@@ -29571,7 +29620,7 @@
 
   /**
    * 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
@@ -29582,22 +29631,35 @@
 
     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));
@@ -29606,7 +29668,7 @@
 
   /**
    * 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
@@ -29617,16 +29679,24 @@
 
     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));
@@ -44576,7 +44646,6 @@
   };
 
   /**
-   * @typedef {import('../dragging/Dragging').default} Dragging
    * @typedef {import('../../core/EventBus').default} EventBus
    *
    * @typedef {import('../../core/EventBus').Event} Event
@@ -44589,24 +44658,21 @@
    * it takes care of making sure that the correct active state is set.
    *
    * @param {EventBus} eventBus
-   * @param {Dragging} dragging
    */
-  function ToolManager(eventBus, dragging) {
+  function ToolManager(eventBus) {
     this._eventBus = eventBus;
-    this._dragging = dragging;
 
     this._tools = [];
     this._active = null;
   }
 
-  ToolManager.$inject = [ 'eventBus', 'dragging' ];
+  ToolManager.$inject = [ 'eventBus' ];
 
   /**
    * Register a tool.
    *
    * @param {string} name
    * @param { {
-   *   dragging: string;
    *   tool: string;
    * } } events
    */
@@ -44618,7 +44684,6 @@
     }
 
     tools.push(name);
-
     this.bindEvents(name, events);
   };
 
@@ -44641,8 +44706,7 @@
   };
 
   ToolManager.prototype.bindEvents = function(name, events) {
-    var eventBus = this._eventBus,
-        dragging = this._dragging;
+    var eventBus = this._eventBus;
 
     var eventsToRegister = [];
 
@@ -44653,7 +44717,6 @@
       if (!context.reactivate && this.isActive(name)) {
         this.setActive(null);
 
-        dragging.cancel();
         return;
       }
 
@@ -53510,6 +53573,51 @@
   var ATTACH_ORIENTATION_PADDING = -10,
       BOUNDARY_TO_HOST_THRESHOLD$1 = 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',
@@ -53562,9 +53670,6 @@
       connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);
     }
 
-    // TODO(nikku): support vertical modeling
-    // and invert preferredLayouts accordingly
-
     if (is$1(connection, 'bpmn:Association') ||
         is$1(connection, 'bpmn:DataAssociation')) {
 
@@ -53573,35 +53678,36 @@
       }
     }
 
+    var layout = isDirectionHorizontal(source) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
+
     if (is$1(connection, 'bpmn:MessageFlow')) {
-      manhattanOptions = getMessageFlowManhattanOptions(source, target);
+      manhattanOptions = getMessageFlowManhattanOptions(source, target, layout);
     } else if (is$1(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$1(source, 'bpmn:BoundaryEvent')) {
         manhattanOptions = {
-          preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd)
+          preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd, layout)
         };
       } else if (isExpandedSubProcess$1(source) || isExpandedSubProcess$1(target)) {
-        manhattanOptions = getSubProcessManhattanOptions(source);
+        manhattanOptions = {
+          preferredLayouts: layout.subProcess,
+          preserveDocking: getSubProcessPreserveDocking(source)
+        };
       } else if (is$1(source, 'bpmn:Gateway')) {
         manhattanOptions = {
-          preferredLayouts: [ 'v:h' ]
+          preferredLayouts: layout.fromGateway
         };
       } else if (is$1(target, 'bpmn:Gateway')) {
         manhattanOptions = {
-          preferredLayouts: [ 'h:v' ]
+          preferredLayouts: layout.toGateway
         };
       } else {
         manhattanOptions = {
-          preferredLayouts: [ 'h:h' ]
+          preferredLayouts: layout.default
         };
       }
     }
@@ -53631,9 +53737,9 @@
     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)
     };
   }
@@ -53670,13 +53776,6 @@
     return null;
   }
 
-  function getSubProcessManhattanOptions(source) {
-    return {
-      preferredLayouts: [ 'straight', 'h:h' ],
-      preserveDocking: getSubProcessPreserveDocking(source)
-    };
-  }
-
   function getSubProcessPreserveDocking(source) {
     return isExpandedSubProcess$1(source) ? 'target' : 'source';
   }
@@ -53739,23 +53838,23 @@
     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),
@@ -53772,31 +53871,31 @@
     });
 
     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 ];
@@ -53819,7 +53918,7 @@
     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) {
@@ -53828,20 +53927,36 @@
 
     // 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) {
@@ -53877,15 +53992,20 @@
     }
 
     // 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';
+      }
     }
   }
 
@@ -61296,7 +61416,7 @@
       if (target) {
         if (canExecute === 'attach') {
           setMarker(target, MARKER_ATTACH);
-        } else if (context.canExecute && target && target.id !== parent.id) {
+        } else if (context.canExecute && parent && target.id !== parent.id) {
           setMarker(target, MARKER_NEW_PARENT);
         } else {
           setMarker(target, context.canExecute ? MARKER_OK$1 : MARKER_NOT_OK$1);