feat: support zeebe:calledElement templating

package.json

@@ -48,7 +48,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@bpmn-io/element-templates-validator": "^1.6.1",
+    "@bpmn-io/element-templates-validator": "^1.7.0",
     "@bpmn-io/extract-process-variables": "^0.8.0",
     "bpmnlint": "^9.2.0",
     "classnames": "^2.3.1",

src/cloud-element-templates/CalledElementBehavior.js

@@ -0,0 +1,61 @@
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+
+import { findExtension } from './Helper';
+
+/**
+ * Enforces no variable propagation for templated call activities.
+ */
+export class CalledElementBehavior extends CommandInterceptor {
+
+  /**
+   * @param {*} eventBus
+   * @param {*} modeling
+   * @param {import('./ElementTemplates').default} elementTemplates
+   */
+  constructor(eventBus, modeling, elementTemplates) {
+    super(eventBus);
+
+    this._modeling = modeling;
+    this._elementTemplates = elementTemplates;
+
+    this.postExecuted([
+      'element.updateProperties', 'element.updateModdleProperties'
+    ], this._ensureNoPropagation, true, this);
+  }
+
+  _ensureNoPropagation(context) {
+    const { element } = context;
+
+    if (!this._elementTemplates.get(element)) {
+      return;
+    }
+
+    if (!is(element, 'bpmn:CallActivity')) {
+      return;
+    }
+
+    const calledElement = findExtension(element, 'zeebe:CalledElement');
+
+    if (!calledElement) {
+      return;
+    }
+
+    for (const property of [
+      'propagateAllChildVariables',
+      'propagateAllParentVariables'
+    ]) {
+      if (calledElement.get(property) !== false) {
+        this._modeling.updateModdleProperties(element, calledElement, {
+          [property]: false
+        });
+      }
+    }
+  }
+}
+
+CalledElementBehavior.$inject = [
+  'eventBus',
+  'modeling',
+  'elementTemplates'
+];

src/cloud-element-templates/CreateHelper.js

@@ -97,6 +97,18 @@ export function createZeebeProperty(binding, value = '', bpmnFactory) {
   });
 }
 
+/**
+ * Create a called element representing the given value.
+ *
+ * @param {object} attrs
+ * @param {BpmnFactory} bpmnFactory
+ *
+ * @return {ModdleElement}
+ */
+export function createCalledElement(attrs = {}, bpmnFactory) {
+  return bpmnFactory.create('zeebe:CalledElement', attrs);
+}
+
 /**
  * Retrieves whether an element should be updated for a given property.
  *

src/cloud-element-templates/cmd/ChangeElementTemplateHandler.js

@@ -11,6 +11,7 @@ import {
 } from '../Helper';
 
 import {
+  createCalledElement,
   createInputParameter,
   createOutputParameter,
   createTaskDefinition,
@@ -29,7 +30,8 @@ import {
   MESSAGE_BINDING_TYPES,
   MESSAGE_PROPERTY_TYPE,
   MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE,
-  TASK_DEFINITION_TYPES
+  TASK_DEFINITION_TYPES,
+  ZEEBE_CALLED_ELEMENT
 } from '../util/bindingTypes';
 
 import {
@@ -125,6 +127,8 @@ export default class ChangeElementTemplateHandler {
       this._updateZeebePropertyProperties(element, oldTemplate, newTemplate);
 
       this._updateMessage(element, oldTemplate, newTemplate);
+
+      this._updateCalledElement(element, oldTemplate, newTemplate);
     }
   }
 
@@ -902,6 +906,107 @@ export default class ChangeElementTemplateHandler {
   }
 
 
+
+  /**
+   * Update `zeebe:CalledElement` properties of specified business object. This
+   * can only exist in `bpmn:ExtensionElements`.
+   *
+   * @param {djs.model.Base} element
+   * @param {Object} oldTemplate
+   * @param {Object} newTemplate
+   */
+  _updateCalledElement(element, oldTemplate, newTemplate) {
+    const bpmnFactory = this._bpmnFactory,
+          commandStack = this._commandStackWrapper;
+
+    const newProperties = newTemplate.properties.filter((newProperty) => {
+      const newBinding = newProperty.binding,
+            newBindingType = newBinding.type;
+
+      return newBindingType === ZEEBE_CALLED_ELEMENT;
+    });
+
+    const businessObject = this._getOrCreateExtensionElements(element);
+    let calledElement = findExtension(businessObject, 'zeebe:CalledElement');
+
+    // (1) remove old called element if no new properties specified
+    if (!newProperties.length) {
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          values: without(businessObject.get('values'), calledElement)
+        }
+      });
+
+      return;
+    }
+
+
+    newProperties.forEach((newProperty) => {
+      const oldProperty = findOldProperty(oldTemplate, newProperty),
+            newPropertyValue = getDefaultValue(newProperty),
+            propertyName = newProperty.binding.property;
+
+      // (2) update old called element
+      if (calledElement) {
+
+        if (!shouldKeepValue(calledElement, oldProperty, newProperty)) {
+          const properties = {
+            [propertyName]: newPropertyValue
+          };
+
+          commandStack.execute('element.updateModdleProperties', {
+            element,
+            moddleElement: calledElement,
+            properties
+          });
+        }
+      }
+
+      // (3) add new called element
+      else {
+        const properties = {
+          [propertyName]: newPropertyValue
+        };
+
+        calledElement = createCalledElement(properties, bpmnFactory);
+
+        calledElement.$parent = businessObject;
+
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: businessObject,
+          properties: {
+            values: [ ...businessObject.get('values'), calledElement ]
+          }
+        });
+      }
+    });
+
+    // (4) remove properties no longer templated
+    const oldProperties = oldTemplate && oldTemplate.properties.filter((oldProperty) => {
+      const oldBinding = oldProperty.binding,
+            oldBindingType = oldBinding.type;
+
+      return oldBindingType === ZEEBE_CALLED_ELEMENT && !newProperties.find(
+        (newProperty) => newProperty.binding.property === oldProperty.binding.property
+      );
+    }) || [];
+
+    oldProperties.forEach((oldProperty) => {
+      const properties = {
+        [oldProperty.binding.property]: undefined
+      };
+
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: calledElement,
+        properties
+      });
+    });
+  }
+
   /**
    * Replaces the element with the specified elementType.
    * Takes into account the eventDefinition for events.

src/cloud-element-templates/create/CalledElementBindingProvider.js

@@ -0,0 +1,36 @@
+import {
+  ensureExtension
+} from '../CreateHelper';
+import { getDefaultValue } from '../Helper';
+
+
+export class CalledElementBindingProvider {
+  static create(element, options) {
+    const {
+      property,
+      bpmnFactory
+    } = options;
+
+    const {
+      binding
+    } = property;
+
+    const {
+      property: propertyName
+    } = binding;
+
+    const value = getDefaultValue(property);
+
+    const calledElement = ensureExtension(element, 'zeebe:CalledElement', bpmnFactory);
+
+    // TODO(@barmac): remove if we decide to support propagation in templates
+    ensureNoPropagation(calledElement);
+
+    calledElement.set(propertyName, value);
+  }
+}
+
+function ensureNoPropagation(calledElement) {
+  calledElement.set('propagateAllChildVariables', false);
+  calledElement.set('propagateAllParentVariables', false);
+}

src/cloud-element-templates/create/TemplateElementFactory.js

@@ -12,6 +12,7 @@ import TaskHeaderBindingProvider from './TaskHeaderBindingProvider';
 import ZeebePropertiesProvider from './ZeebePropertiesProvider';
 import { MessagePropertyBindingProvider } from './MessagePropertyBindingProvider';
 import { MessageZeebeSubscriptionBindingProvider } from './MessageZeebeSubscriptionBindingProvider';
+import { CalledElementBindingProvider } from './CalledElementBindingProvider';
 
 import {
   MESSAGE_PROPERTY_TYPE,
@@ -22,7 +23,8 @@ import {
   ZEBBE_INPUT_TYPE,
   ZEEBE_OUTPUT_TYPE,
   ZEEBE_TASK_HEADER_TYPE,
-  ZEBBE_PROPERTY_TYPE
+  ZEBBE_PROPERTY_TYPE,
+  ZEEBE_CALLED_ELEMENT
 } from '../util/bindingTypes';
 
 import {
@@ -44,7 +46,8 @@ export default class TemplateElementFactory {
       [ZEEBE_OUTPUT_TYPE]: OutputBindingProvider,
       [ZEEBE_TASK_HEADER_TYPE]: TaskHeaderBindingProvider,
       [MESSAGE_PROPERTY_TYPE]: MessagePropertyBindingProvider,
-      [MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE]: MessageZeebeSubscriptionBindingProvider
+      [MESSAGE_ZEEBE_SUBSCRIPTION_PROPERTY_TYPE]: MessageZeebeSubscriptionBindingProvider,
+      [ZEEBE_CALLED_ELEMENT]: CalledElementBindingProvider
     };
   }
 

src/cloud-element-templates/index.js

@@ -10,6 +10,7 @@ import ElementTemplatesPropertiesProvider from './ElementTemplatesPropertiesProv
 import UpdateTemplatePropertiesOrder from './UpdateTemplatePropertiesOrder';
 import { ReferencedElementBehavior } from './ReferencedElementBehavior';
 import { GeneratedValueBehavior } from './GeneratedValueBehavior';
+import { CalledElementBehavior } from './CalledElementBehavior';
 
 
 export default {
@@ -25,7 +26,8 @@ export default {
     'elementTemplatesConditionChecker',
     'generatedValueBehavior',
     'referencedElementBehavior',
-    'updateTemplatePropertiesOrder'
+    'updateTemplatePropertiesOrder',
+    'calledElementBehavior'
   ],
   elementTemplates: [ 'type', ElementTemplates ],
   elementTemplatesLoader: [ 'type', ElementTemplatesLoader ],
@@ -34,5 +36,6 @@ export default {
   elementTemplatesConditionChecker: [ 'type', ElementTemplatesConditionChecker ],
   generatedValueBehavior: [ 'type', GeneratedValueBehavior ],
   referencedElementBehavior: [ 'type', ReferencedElementBehavior ],
-  updateTemplatePropertiesOrder: [ 'type', UpdateTemplatePropertiesOrder ]
+  updateTemplatePropertiesOrder: [ 'type', UpdateTemplatePropertiesOrder ],
+  calledElementBehavior: [ 'type', CalledElementBehavior ]
 };