camunda-bpmn-js 5.6.2 → 5.7.0

package/dist/base-modeler.development.js

@@ -19001,8 +19001,8 @@
         var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: attrs.width || element.width,
+          containerHeight: attrs.height || element.height,
           position: {
             mx: 0.235,
             my: 0.315
@@ -19026,17 +19026,23 @@
         return messagePath;
       },
       'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {
-        var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
+        var baseWidth = attrs.width || element.width;
+        var baseHeight = attrs.height || element.height;
+
+        // use a lighter stroke for event suprocess icons
+        var strokeWidth = attrs.width ? 1 : 2;
+
+        var circle = drawCircle(parentGfx, baseWidth, baseHeight, 0.2 * baseHeight, {
           fill: getFillColor(element, defaultFillColor, attrs.fill),
           stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke),
-          strokeWidth: 2
+          strokeWidth: strokeWidth
         });
 
         var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
           xScaleFactor: 0.75,
           yScaleFactor: 0.75,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: baseWidth,
+          containerHeight: baseHeight,
           position: {
             mx: 0.5,
             my: 0.5
@@ -19045,23 +19051,23 @@
 
         drawPath(parentGfx, pathData, {
           stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke),
-          strokeWidth: 2
+          strokeWidth: strokeWidth
         });
 
         for (var i = 0; i < 12; i++) {
           var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
             xScaleFactor: 0.75,
             yScaleFactor: 0.75,
-            containerWidth: element.width,
-            containerHeight: element.height,
+            containerWidth: baseWidth,
+            containerHeight: baseHeight,
             position: {
               mx: 0.5,
               my: 0.5
             }
           });
 
-          var width = element.width / 2,
-              height = element.height / 2;
+          var width = baseWidth / 2,
+              height = baseHeight / 2;
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
@@ -19076,8 +19082,8 @@
         var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.2
@@ -19098,8 +19104,8 @@
         var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.222
@@ -19138,8 +19144,8 @@
         var pathData = pathMap.getScaledPath('EVENT_ERROR', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.2,
             my: 0.722
@@ -19184,8 +19190,8 @@
         var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.22,
             my: 0.5
@@ -19206,8 +19212,8 @@
         var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.2
@@ -19228,10 +19234,10 @@
         var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
-            mx: 0.222,
+            mx: 0.211,
             my: 0.36
           }
         });
@@ -19242,6 +19248,7 @@
 
         return drawPath(parentGfx, pathData, {
           fill,
+          stroke: getStrokeColor$1(event, defaultStrokeColor, attrs.stroke),
           strokeWidth: 1
         });
       },
@@ -19249,8 +19256,8 @@
         var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
           xScaleFactor: 1.2,
           yScaleFactor: 1.2,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.458,
             my: 0.194
@@ -19274,57 +19281,59 @@
       }
     };
 
-    function renderEventIcon(element, parentGfx, attrs = {}) {
+    function renderEventIcon(element, parentGfx, attrs = {}, proxyElement) {
       var semantic = getBusinessObject(element),
           isThrowing = isThrowEvent(semantic);
 
+      var nodeElement = proxyElement || element;
+
       if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {
         if (semantic.get('parallelMultiple')) {
-          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
         }
         else {
-          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
         }
       }
 
       if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       return null;
@@ -19746,14 +19755,23 @@
     function renderSubProcess(parentGfx, element, attrs = {}) {
       var activity = renderActivity(parentGfx, element, attrs);
 
+      var expanded = isExpanded(element);
+
       if (isEventSubProcess(element)) {
         attr(activity, {
           strokeDasharray: '0, 5.5',
           strokeWidth: 2.5
         });
-      }
 
-      var expanded = isExpanded(element);
+        if (!expanded) {
+          var flowElements = getBusinessObject(element).flowElements || [];
+          var startEvents = flowElements.filter(e => is$1(e, 'bpmn:StartEvent'));
+
+          if (startEvents.length === 1) {
+            renderEventSubProcessIcon(startEvents[0], parentGfx, attrs, element);
+          }
+        }
+      }
 
       renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);
 
@@ -19766,6 +19784,39 @@
       return activity;
     }
 
+    function renderEventSubProcessIcon(startEvent, parentGfx, attrs, proxyElement) {
+      var iconSize = 22;
+
+      // match the colors of the enclosing subprocess
+      var proxyAttrs = {
+        fill: getFillColor(proxyElement, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor$1(proxyElement, defaultStrokeColor, attrs.stroke),
+        width: iconSize,
+        height: iconSize
+      };
+
+      var interrupting = getBusinessObject(startEvent).isInterrupting;
+      var strokeDasharray = interrupting ? 0 : 3;
+
+      // better visibility for non-interrupting events
+      var strokeWidth = interrupting ? 1 : 1.2;
+
+      // make the icon look larger by drawing a smaller circle
+      var circleSize = 20;
+      var shift = (iconSize - circleSize) / 2;
+      var transform = 'translate(' + shift + ',' + shift + ')';
+
+      drawCircle(parentGfx, circleSize, circleSize, {
+        fill: proxyAttrs.fill,
+        stroke: proxyAttrs.stroke,
+        strokeWidth,
+        strokeDasharray,
+        transform
+      });
+
+      renderEventIcon(startEvent, parentGfx, proxyAttrs, proxyElement);
+    }
+
     function renderTask(parentGfx, element, attrs = {}) {
       var activity = renderActivity(parentGfx, element, attrs);
 
@@ -104008,6 +104059,188 @@
     propertiesPanel: ['type', BpmnPropertiesPanelRenderer]
   };
 
+  /**
+   * Create a new element and (optionally) set its parent.
+   *
+   * @param {string} type
+   * @param {Object} properties
+   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   *
+   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
+   */
+  function createElement(type, properties, parent, bpmnFactory) {
+    const element = bpmnFactory.create(type, properties);
+    if (parent) {
+      element.$parent = parent;
+    }
+    return element;
+  }
+
+  /**
+   * generate a semantic id with given prefix
+   */
+  function nextId(prefix) {
+    const ids = new Ids$1([32, 32, 1]);
+    return ids.nextPrefixed(prefix);
+  }
+  function getRoot(businessObject) {
+    let parent = businessObject;
+    while (parent.$parent) {
+      parent = parent.$parent;
+    }
+    return parent;
+  }
+  function filterElementsByType(objectList, type) {
+    const list = objectList || [];
+    return list.filter(element => is$1(element, type));
+  }
+  function findRootElementsByType(businessObject, referencedType) {
+    const root = getRoot(businessObject);
+    return filterElementsByType(root.get('rootElements'), referencedType);
+  }
+  function findRootElementById(businessObject, type, id) {
+    const elements = findRootElementsByType(businessObject, type);
+    return elements.find(element => element.id === id);
+  }
+
+  /**
+   * createOrUpdateFormalExpression - upserts a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
+   * @param {CommandStack} commandStack
+   */
+  function createOrUpdateFormalExpression(element, moddleElement, propertyName, newValue, bpmnFactory, commandStack) {
+    return commandStack.execute('element.updateModdleProperties', createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory));
+  }
+
+  /**
+   * createOrUpdateFormalExpressionCommand - creates a command to upsert a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
+   */
+  function createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory) {
+    const expressionProps = {};
+    if (!newValue) {
+      // remove formal expression
+      expressionProps[propertyName] = undefined;
+      return {
+        element,
+        moddleElement,
+        properties: expressionProps
+      };
+    }
+    const existingExpression = moddleElement.get(propertyName);
+    if (existingExpression) {
+      // edit existing formal expression
+      return {
+        element,
+        moddleElement: existingExpression,
+        properties: {
+          body: newValue
+        }
+      };
+    }
+
+    // add formal expression
+    expressionProps[propertyName] = createElement('bpmn:FormalExpression', {
+      body: newValue
+    }, moddleElement, bpmnFactory);
+    return {
+      element,
+      moddleElement,
+      properties: expressionProps
+    };
+  }
+
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+   */
+
+  /**
+   * @returns {Array<Entry>} entries
+   */
+  function AdHocCompletionProps$1(props) {
+    const {
+      element
+    } = props;
+    if (!is$1(element, 'bpmn:AdHocSubProcess')) {
+      return [];
+    }
+    return [{
+      id: 'completionCondition',
+      component: CompletionCondition$3,
+      isEdited: isEdited
+    }, {
+      id: 'cancelRemainingInstances',
+      component: CancelRemainingInstances,
+      isEdited: node => node && !node.checked // the default value is true
+    }];
+  }
+  function CompletionCondition$3(props) {
+    const {
+      element
+    } = props;
+    const bpmnFactory = useService('bpmnFactory');
+    const debounce = useService('debounceInput');
+    const commandStack = useService('commandStack');
+    const translate = useService('translate');
+    const getValue = () => {
+      const expression = getBusinessObject(element).get('completionCondition');
+      return expression && expression.get('body');
+    };
+    const setValue = value => {
+      return createOrUpdateFormalExpression(element, getBusinessObject(element), 'completionCondition', value, bpmnFactory, commandStack);
+    };
+    return TextfieldEntry({
+      element,
+      id: 'completionCondition',
+      label: translate('Completion condition'),
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+  function CancelRemainingInstances(props) {
+    const {
+      element
+    } = props;
+    const commandStack = useService('commandStack');
+    const translate = useService('translate');
+    const businessObject = getBusinessObject(element);
+    const getValue = () => {
+      return businessObject.get('cancelRemainingInstances');
+    };
+    const setValue = value => {
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          cancelRemainingInstances: value
+        }
+      });
+    };
+    return CheckboxEntry({
+      element,
+      id: 'cancelRemainingInstances',
+      label: translate('Cancel remaining instances'),
+      getValue,
+      setValue
+    });
+  }
+
   function ReferenceSelectEntry(props) {
     const {
       autoFocusEntry,
@@ -104436,51 +104669,6 @@
     };
   }
 
-  /**
-   * Create a new element and (optionally) set its parent.
-   *
-   * @param {string} type
-   * @param {Object} properties
-   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
-   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
-   *
-   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
-   */
-  function createElement(type, properties, parent, bpmnFactory) {
-    const element = bpmnFactory.create(type, properties);
-    if (parent) {
-      element.$parent = parent;
-    }
-    return element;
-  }
-
-  /**
-   * generate a semantic id with given prefix
-   */
-  function nextId(prefix) {
-    const ids = new Ids$1([32, 32, 1]);
-    return ids.nextPrefixed(prefix);
-  }
-  function getRoot(businessObject) {
-    let parent = businessObject;
-    while (parent.$parent) {
-      parent = parent.$parent;
-    }
-    return parent;
-  }
-  function filterElementsByType(objectList, type) {
-    const list = objectList || [];
-    return list.filter(element => is$1(element, type));
-  }
-  function findRootElementsByType(businessObject, referencedType) {
-    const root = getRoot(businessObject);
-    return filterElementsByType(root.get('rootElements'), referencedType);
-  }
-  function findRootElementById(businessObject, type, id) {
-    const elements = findRootElementsByType(businessObject, type);
-    return elements.find(element => element.id === id);
-  }
-
   const EMPTY_OPTION$4 = '';
   const CREATE_NEW_OPTION$4 = 'create-new';
 
@@ -105222,7 +105410,7 @@
       isEdited: isEdited
     }, {
       id: 'completionCondition',
-      component: CompletionCondition$1,
+      component: CompletionCondition$2,
       isEdited: isEdited
     }];
     return entries;
@@ -105239,7 +105427,7 @@
       return getLoopCardinalityValue(element);
     };
     const setValue = value => {
-      return commandStack.execute('element.updateModdleProperties', updateFormalExpression(element, 'loopCardinality', value, bpmnFactory));
+      return createOrUpdateFormalExpression(element, getLoopCharacteristics$2(element), 'loopCardinality', value, bpmnFactory, commandStack);
     };
     return TextfieldEntry({
       element,
@@ -105250,7 +105438,7 @@
       debounce
     });
   }
-  function CompletionCondition$1(props) {
+  function CompletionCondition$2(props) {
     const {
       element
     } = props;
@@ -105262,7 +105450,7 @@
       return getCompletionConditionValue(element);
     };
     const setValue = value => {
-      return commandStack.execute('element.updateModdleProperties', updateFormalExpression(element, 'completionCondition', value, bpmnFactory));
+      return createOrUpdateFormalExpression(element, getLoopCharacteristics$2(element), 'completionCondition', value, bpmnFactory, commandStack);
     };
     return TextfieldEntry({
       element,
@@ -105323,62 +105511,6 @@
     return bo.loopCharacteristics;
   }
 
-  /**
-   * createFormalExpression - creates a 'bpmn:FormalExpression' element.
-   *
-   * @param {ModdleElement} parent
-   * @param {string} body
-   * @param {BpmnFactory} bpmnFactory
-   *
-   * @result {ModdleElement<bpmn:FormalExpression>} a formal expression
-   */
-  function createFormalExpression$1(parent, body, bpmnFactory) {
-    return createElement('bpmn:FormalExpression', {
-      body: body
-    }, parent, bpmnFactory);
-  }
-
-  /**
-   * updateFormalExpression - updates a specific formal expression of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   * @param {string} propertyName
-   * @param {string} newValue
-   * @param {BpmnFactory} bpmnFactory
-   */
-  function updateFormalExpression(element, propertyName, newValue, bpmnFactory) {
-    const loopCharacteristics = getLoopCharacteristics$2(element);
-    const expressionProps = {};
-    if (!newValue) {
-      // remove formal expression
-      expressionProps[propertyName] = undefined;
-      return {
-        element,
-        moddleElement: loopCharacteristics,
-        properties: expressionProps
-      };
-    }
-    const existingExpression = loopCharacteristics.get(propertyName);
-    if (!existingExpression) {
-      // add formal expression
-      expressionProps[propertyName] = createFormalExpression$1(loopCharacteristics, newValue, bpmnFactory);
-      return {
-        element,
-        moddleElement: loopCharacteristics,
-        properties: expressionProps
-      };
-    }
-
-    // edit existing formal expression
-    return {
-      element,
-      moddleElement: existingExpression,
-      properties: {
-        body: newValue
-      }
-    };
-  }
-
   // loopCardinality
 
   /**
@@ -106202,8 +106334,23 @@
     }
     return null;
   }
+  function AdHocCompletionGroup(element, injector) {
+    const translate = injector.get('translate');
+    const group = {
+      label: translate('Completion'),
+      id: 'adHocCompletion',
+      component: Group,
+      entries: [...AdHocCompletionProps$1({
+        element
+      })]
+    };
+    if (group.entries.length) {
+      return group;
+    }
+    return null;
+  }
   function getGroups(element, injector) {
-    const groups = [GeneralGroup(element, injector), DocumentationGroup(element, injector), CompensationGroup(element, injector), ErrorGroup(element, injector), LinkGroup(element, injector), MessageGroup(element, injector), MultiInstanceGroup(element, injector), SignalGroup(element, injector), EscalationGroup(element, injector), TimerGroup(element, injector)];
+    const groups = [GeneralGroup(element, injector), DocumentationGroup(element, injector), CompensationGroup(element, injector), ErrorGroup(element, injector), LinkGroup(element, injector), MessageGroup(element, injector), MultiInstanceGroup(element, injector), AdHocCompletionGroup(element, injector), SignalGroup(element, injector), EscalationGroup(element, injector), TimerGroup(element, injector)];
 
     // contract: if a group returns null, it should not be displayed at all
     return groups.filter(group => group !== null);