camunda-bpmn-js 0.12.1 → 0.13.0-alpha.2

package/lib/util/ExtensionElementsUtil.js

@@ -0,0 +1,59 @@
+import {
+  getBusinessObject,
+  is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import { isArray } from 'min-dash';
+
+/**
+ * Get extension elements of business object. Optionally filter by type.
+ *
+ * @param  {djs.model.Base|ModdleElement} element
+ * @param  {String} [type=undefined]
+ * @returns {Array<ModdleElement>}
+ */
+export function getExtensionElementsList(element, type = undefined) {
+  const businessObject = getBusinessObject(element),
+        extensionElements = businessObject.get('extensionElements');
+
+  if (!extensionElements) {
+    return [];
+  }
+
+  const values = extensionElements.get('values');
+
+  if (!values || !values.length) {
+    return [];
+  }
+
+  if (type) {
+    return values.filter(value => is(value, type));
+  }
+
+  return values;
+}
+
+/**
+ * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
+ *
+ * @param {ModdleElement} element
+ * @param {ModdleElement} businessObject
+ * @param {ModdleElement|Array<ModdleElement>} extensionElementsToRemove
+ * @param {CommandStack} commandStack
+ */
+export function removeExtensionElements(element, businessObject, extensionElementsToRemove, commandStack) {
+  if (!isArray(extensionElementsToRemove)) {
+    extensionElementsToRemove = [ extensionElementsToRemove ];
+  }
+
+  const extensionElements = businessObject.get('extensionElements'),
+        values = extensionElements.get('values').filter(value => !extensionElementsToRemove.includes(value));
+
+  commandStack.execute('element.updateModdleProperties', {
+    element,
+    moddleElement: extensionElements,
+    properties: {
+      values
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camunda-bpmn-js",
-  "version": "0.12.1",
+  "version": "0.13.0-alpha.2",
   "description": "Embeddable Camunda modeling distributions based on bpmn-js",
   "main": "lib/index.js",
   "scripts": {
@@ -40,17 +40,17 @@
   "license": "MIT",
   "dependencies": {
     "@bpmn-io/align-to-origin": "^0.7.0",
-    "bpmn-js": "^8.8.2",
+    "@bpmn-io/properties-panel": "^0.10.2",
+    "bpmn-js": "^9.0.0-alpha.2",
     "bpmn-js-disable-collapsed-subprocess": "^0.1.3",
     "bpmn-js-executable-fix": "^0.1.3",
-    "bpmn-js-properties-panel": "^0.46.0",
-    "bpmn-js-signavio-compat": "^1.2.3",
+    "bpmn-js-properties-panel": "~1.0.0-alpha.3",
     "camunda-bpmn-moddle": "^6.1.1",
-    "diagram-js": "^7.5.0",
-    "diagram-js-minimap": "^2.0.4",
+    "diagram-js": "^8.1.1",
+    "diagram-js-minimap": "^2.1.0",
     "diagram-js-origin": "^1.3.2",
     "inherits": "^2.0.4",
-    "min-dash": "^3.7.0",
+    "min-dash": "^3.8.1",
     "zeebe-bpmn-moddle": "^0.10.0"
   },
   "devDependencies": {
@@ -59,8 +59,8 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "chai": "^4.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.19.0",
-    "eslint-plugin-bpmn-io": "^0.12.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-bpmn-io": "^0.13.0",
     "execa": "^5.0.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "karma": "^6.3.0",
@@ -75,7 +75,7 @@
     "karma-sinon-chai": "^2.0.2",
     "karma-webpack": "^5.0.0",
     "min-dom": "^3.1.3",
-    "mocha": "^9.1.3",
+    "mocha": "^9.2.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
     "puppeteer": "^8.0.0",

package/styles/base-modeler.css

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

package/styles/camunda-platform-modeler.css

@@ -1 +1,2 @@
-@import './base-modeler.css';
+@import './base-modeler.css';
+@import './element-templates.css';

package/lib/camunda-cloud/features/properties-provider/ZeebePropertiesProvider.js

@@ -1,201 +0,0 @@
-import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
-
-import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
-
-import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
-
-import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
-
-import executableProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ExecutableProps';
-
-import inputOutput from './parts/InputOutputProps';
-
-import headers from './parts/HeadersProps';
-
-import taskDefinition from './parts/TaskDefinitionProps';
-
-import sequenceFlowProps from './parts/SequenceFlowProps';
-
-import messageProps from './parts/MessageProps';
-
-import timerProps from './parts/TimerEventProps';
-
-import multiInstanceProps from './parts/MultiInstanceProps';
-
-import errorProps from './parts/ErrorProps';
-
-import callActivityProps from './parts/CallActivityProps';
-
-import formProps from './parts/FormProps';
-
-import { is } from 'bpmn-js/lib/util/ModelUtil';
-
-function getIdOptions(element) {
-  if (is(element, 'bpmn:Participant')) {
-    return { id: 'participant-id', label: 'Participant Id' };
-  }
-}
-
-function getNameOptions(element) {
-  if (is(element, 'bpmn:Participant')) {
-    return { id: 'participant-name', label: 'Participant Name' };
-  }
-}
-
-function createGeneralTabGroups(element, bpmnFactory, canvas, translate) {
-  const generalGroup = {
-    id: 'general',
-    label: translate('General'),
-    entries: []
-  };
-
-  idProps(generalGroup, element, translate, getIdOptions(element));
-  nameProps(generalGroup, element, bpmnFactory, canvas, translate, getNameOptions(element));
-  processProps(generalGroup, element, translate);
-  executableProps(generalGroup, element, translate);
-
-  const detailsGroup = {
-    id: 'details',
-    label: translate('Details'),
-    entries: []
-  };
-  taskDefinition(detailsGroup, element, bpmnFactory, translate);
-  sequenceFlowProps(detailsGroup, element, bpmnFactory, translate);
-  messageProps(detailsGroup, element, bpmnFactory, translate);
-  timerProps(detailsGroup, element, bpmnFactory, translate);
-  errorProps(detailsGroup, element, bpmnFactory, translate);
-  callActivityProps(detailsGroup, element, bpmnFactory, translate);
-
-  const multiInstanceGroup = {
-    id: 'multiInstance',
-    label: translate('Multi Instance'),
-    entries: []
-  };
-  multiInstanceProps(multiInstanceGroup, element, bpmnFactory, translate);
-
-  return [
-    generalGroup,
-    detailsGroup,
-    multiInstanceGroup
-  ];
-}
-
-function createFormsGroups(element, bpmnFactory, translate) {
-
-  const formsGroups = {
-    id: 'forms-properties',
-    label: translate('Forms'),
-    entries: []
-  };
-  formProps(formsGroups, element, bpmnFactory, translate);
-
-
-  return [
-    formsGroups
-  ];
-}
-
-function createHeadersGroups(element, bpmnFactory, translate) {
-
-  const headersGroup = {
-    id: 'headers-properties',
-    label: translate('Headers'),
-    entries: []
-  };
-  headers(headersGroup, element, bpmnFactory, translate);
-
-  return [
-    headersGroup
-  ];
-}
-
-
-function createInputOutputTabGroups(element, bpmnFactory, translate) {
-
-  const inputGroup = {
-    id: 'input',
-    label: translate('Input Parameters'),
-    entries: []
-  };
-
-  inputOutput(inputGroup, element, bpmnFactory, translate, {
-    type: 'zeebe:Input',
-    prop: 'inputParameters',
-    prefix: 'input'
-  });
-
-  const outputGroup = {
-    id: 'output',
-    label: translate('Output Parameters'),
-    entries: []
-  };
-
-  inputOutput(outputGroup, element, bpmnFactory, translate, {
-    type: 'zeebe:Output',
-    prop: 'outputParameters',
-    prefix: 'output'
-  });
-
-  return [
-    inputGroup,
-    outputGroup
-  ];
-}
-
-export default class ZeebePropertiesProvider extends PropertiesActivator {
-  constructor(eventBus, bpmnFactory, canvas, translate) {
-
-    super(eventBus);
-
-    this._bpmnFactory = bpmnFactory;
-    this._canvas = canvas;
-    this._translate = translate;
-
-  }
-
-  getTabs(element) {
-    const generalTab = {
-      id: 'general',
-      label: this._translate('General'),
-      groups: createGeneralTabGroups(
-        element, this._bpmnFactory, this._canvas, this._translate)
-    };
-
-    const formsTab = {
-      id: 'forms',
-      label: this._translate('Forms'),
-      groups: createFormsGroups(
-        element, this._bpmnFactory, this._translate
-      )
-    };
-
-    const inputOutputTab = {
-      id: 'input-output',
-      label: this._translate('Input/Output'),
-      groups: createInputOutputTabGroups(
-        element, this._bpmnFactory, this._translate)
-    };
-
-    const headersTab = {
-      id: 'headers',
-      label: this._translate('Headers'),
-      groups: createHeadersGroups(
-        element, this._bpmnFactory, this._translate)
-    };
-
-    return [
-      generalTab,
-      formsTab,
-      inputOutputTab,
-      headersTab
-    ];
-  }
-
-}
-
-ZeebePropertiesProvider.$inject = [
-  'eventBus',
-  'bpmnFactory',
-  'canvas',
-  'translate'
-];

package/lib/camunda-cloud/features/properties-provider/index.js

@@ -1,11 +0,0 @@
-import translate from 'diagram-js/lib/i18n/translate';
-
-import ZeebePropertiesProvider from './ZeebePropertiesProvider';
-
-export default {
-  __depends__: [
-    translate
-  ],
-  __init__: [ 'propertiesProvider' ],
-  propertiesProvider: [ 'type', ZeebePropertiesProvider ]
-};

package/lib/camunda-cloud/features/properties-provider/parts/CallActivityProps.js

@@ -1,90 +0,0 @@
-import elementHelper from 'bpmn-js-properties-panel/lib/helper/ElementHelper';
-
-import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
-
-import { isIdValid } from 'bpmn-js-properties-panel/lib/Utils';
-
-import { getCalledElement } from '../../../helper/CalledElementHelper';
-
-import {
-  is,
-  getBusinessObject
-} from 'bpmn-js/lib/util/ModelUtil';
-
-import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
-
-export default function(group, element, bpmnFactory, translate) {
-
-  if (!is(element, 'bpmn:CallActivity')) {
-    return;
-  }
-
-  function getProperty(element, propertyName) {
-    const businessObject = getBusinessObject(element),
-          calledElement = getCalledElement(businessObject);
-
-    return calledElement ? calledElement.get(propertyName) : '';
-  }
-
-  function setProperties(element, values) {
-
-    const businessObject = getBusinessObject(element),
-          commands = [];
-
-    // ensure extensionElements
-    let extensionElements = businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = elementHelper.createElement('bpmn:ExtensionElements', { values: [] }, businessObject, bpmnFactory);
-      commands.push(cmdHelper.updateBusinessObject(element, businessObject, { extensionElements: extensionElements }));
-    }
-
-    // ensure zeebe:calledElement
-    let calledElement = getCalledElement(businessObject);
-    if (!calledElement) {
-      calledElement = elementHelper.createElement('zeebe:CalledElement', { }, extensionElements, bpmnFactory);
-      commands.push(cmdHelper.addAndRemoveElementsFromList(
-        element,
-        extensionElements,
-        'values',
-        'extensionElements',
-        [ calledElement ],
-        []
-      ));
-    }
-
-    // update properties
-    commands.push(cmdHelper.updateBusinessObject(element, calledElement, values));
-    return commands;
-  }
-
-  // properties /////////////////////////////////////////////////////////////////
-
-  group.entries.push(entryFactory.validationAwareTextField(translate, {
-    id: 'process-id',
-    label: translate('Process Id'),
-    modelProperty: 'processId',
-
-    getProperty: function(element) {
-      return getProperty(element, 'processId');
-    },
-
-    setProperty: function(element, values) {
-      return setProperties(element, {
-        processId: values.processId || undefined
-      });
-    },
-    validate: function(element, values) {
-      var idValue = values.processId;
-      var bo = getBusinessObject(element);
-
-      // pass on expression statements
-      if (/^=/.test(idValue || '')) {
-        return {};
-      }
-
-      var idError = isIdValid(bo, idValue, translate);
-
-      return idError ? { processId: idError } : {};
-    }
-  }));
-}

package/lib/camunda-cloud/features/properties-provider/parts/ErrorProps.js

@@ -1,13 +0,0 @@
-import eventDefinitionHelper from 'bpmn-js-properties-panel/lib/helper/EventDefinitionHelper';
-
-import error from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/implementation/ErrorEventDefinition';
-
-export default function(group, element, bpmnFactory, translate) {
-
-  const errorEventDefinition = eventDefinitionHelper.getErrorEventDefinition(element);
-
-  if (errorEventDefinition) {
-    error(group, element, bpmnFactory, errorEventDefinition, translate);
-  }
-
-}

package/lib/camunda-cloud/features/properties-provider/parts/FormProps.js

@@ -1,14 +0,0 @@
-import {
-  isAny
-} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
-
-import formDefinition from './implementation/FormDefinition';
-
-export default function(group, element, bpmnFactory, translate) {
-
-  if (!isAny(element, [ 'bpmn:UserTask' ])) {
-    return;
-  }
-
-  group.entries = group.entries.concat(formDefinition(element, bpmnFactory, translate));
-}

package/lib/camunda-cloud/features/properties-provider/parts/HeadersProps.js

@@ -1,52 +0,0 @@
-import properties from './implementation/Headers';
-
-import elementHelper from 'bpmn-js-properties-panel/lib/helper/ElementHelper';
-
-import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
-
-import {
-  is
-} from 'bpmn-js/lib/util/ModelUtil';
-
-import {
-  isZeebeServiceTask
-} from '../../../helper/ZeebeServiceTaskHelper.js';
-
-
-export default function(group, element, bpmnFactory, translate) {
-
-  if (!canHaveHeaders(element)) {
-    return;
-  }
-
-  const propertiesEntry = properties(element, bpmnFactory, translate, {
-    id: 'headers',
-    modelProperties: [ 'key', 'value' ],
-    labels: [ translate('Key'), translate('Value') ],
-
-    getParent: function(element, node, bo) {
-      return bo.extensionElements;
-    },
-
-    createParent: function(element, bo) {
-      const parent = elementHelper.createElement('bpmn:ExtensionElements', { values: [] }, bo, bpmnFactory);
-      const cmd = cmdHelper.updateBusinessObject(element, bo, { extensionElements: parent });
-      return {
-        cmd: cmd,
-        parent: parent
-      };
-    }
-  });
-
-  if (propertiesEntry) {
-    group.entries.push(propertiesEntry);
-  }
-
-}
-
-
-// helpers ////////////////
-
-function canHaveHeaders(element) {
-  return is(element, 'bpmn:UserTask') || isZeebeServiceTask(element);
-}

package/lib/camunda-cloud/features/properties-provider/parts/InputOutputProps.js

@@ -1,8 +0,0 @@
-import inputOutput from './implementation/InputOutput';
-
-export default function(group, element, bpmnFactory, translate, options) {
-
-  const inputOutputEntry = inputOutput(element, bpmnFactory, translate, options);
-
-  group.entries = group.entries.concat(inputOutputEntry.entries);
-}

package/lib/camunda-cloud/features/properties-provider/parts/MessageProps.js

@@ -1,51 +0,0 @@
-import {
-  getBusinessObject,
-  is
-} from 'bpmn-js/lib/util/ModelUtil';
-
-import {
-  isEventSubProcess
-} from 'bpmn-js/lib/util/DiUtil';
-
-import {
-  isZeebeServiceTask
-} from '../../../helper/ZeebeServiceTaskHelper.js';
-
-import eventDefinitionHelper from 'bpmn-js-properties-panel/lib/helper/EventDefinitionHelper';
-
-import message from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/implementation/MessageEventDefinition';
-
-import referenceExtensionElementProperty from './implementation/ElementReferenceExtensionElementProperty';
-
-
-export default function(group, element, bpmnFactory, translate) {
-
-  const messageEventDefinition = eventDefinitionHelper.getMessageEventDefinition(element),
-        parent = element.parent;
-
-  if (is(element, 'bpmn:ReceiveTask')) {
-    message(group, element, bpmnFactory, getBusinessObject(element), translate);
-    group.entries = group.entries.concat(referenceExtensionElementProperty(element, getBusinessObject(element), bpmnFactory, translate, {
-      id: 'message-element-subscription',
-      label: translate('Subscription Correlation Key'),
-      referenceProperty: 'messageRef',
-      modelProperty: 'correlationKey',
-      extensionElement: 'zeebe:Subscription',
-      shouldValidate: true
-    }));
-  } else if (messageEventDefinition && !isZeebeServiceTask(element)) {
-    message(group, element, bpmnFactory, messageEventDefinition, translate);
-    if (!is(element, 'bpmn:StartEvent') || isEventSubProcess(parent)) {
-
-      group.entries = group.entries.concat(referenceExtensionElementProperty(element, messageEventDefinition, bpmnFactory, translate, {
-        id: 'message-element-subscription',
-        label: translate('Subscription Correlation Key'),
-        referenceProperty: 'messageRef',
-        modelProperty: 'correlationKey',
-        extensionElement: 'zeebe:Subscription',
-        shouldValidate: true
-      }));
-    }
-  }
-
-}

package/lib/camunda-cloud/features/properties-provider/parts/MultiInstanceProps.js

@@ -1,25 +0,0 @@
-import {
-  getBusinessObject
-} from 'bpmn-js/lib/util/ModelUtil';
-
-import multiInstanceLoopCharacteristics from './implementation/MultiInstanceLoopCharacteristics';
-
-export default function(group, element, bpmnFactory, translate) {
-
-  if (!ensureMultiInstanceSupported(element)) {
-    return;
-  }
-
-  group.entries = group.entries.concat(multiInstanceLoopCharacteristics(element, bpmnFactory, translate));
-}
-
-// helpers //////////////
-
-function getLoopCharacteristics(element) {
-  const bo = getBusinessObject(element);
-  return bo.loopCharacteristics;
-}
-
-function ensureMultiInstanceSupported(element) {
-  return !!getLoopCharacteristics(element);
-}