camunda-bpmn-js 3.10.0 → 3.10.2

package/dist/camunda-cloud-modeler.development.js

@@ -43395,7 +43395,7 @@
         }
 
         if (element.host) {
-          return canAttach$1(element, element.host, null, position);
+          return canAttach(element, element.host, null, position);
         }
 
         return canCreate(element, target, null);
@@ -43408,7 +43408,7 @@
           shapes = context.shapes,
           position = context.position;
 
-      return canAttach$1(shapes, target, null, position) ||
+      return canAttach(shapes, target, null, position) ||
              canReplace(shapes, target, position) ||
              canMove(shapes, target) ||
              canInsert(shapes, target);
@@ -43425,7 +43425,7 @@
 
     this.addRule('shape.attach', function(context) {
 
-      return canAttach$1(
+      return canAttach(
         context.shape,
         context.target,
         null,
@@ -43451,7 +43451,7 @@
 
   BpmnRules.prototype.canMove = canMove;
 
-  BpmnRules.prototype.canAttach = canAttach$1;
+  BpmnRules.prototype.canAttach = canAttach;
 
   BpmnRules.prototype.canReplace = canReplace;
 
@@ -44008,7 +44008,7 @@
    *
    * @return {boolean | 'attach'}
    */
-  function canAttach$1(elements, target, source, position) {
+  function canAttach(elements, target, source, position) {
 
     if (!Array.isArray(elements)) {
       elements = [ elements ];
@@ -44144,7 +44144,7 @@
             });
           }
 
-          if (is$6(element, 'bpmn:BoundaryEvent') && canAttach$1(element, target, null, position)) {
+          if (is$6(element, 'bpmn:BoundaryEvent') && canAttach(element, target, null, position)) {
             canExecute.replacements.push({
               oldElementId: element.id,
               newElementType: 'bpmn:BoundaryEvent'
@@ -122504,149 +122504,6 @@
     updatePropagateAllChildVariablesBehavior: [ 'type', UpdatePropagateAllChildVariablesBehavior ]
   };
 
-  /**
-   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
-   *
-   * @typedef {import('bpmn-js/lib/model/Types').Element} Element
-   * @typedef {import('bpmn-js/lib/model/Types').Shape} Shape
-   *
-   * @typedef {import('diagram-js/lib/util/Types').Point} Point
-   */
-
-  const HIGH_PRIORITY$2 = 5000;
-
-  /**
-   * Zeebe rule provider that allows to create boundary events with catch events
-   *
-   * See {@link CustomRules} for the default implementation
-   * of BPMN 2.0 modeling rules provided by bpmn-js.
-   */
-  class CustomRules extends BpmnRules {
-
-    /**
-     * @param {EventBus} eventBus
-     */
-    constructor(eventBus) {
-      super(eventBus);
-    }
-
-    init() {
-      super.init();
-
-      this.addRule('shape.attach', HIGH_PRIORITY$2,(context) => {
-        return canAttach(
-          context.shape,
-          context.target,
-          null,
-          context.position);
-      });
-    }
-  }
-
-  CustomRules.$inject = [ 'eventBus' ];
-
-  /**
-   * Zeebe-specific rule that allows attaching intermediate events.
-   *
-   * @param {Element} elements
-   * @param {Shape} target
-   * @param {Element} source
-   * @param {Point} position
-   *
-   * @return {boolean|'attach'}
-   */
-  function canAttach(elements, target, source, position) {
-    function isBoundaryEvent(element) {
-      return !isLabel$2(element) && is$6(element, 'bpmn:BoundaryEvent');
-    }
-
-    /**
-     * In Zeebe we treat IntermediateCatchEvents as boundary events too,
-     * this must be reflected in the rules.
-     */
-    function isBoundaryCandidate(element) {
-      return isBoundaryEvent(element) || (
-        (
-          is$6(element, 'bpmn:IntermediateCatchEvent') ||
-          is$6(element, 'bpmn:IntermediateThrowEvent')
-        ) && !element.parent
-      );
-    }
-
-    function isForCompensation(e) {
-      return getBusinessObject$2(e).isForCompensation;
-    }
-
-    function isReceiveTaskAfterEventBasedGateway(element) {
-      return (
-        is$6(element, 'bpmn:ReceiveTask') &&
-        find$2(element.incoming, function(incoming) {
-          return is$6(incoming.source, 'bpmn:EventBasedGateway');
-        })
-      );
-    }
-
-    if (!Array.isArray(elements)) {
-      elements = [ elements ];
-    }
-
-    // disallow appending as boundary event
-    if (source) {
-      return false;
-    }
-
-    // only (re-)attach one element at a time
-    if (elements.length !== 1) {
-      return false;
-    }
-
-    const element = elements[0];
-
-    // do not attach labels
-    if (isLabel$2(element)) {
-      return false;
-    }
-
-    // only handle boundary events
-    if (!isBoundaryCandidate(element)) {
-      return false;
-    }
-
-    // allow default move operation
-    if (!target) {
-      return true;
-    }
-
-    // disallow drop on event sub processes
-    if (isEventSubProcess(target)) {
-      return false;
-    }
-
-    // only allow drop on non compensation activities
-    if (!is$6(target, 'bpmn:Activity') || isForCompensation(target)) {
-      return false;
-    }
-
-    // only attach to subprocess border
-    if (position && !getBoundaryAttachment(position, target)) {
-      return false;
-    }
-
-    // do not attach on receive tasks after event based gateways
-    if (isReceiveTaskAfterEventBasedGateway(target)) {
-      return false;
-    }
-
-    return 'attach';
-  }
-
-  CustomRules.canAttach = canAttach;
-
-  var rulesModule = {
-    __init__: [ 'bpmnRules' ],
-    bpmnRules: [ 'type', CustomRules ]
-  };
-
   // Unique ID creation requires a high quality random # generator. In the browser we therefore
   // require the crypto API and do not support built-in fallback to lower quality random number
   // generators (like Math.random()).
@@ -123526,11 +123383,11 @@
       }
       businessObject = eventDefinitions[0];
     }
+    if (!businessObject) {
+      return;
+    }
     return businessObject.get('messageRef');
   }
-  function findZeebeSubscription(message) {
-    return findExtension$1(message, 'zeebe:Subscription');
-  }
   function getDefaultValue(property) {
     if (property.value !== undefined) {
       return property.value;
@@ -124152,242 +124009,6 @@
     // should never throw as templates are validated beforehand
     throw unknownBindingError$1(element, property);
   }
-  function unsetProperty(commandStack, element, property) {
-    let businessObject = getBusinessObject$2(element);
-    const {
-      binding
-    } = property;
-    const {
-      type
-    } = binding;
-    let extensionElements;
-    const commands = [];
-    const context = {
-      element,
-      property
-    };
-    if (MESSAGE_BINDING_TYPES.includes(type)) {
-      businessObject = findMessage(businessObject);
-      if (!businessObject) {
-        return;
-      }
-    }
-
-    // property
-    if (PROPERTY_BINDING_TYPES.includes(type)) {
-      const {
-        name
-      } = binding;
-      commands.push({
-        cmd: 'element.updateModdleProperties',
-        context: {
-          ...context,
-          moddleElement: businessObject,
-          properties: {
-            [name]: undefined
-          }
-        }
-      });
-    }
-    if (EXTENSION_BINDING_TYPES$1.includes(type)) {
-      extensionElements = businessObject.get('extensionElements');
-      if (!extensionElements) return;
-    }
-
-    // zeebe:taskDefinition
-    if (TASK_DEFINITION_TYPES.includes(type)) {
-      const oldTaskDefinition = findExtension$1(extensionElements, 'zeebe:TaskDefinition');
-      const propertyName = getTaskDefinitionPropertyName(binding);
-      if (oldTaskDefinition) {
-        if (isOnlyProperty(oldTaskDefinition, propertyName)) {
-          // remove task definition
-          commands.push({
-            cmd: 'element.updateModdleProperties',
-            context: {
-              ...context,
-              moddleElement: extensionElements,
-              properties: {
-                values: without(extensionElements.get('values'), oldTaskDefinition)
-              }
-            }
-          });
-        } else {
-          // remove property
-          commands.push({
-            cmd: 'element.updateModdleProperties',
-            context: {
-              ...context,
-              moddleElement: oldTaskDefinition,
-              properties: {
-                [propertyName]: undefined
-              }
-            }
-          });
-        }
-      }
-    }
-
-    // zeebe:IoMapping
-    if (IO_BINDING_TYPES$1.includes(type)) {
-      let ioMapping = findExtension$1(extensionElements, 'zeebe:IoMapping');
-      if (!ioMapping) return;
-
-      // zeebe:Input
-      if (type === ZEBBE_INPUT_TYPE) {
-        const oldZeebeInputParameter = findInputParameter$1(ioMapping, binding);
-        const values = ioMapping.get('inputParameters').filter(value => value !== oldZeebeInputParameter);
-        if (ioMapping.get('outputParameters').length == 0 && values.length == 0) {
-          commands.push({
-            cmd: 'element.updateModdleProperties',
-            context: {
-              ...context,
-              moddleElement: extensionElements,
-              properties: {
-                values: without(extensionElements.get('values'), ioMapping)
-              }
-            }
-          });
-        } else {
-          commands.push({
-            cmd: 'element.updateModdleProperties',
-            context: {
-              ...context,
-              moddleElement: ioMapping,
-              properties: {
-                inputParameters: [...values]
-              }
-            }
-          });
-        }
-      }
-
-      // zeebe:Output
-      if (type === ZEEBE_OUTPUT_TYPE) {
-        const oldZeebeOutputParameter = findOutputParameter$1(ioMapping, binding);
-        const values = ioMapping.get('outputParameters').filter(value => value !== oldZeebeOutputParameter);
-        if (ioMapping.get('inputParameters').length == 0 && values.length == 0) {
-          commands.push({
-            cmd: 'element.updateModdleProperties',
-            context: {
-              ...context,
-              moddleElement: extensionElements,
-              properties: {
-                values: without(extensionElements.get('values'), ioMapping)
-              }
-            }
-          });
-        }
-        commands.push({
-          cmd: 'element.updateModdleProperties',
-          context: {
-            ...context,
-            moddleElement: ioMapping,
-            properties: {
-              'outputParameters': [...values]
-            }
-          }
-        });
-      }
-    }
-
-    // zeebe:taskHeaders
-    if (type === ZEEBE_TASK_HEADER_TYPE) {
-      let taskHeaders = findExtension$1(extensionElements, 'zeebe:TaskHeaders');
-      if (!taskHeaders) return;
-      const oldTaskHeader = findTaskHeader(taskHeaders, binding);
-      const values = taskHeaders.get('values').filter(value => value !== oldTaskHeader);
-      if (values.length === 0) {
-        commands.push({
-          cmd: 'element.updateModdleProperties',
-          context: {
-            ...context,
-            moddleElement: extensionElements,
-            properties: {
-              values: without(extensionElements.get('values'), taskHeaders)
-            }
-          }
-        });
-      } else {
-        commands.push({
-          cmd: 'element.updateModdleProperties',
-          context: {
-            ...context,
-            moddleElement: taskHeaders,
-            properties: {
-              values: [...values]
-            }
-          }
-        });
-      }
-    }
-
-    // zeebe:Property
-    if (type === ZEEBE_PROPERTY_TYPE) {
-      let zeebeProperties = findExtension$1(extensionElements, 'zeebe:Properties');
-      if (!zeebeProperties) return;
-      const oldZeebeProperty = findZeebeProperty(zeebeProperties, binding);
-      const properties = zeebeProperties.get('properties').filter(property => property !== oldZeebeProperty);
-      if (!properties.length) {
-        commands.push({
-          cmd: 'element.updateModdleProperties',
-          context: {
-            ...context,
-            moddleElement: extensionElements,
-            properties: {
-              values: without(extensionElements.get('values'), zeebeProperties)
-            }
-          }
-        });
-      } else {
-        commands.push({
-          cmd: 'element.updateModdleProperties',
-          context: {
-            ...context,
-            moddleElement: zeebeProperties,
-            properties: {
-              properties: [...properties]
-            }
-          }
-        });
-      }
-    }
-
-    // bpmn:Message#property
-    if (type === MESSAGE_PROPERTY_TYPE) {
-      commands.push({
-        cmd: 'element.updateModdleProperties',
-        context: {
-          ...context,
-          moddleElement: businessObject,
-          properties: {
-            [binding.name]: undefined
-          }
-        }
-      });
-    }
-
-    // bpmn:Message#zeebe:subscription#property
-    if (type === MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE) {
-      const subscription = findZeebeSubscription(businessObject);
-      if (!subscription) {
-        return;
-      }
-      commands.push({
-        cmd: 'element.updateModdleProperties',
-        context: {
-          ...context,
-          moddleElement: subscription,
-          properties: {
-            [binding.name]: undefined
-          }
-        }
-      });
-    }
-    if (commands.length) {
-      commandStack.execute('properties-panel.multi-command-executor', commands);
-      return;
-    }
-  }
   function validateProperty(value, property, translate$1 = translate) {
     const {
       constraints = {},
@@ -124452,14 +124073,6 @@
   function matchesPattern$1(string, pattern) {
     return new RegExp(pattern).test(string);
   }
-  function isOnlyProperty(moddleElement, propertyName) {
-    const descriptor = moddleElement.$descriptor;
-    return descriptor.properties.every(({
-      name
-    }) => {
-      return propertyName === name || moddleElement.get(name) === undefined;
-    });
-  }
 
   /**
    * Based on conditions, remove properties from the template.
@@ -124538,49 +124151,7 @@
     return true;
   }
 
-  function removeRootElement(rootElement, injector) {
-    const modeling = injector.get('modeling'),
-      canvas = injector.get('canvas'),
-      bpmnjs = injector.get('bpmnjs');
-    const element = canvas.getRootElement(),
-      definitions = bpmnjs.getDefinitions(),
-      rootElements = definitions.get('rootElements');
-    const newRootElements = rootElements.filter(e => e !== rootElement);
-
-    // short-circuit to prevent unnecessary updates
-    if (newRootElements.length === rootElements.length) {
-      return;
-    }
-    modeling.updateModdleProperties(element, definitions, {
-      rootElements: newRootElements
-    });
-  }
-
-  /**
-   * Remove message from element and the diagram.
-   *
-   * @param {import('bpmn-js/lib/model/Types').Element} element
-   * @param {import('didi').Injector} injector
-   */
-  function removeMessage(element, injector) {
-    const modeling = injector.get('modeling');
-    const bo = getReferringElement(element);
-    const message = findMessage(bo);
-    if (!message) {
-      return;
-    }
-    modeling.updateModdleProperties(element, bo, {
-      messageRef: undefined
-    });
-    removeRootElement(message, injector);
-  }
-  function getReferringElement(element) {
-    const bo = getBusinessObject$2(element);
-    if (is$6(bo, 'bpmn:Event')) {
-      return bo.get('eventDefinitions')[0];
-    }
-    return bo;
-  }
+  const HIGH_PRIORITY$2 = 2500;
 
   /**
    * Checks the conditions of an element template and sets/resets the
@@ -124596,6 +124167,20 @@
       this._injector = injector;
       this.preExecute(['element.updateProperties', 'element.updateModdleProperties'], this._saveConditionalState, true, this);
       this.postExecute(['element.updateProperties', 'element.updateModdleProperties', 'propertiesPanel.zeebe.changeTemplate', 'element.move'], this._applyConditions, true, this);
+
+      // Apply Conditions before changing properties. This persists the template so we can check if conditions apply
+      // after upgrading the template.
+      this.preExecute(['propertiesPanel.zeebe.changeTemplate'], HIGH_PRIORITY$2, this._handleTemplateUpgrade, true, this);
+    }
+    _handleTemplateUpgrade(context) {
+      const {
+        element,
+        newTemplate
+      } = context;
+      if (!element || !newTemplate) {
+        return;
+      }
+      context.newTemplate = applyConditions(context.element, context.newTemplate);
     }
     _saveConditionalState(context) {
       const {
@@ -124610,29 +124195,52 @@
     _applyConditions(context) {
       const {
         element,
-        oldTemplate
+        hints = {}
       } = context;
+      if (hints.skipConditionUpdate) {
+        return;
+      }
       const template = this._elementTemplates.get(element);
+
+      // New Template is persisted before applying default values,
+      // new conditions might apply after the defaults are present.
+      const oldTemplate = context.oldTemplate || context.newTemplate;
       if (!template || !oldTemplate || template.id !== oldTemplate.id) {
         return;
       }
       const newTemplate = applyConditions(element, template);
-      const propertiesToAdd = getMissingProperties(oldTemplate, newTemplate);
-      const propertiesToRemove = getPropertiesToRemove(newTemplate, oldTemplate);
-      this._updateReferencedElement(element, oldTemplate, newTemplate);
-      propertiesToAdd.forEach(property => setPropertyValue(this._bpmnFactory, this._commandStack, element, property, property.value));
-      propertiesToRemove.forEach(property => unsetProperty(this._commandStack, element, property));
-    }
-    _updateReferencedElement(element, oldTemplate, newTemplate) {
-      if (hasMessageProperties(oldTemplate) && !hasMessageProperties(newTemplate)) {
-        removeMessage(element, this._injector);
+      if (!hasDifferentPropertyBindings(newTemplate, oldTemplate)) {
+        return;
       }
+      const changeContext = {
+        element,
+        newTemplate,
+        oldTemplate,
+        hints: {
+          skipConditionUpdate: true
+        }
+      };
+      this._commandStack.execute('propertiesPanel.zeebe.changeTemplate', changeContext);
     }
   }
   ElementTemplatesConditionChecker.$inject = ['eventBus', 'elementTemplates', 'commandStack', 'bpmnFactory', 'injector'];
 
   // helpers
 
+  function hasDifferentPropertyBindings(sourceTemplate, targetTemplate) {
+    return hasNewProperties(sourceTemplate, targetTemplate) || hasRemovedProperties(sourceTemplate, targetTemplate);
+  }
+  function hasNewProperties(sourceTemplate, targetTemplate) {
+    let properties = targetTemplate.properties;
+    return properties.some(targetProp => !sourceTemplate.properties.find(sourceProp => compareProps(sourceProp, targetProp)));
+  }
+  function hasRemovedProperties(oldTemplate, newTemplate) {
+    const oldProperties = getMissingProperties(newTemplate, oldTemplate);
+
+    // ensure XML properties are mantained for properties with
+    // different conditions but same bindings
+    return oldProperties.some(property => !findPropertyWithBinding(newTemplate, property));
+  }
   function getMissingProperties(sourceTemplate, targetTemplate) {
     let properties = targetTemplate.properties;
     return properties.filter(targetProp => !sourceTemplate.properties.find(sourceProp => compareProps(sourceProp, targetProp)));
@@ -124643,13 +124251,6 @@
   function findPropertyWithBinding(template, prop1) {
     return template.properties.some(prop2 => areBindingsEqual(prop1.binding, prop2.binding));
   }
-  function getPropertiesToRemove(newTemplate, oldTemplate) {
-    const oldProperties = getMissingProperties(newTemplate, oldTemplate);
-
-    // ensure XML properties are mantained for properties with
-    // different conditions but same bindings
-    return oldProperties.filter(property => !findPropertyWithBinding(newTemplate, property));
-  }
   function normalizeReplacer$1(key, value) {
     if (isObject$1(value)) {
       const keys = Object.keys(value).sort();
@@ -124682,9 +124283,6 @@
   function equals(a, b) {
     return JSON.stringify(a, normalizeReplacer$1) === JSON.stringify(b, normalizeReplacer$1);
   }
-  function hasMessageProperties(template) {
-    return template.properties.some(p => MESSAGE_BINDING_TYPES.includes(p.binding.type));
-  }
 
   /**
    * The BPMN 2.0 extension attribute name under
@@ -125464,16 +125062,87 @@
     return !is$6(eventDefinitions[0], eventDefinition);
   }
 
+  function removeRootElement(rootElement, injector) {
+    const modeling = injector.get('modeling'),
+      canvas = injector.get('canvas'),
+      bpmnjs = injector.get('bpmnjs');
+    const element = canvas.getRootElement(),
+      definitions = bpmnjs.getDefinitions(),
+      rootElements = definitions.get('rootElements');
+    const newRootElements = rootElements.filter(e => e !== rootElement);
+
+    // short-circuit to prevent unnecessary updates
+    if (newRootElements.length === rootElements.length) {
+      return;
+    }
+    modeling.updateModdleProperties(element, definitions, {
+      rootElements: newRootElements
+    });
+  }
+
+  /**
+   * Remove message from element and the diagram.
+   *
+   * @param {import('bpmn-js/lib/model/Types').Element} element
+   * @param {import('didi').Injector} injector
+   */
+  function removeMessage(element, injector) {
+    const modeling = injector.get('modeling');
+    const bo = getReferringElement(element);
+
+    // Event does not have an event definition
+    if (!bo) {
+      return;
+    }
+    const message = findMessage(bo);
+    if (!message) {
+      return;
+    }
+    modeling.updateModdleProperties(element, bo, {
+      messageRef: undefined
+    });
+    removeRootElement(message, injector);
+  }
+  function getReferringElement(element) {
+    const bo = getBusinessObject$2(element);
+    if (is$6(bo, 'bpmn:Event')) {
+      return bo.get('eventDefinitions')[0];
+    }
+    return bo;
+  }
+
   /**
    * Applies an element template to an element. Sets `zeebe:modelerTemplate` and
    * `zeebe:modelerTemplateVersion`.
    */
   let ChangeElementTemplateHandler$1 = class ChangeElementTemplateHandler {
-    constructor(bpmnFactory, bpmnReplace, commandStack, modeling) {
+    constructor(bpmnFactory, bpmnReplace, commandStack, injector) {
       this._bpmnFactory = bpmnFactory;
       this._bpmnReplace = bpmnReplace;
-      this._commandStack = commandStack;
-      this._modeling = modeling;
+
+      // Wrap commandStack and modeling to add hints to all commands
+      this._commandStackWrapper = {
+        execute: (event, context, ...rest) => {
+          commandStack.execute(event, {
+            hints: {
+              skipConditionUpdate: true
+            },
+            ...context
+          }, ...rest);
+        }
+      };
+      this._modelingWrapper = {
+        updateModdleProperties: (element, moddleElement, properties) => this._commandStackWrapper.execute('element.updateModdleProperties', {
+          element,
+          moddleElement,
+          properties
+        }),
+        updateProperties: (element, properties) => this._commandStackWrapper.execute('element.updateProperties', {
+          element,
+          properties
+        })
+      };
+      this._injector = injector;
     }
 
     /**
@@ -125498,11 +125167,8 @@
       // update zeebe:modelerTemplateIcon
       this._updateZeebeModelerTemplateIcon(element, newTemplate);
       if (newTemplate) {
-        // do not apply properties that don't meet conditions
-        newTemplate = applyConditions(element, newTemplate);
-
         // update element type
-        element = context.element = this._updateElementType(element, newTemplate);
+        element = context.element = this._updateElementType(element, oldTemplate, newTemplate);
 
         // update properties
         this._updateProperties(element, oldTemplate, newTemplate);
@@ -125518,18 +125184,12 @@
 
         // update zeebe:Property properties
         this._updateZeebePropertyProperties(element, oldTemplate, newTemplate);
-
-        // update bpmn:Message properties
-        this._updateMessageProperties(element, oldTemplate, newTemplate);
-
-        // update bpmn:Message zeebe:subscription properties
-        this._updateMessageZeebeSubscriptionProperties(element, oldTemplate, newTemplate);
-        this._updateZeebeModelerTemplateOnReferencedElement(element, oldTemplate, newTemplate);
+        this._updateMessage(element, oldTemplate, newTemplate);
       }
     }
     _getOrCreateExtensionElements(element, businessObject = getBusinessObject$2(element)) {
       const bpmnFactory = this._bpmnFactory,
-        modeling = this._modeling;
+        modeling = this._modelingWrapper;
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
         extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
@@ -125543,30 +125203,48 @@
       return extensionElements;
     }
     _updateZeebeModelerTemplate(element, newTemplate) {
-      const modeling = this._modeling;
+      const modeling = this._modelingWrapper;
       modeling.updateProperties(element, {
         'zeebe:modelerTemplate': newTemplate && newTemplate.id,
         'zeebe:modelerTemplateVersion': newTemplate && newTemplate.version
       });
     }
     _updateZeebeModelerTemplateIcon(element, newTemplate) {
-      const modeling = this._modeling;
+      const modeling = this._modelingWrapper;
       const icon = newTemplate && newTemplate.icon;
       modeling.updateProperties(element, {
         'zeebe:modelerTemplateIcon': icon && icon.contents
       });
     }
     _updateProperties(element, oldTemplate, newTemplate) {
-      const commandStack = this._commandStack;
+      const commandStack = this._commandStackWrapper;
+      const businessObject = getBusinessObject$2(element);
       const newProperties = newTemplate.properties.filter(newProperty => {
         const newBinding = newProperty.binding,
           newBindingType = newBinding.type;
         return newBindingType === 'property';
       });
+
+      // Remove old Properties if no new Properties specified
+      const propertiesToRemove = oldTemplate && oldTemplate.properties.filter(oldProperty => {
+        const oldBinding = oldProperty.binding,
+          oldBindingType = oldBinding.type;
+        return oldBindingType === 'property' && !newProperties.find(newProperty => newProperty.binding.name === oldProperty.binding.name);
+      }) || [];
+      if (propertiesToRemove.length) {
+        const payload = propertiesToRemove.reduce((properties, property) => {
+          properties[property.binding.name] = undefined;
+          return properties;
+        }, {});
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: businessObject,
+          properties: payload
+        });
+      }
       if (!newProperties.length) {
         return;
       }
-      const businessObject = getBusinessObject$2(element);
       newProperties.forEach(newProperty => {
         const oldProperty = findOldProperty$1(oldTemplate, newProperty),
           newBinding = newProperty.binding,
@@ -125596,34 +125274,42 @@
      */
     _updateZeebeTaskDefinition(element, oldTemplate, newTemplate) {
       const bpmnFactory = this._bpmnFactory,
-        commandStack = this._commandStack;
+        commandStack = this._commandStackWrapper;
       const newProperties = newTemplate.properties.filter(newProperty => {
         const newBinding = newProperty.binding,
           newBindingType = newBinding.type;
         return TASK_DEFINITION_TYPES.includes(newBindingType);
       });
+      const businessObject = this._getOrCreateExtensionElements(element);
+      let taskDefinition = findExtension$1(businessObject, 'zeebe:TaskDefinition');
+
+      // (1) remove old task definition if no new properties specified
 
-      // (1) do not override old task definition if no new properties specified
       if (!newProperties.length) {
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: businessObject,
+          properties: {
+            values: without(businessObject.get('values'), taskDefinition)
+          }
+        });
         return;
       }
-      const businessObject = this._getOrCreateExtensionElements(element);
       newProperties.forEach(newProperty => {
         const oldProperty = findOldProperty$1(oldTemplate, newProperty),
-          oldTaskDefinition = findBusinessObject(businessObject, newProperty),
           newPropertyValue = getDefaultValue(newProperty),
           newBinding = newProperty.binding,
           propertyName = getTaskDefinitionPropertyName(newBinding);
 
         // (2) update old task definition
-        if (oldTaskDefinition) {
-          if (!shouldKeepValue(oldTaskDefinition, oldProperty, newProperty)) {
+        if (taskDefinition) {
+          if (!shouldKeepValue(taskDefinition, oldProperty, newProperty)) {
             const properties = {
               [propertyName]: newPropertyValue
             };
             commandStack.execute('element.updateModdleProperties', {
               element,
-              moddleElement: oldTaskDefinition,
+              moddleElement: taskDefinition,
               properties
             });
           }
@@ -125634,17 +125320,34 @@
           const properties = {
             [propertyName]: newPropertyValue
           };
-          const newTaskDefinition = createTaskDefinition(properties, bpmnFactory);
-          newTaskDefinition.$parent = businessObject;
+          taskDefinition = createTaskDefinition(properties, bpmnFactory);
+          taskDefinition.$parent = businessObject;
           commandStack.execute('element.updateModdleProperties', {
             element,
             moddleElement: businessObject,
             properties: {
-              values: [...businessObject.get('values'), newTaskDefinition]
+              values: [...businessObject.get('values'), taskDefinition]
             }
           });
         }
       });
+
+      // (4) remove properties no longer templated
+      const oldProperties = oldTemplate && oldTemplate.properties.filter(oldProperty => {
+        const oldBinding = oldProperty.binding,
+          oldBindingType = oldBinding.type;
+        return TASK_DEFINITION_TYPES.includes(oldBindingType) && !newProperties.find(newProperty => newProperty.binding.property === oldProperty.binding.property);
+      }) || [];
+      oldProperties.forEach(oldProperty => {
+        const properties = {
+          [oldProperty.binding.property]: undefined
+        };
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: taskDefinition,
+          properties
+        });
+      });
     }
 
     /**
@@ -125657,7 +125360,7 @@
      */
     _updateZeebeInputOutputParameterProperties(element, oldTemplate, newTemplate) {
       const bpmnFactory = this._bpmnFactory,
-        commandStack = this._commandStack;
+        commandStack = this._commandStackWrapper;
       const newProperties = newTemplate.properties.filter(newProperty => {
         const newBinding = newProperty.binding,
           newBindingType = newBinding.type;
@@ -125784,7 +125487,7 @@
      */
     _updateZeebeTaskHeaderProperties(element, oldTemplate, newTemplate) {
       const bpmnFactory = this._bpmnFactory,
-        commandStack = this._commandStack;
+        commandStack = this._commandStackWrapper;
       const newProperties = newTemplate.properties.filter(newProperty => {
         const newBinding = newProperty.binding,
           newBindingType = newBinding.type;
@@ -125874,7 +125577,7 @@
      */
     _updateZeebePropertyProperties(element, oldTemplate, newTemplate) {
       const bpmnFactory = this._bpmnFactory,
-        commandStack = this._commandStack;
+        commandStack = this._commandStackWrapper;
       const newProperties = newTemplate.properties.filter(newProperty => {
         const newBinding = newProperty.binding,
           newBindingType = newBinding.type;
@@ -125955,6 +125658,17 @@
         });
       }
     }
+    _updateMessage(element, oldTemplate, newTemplate) {
+      // update bpmn:Message properties
+      this._updateMessageProperties(element, oldTemplate, newTemplate);
+
+      // update bpmn:Message zeebe:subscription properties
+      this._updateMessageZeebeSubscriptionProperties(element, oldTemplate, newTemplate);
+      this._updateZeebeModelerTemplateOnReferencedElement(element, oldTemplate, newTemplate);
+      if (!hasMessageProperties(newTemplate)) {
+        removeMessage(element, this._injector);
+      }
+    }
 
     /**
      * Update bpmn:Message properties.
@@ -125969,10 +125683,21 @@
           newBindingType = newBinding.type;
         return newBindingType === MESSAGE_PROPERTY_TYPE;
       });
+      const removedProperties = oldTemplate && oldTemplate.properties.filter(oldProperty => {
+        const oldBinding = oldProperty.binding,
+          oldBindingType = oldBinding.type;
+        return oldBindingType === MESSAGE_PROPERTY_TYPE && !newProperties.find(newProperty => newProperty.binding.name === oldProperty.binding.name);
+      }) || [];
+      let message = this._getMessage(element);
+      message && removedProperties.forEach(removedProperty => {
+        this._modelingWrapper.updateModdleProperties(element, message, {
+          [removedProperty.binding.name]: undefined
+        });
+      });
       if (!newProperties.length) {
         return;
       }
-      const message = this._getOrCreateMessage(element, newTemplate);
+      message = this._getOrCreateMessage(element, newTemplate);
       newProperties.forEach(newProperty => {
         const oldProperty = findOldProperty$1(oldTemplate, newProperty),
           newBinding = newProperty.binding,
@@ -125984,7 +125709,7 @@
           return;
         }
         properties[newBindingName] = newPropertyValue;
-        this._modeling.updateModdleProperties(element, changedElement, properties);
+        this._modelingWrapper.updateModdleProperties(element, changedElement, properties);
       });
     }
 
@@ -126001,24 +125726,50 @@
           newBindingType = newBinding.type;
         return newBindingType === MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE;
       });
-      if (!newProperties.length) {
+      const removedProperties = oldTemplate && oldTemplate.properties.filter(oldProperty => {
+        const oldBinding = oldProperty.binding,
+          oldBindingType = oldBinding.type;
+        return oldBindingType === MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE && !newProperties.find(newProperty => newProperty.binding.name === oldProperty.binding.name);
+      }) || [];
+      if (!newProperties.length && !removedProperties.length) {
         return;
       }
       const message = this._getOrCreateMessage(element, newTemplate);
-      const zeebeSubscription = this._getOrCreateExtension(element, message, 'zeebe:Subscription');
-      newProperties.forEach(newProperty => {
+      const messageExtensionElements = this._getOrCreateExtensionElements(element, message);
+      const zeebeSubscription = this._getSubscription(element, message);
+      const propertiesToSet = newProperties.reduce((properties, newProperty) => {
         const oldProperty = findOldProperty$1(oldTemplate, newProperty),
           newBinding = newProperty.binding,
           newBindingName = newBinding.name,
           newPropertyValue = getDefaultValue(newProperty),
           changedElement = zeebeSubscription;
-        let properties = {};
         if (shouldKeepValue(changedElement, oldProperty, newProperty)) {
-          return;
+          return properties;
         }
         properties[newBindingName] = newPropertyValue;
-        this._modeling.updateModdleProperties(element, changedElement, properties);
-      });
+        return properties;
+      }, {});
+
+      // Update zeebe Subscription
+      if (zeebeSubscription) {
+        this._modelingWrapper.updateModdleProperties(element, zeebeSubscription, propertiesToSet);
+      } else {
+        // create new Subscription
+        const newSubscription = createElement$1('zeebe:Subscription', propertiesToSet, message, this._bpmnFactory);
+        this._modelingWrapper.updateModdleProperties(element, messageExtensionElements, {
+          values: [...messageExtensionElements.get('values'), newSubscription]
+        });
+      }
+
+      // Remove old properties
+      if (!oldTemplate || !zeebeSubscription) {
+        return;
+      }
+      const propertiesToRemove = removedProperties.reduce((properties, removedProperty) => {
+        properties[removedProperty.binding.name] = undefined;
+        return properties;
+      }, {});
+      this._modelingWrapper.updateModdleProperties(element, zeebeSubscription, propertiesToRemove);
     }
     _updateZeebeModelerTemplateOnReferencedElement(element, oldTemplate, newTemplate) {
       const businessObject = getBusinessObject$2(element);
@@ -126029,39 +125780,41 @@
       if (getTemplateId$1(message) === newTemplate.id) {
         return;
       }
-      this._modeling.updateModdleProperties(element, message, {
+      this._modelingWrapper.updateModdleProperties(element, message, {
         'zeebe:modelerTemplate': newTemplate.id
       });
     }
-    _getOrCreateExtension(element, bo, type) {
+    _getSubscription(element, bo) {
       const extensionElements = this._getOrCreateExtensionElements(element, bo);
-      const extension = findExtension$1(extensionElements, type);
+      const extension = findExtension$1(extensionElements, 'zeebe:Subscription');
       if (extension) {
         return extension;
       }
-      const newExtension = createElement$1(type, {}, bo, this._bpmnFactory);
-      this._modeling.updateModdleProperties(element, extensionElements, {
-        values: [...extensionElements.get('values'), newExtension]
-      });
-      return newExtension;
     }
     _getOrCreateMessage(element, template) {
+      return this._getMessage(element) || this._createMessage(element, template);
+    }
+    _createMessage(element, template) {
       let bo = getBusinessObject$2(element);
       if (is$6(bo, 'bpmn:Event')) {
         bo = bo.get('eventDefinitions')[0];
       }
-      let message = bo.get('messageRef');
-      if (!message) {
-        message = this._bpmnFactory.create('bpmn:Message', {
-          'zeebe:modelerTemplate': template.id
-        });
-        message.$parent = getRoot(bo);
-        this._modeling.updateModdleProperties(element, bo, {
-          messageRef: message
-        });
-      }
+      const message = this._bpmnFactory.create('bpmn:Message', {
+        'zeebe:modelerTemplate': template.id
+      });
+      message.$parent = getRoot(bo);
+      this._modelingWrapper.updateModdleProperties(element, bo, {
+        messageRef: message
+      });
       return message;
     }
+    _getMessage(element) {
+      let bo = getBusinessObject$2(element);
+      if (is$6(bo, 'bpmn:Event')) {
+        bo = bo.get('eventDefinitions')[0];
+      }
+      return bo && bo.get('messageRef');
+    }
 
     /**
      * Replaces the element with the specified elementType.
@@ -126070,12 +125823,18 @@
      * @param {djs.model.Base} element
      * @param {Object} newTemplate
      */
-    _updateElementType(element, newTemplate) {
+    _updateElementType(element, oldTemplate, newTemplate) {
       // determine new task type
       const newType = newTemplate.elementType;
       if (!newType) {
         return element;
       }
+      const oldType = oldTemplate && oldTemplate.elementType;
+
+      // Do not replace if the element type did not change
+      if (oldType && oldType.value === newType.value && oldType.eventDefinition === newType.eventDefinition) {
+        return element;
+      }
       const replacement = {
         type: newType.value
       };
@@ -126086,7 +125845,7 @@
       return replacedElement;
     }
   };
-  ChangeElementTemplateHandler$1.$inject = ['bpmnFactory', 'bpmnReplace', 'commandStack', 'modeling'];
+  ChangeElementTemplateHandler$1.$inject = ['bpmnFactory', 'bpmnReplace', 'commandStack', 'injector'];
 
   // helpers //////////
 
@@ -126285,6 +126044,9 @@
   }
   function getPropertyValue(element, property) {
     const businessObject = getBusinessObject$2(element);
+    if (!businessObject) {
+      return;
+    }
     const binding = property.binding,
       bindingName = binding.name,
       bindingType = binding.type;
@@ -126321,6 +126083,9 @@
     array.splice(index, 1);
     return array;
   }
+  function hasMessageProperties(template) {
+    return template.properties.some(p => MESSAGE_BINDING_TYPES.includes(p.binding.type));
+  }
 
   class RemoveElementTemplateHandler {
     constructor(modeling, elementFactory, elementRegistry, canvas, bpmnFactory, replace, commandStack) {
@@ -148547,7 +148312,6 @@
   Modeler.prototype._camundaCloudModules = [
     ...commonModules,
     behaviorsModule,
-    rulesModule,
     index$1$2,
     index$1$1,
     index$1,