feat(create-append-anything): append with templates

Closes #235

lib/camunda-cloud/Modeler.js

@@ -16,6 +16,7 @@ import replaceModule from './features/replace';
 import sharedReplaceModule from '../shared/features/replace';
 import colorPickerModule from 'bpmn-js-color-picker';
 import createAppendAnythingModule from 'bpmn-js/lib/features/create-append-anything';
+import createAppendElementTemplatesModule from './features/create-append-anything';
 
 import { commonModdleExtensions, commonModules } from './util/commonModules';
 import { without } from 'min-dash';
@@ -60,6 +61,7 @@ Modeler.prototype._camundaCloudModules = [
   rulesModule,
   zeebePropertiesProviderModule,
   cloudElementTemplatesPropertiesProvider,
+  createAppendElementTemplatesModule,
   replaceModule,
   sharedReplaceModule,
   colorPickerModule

lib/camunda-cloud/features/create-append-anything/ElementTemplatesAppendProvider.js

@@ -0,0 +1,150 @@
+import { assign } from 'min-dash';
+
+
+/**
+ * A popup menu provider that allows to append elements with
+ * element templates.
+ */
+export default function ElementTemplatesAppendProvider(
+    popupMenu, translate, elementTemplates,
+    autoPlace, create, mouse, rules) {
+
+  this._popupMenu = popupMenu;
+  this._translate = translate;
+  this._elementTemplates = elementTemplates;
+  this._autoPlace = autoPlace;
+  this._create = create;
+  this._mouse = mouse;
+  this._rules = rules;
+
+  this.register();
+}
+
+ElementTemplatesAppendProvider.$inject = [
+  'popupMenu',
+  'translate',
+  'elementTemplates',
+  'autoPlace',
+  'create',
+  'move',
+  'rules'
+];
+
+/**
+ * Register append menu provider in the popup menu
+ */
+ElementTemplatesAppendProvider.prototype.register = function() {
+  this._popupMenu.registerProvider('bpmn-append', this);
+};
+
+/**
+ * Adds the element templates to the append menu.
+ * @param {djs.model.Base} element
+ *
+ * @returns {Object}
+ */
+ElementTemplatesAppendProvider.prototype.getPopupMenuEntries = function(element) {
+  return (entries) => {
+
+    if (!this._rules.allowed('shape.append', { element: element })) {
+      return [];
+    }
+
+    const filteredTemplates = this._filterTemplates(this._elementTemplates.getLatest());
+
+    // add template entries
+    assign(entries, this.getTemplateEntries(element, filteredTemplates));
+
+    return entries;
+  };
+};
+
+/**
+ * Get all element templates.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Object} element templates as menu entries
+ */
+ElementTemplatesAppendProvider.prototype.getTemplateEntries = function(element, templates) {
+
+  const templateEntries = {};
+
+  templates.map(template => {
+
+    const {
+      icon = {},
+      category,
+    } = template;
+
+    const entryId = `append.template-${template.id}`;
+
+    const defaultGroup = {
+      id: 'templates',
+      name: this._translate('Templates')
+    };
+
+    templateEntries[entryId] = {
+      label: template.name,
+      description: template.description,
+      documentationRef: template.documentationRef,
+      imageUrl: icon.contents,
+      group: category || defaultGroup,
+      action: this._getEntryAction(element, template)
+    };
+  });
+
+  return templateEntries;
+};
+
+/**
+ * Filter out templates from the options.
+ *
+ * @param {Array<Object>} templates
+ *
+ * @returns {Array<Object>}
+ */
+ElementTemplatesAppendProvider.prototype._filterTemplates = function(templates) {
+  return templates.filter(template => {
+    const {
+      appliesTo,
+      elementType
+    } = template;
+
+    const type = (elementType && elementType.value) || appliesTo[0];
+
+    return (![
+      'bpmn:StartEvent',
+      'bpmn:Participant',
+      'bpmn:SequenceFlow'
+    ].includes(type));
+  });
+};
+
+/**
+ * Create an action for a given template.
+ *
+ * @param {djs.model.Base} element
+ * @param {Object} template
+ *
+ * @returns {Object}
+ */
+ElementTemplatesAppendProvider.prototype._getEntryAction = function(element, template) {
+  return {
+
+    click: () => {
+      const newElement = this._elementTemplates.createElement(template);
+      this._autoPlace.append(element, newElement);
+    },
+
+    dragstart: (event) => {
+      const newElement = this._elementTemplates.createElement(template);
+
+      if (event instanceof KeyboardEvent) {
+        event = this._mouse.getLastMoveEvent();
+      }
+
+      this._create.start(event, newElement);
+    }
+  };
+};

lib/camunda-cloud/features/create-append-anything/index.js

@@ -0,0 +1,6 @@
+import ElementTemplatesAppendProvider from './ElementTemplatesAppendProvider';
+
+export default {
+  __init__: [ 'elementTemplatesAppendProvider' ],
+  elementTemplatesAppendProvider: [ 'type', ElementTemplatesAppendProvider ]
+};

test/camunda-cloud/features/create-append-anything/ElementTemplatesAppendProvider.bpmn

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0su05ks" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.7.0-rc.1" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.1.0">
+  <bpmn:process id="Process_1uc9zgy" isExecutable="true">
+    <bpmn:task id="Task_1" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1uc9zgy">
+      <bpmndi:BPMNShape id="Activity_1v3dbx8_di" bpmnElement="Task_1">
+        <dc:Bounds x="160" y="80" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/camunda-cloud/features/create-append-anything/ElementTemplatesAppendProvider.json

@@ -0,0 +1,64 @@
+[
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Task Template",
+    "id": "example.TaskTemplate",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "properties": [
+      {
+        "type": "Boolean",
+        "binding": {
+          "type": "property",
+          "name": "customProperty"
+        }
+      }
+    ]
+  },
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Participant Template",
+    "id": "example.ParticipantTemplate",
+    "appliesTo": ["bpmn:Participant"],
+    "properties": [
+      {
+        "binding": {
+          "type": "property",
+          "name": "someProp"
+        }
+      }
+    ]
+  },
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Start Event Template",
+    "id": "example.StartEventTemplate",
+    "appliesTo": ["bpmn:StartEvent"],
+    "properties": [
+      {
+        "binding": {
+          "type": "property",
+          "name": "someProp"
+        }
+      }
+    ]
+  },
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Sequence Flow Template",
+    "id": "example.SequenceFlowTemplate",
+    "appliesTo": [
+      "bpmn:SequenceFlow"
+    ],
+    "properties": [
+      {
+        "type": "String",
+        "binding": {
+          "type": "property",
+          "name": "conditionExpression"
+        }
+      }
+    ]
+  }
+]