feat: allow multiple elements

package.json

@@ -19,8 +19,7 @@
     "start": "npm run start:cloud",
     "start:cloud": "cross-env SINGLE_START=cloud npm run dev",
     "start:platform": "cross-env SINGLE_START=platform npm run dev",
-    "start:bpmn": "cross-env SINGLE_START=bpmn npm run dev",
-    "prepare": "run-s build"
+    "start:bpmn": "cross-env SINGLE_START=bpmn npm run dev"
   },
   "repository": {
     "type": "git",

src/icons/index.js

@@ -85,6 +85,7 @@ import TaskNoneIcon from './bpmn-icon-task-none.svg';
 import TextAnnotationicon from './bpmn-icon-text-annotation.svg';
 import TransactionIcon from './bpmn-icon-transaction.svg';
 import UserTaskIcon from './bpmn-icon-user-task.svg';
+import MultipleElementsIcon from './icon-multiple-elements.svg';
 
 export default {
   'Association': AssociationIcon,
@@ -195,5 +196,6 @@ export default {
   'Task': TaskNoneIcon,
   'TextAnnotation': TextAnnotationicon,
   'Transaction': TransactionIcon,
-  'UserTask': UserTaskIcon
+  'UserTask': UserTaskIcon,
+  'multipleElements': MultipleElementsIcon
 };

src/provider/HOCs/withVariableContext.js

@@ -1,6 +1,7 @@
 import { getVariablesForElement } from '@bpmn-io/extract-process-variables/zeebe';
 import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks';
 import { useService } from '../../hooks';
+import { isArray } from 'min-dash';
 
 const fallbackResolver = {
   getVariablesForElement: bo => getVariablesForElement(bo)
@@ -10,6 +11,10 @@ export function withVariableContext(Component) {
   return props => {
     const { bpmnElement, element } = props;
 
+    if (isArray(element) && element.length > 1) {
+      return <Component { ...props } variables={ [] }></Component>;
+    }
+
     const bo = (bpmnElement || element).businessObject;
 
     const [ variables, setVariables ] = useState([]);

src/provider/bpmn/BpmnPropertiesProvider.js

@@ -160,6 +160,8 @@ function EscalationGroup(element, injector) {
 }
 
 function TimerGroup(element, injector) {
+  if (element.length > 1) return null;
+
   const translate = injector.get('translate');
   const group = {
     label: translate('Timer'),

src/provider/zeebe/ZeebePropertiesProvider.js

@@ -81,6 +81,10 @@ export default class ZeebePropertiesProvider {
       // (3) remove message group when not applicable
       groups = removeMessageGroup(groups, element);
 
+      if (element.length > 1) {
+        return groups.filter(group => group.multiElement);
+      }
+
       return groups;
     };
   }
@@ -132,7 +136,8 @@ function TaskDefinitionGroup(element, injector) {
     entries: [
       ...TaskDefinitionProps({ element })
     ],
-    component: Group
+    component: Group,
+    multiElement: true
   };
 
   return group.entries.length ? group : null;
@@ -302,6 +307,7 @@ function AssignmentDefinitionGroup(element, injector) {
 }
 
 function ExecutionListenersGroup(element, injector) {
+  if (element.length > 1) return null;
   const translate = injector.get('translate');
   const group = {
     label: translate('Execution listeners'),
@@ -318,6 +324,8 @@ function ExecutionListenersGroup(element, injector) {
 }
 
 function ExtensionPropertiesGroup(element, injector) {
+  if (element.length > 1) return null;
+
   const translate = injector.get('translate');
   const group = {
     label: translate('Extension properties'),