feat: change task type when element template is applied

package.json

@@ -48,7 +48,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@bpmn-io/element-templates-validator": "^0.8.0",
+    "@bpmn-io/element-templates-validator": "^0.8.1",
     "@bpmn-io/extract-process-variables": "^0.4.5",
     "@philippfromme/moddle-helpers": "^0.4.1",
     "array-move": "^3.0.1",

src/provider/cloud-element-templates/ElementTemplates.js

@@ -52,13 +52,15 @@ export default class ElementTemplates extends DefaultElementTemplates {
 
     const oldTemplate = this.get(element);
 
-    this._commandStack.execute('propertiesPanel.zeebe.changeTemplate', {
-      element: element,
+    const context = {
+      element,
       newTemplate,
       oldTemplate
-    });
+    };
 
-    return element;
+    this._commandStack.execute('propertiesPanel.zeebe.changeTemplate', context);
+
+    return context.element;
   }
 }
 

src/provider/cloud-element-templates/ElementTemplatesLoader.js

@@ -3,17 +3,18 @@ import { Validator } from './Validator';
 import { default as TemplatesLoader } from '../element-templates/ElementTemplatesLoader';
 
 export default class ElementTemplatesLoader extends TemplatesLoader {
-  constructor(loadTemplates, eventBus, elementTemplates) {
+  constructor(loadTemplates, eventBus, elementTemplates, moddle) {
 
-    super(loadTemplates, eventBus, elementTemplates);
+    super(loadTemplates, eventBus, elementTemplates, moddle);
 
     this._elementTemplates = elementTemplates;
   }
 
   setTemplates(templates) {
-    const elementTemplates = this._elementTemplates;
+    const elementTemplates = this._elementTemplates,
+          moddle = this._moddle;
 
-    const validator = new Validator().addAll(templates);
+    const validator = new Validator(moddle).addAll(templates);
 
     const errors = validator.getErrors(),
           validTemplates = validator.getValidTemplates();
@@ -31,5 +32,6 @@ export default class ElementTemplatesLoader extends TemplatesLoader {
 ElementTemplatesLoader.$inject = [
   'config.elementTemplates',
   'eventBus',
-  'elementTemplates'
+  'elementTemplates',
+  'moddle'
 ];

src/provider/cloud-element-templates/ReplaceBehavior.js

@@ -33,7 +33,15 @@ export default class ReplaceBehavior extends CommandInterceptor {
         return;
       }
 
-      const { appliesTo } = elementTemplate;
+      const { appliesTo, elementType } = elementTemplate;
+
+      if (elementType) {
+        if (!is(newShape, elementType.value)) {
+          unlinkTemplate(newShape, injector);
+        }
+
+        return;
+      }
 
       const allowed = appliesTo.reduce((allowed, type) => {
         return allowed || is(newBo, type);

src/provider/cloud-element-templates/Validator.js

@@ -19,8 +19,8 @@ const SUPPORTED_SCHEMA_PACKAGE = getTemplateSchemaPackage();
  * A Camunda Cloud element template validator.
  */
 export class Validator extends BaseValidator {
-  constructor() {
-    super();
+  constructor(moddle) {
+    super(moddle);
   }
 
   /**
@@ -70,7 +70,14 @@ export class Validator extends BaseValidator {
       }
     }
 
-    // (4) JSON schema compliance
+    // (4) elementType validation
+    const elementTypeError = this._validateElementType(template);
+
+    if (elementTypeError) {
+      return elementTypeError;
+    }
+
+    // (5) JSON schema compliance
     const validationResult = validateAgainstSchema(template);
 
     const {
@@ -92,4 +99,4 @@ export class Validator extends BaseValidator {
   isSchemaValid(schema) {
     return schema && schema.includes(SUPPORTED_SCHEMA_PACKAGE);
   }
-}
+}

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

@@ -27,8 +27,9 @@ import {
  * `zeebe:modelerTemplateVersion`.
  */
 export default class ChangeElementTemplateHandler {
-  constructor(bpmnFactory, commandStack, modeling) {
+  constructor(bpmnFactory, bpmnReplace, commandStack, modeling) {
     this._bpmnFactory = bpmnFactory;
+    this._bpmnReplace = bpmnReplace;
     this._commandStack = commandStack;
     this._modeling = modeling;
   }
@@ -45,10 +46,11 @@ export default class ChangeElementTemplateHandler {
    * @param {Object} [context.newTemplate]
    */
   preExecute(context) {
-    const element = context.element,
-          newTemplate = context.newTemplate,
+    const newTemplate = context.newTemplate,
           oldTemplate = context.oldTemplate;
 
+    let element = context.element;
+
     // update zeebe:modelerTemplate attribute
     this._updateZeebeModelerTemplate(element, newTemplate);
 
@@ -57,6 +59,9 @@ export default class ChangeElementTemplateHandler {
 
     if (newTemplate) {
 
+      // update task type
+      element = context.element = this._updateTaskType(element, newTemplate);
+
       // update properties
       this._updateProperties(element, oldTemplate, newTemplate);
 
@@ -502,10 +507,34 @@ export default class ChangeElementTemplateHandler {
       });
     }
   }
+
+  /**
+   * Replaces the element with the specified elementType
+   *
+   * @param {djs.model.Base} element
+   * @param {Object} newTemplate
+   */
+  _updateTaskType(element, newTemplate) {
+
+    // determine new task type
+    const newType = newTemplate.elementType;
+
+    if (!newType) {
+      return element;
+    }
+
+    // don't replace Task that is already the correct type
+    if (element.$type === newType.value) {
+      return element;
+    }
+
+    return this._bpmnReplace.replaceElement(element, { type: newType.value });
+  }
 }
 
 ChangeElementTemplateHandler.$inject = [
   'bpmnFactory',
+  'bpmnReplace',
   'commandStack',
   'modeling'
 ];

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

@@ -25,9 +25,10 @@ import { ensureExtension } from '../CreateHelper';
 
 export default class TemplateElementFactory {
 
-  constructor(bpmnFactory, elementFactory) {
+  constructor(bpmnFactory, elementFactory, moddle) {
     this._bpmnFactory = bpmnFactory;
     this._elementFactory = elementFactory;
+    this._moddle = moddle;
 
     this._providers = {
       [PROPERTY_TYPE]: PropertyBindingProvider,
@@ -48,22 +49,24 @@ export default class TemplateElementFactory {
 
     const {
       appliesTo,
+      elementType,
       properties
     } = template;
 
     const elementFactory = this._elementFactory;
     const bpmnFactory = this._bpmnFactory;
+    const moddle = this._moddle;
     const providers = this._providers;
 
     // (0) make sure template is valid
-    const errors = validate([ template ]);
+    const errors = validate([ template ], moddle);
 
     // todo(pinussilvestrus): return validation errors
     if (errors && errors.length) {
       throw new Error('template is invalid');
     }
 
-    const type = appliesTo[0];
+    const type = (elementType && elementType.value) || appliesTo[0];
 
     // (1) create element from appliesTo
     const element = elementFactory.createShape({ type });
@@ -152,7 +155,7 @@ export default class TemplateElementFactory {
   }
 }
 
-TemplateElementFactory.$inject = [ 'bpmnFactory', 'elementFactory' ];
+TemplateElementFactory.$inject = [ 'bpmnFactory', 'elementFactory', 'moddle' ];
 
 
 // helper ////////////////

src/provider/cloud-element-templates/util/validate.js

@@ -5,9 +5,10 @@ import { Validator } from '../Validator';
  * return a list of errors.
  *
  * @param {Array<TemplateDescriptor>} descriptors
+ * @param {Moddle} moddle
  *
  * @return {Array<Error>}
  */
-export default function validate(descriptors) {
-  return new Validator().addAll(descriptors).getErrors();
+export default function validate(descriptors, moddle) {
+  return new Validator(moddle).addAll(descriptors).getErrors();
 }

src/provider/element-templates/ElementTemplates.js

@@ -124,13 +124,15 @@ export default class ElementTemplates {
 
     const oldTemplate = this.get(element);
 
-    this._commandStack.execute('propertiesPanel.camunda.changeTemplate', {
-      element: element,
+    const context = {
+      element,
       newTemplate,
       oldTemplate
-    });
+    };
+
+    this._commandStack.execute('propertiesPanel.camunda.changeTemplate', context);
 
-    return element;
+    return context.element;
   }
 }
 

src/provider/element-templates/ElementTemplatesLoader.js

@@ -17,12 +17,14 @@ import { Validator } from './Validator';
  * @param {Array<TemplateDescriptor>|Function} loadTemplates
  * @param {EventBus} eventBus
  * @param {ElementTemplates} elementTemplates
+ * @param {Moddle} moddle
  */
 export default class ElementTemplatesLoader {
-  constructor(loadTemplates, eventBus, elementTemplates) {
+  constructor(loadTemplates, eventBus, elementTemplates, moddle) {
     this._loadTemplates = loadTemplates;
     this._eventBus = eventBus;
     this._elementTemplates = elementTemplates;
+    this._moddle = moddle;
 
     eventBus.on('diagram.init', () => {
       this.reload();
@@ -57,9 +59,10 @@ export default class ElementTemplatesLoader {
   }
 
   setTemplates(templates) {
-    const elementTemplates = this._elementTemplates;
+    const elementTemplates = this._elementTemplates,
+          moddle = this._moddle;
 
-    const validator = new Validator().addAll(templates);
+    const validator = new Validator(moddle).addAll(templates);
 
     const errors = validator.getErrors(),
           validTemplates = validator.getValidTemplates();
@@ -87,5 +90,6 @@ export default class ElementTemplatesLoader {
 ElementTemplatesLoader.$inject = [
   'config.elementTemplates',
   'eventBus',
-  'elementTemplates'
+  'elementTemplates',
+  'moddle'
 ];

src/provider/element-templates/ReplaceBehavior.js

@@ -33,7 +33,15 @@ export default class ReplaceBehavior extends CommandInterceptor {
         return;
       }
 
-      const { appliesTo } = elementTemplate;
+      const { appliesTo, elementType } = elementTemplate;
+
+      if (elementType) {
+        if (!is(newShape, elementType.value)) {
+          unlinkTemplate(newShape, injector);
+        }
+
+        return;
+      }
 
       const allowed = appliesTo.reduce((allowed, type) => {
         return allowed || is(newBo, type);