camunda-bpmn-js 0.24.1 → 1.1.0

package/lib/camunda-cloud/Modeler.js

@@ -13,6 +13,8 @@ import {
 } from 'bpmn-js-properties-panel';
 
 import replaceModule from './features/replace';
+import sharedReplaceModule from '../shared/features/replace';
+import colorPickerModule from 'bpmn-js-color-picker';
 
 import { commonModdleExtensions, commonModules } from './util/commonModules';
 
@@ -46,7 +48,9 @@ Modeler.prototype._camundaCloudModules = [
   rulesModule,
   zeebePropertiesProviderModule,
   cloudElementTemplatesPropertiesProvider,
-  replaceModule
+  replaceModule,
+  sharedReplaceModule,
+  colorPickerModule
 ];
 
 Modeler.prototype._modules = [].concat(

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

@@ -1,35 +1,23 @@
-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) {
+export default function ElementTemplatesReplaceProvider(popupMenu, translate, elementTemplates) {
 
   this._popupMenu = popupMenu;
   this._translate = translate;
   this._elementTemplates = elementTemplates;
 
-  const enabled = config && config.enabled;
-
-  if (enabled) {
-    this.register();
-  }
+  this.register();
 }
 
 ElementTemplatesReplaceProvider.$inject = [
-  'config.elementTemplatesReplaceProvider',
   'popupMenu',
   'translate',
   'elementTemplates'
@@ -55,12 +43,6 @@ ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element
     // convert our entries into something sortable
     let entrySet = Object.entries(entries);
 
-    if (this._elementTemplates.get(element)) {
-
-      // add unlink template option
-      this._addPlainElementEntry(element, entrySet);
-    }
-
     // add template entries
     entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
 
@@ -73,85 +55,6 @@ ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element
   };
 };
 
-/**
- * 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);
-
-  if (!replaceOption) {
-    return;
-  }
-
-  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 null;
-  }
-
-  const entry = {
-    id: 'replace-unlink-element-template',
-    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.
  *
@@ -177,7 +80,7 @@ ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element)
     };
 
     return [ entryId, {
-      name: template.name,
+      label: template.name,
       description: template.description,
       documentationRef: template.documentationRef,
       imageUrl: icon.contents,
@@ -212,45 +115,4 @@ export function isTemplateApplied(element, template) {
   }
 
   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-platform/Modeler.js

@@ -11,6 +11,9 @@ import {
 
 import { commonModdleExtensions } from './util/commonModules';
 
+import sharedReplaceModule from '../shared/features/replace';
+import colorPickerModule from 'bpmn-js-color-picker';
+
 
 /**
  *
@@ -34,7 +37,9 @@ inherits(Modeler, BaseModeler);
 Modeler.prototype._camundaPlatformModules = [
   behaviorsModule,
   CamundaPlatformPropertiesProviderModule,
-  ElementTemplatesPropertiesProviderModule
+  ElementTemplatesPropertiesProviderModule,
+  sharedReplaceModule,
+  colorPickerModule
 ];
 
 Modeler.prototype._modules = [].concat(

package/lib/shared/features/replace/UnlinkTemplateReplaceProvider.js

@@ -0,0 +1,178 @@
+import { isDifferentType } from 'bpmn-js/lib/features/popup-menu/util/TypeUtil';
+import { getReplaceOptionGroups } from './util/ReplaceOptionsUtil';
+
+/**
+ * A replace menu provider that allows to replace elements with
+ * templates applied with the correspondent plain element.
+ */
+export default function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
+
+  this._popupMenu = popupMenu;
+  this._translate = translate;
+  this._elementTemplates = elementTemplates;
+
+  this.register();
+}
+
+UnlinkTemplateReplaceProvider.$inject = [
+  'popupMenu',
+  'translate',
+  'elementTemplates'
+];
+
+/**
+ * Register replace menu provider in the popup menu
+ */
+UnlinkTemplateReplaceProvider.prototype.register = function() {
+  this._popupMenu.registerProvider('bpmn-replace', this);
+};
+
+/**
+ * Adds the element templates to the replace menu.
+ * @param {djs.model.Base} element
+ *
+ * @returns {Object}
+ */
+UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+  return (entries) => {
+
+    // convert our entries into something sortable
+    let entrySet = Object.entries(entries);
+
+    if (this._elementTemplates.get(element)) {
+
+      // add unlink template option
+      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
+    }
+
+    // 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
+ */
+UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
+
+  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
+
+  if (!replaceOption) {
+    return;
+  }
+
+  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>}
+ */
+UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
+
+  const {
+    options,
+    option,
+    optionIndex
+  } = findReplaceOptions(element) || { };
+
+  if (!options) {
+    return null;
+  }
+
+  const entry = {
+    id: 'replace-unlink-element-template',
+    action: () => {
+      elementTemplates.applyTemplate(element, null);
+    },
+    label: 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
+  ];
+};
+
+
+/**
+ * @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);
+}
+
+function getOptionIndex(options, index, entries) {
+  const option = options[index];
+
+  if (!option) {
+    return false;
+  }
+
+  return entries.findIndex(
+    ([ key ]) => key === option.actionName
+  );
+}

package/lib/shared/features/replace/index.js

@@ -0,0 +1,8 @@
+import UnlinkTemplateReplaceProvider from './UnlinkTemplateReplaceProvider';
+
+export default {
+  __init__: [
+    'unlinkTemplateReplaceProvider'
+  ],
+  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camunda-bpmn-js",
-  "version": "0.24.1",
+  "version": "1.1.0",
   "description": "Embeddable Camunda modeling distributions based on bpmn-js",
   "main": "lib/index.js",
   "scripts": {
@@ -18,6 +18,7 @@
     "start:cloud-viewer": "cross-env SINGLE_START=camunda-cloud-viewer npm run dev",
     "start:platform-navigated-viewer": "cross-env SINGLE_START=camunda-platform-navigated-viewer npm run dev",
     "start:cloud-navigated-viewer": "cross-env SINGLE_START=camunda-cloud-navigated-viewer npm run dev",
+    "start:cloud-connectors-extension": "cross-env SINGLE_START=camunda-cloud-connectors-extension npm run dev",
     "prepublishOnly": "run-s test:distro",
     "prepare": "run-s clean distro"
   },
@@ -47,11 +48,12 @@
   "dependencies": {
     "@bpmn-io/align-to-origin": "^0.7.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "bpmn-js": "^11.0.5",
+    "bpmn-js": "^11.1.1",
+    "bpmn-js-color-picker": "^0.5.0",
     "bpmn-js-executable-fix": "^0.2.0",
     "camunda-bpmn-js-behaviors": "^0.4.0",
     "camunda-bpmn-moddle": "^7.0.1",
-    "diagram-js": "^11.1.1",
+    "diagram-js": "^11.4.3",
     "diagram-js-minimap": "^3.0.0",
     "diagram-js-origin": "^1.4.0",
     "inherits": "^2.0.4",
@@ -60,15 +62,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@bpmn-io/element-template-chooser": "^0.1.0",
-    "@bpmn-io/properties-panel": "^1.0.1",
+    "@bpmn-io/element-template-chooser": "^1.0.0",
+    "@bpmn-io/properties-panel": "^1.1.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-connectors-extension": "^0.4.5",
-    "bpmn-js-properties-panel": "^1.12.0",
+    "bpmn-js-properties-panel": "^1.15.0",
     "chai": "^4.3.7",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
@@ -92,7 +94,7 @@
     "mocha": "^10.1.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^19.3.0",
+    "puppeteer": "^19.4.0",
     "raw-loader": "^4.0.2",
     "rollup": "^2.38.4",
     "rollup-plugin-copy": "^3.3.0",

package/styles/base-modeler.css

@@ -2,4 +2,5 @@
 @import './bpmn-js.css';
 @import './bpmn-font/css/bpmn-embedded.css';
 @import './diagram-js-minimap.css';
-@import './properties-panel.css';
+@import './properties-panel.css';
+@import './color-picker.css';