Feature: Event and Task Type Selection

src/main/components/store/model-store.tsx

@@ -23,11 +23,11 @@ import { CanvasContext } from '../canvas/canvas-context';
 import { withCanvas } from '../canvas/with-canvas';
 import { ModelState, PartialModelState } from './model-state';
 import {
-  Patcher,
   createPatcherMiddleware,
   createPatcherReducer,
   isDiscreteAction,
   isSelectionAction,
+  Patcher,
 } from '../../services/patcher';
 import { UMLModel } from '../../typings';
 

src/main/i18n/de.json

@@ -121,20 +121,45 @@
     },
     "BPMN": {
       "BPMNTask": "Task",
+      "BPMNUserTask": "User Task",
+      "BPMNSendTask": "Send Task",
+      "BPMNReceiveTask": "Receive Task",
+      "BPMNManualTask": "Manual Task",
+      "BPMNBusinessRuleTask": "Business Rule Task",
+      "BPMNScriptTask": "Script Task",
       "BPMNSubprocess": "Sub-Prozess",
       "BPMNTransaction": "Transaktion",
       "BPMNCallActivity": "Aufruf-Aktivität",
       "BPMNAnnotation": "Annotation",
-      "BPMNStartEvent": "Start-Event",
-      "BPMNIntermediateEvent": "Event",
-      "BPMNEndEvent": "End-Event",
+      "BPMNStartEvent": "Start-Ereignis",
+      "BPMNMessageStartEvent": "Message Start Event",
+      "BPMNTimerStartEvent": "Timer Start Event",
+      "BPMNConditionalStartEvent": "Conditional Start Event",
+      "BPMNSignalStartEvent": "Signal Start Event",
+      "BPMNIntermediateEvent": "Zwischenereignis",
+      "BPMNMessageIntermediateCatchEvent": "Message Intermediate Catch Event",
+      "BPMNMessageIntermediateThrowEvent": "Message Intermediate Throw Event",
+      "BPMNTimerIntermediateCatchEvent": "Timer Intermediate Catch Event",
+      "BPMNEscalationIntermediateThrowEvent": "Escalation Intermediate Throw Event",
+      "BPMNConditionalIntermediateCatchEvent": "Conditional Intermediate Catch Event",
+      "BPMNLinkIntermediateCatchEvent": "Link Intermediate Catch Event",
+      "BPMNLinkIntermediateThrowEvent": "Link Intermediate Throw Event",
+      "BPMNCompensationIntermediateThrowEvent": "Compensation Intermediate Throw Event",
+      "BPMNSignalIntermediateCatchEvent": "Signal Intermediate Catch Event",
+      "BPMNSignalIntermediateThrowEvent": "Signal Intermediate Throw Event",
+      "BPMNEndEvent": "End-Ereignis",
+      "BPMNMessageEndEvent:": "Message End Event",
+      "BPMNEscalationEndEvent": "Escalation End Event",
+      "BPMNErrorEndEvent": "Error End Event",
+      "BPMNCompensationEndEvent": "Compensation End Event",
+      "BPMNSignalEndEvent": "Signal End Event",
+      "BPMNTerminateEndEvent": "Terminate End Event",
       "BPMNGateway": "Gateway",
       "BPMNComplexGateway": "Komplex",
       "BPMNEventBasedGateway": "Ereignis-basiert",
       "BPMNExclusiveGateway": "Exklusiv",
       "BPMNInclusiveGateway": "Inklusiv",
       "BPMNParallelGateway": "Parallel",
-      "BPMNParallelEventBasedGateway": "Parallel Ereignis-basiert",
       "BPMNConversation": "Konversation",
       "BPMNCallConversation": "Aufruf-Konversation",
       "BPMNSequenceFlow": "Sequenz",

src/main/i18n/en.json

@@ -121,20 +121,45 @@
     },
     "BPMN": {
       "BPMNTask": "Task",
+      "BPMNUserTask": "User Task",
+      "BPMNSendTask": "Send Task",
+      "BPMNReceiveTask": "Receive Task",
+      "BPMNManualTask": "Manual Task",
+      "BPMNBusinessRuleTask": "Business Rule Task",
+      "BPMNScriptTask": "Script Task",
       "BPMNSubprocess": "Subprocess",
       "BPMNTransaction": "Transaction",
       "BPMNCallActivity": "Call Activity",
       "BPMNAnnotation": "Annotation",
-      "BPMNStartEvent": "Start",
-      "BPMNIntermediateEvent": "Event",
-      "BPMNEndEvent": "End",
+      "BPMNStartEvent": "Start Event",
+      "BPMNMessageStartEvent": "Message Start Event",
+      "BPMNTimerStartEvent": "Timer Start Event",
+      "BPMNConditionalStartEvent": "Conditional Start Event",
+      "BPMNSignalStartEvent": "Signal Start Event",
+      "BPMNIntermediateEvent": "Intermediate Event",
+      "BPMNMessageIntermediateCatchEvent": "Message Intermediate Catch Event",
+      "BPMNMessageIntermediateThrowEvent": "Message Intermediate Throw Event",
+      "BPMNTimerIntermediateCatchEvent": "Timer Intermediate Catch Event",
+      "BPMNEscalationIntermediateThrowEvent": "Escalation Intermediate Throw Event",
+      "BPMNConditionalIntermediateCatchEvent": "Conditional Intermediate Catch Event",
+      "BPMNLinkIntermediateCatchEvent": "Link Intermediate Catch Event",
+      "BPMNLinkIntermediateThrowEvent": "Link Intermediate Throw Event",
+      "BPMNCompensationIntermediateThrowEvent": "Compensation Intermediate Throw Event",
+      "BPMNSignalIntermediateCatchEvent": "Signal Intermediate Catch Event",
+      "BPMNSignalIntermediateThrowEvent": "Signal Intermediate Throw Event",
+      "BPMNEndEvent": "End Event",
+      "BPMNMessageEndEvent": "Message End Event",
+      "BPMNEscalationEndEvent": "Escalation End Event",
+      "BPMNErrorEndEvent": "Error End Event",
+      "BPMNCompensationEndEvent": "Compensation End Event",
+      "BPMNSignalEndEvent": "Signal End Event",
+      "BPMNTerminateEndEvent": "Terminate End Event",
       "BPMNGateway": "Gateway",
       "BPMNComplexGateway": "Complex",
       "BPMNEventBasedGateway": "Event-based",
       "BPMNInclusiveGateway": "Inclusive",
       "BPMNExclusiveGateway": "Exclusive",
       "BPMNParallelGateway": "Parallel",
-      "BPMNParallelEventBasedGateway": "Parallel Event-based",
       "BPMNConversation": "Conversation",
       "BPMNCallConversation": "Call Conversation",
       "BPMNSequenceFlow": "Sequence",

src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx

@@ -1,12 +1,18 @@
-import React, { ComponentType, FunctionComponent } from 'react';
-import { BPMNEndEvent } from './bpmn-end-event';
+import React, { ComponentType, FunctionComponent, ReactElement } from 'react';
+import { BPMNEndEvent, BPMNEndEventType } from './bpmn-end-event';
 import { withTheme, withThemeProps } from '../../../components/theme/styles';
 import { compose } from 'redux';
 import { connect, ConnectedComponent } from 'react-redux';
 import { ModelState } from '../../../components/store/model-state';
 import { ApollonView } from '../../../services/editor/editor-types';
 import { ThemedCircle } from '../../../components/theme/themedComponents';
 import { Multiline } from '../../../utils/svg/multiline';
+import { BPMNMessageFilledIcon } from '../common/bpmn-message-filled-icon';
+import { BPMNEscalationFilledIcon } from '../common/bpmn-escalation-filled-icon';
+import { BPMNCompensationFilledIcon } from '../common/bpmn-compensation-filled-icon';
+import { BPMNSignalFilledIcon } from '../common/bpmn-signal-filled-icon';
+import { BPMNTerminateFilledIcon } from '../common/bpmn-terminate-filled-icon';
+import { BPMNErrorFilledIcon } from '../common/bpmn-error-filled-icon';
 
 type OwnProps = {
   element: BPMNEndEvent;
@@ -27,6 +33,35 @@ const enhance = compose<ConnectedComponent<ComponentType<Props>, OwnProps>>(
 );
 
 export const BPMNEndEventC: FunctionComponent<Props> = ({ element, interactive, interactable, theme }) => {
+  /**
+   * Retrieve an icon based on a given start event type
+   * @param eventType The event type for which an icon should be rendered
+   * @param props Additional props that are passed to the rendered icon
+   */
+  const renderIconForType = (
+    eventType: BPMNEndEventType,
+    props: React.SVGProps<SVGSVGElement> = {},
+  ): null | ReactElement => {
+    switch (eventType) {
+      case 'default':
+        return null;
+      case 'message':
+        return <BPMNMessageFilledIcon {...props} />;
+      case 'escalation':
+        return <BPMNEscalationFilledIcon {...props} />;
+      case 'error':
+        return <BPMNErrorFilledIcon {...props} />;
+      case 'compensation':
+        return <BPMNCompensationFilledIcon {...props} />;
+      case 'signal':
+        return <BPMNSignalFilledIcon {...props} />;
+      case 'terminate':
+        return <BPMNTerminateFilledIcon {...props} />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <g>
       <ThemedCircle
@@ -37,17 +72,20 @@ export const BPMNEndEventC: FunctionComponent<Props> = ({ element, interactive,
         strokeWidth={3}
       />
       <Multiline
-        x={element.bounds.width + 10}
-        y={element.bounds.height / 2}
-        width={element.bounds.width}
-        height={element.bounds.height}
+        x={element.bounds.width / 2}
+        y={element.bounds.height + 20}
         fill={element.textColor}
+        width={element.bounds.width}
         lineHeight={16}
         capHeight={11}
-        textAnchor="start"
+        verticalAnchor="start"
       >
         {element.name}
       </Multiline>
+      {renderIconForType(element.eventType, {
+        x: element.bounds.width / 2 - 10,
+        y: element.bounds.height / 2 - 10,
+      })}
     </g>
   );
 };

src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-update.tsx

@@ -0,0 +1,104 @@
+import React, { Component, ComponentClass } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Button } from '../../../components/controls/button/button';
+import { Divider } from '../../../components/controls/divider/divider';
+import { TrashIcon } from '../../../components/controls/icon/trash';
+import { Textfield } from '../../../components/controls/textfield/textfield';
+import { I18nContext } from '../../../components/i18n/i18n-context';
+import { localized } from '../../../components/i18n/localized';
+import { ModelState } from '../../../components/store/model-state';
+import { styled } from '../../../components/theme/styles';
+import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
+import { Dropdown } from '../../../components/controls/dropdown/dropdown';
+import { BPMNEndEvent, BPMNEndEventType } from './bpmn-end-event';
+
+interface OwnProps {
+  element: BPMNEndEvent;
+}
+
+type StateProps = {};
+
+interface DispatchProps {
+  update: typeof UMLElementRepository.update;
+  delete: typeof UMLElementRepository.delete;
+}
+
+type Props = OwnProps & StateProps & DispatchProps & I18nContext;
+
+const enhance = compose<ComponentClass<OwnProps>>(
+  localized,
+  connect<StateProps, DispatchProps, OwnProps, ModelState>(null, {
+    update: UMLElementRepository.update,
+    delete: UMLElementRepository.delete,
+  }),
+);
+
+const Flex = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+`;
+
+class BPMNEndEventUpdateComponent extends Component<Props> {
+  render() {
+    const { element } = this.props;
+
+    return (
+      <div>
+        <section>
+          <Flex>
+            <Textfield value={element.name} onChange={this.rename(element.id)} autoFocus />
+            <Button color="link" tabIndex={-1} onClick={this.delete(element.id)}>
+              <TrashIcon />
+            </Button>
+          </Flex>
+          <Divider />
+        </section>
+        <section>
+          <Dropdown value={element.eventType} onChange={this.changeEventType(element.id)}>
+            <Dropdown.Item value={'default'}>{this.props.translate('packages.BPMN.BPMNEndEvent')}</Dropdown.Item>
+            <Dropdown.Item value={'message'}>{this.props.translate('packages.BPMN.BPMNMessageEndEvent')}</Dropdown.Item>
+            <Dropdown.Item value={'escalation'}>
+              {this.props.translate('packages.BPMN.BPMNEscalationEndEvent')}
+            </Dropdown.Item>
+            <Dropdown.Item value={'error'}>{this.props.translate('packages.BPMN.BPMNErrorEndEvent')}</Dropdown.Item>
+            <Dropdown.Item value={'compensation'}>
+              {this.props.translate('packages.BPMN.BPMNCompensationEndEvent')}
+            </Dropdown.Item>
+            <Dropdown.Item value={'signal'}>{this.props.translate('packages.BPMN.BPMNSignalEndEvent')}</Dropdown.Item>
+            <Dropdown.Item value={'terminate'}>
+              {this.props.translate('packages.BPMN.BPMNTerminateEndEvent')}
+            </Dropdown.Item>
+          </Dropdown>
+        </section>
+      </div>
+    );
+  }
+
+  /**
+   * Rename the event
+   * @param id The ID of the event that should be renamed
+   */
+  private rename = (id: string) => (value: string) => {
+    this.props.update(id, { name: value });
+  };
+
+  /**
+   * Change the type of the event
+   * @param id The ID of the event whose type should be changed
+   */
+  private changeEventType = (id: string) => (value: string) => {
+    this.props.update<BPMNEndEvent>(id, { eventType: value as BPMNEndEventType });
+  };
+
+  /**
+   * Delete an event
+   * @param id The ID of the event that should be deleted
+   */
+  private delete = (id: string) => () => {
+    this.props.delete(id);
+  };
+}
+
+export const BPMNEndEventUpdate = enhance(BPMNEndEventUpdateComponent);