camunda-bpmn-js 0.23.0 → 0.24.0

package/lib/camunda-cloud/Modeler.js

@@ -12,6 +12,7 @@ import {
   ZeebeDescriptionProvider
 } from 'bpmn-js-properties-panel';
 
+import replaceModule from './features/replace';
 
 import { commonModdleExtensions, commonModules } from './util/commonModules';
 
@@ -44,7 +45,8 @@ Modeler.prototype._camundaCloudModules = [
   behaviorsModule,
   rulesModule,
   zeebePropertiesProviderModule,
-  cloudElementTemplatesPropertiesProvider
+  cloudElementTemplatesPropertiesProvider,
+  replaceModule
 ];
 
 Modeler.prototype._modules = [].concat(

package/lib/camunda-cloud/features/replace/ElementTemplatesReplaceProvider.js

@@ -0,0 +1,249 @@
+import {
+  isDifferentType
+} from 'bpmn-js/lib/features/popup-menu/util/TypeUtil';
+
+import {
+  getBusinessObject,
+  isAny
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import {
+  getReplaceOptionGroups
+} from './ReplaceOptionsUtil';
+
+/**
+ * A replace menu provider that allows to replace elements with
+ * element templates.
+ */
+export default function ElementTemplatesReplaceProvider(config, popupMenu, translate, elementTemplates) {
+
+  this._popupMenu = popupMenu;
+  this._translate = translate;
+  this._elementTemplates = elementTemplates;
+
+  const enabled = config && config.enabled;
+
+  if (enabled) {
+    this.register();
+  }
+}
+
+ElementTemplatesReplaceProvider.$inject = [
+  'config.elementTemplatesReplaceProvider',
+  'popupMenu',
+  'translate',
+  'elementTemplates'
+];
+
+/**
+ * Register replace menu provider in the popup menu
+ */
+ElementTemplatesReplaceProvider.prototype.register = function() {
+  this._popupMenu.registerProvider('bpmn-replace', this);
+};
+
+/**
+ * Adds the element templates to the replace menu.
+ * @param {djs.model.Base} element
+ *
+ * @returns {Object}
+ */
+ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+  return (entries) => {
+
+    // convert our entries into something sortable
+    let entrySet = Object.entries(entries);
+
+    // add unlink template option
+    this._addPlainElementEntry(element, entrySet);
+
+    // add template entries
+    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
+
+    // convert back to object
+    return entrySet.reduce((entries, [ key, value ]) => {
+      entries[key] = value;
+
+      return entries;
+    }, {});
+  };
+};
+
+/**
+ * Adds the option to replace with plain element (unlink template).
+ *
+ * @param {djs.model.Base} element
+ * @param {Array<Object>} entries
+ */
+ElementTemplatesReplaceProvider.prototype._addPlainElementEntry = function(element, entries) {
+
+  const replaceOption = this._getPlainEntry(element, entries);
+
+  const [
+    insertIndex,
+    entry
+  ] = replaceOption;
+
+  // insert unlink entry
+  entries.splice(insertIndex, 0, [ entry.id, entry ]);
+};
+
+/**
+ * Returns the option to replace with plain element and the index where it should be inserted.
+ *
+ * @param {djs.model.Base} element
+ * @param {Array<Object>} entries
+ *
+ * @returns {Array<Object, number>}
+ */
+ElementTemplatesReplaceProvider.prototype._getPlainEntry = function(element, entries) {
+
+  const {
+    options,
+    option,
+    optionIndex
+  } = findReplaceOptions(element) || { };
+
+  if (!options) {
+    return;
+  }
+
+  const entry = {
+    id: option.actionName,
+    action: () => {
+      this._elementTemplates.applyTemplate(element, null);
+    },
+    label: this._translate(option.label),
+    className: option.className
+  };
+
+  // insert after previous option, if it exists
+  const previousIndex = getOptionIndex(options, optionIndex - 1, entries);
+
+  if (previousIndex) {
+    return [
+      previousIndex + 1,
+      entry
+    ];
+  }
+
+  // insert before next option, if it exists
+  const nextIndex = getOptionIndex(options, optionIndex + 1, entries);
+
+  if (nextIndex) {
+    return [
+      nextIndex,
+      entry
+    ];
+  }
+
+  // fallback to insert at start
+  return [
+    0,
+    entry
+  ];
+};
+
+/**
+ * Get all element templates that can be used to replace the given element.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Array<Object>} a list of element templates as menu entries
+ */
+ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
+
+  const templates = this._getMatchingTemplates(element);
+  return templates.map(template => {
+
+    const {
+      icon = {},
+      category,
+    } = template;
+
+    const entryId = `replace-with-template-${template.id}`;
+
+    const defaultGroup = {
+      id: 'templates',
+      name: this._translate('Templates')
+    };
+
+    return [ entryId, {
+      name: template.name,
+      description: template.description,
+      documentationRef: template.documentationRef,
+      imageUrl: icon.contents,
+      group: category || defaultGroup,
+      action: () => {
+        this._elementTemplates.applyTemplate(element, template);
+      }
+    } ];
+  });
+};
+
+/**
+ * Returns the templates that can the element can be replaced with.
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Array<ElementTemplate>}
+ */
+ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
+  return this._elementTemplates.getLatest().filter(template => {
+    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
+  });
+};
+
+
+// helpers ////////////
+export function isTemplateApplied(element, template) {
+  const businessObject = getBusinessObject(element);
+
+  if (businessObject) {
+    return businessObject.get('zeebe:modelerTemplate') === template.id;
+  }
+
+  return false;
+}
+
+function getOptionIndex(options, index, entries) {
+  const option = options[index];
+
+  if (!option) {
+    return false;
+  }
+
+  return entries.findIndex(
+    ([ key ]) => key === option.actionName
+  );
+}
+
+/**
+ * @param {ModdleElement} element
+ *
+ * @return { { options: Array<any>, option: any, optionIndex: number } | null }
+ */
+function findReplaceOptions(element) {
+
+  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+
+  return getReplaceOptionGroups().reduce((result, options) => {
+
+    if (result) {
+      return result;
+    }
+
+    const optionIndex = options.findIndex(option => isSameType(element, option));
+
+    if (optionIndex === -1) {
+      return;
+    }
+
+    return {
+      options,
+      option: options[optionIndex],
+      optionIndex
+    };
+  }, null);
+}

package/lib/camunda-cloud/features/replace/ReplaceOptionsUtil.js

@@ -0,0 +1,7 @@
+import * as replaceOptions from 'bpmn-js/lib/features/replace/ReplaceOptions';
+
+const ALL_OPTIONS = Object.values(replaceOptions);
+
+export function getReplaceOptionGroups() {
+  return ALL_OPTIONS;
+}

package/lib/camunda-cloud/features/replace/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camunda-bpmn-js",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Embeddable Camunda modeling distributions based on bpmn-js",
   "main": "lib/index.js",
   "scripts": {
@@ -47,33 +47,36 @@
   "dependencies": {
     "@bpmn-io/align-to-origin": "^0.7.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "bpmn-js": "^10.2.0",
+    "bpmn-js": "^11.0.1",
     "bpmn-js-executable-fix": "^0.2.0",
     "camunda-bpmn-js-behaviors": "^0.4.0",
     "camunda-bpmn-moddle": "^7.0.1",
-    "diagram-js": "^10.0.0",
+    "diagram-js": "^11.1.1",
     "diagram-js-minimap": "^3.0.0",
-    "diagram-js-origin": "^1.3.4",
+    "diagram-js-origin": "^1.4.0",
     "inherits": "^2.0.4",
     "min-dash": "^4.0.0",
-    "zeebe-bpmn-moddle": "^0.16.0"
+    "zeebe-bpmn-moddle": "^0.17.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@bpmn-io/element-template-chooser": "^0.1.0",
-    "@bpmn-io/properties-panel": "^0.24.0",
+    "@bpmn-io/properties-panel": "^1.0.1",
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^14.0.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "bpmn-js-properties-panel": "^1.11.1",
-    "chai": "^4.3.6",
+    "bpmn-js-connectors-extension": "^0.4.4",
+    "bpmn-js-properties-panel": "^1.12.0",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
+    "downloadjs": "^1.4.7",
     "eslint": "^8.24.0",
     "eslint-plugin-bpmn-io": "^0.16.0",
     "execa": "^5.0.0",
+    "file-drops": "^0.5.0",
     "karma": "^6.4.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.1",
@@ -86,20 +89,20 @@
     "karma-sinon-chai": "^2.0.2",
     "karma-webpack": "^5.0.0",
     "min-dom": "^4.0.3",
-    "mocha": "^10.0.0",
+    "mocha": "^10.1.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^19.0.0",
+    "puppeteer": "^19.3.0",
     "raw-loader": "^4.0.2",
     "rollup": "^2.38.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sinon": "^14.0.0",
+    "sinon": "^15.0.0",
     "sinon-chai": "^3.7.0",
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
-    "bpmn-js-properties-panel": ">= 1.11.1"
+    "bpmn-js-properties-panel": ">= 1.11.3"
   },
   "files": [
     "dist",