camunda-bpmn-js 1.3.0 → 1.4.0

package/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

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

@@ -0,0 +1,162 @@
+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];
+
+    // elements that can not be appended
+    if ([
+      'bpmn:StartEvent',
+      'bpmn:Participant'
+    ].includes(type)) {
+      return false;
+    }
+
+    // sequence flow templates are supported
+    // but connections are not appendable
+    if ('bpmn:SequenceFlow' === type) {
+      return false;
+    }
+
+    return true;
+  });
+};
+
+/**
+ * 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, {
+        source: element
+      });
+    }
+  };
+};

package/lib/camunda-cloud/features/create-append-anything/ElementTemplatesCreateProvider.js

@@ -0,0 +1,114 @@
+import { assign } from 'min-dash';
+
+/**
+ * A popup menu provider that allows to create elements with
+ * element templates.
+ */
+export default function ElementTemplatesCreateProvider(
+    popupMenu, translate, elementTemplates,
+    mouse, create) {
+
+  this._popupMenu = popupMenu;
+  this._translate = translate;
+  this._elementTemplates = elementTemplates;
+  this._mouse = mouse;
+  this._create = create;
+
+  this.register();
+}
+
+ElementTemplatesCreateProvider.$inject = [
+  'popupMenu',
+  'translate',
+  'elementTemplates',
+  'mouse',
+  'create'
+];
+
+/**
+ * Register create menu provider in the popup menu
+ */
+ElementTemplatesCreateProvider.prototype.register = function() {
+  this._popupMenu.registerProvider('bpmn-create', this);
+};
+
+/**
+ * Adds the element templates to the create menu.
+ * @param {djs.model.Base} element
+ *
+ * @returns {Object}
+ */
+ElementTemplatesCreateProvider.prototype.getPopupMenuEntries = function(element) {
+  return (entries) => {
+
+    // add template entries
+    assign(entries, this.getTemplateEntries(element));
+
+    return entries;
+  };
+};
+
+/**
+ * Get all element templates.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Array<Object>} a list of element templates as menu entries
+ */
+ElementTemplatesCreateProvider.prototype.getTemplateEntries = function() {
+
+  const templates = this._elementTemplates.getLatest();
+  const templateEntries = {};
+
+  templates.map(template => {
+
+    const {
+      icon = {},
+      category,
+    } = template;
+
+    const entryId = `create.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: {
+        click: this._getEntryAction(template),
+        dragstart: this._getEntryAction(template)
+      }
+    };
+  });
+
+  return templateEntries;
+};
+
+
+ElementTemplatesCreateProvider.prototype._getEntryAction = function(template) {
+  const create = this._create;
+  const popupMenu = this._popupMenu;
+  const elementTemplates = this._elementTemplates;
+  const mouse = this._mouse;
+
+  return (event) => {
+
+    popupMenu.close();
+
+    // create the new element
+    let newElement = elementTemplates.createElement(template);
+
+    // use last mouse event if triggered via keyboard
+    if (event instanceof KeyboardEvent) {
+      event = mouse.getLastMoveEvent();
+    }
+
+    return create.start(event, newElement);
+  };
+};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camunda-bpmn-js",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Embeddable Camunda modeling distributions based on bpmn-js",
   "main": "lib/index.js",
   "scripts": {
@@ -50,7 +50,7 @@
   "dependencies": {
     "@bpmn-io/align-to-origin": "^0.7.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "bpmn-js": "^11.3.0",
+    "bpmn-js": "^11.4.0",
     "bpmn-js-color-picker": "^0.5.0",
     "bpmn-js-executable-fix": "^0.2.0",
     "camunda-bpmn-js-behaviors": "^0.4.0",