From a5cddf394f14e30c4c5c644f405c953b37a1639f Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sun, 19 Nov 2023 17:15:25 +0100 Subject: [PATCH] allow selecting BPMN event types --- src/main/i18n/de.json | 27 +++- src/main/i18n/en.json | 27 +++- .../bpmn-conversation-component.tsx | 35 ----- .../bpmn-conversation/bpmn-conversation.ts | 48 ------- .../bpmn-end-event-component.tsx | 43 +++++- .../bpmn-end-event/bpmn-end-event-update.tsx | 104 +++++++++++++++ .../bpmn/bpmn-end-event/bpmn-end-event.ts | 24 +++- .../bpmn-gateway/bpmn-gateway-component.tsx | 4 - .../bpmn/bpmn-gateway/bpmn-gateway-update.tsx | 15 +-- .../bpmn/bpmn-gateway/bpmn-gateway.ts | 8 +- .../bpmn-event-based-gateway-component.tsx | 14 +- ...parallel-event-based-gateway-component.tsx | 44 ------- .../bpmn-intermediate-event-component.tsx | 57 +++++++- .../bpmn-intermediate-event-update.tsx | 124 ++++++++++++++++++ .../bpmn-intermediate-event.ts | 35 ++++- .../bpmn/bpmn-pool/bpmn-pool-update.tsx | 3 - .../bpmn-start-event-component.tsx | 36 ++++- .../bpmn-start-event-update.tsx} | 38 +++--- .../bpmn/bpmn-start-event/bpmn-start-event.ts | 24 +++- .../bpmn-transaction-component.tsx | 8 +- .../common/bpmn-compensation-filled-icon.tsx | 21 +++ .../bpmn/common/bpmn-conditional-icon.tsx | 10 ++ .../bpmn/common/bpmn-error-filled-icon.tsx | 13 ++ .../common/bpmn-escalation-filled-icon.tsx | 14 ++ .../bpmn/common/bpmn-link-filled-icon.tsx | 14 ++ .../packages/bpmn/common/bpmn-link-icon.tsx | 12 ++ .../bpmn/common/bpmn-message-filled-icon.tsx | 19 +++ .../bpmn/common/bpmn-message-icon.tsx | 8 ++ .../bpmn/common/bpmn-signal-filled-icon.tsx | 14 ++ .../packages/bpmn/common/bpmn-signal-icon.tsx | 8 ++ .../common/bpmn-terminate-filled-icon.tsx | 8 ++ .../packages/bpmn/common/bpmn-timer-icon.tsx | 9 ++ src/main/packages/bpmn/index.ts | 1 - src/main/packages/components.ts | 2 - src/main/packages/popups.ts | 11 +- src/main/packages/uml-elements.ts | 2 - src/main/services/layouter/layouter.ts | 2 +- src/main/typings.ts | 16 ++- .../bpmn-conversation-component-test.tsx.snap | 34 ----- .../bpmn-conversation-component-test.tsx | 15 --- 40 files changed, 688 insertions(+), 263 deletions(-) delete mode 100644 src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx delete mode 100644 src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts create mode 100644 src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-update.tsx delete mode 100644 src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-update.tsx rename src/main/packages/bpmn/{bpmn-conversation/bpmn-conversation-update.tsx => bpmn-start-event/bpmn-start-event-update.tsx} (61%) create mode 100644 src/main/packages/bpmn/common/bpmn-compensation-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-conditional-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-error-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-escalation-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-link-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-link-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-message-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-message-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-signal-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-signal-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-terminate-filled-icon.tsx create mode 100644 src/main/packages/bpmn/common/bpmn-timer-icon.tsx delete mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap delete mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index 2b1da9a1..0401f381 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -125,16 +125,35 @@ "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", diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index 8ed43059..4733591b 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -125,16 +125,35 @@ "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", diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx deleted file mode 100644 index 962fefb5..00000000 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { BPMNConversation } from './bpmn-conversation'; -import { ThemedPolyline } from '../../../components/theme/themedComponents'; -import { Multiline } from '../../../utils/svg/multiline'; - -export const BPMNConversationComponent: FunctionComponent = ({ element }) => ( - - - - {element.name} - - -); - -export interface Props { - element: BPMNConversation; -} diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts deleted file mode 100644 index a60560bb..00000000 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { BPMNElementType } from '..'; -import { ILayer } from '../../../services/layouter/layer'; -import { ILayoutable } from '../../../services/layouter/layoutable'; -import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element'; -import { UMLElementType } from '../../uml-element-type'; -import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; -import { IBoundary } from '../../../utils/geometry/boundary'; -import { DeepPartial } from 'redux'; -import { assign } from '../../../utils/fx/assign'; -import * as Apollon from '../../../typings'; -import { UMLContainer } from '../../../services/uml-container/uml-container'; - -export type BPMNConversationType = 'default' | 'call'; - -export class BPMNConversation extends UMLContainer { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; - static defaultConversationType: BPMNConversationType = 'default'; - - type: UMLElementType = BPMNElementType.BPMNConversation; - bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; - conversationType: BPMNConversationType; - - constructor(values?: DeepPartial) { - super(values); - assign(this, values); - this.conversationType = values?.conversationType || BPMNConversation.defaultConversationType; - } - - serialize(children?: UMLElement[]): Apollon.BPMNConversation { - return { - ...super.serialize(), - type: this.type as keyof typeof BPMNElementType, - conversationType: this.conversationType, - }; - } - - deserialize( - values: T & { conversationType?: BPMNConversationType }, - children?: Apollon.UMLModelElement[], - ): void { - super.deserialize(values, children); - this.conversationType = values.conversationType || BPMNConversation.defaultConversationType; - } - - render(canvas: ILayer): ILayoutable[] { - return [this]; - } -} diff --git a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx index 15424dc5..70b6faa6 100644 --- a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx +++ b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx @@ -1,5 +1,5 @@ -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'; @@ -7,6 +7,12 @@ 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, OwnProps>>( ); export const BPMNEndEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { + /** + * Retrieve an icon based on a given start event type + * @param eventType The event type for which a icon should be rendered + * @param props Additional props that are passed to the rendered icon + */ + const renderIconForType = ( + eventType: BPMNEndEventType, + props: React.SVGProps = {}, + ): null | ReactElement => { + switch (eventType) { + case 'default': + return null; + case 'message': + return ; + case 'escalation': + return ; + case 'error': + return ; + case 'compensation': + return ; + case 'signal': + return ; + case 'terminate': + return ; + default: + return null; + } + }; + return ( = ({ element, interactive, > {element.name} + {renderIconForType(element.eventType, { + x: element.bounds.width / 2 - 10, + y: element.bounds.height / 2 - 10, + })} ); }; diff --git a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-update.tsx b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-update.tsx new file mode 100644 index 00000000..775fc040 --- /dev/null +++ b/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>( + localized, + connect(null, { + update: UMLElementRepository.update, + delete: UMLElementRepository.delete, + }), +); + +const Flex = styled.div` + display: flex; + align-items: baseline; + justify-content: space-between; +`; + +class BPMNEndEventUpdateComponent extends Component { + render() { + const { element } = this.props; + + return ( +
+
+ + + + + +
+
+ + {this.props.translate('packages.BPMN.BPMNEndEvent')} + {this.props.translate('packages.BPMN.BPMNMessageEndEvent')} + + {this.props.translate('packages.BPMN.BPMNEscalationEndEvent')} + + {this.props.translate('packages.BPMN.BPMNErrorEndEvent')} + + {this.props.translate('packages.BPMN.BPMNCompensationEndEvent')} + + {this.props.translate('packages.BPMN.BPMNSignalEndEvent')} + + {this.props.translate('packages.BPMN.BPMNTerminateEndEvent')} + + +
+
+ ); + } + + /** + * 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(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); diff --git a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts index 96fd79ff..84df7e1b 100644 --- a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts +++ b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts @@ -7,17 +7,39 @@ import { assign } from '../../../utils/fx/assign'; import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; import { UMLContainer } from '../../../services/uml-container/uml-container'; +import * as Apollon from '../../../typings'; + +export type BPMNEndEventType = 'default' | 'message' | 'escalation' | 'error' | 'compensation' | 'signal' | 'terminate'; export class BPMNEndEvent extends UMLContainer { static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLContainer.features, resizable: false }; + static defaultEventType: BPMNEndEventType = 'default'; type: UMLElementType = BPMNElementType.BPMNEndEvent; bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + eventType: BPMNEndEventType; - constructor(values?: DeepPartial) { + constructor(values?: DeepPartial) { super(values); assign(this, values); + this.eventType = values?.eventType || BPMNEndEvent.defaultEventType; + } + + serialize(children?: UMLContainer[]): Apollon.BPMNEndEvent { + return { + ...super.serialize(), + type: this.type as keyof typeof BPMNElementType, + eventType: this.eventType, + }; + } + + deserialize( + values: T & { eventType?: BPMNEndEventType }, + children?: Apollon.UMLModelElement[], + ): void { + super.deserialize(values, children); + this.eventType = values.eventType || BPMNEndEvent.defaultEventType; } render(canvas: ILayer): ILayoutable[] { diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx index ec8ddbc9..f65010bc 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx @@ -5,7 +5,6 @@ import { BPMNExclusiveGatewayComponent } from './gateways-components/bpmn-exclus import { BPMNInclusiveGatewayComponent } from './gateways-components/bpmn-inclusive-gateway-component'; import { BPMNParallelGatewayComponent } from './gateways-components/bpmn-parallel-gateway-component'; import { BPMNComplexGatewayComponent } from './gateways-components/bpmn-complex-gateway-component'; -import { BPMNParallelEventBasedGatewayComponent } from './gateways-components/bpmn-parallel-event-based-gateway-component'; export const BPMNGatewayComponent: FunctionComponent = (props) => { let GatewayComponent = BPMNExclusiveGatewayComponent; @@ -26,9 +25,6 @@ export const BPMNGatewayComponent: FunctionComponent = (props) => { case 'parallel': GatewayComponent = BPMNParallelGatewayComponent; break; - case 'parallel-event-based': - GatewayComponent = BPMNParallelEventBasedGatewayComponent; - break; } return ( diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx index b330f805..8c7c3b9b 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx @@ -57,22 +57,19 @@ class BPMNGatewayUpdateComponent extends Component {
- {this.props.translate('packages.BPMN.BPMNComplexGateway')} - - {this.props.translate('packages.BPMN.BPMNEventBasedGateway')} - {this.props.translate('packages.BPMN.BPMNExclusiveGateway')} - - {this.props.translate('packages.BPMN.BPMNInclusiveGateway')} - {this.props.translate('packages.BPMN.BPMNParallelGateway')} - - {this.props.translate('packages.BPMN.BPMNParallelEventBasedGateway')} + + {this.props.translate('packages.BPMN.BPMNInclusiveGateway')} + + + {this.props.translate('packages.BPMN.BPMNEventBasedGateway')} + {this.props.translate('packages.BPMN.BPMNComplexGateway')}
diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts index 8906862a..e81b4ea4 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts @@ -9,13 +9,7 @@ import { assign } from '../../../utils/fx/assign'; import * as Apollon from '../../../typings'; import { UMLContainer } from '../../../services/uml-container/uml-container'; -export type BPMNGatewayType = - | 'complex' - | 'event-based' - | 'exclusive' - | 'inclusive' - | 'parallel' - | 'parallel-event-based'; +export type BPMNGatewayType = 'complex' | 'event-based' | 'exclusive' | 'inclusive' | 'parallel'; export class BPMNGateway extends UMLContainer { static features: UMLElementFeatures = { ...UMLContainer.features, resizable: false }; diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx index aa76c699..079fbdf1 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from 'react'; -import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { ThemedPath, ThemedPolyline } from '../../../../components/theme/themedComponents'; import { Multiline } from '../../../../utils/svg/multiline'; import { Props } from '../bpmn-gateway-component'; @@ -12,18 +12,6 @@ export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ eleme strokeColor={element.strokeColor} fillColor={element.fillColor} /> - - = ({ element }) => ( - - - - - - - {element.name} - - -); diff --git a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx index 62c842cb..9cbf93b6 100644 --- a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx +++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx @@ -1,5 +1,5 @@ -import React, { ComponentType, FunctionComponent } from 'react'; -import { BPMNIntermediateEvent } from './bpmn-intermediate-event'; +import React, { ComponentType, FunctionComponent, ReactElement } from 'react'; +import { BPMNIntermediateEvent, BPMNIntermediateEventType } from './bpmn-intermediate-event'; import { connect, ConnectedComponent } from 'react-redux'; import { ModelState } from '../../../components/store/model-state'; import { compose } from 'redux'; @@ -7,6 +7,16 @@ import { withTheme, withThemeProps } from '../../../components/theme/styles'; import { ApollonView } from '../../../services/editor/editor-types'; import { ThemedCircle } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; +import { BPMNMessageIcon } from '../common/bpmn-message-icon'; +import { BPMNMessageFilledIcon } from '../common/bpmn-message-filled-icon'; +import { BPMNTimerIcon } from '../common/bpmn-timer-icon'; +import { BPMNEscalationFilledIcon } from '../common/bpmn-escalation-filled-icon'; +import { BPMNConditionalIcon } from '../common/bpmn-conditional-icon'; +import { BPMNLinkIcon } from '../common/bpmn-link-icon'; +import { BPMNLinkFilledIcon } from '../common/bpmn-link-filled-icon'; +import { BPMNCompensationFilledIcon } from '../common/bpmn-compensation-filled-icon'; +import { BPMNSignalIcon } from '../common/bpmn-signal-icon'; +import { BPMNSignalFilledIcon } from '../common/bpmn-signal-filled-icon'; type OwnProps = { element: BPMNIntermediateEvent; @@ -27,6 +37,43 @@ const enhance = compose, OwnProps>>( ); const BPMNIntermediateEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { + /** + * Retrieve an icon based on a given start event type + * @param eventType The event type for which a icon should be rendered + * @param props Additional props that are passed to the rendered icon + */ + const renderIconForType = ( + eventType: BPMNIntermediateEventType, + props: React.SVGProps = {}, + ): null | ReactElement => { + switch (eventType) { + case 'default': + return null; + case 'message-catch': + return ; + case 'message-throw': + return ; + case 'timer-catch': + return ; + case 'escalation-throw': + return ; + case 'conditional-catch': + return ; + case 'link-catch': + return ; + case 'link-throw': + return ; + case 'compensation-throw': + return ; + case 'signal-catch': + return ; + case 'signal-throw': + return ; + default: + return null; + } + }; + return ( = ({ element, interactive = ({ element, interactive > {element.name} + {renderIconForType(element.eventType, { + x: element.bounds.width / 2 - 10, + y: element.bounds.height / 2 - 10, + })} ); }; diff --git a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-update.tsx b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-update.tsx new file mode 100644 index 00000000..fd38d54d --- /dev/null +++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-update.tsx @@ -0,0 +1,124 @@ +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 { BPMNIntermediateEvent, BPMNIntermediateEventType } from './bpmn-intermediate-event'; + +interface OwnProps { + element: BPMNIntermediateEvent; +} + +type StateProps = {}; + +interface DispatchProps { + update: typeof UMLElementRepository.update; + delete: typeof UMLElementRepository.delete; +} + +type Props = OwnProps & StateProps & DispatchProps & I18nContext; + +const enhance = compose>( + localized, + connect(null, { + update: UMLElementRepository.update, + delete: UMLElementRepository.delete, + }), +); + +const Flex = styled.div` + display: flex; + align-items: baseline; + justify-content: space-between; +`; + +class BPMNIntermediateEventUpdateComponent extends Component { + render() { + const { element } = this.props; + + return ( +
+
+ + + + + +
+
+ + + {this.props.translate('packages.BPMN.BPMNIntermediateEvent')} + + + {this.props.translate('packages.BPMN.BPMNMessageIntermediateCatchEvent')} + + + {this.props.translate('packages.BPMN.BPMNMessageIntermediateThrowEvent')} + + + {this.props.translate('packages.BPMN.BPMNTimerIntermediateCatchEvent')} + + + {this.props.translate('packages.BPMN.BPMNEscalationIntermediateThrowEvent')} + + + {this.props.translate('packages.BPMN.BPMNConditionalIntermediateCatchEvent')} + + + {this.props.translate('packages.BPMN.BPMNLinkIntermediateCatchEvent')} + + + {this.props.translate('packages.BPMN.BPMNLinkIntermediateThrowEvent')} + + + {this.props.translate('packages.BPMN.BPMNCompensationIntermediateThrowEvent')} + + + {this.props.translate('packages.BPMN.BPMNSignalIntermediateCatchEvent')} + + + {this.props.translate('packages.BPMN.BPMNSignalIntermediateThrowEvent')} + + +
+
+ ); + } + + /** + * 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(id, { eventType: value as BPMNIntermediateEventType }); + }; + + /** + * Delete an event + * @param id The ID of the event that should be deleted + */ + private delete = (id: string) => () => { + this.props.delete(id); + }; +} + +export const BPMNIntermediateEventUpdate = enhance(BPMNIntermediateEventUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts index b5680db3..fb118d86 100644 --- a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts +++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts @@ -7,17 +7,50 @@ import { assign } from '../../../utils/fx/assign'; import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; import { UMLContainer } from '../../../services/uml-container/uml-container'; +import * as Apollon from '../../../typings'; + +export type BPMNIntermediateEventType = + | 'default' + | 'message-catch' + | 'message-throw' + | 'timer-catch' + | 'escalation-throw' + | 'conditional-catch' + | 'link-catch' + | 'link-throw' + | 'compensation-throw' + | 'signal-catch' + | 'signal-throw'; export class BPMNIntermediateEvent extends UMLContainer { static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLContainer.features, resizable: false }; + static defaultEventType: BPMNIntermediateEventType = 'default'; type: UMLElementType = BPMNElementType.BPMNIntermediateEvent; bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + eventType: BPMNIntermediateEventType; - constructor(values?: DeepPartial) { + constructor(values?: DeepPartial) { super(values); assign(this, values); + this.eventType = values?.eventType || BPMNIntermediateEvent.defaultEventType; + } + + serialize(children?: UMLContainer[]): Apollon.BPMNIntermediateEvent { + return { + ...super.serialize(), + type: this.type as keyof typeof BPMNElementType, + eventType: this.eventType, + }; + } + + deserialize( + values: T & { eventType?: BPMNIntermediateEventType }, + children?: Apollon.UMLModelElement[], + ): void { + super.deserialize(values, children); + this.eventType = values.eventType || BPMNIntermediateEvent.defaultEventType; } render(canvas: ILayer): ILayoutable[] { diff --git a/src/main/packages/bpmn/bpmn-pool/bpmn-pool-update.tsx b/src/main/packages/bpmn/bpmn-pool/bpmn-pool-update.tsx index 69b4b645..5ec1d72e 100644 --- a/src/main/packages/bpmn/bpmn-pool/bpmn-pool-update.tsx +++ b/src/main/packages/bpmn/bpmn-pool/bpmn-pool-update.tsx @@ -19,9 +19,6 @@ import { AsyncDispatch } from '../../../utils/actions/actions'; import { BPMNElementType } from '../index'; import { Header } from '../../../components/controls/typography/typography'; import UmlAttributeUpdate from '../../common/uml-classifier/uml-classifier-attribute-update'; -import { UMLClassMethod } from '../../uml-class-diagram/uml-class-method/uml-class-method'; -import { UMLClassAttribute } from '../../uml-class-diagram/uml-class-attribute/uml-class-attribute'; -import { UMLRelationshipRepository } from '../../../services/uml-relationship/uml-relationship-repository'; interface OwnProps { element: BPMNPool; diff --git a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx index f0c1b591..5ce4d552 100644 --- a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx +++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType, FunctionComponent } from 'react'; +import React, { ComponentType, FunctionComponent, ReactElement } from 'react'; import { BPMNStartEvent } from './bpmn-start-event'; import { connect, ConnectedComponent } from 'react-redux'; import { ModelState } from '../../../components/store/model-state'; @@ -7,6 +7,11 @@ import { withTheme, withThemeProps } from '../../../components/theme/styles'; import { ApollonView } from '../../../services/editor/editor-types'; import { ThemedCircle } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; +import { BPMNMessageIcon } from '../common/bpmn-message-icon'; +import { BPMNTimerIcon } from '../common/bpmn-timer-icon'; +import { BPMNSignalIcon } from '../common/bpmn-signal-icon'; +import { BPMNConditionalIcon } from '../common/bpmn-conditional-icon'; +import { BPMNStartEventType } from '../../../../../lib/es6/packages/bpmn/bpmn-start-event/bpmn-start-event'; type OwnProps = { element: BPMNStartEvent; @@ -26,6 +31,31 @@ const enhance = compose, OwnProps>>( })), ); +/** + * Retrieve an icon based on a given start event type + * @param eventType The event type for which a icon should be rendered + * @param props Additional props that are passed to the rendered icon + */ +const renderIconForType = ( + eventType: BPMNStartEventType, + props: React.SVGProps = {}, +): null | ReactElement => { + switch (eventType) { + case 'default': + return null; + case 'message': + return ; + case 'timer': + return ; + case 'conditional': + return ; + case 'signal': + return ; + default: + return null; + } +}; + const BPMNStartEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { return ( @@ -47,6 +77,10 @@ const BPMNStartEventC: FunctionComponent = ({ element, interactive, inter > {element.name} + {renderIconForType(element.eventType, { + x: element.bounds.width / 2 - 10, + y: element.bounds.height / 2 - 10, + })} ); }; diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-update.tsx similarity index 61% rename from src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx rename to src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-update.tsx index c7eaf390..b8f518fd 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx +++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-update.tsx @@ -10,12 +10,11 @@ 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 { Switch } from '../../../components/controls/switch/switch'; -import { BPMNConversation, BPMNConversationType } from './bpmn-conversation'; import { Dropdown } from '../../../components/controls/dropdown/dropdown'; +import { BPMNStartEvent, BPMNStartEventType } from './bpmn-start-event'; interface OwnProps { - element: BPMNConversation; + element: BPMNStartEvent; } type StateProps = {}; @@ -41,7 +40,7 @@ const Flex = styled.div` justify-content: space-between; `; -class BPMNConversationUpdateComponent extends Component { +class BPMNStartEventUpdateComponent extends Component { render() { const { element } = this.props; @@ -57,9 +56,16 @@ class BPMNConversationUpdateComponent extends Component {
- - {this.props.translate('packages.BPMN.BPMNConversation')} - {this.props.translate('packages.BPMN.BPMNCallConversation')} + + {this.props.translate('packages.BPMN.BPMNStartEvent')} + + {this.props.translate('packages.BPMN.BPMNMessageStartEvent')} + + {this.props.translate('packages.BPMN.BPMNTimerStartEvent')} + + {this.props.translate('packages.BPMN.BPMNConditionalStartEvent')} + + {this.props.translate('packages.BPMN.BPMNSignalStartEvent')}
@@ -67,28 +73,28 @@ class BPMNConversationUpdateComponent extends Component { } /** - * Rename the conversation - * @param id The ID of the conversation that should be renamed + * 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 conversation - * @param id The ID of the conversation whose type should be changed + * Change the type of the event + * @param id The ID of the event whose type should be changed */ - private changeConversationType = (id: string) => (value: string) => { - this.props.update(id, { conversationType: value as BPMNConversationType }); + private changeEventType = (id: string) => (value: string) => { + this.props.update(id, { eventType: value as BPMNStartEventType }); }; /** - * Delete a conversation - * @param id The ID of the conversation that should be deleted + * Delete an event + * @param id The ID of the event that should be deleted */ private delete = (id: string) => () => { this.props.delete(id); }; } -export const BPMNConversationUpdate = enhance(BPMNConversationUpdateComponent); +export const BPMNStartEventUpdate = enhance(BPMNStartEventUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts index 346bd6cb..0b836bb8 100644 --- a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts +++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts @@ -7,17 +7,39 @@ import { assign } from '../../../utils/fx/assign'; import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; import { UMLContainer } from '../../../services/uml-container/uml-container'; +import * as Apollon from '../../../typings'; + +export type BPMNStartEventType = 'default' | 'message' | 'timer' | 'conditional' | 'signal'; export class BPMNStartEvent extends UMLContainer { static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLContainer.features, resizable: false }; + static defaultEventType: BPMNStartEventType = 'default'; type: UMLElementType = BPMNElementType.BPMNStartEvent; bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + eventType: BPMNStartEventType; - constructor(values?: DeepPartial) { + constructor(values?: DeepPartial) { super(values); assign(this, values); + this.eventType = values?.eventType || BPMNStartEvent.defaultEventType; + } + + serialize(children?: UMLContainer[]): Apollon.BPMNStartEvent { + return { + ...super.serialize(), + type: this.type as keyof typeof BPMNElementType, + eventType: this.eventType, + }; + } + + deserialize( + values: T & { eventType?: BPMNStartEventType }, + children?: Apollon.UMLModelElement[], + ): void { + super.deserialize(values, children); + this.eventType = values.eventType || BPMNStartEvent.defaultEventType; } render(canvas: ILayer): ILayoutable[] { diff --git a/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx index a48280a8..e402054e 100644 --- a/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx +++ b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx @@ -16,10 +16,10 @@ export const BPMNTransactionComponent: FunctionComponent = ({ element, fi diff --git a/src/main/packages/bpmn/common/bpmn-compensation-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-compensation-filled-icon.tsx new file mode 100644 index 00000000..b657d58d --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-compensation-filled-icon.tsx @@ -0,0 +1,21 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNCompensationFilledIcon: FunctionComponent> = (props) => ( + + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-conditional-icon.tsx b/src/main/packages/bpmn/common/bpmn-conditional-icon.tsx new file mode 100644 index 00000000..946cce9b --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-conditional-icon.tsx @@ -0,0 +1,10 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline, ThemedRect } from '../../../components/theme/themedComponents'; + +export const BPMNConditionalIcon: FunctionComponent> = (props) => ( + + + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-error-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-error-filled-icon.tsx new file mode 100644 index 00000000..e3c0a14a --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-error-filled-icon.tsx @@ -0,0 +1,13 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNErrorFilledIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-escalation-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-escalation-filled-icon.tsx new file mode 100644 index 00000000..fbf64ca5 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-escalation-filled-icon.tsx @@ -0,0 +1,14 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNEscalationFilledIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-link-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-link-filled-icon.tsx new file mode 100644 index 00000000..7f7d10f3 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-link-filled-icon.tsx @@ -0,0 +1,14 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNLinkFilledIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-link-icon.tsx b/src/main/packages/bpmn/common/bpmn-link-icon.tsx new file mode 100644 index 00000000..52252810 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-link-icon.tsx @@ -0,0 +1,12 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNLinkIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-message-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-message-filled-icon.tsx new file mode 100644 index 00000000..80a81f5e --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-message-filled-icon.tsx @@ -0,0 +1,19 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPath, ThemedPolyline, ThemedRect } from '../../../components/theme/themedComponents'; + +export const BPMNMessageFilledIcon: FunctionComponent> = (props) => ( + + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-message-icon.tsx b/src/main/packages/bpmn/common/bpmn-message-icon.tsx new file mode 100644 index 00000000..4f525c7b --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-message-icon.tsx @@ -0,0 +1,8 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNMessageIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-signal-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-signal-filled-icon.tsx new file mode 100644 index 00000000..1178cbe5 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-signal-filled-icon.tsx @@ -0,0 +1,14 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNSignalFilledIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-signal-icon.tsx b/src/main/packages/bpmn/common/bpmn-signal-icon.tsx new file mode 100644 index 00000000..7ddbbb67 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-signal-icon.tsx @@ -0,0 +1,8 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNSignalIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-terminate-filled-icon.tsx b/src/main/packages/bpmn/common/bpmn-terminate-filled-icon.tsx new file mode 100644 index 00000000..5ba2b270 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-terminate-filled-icon.tsx @@ -0,0 +1,8 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedCircle } from '../../../components/theme/themedComponents'; + +export const BPMNTerminateFilledIcon: FunctionComponent> = (props) => ( + + + +); diff --git a/src/main/packages/bpmn/common/bpmn-timer-icon.tsx b/src/main/packages/bpmn/common/bpmn-timer-icon.tsx new file mode 100644 index 00000000..b8553580 --- /dev/null +++ b/src/main/packages/bpmn/common/bpmn-timer-icon.tsx @@ -0,0 +1,9 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNTimerIcon: FunctionComponent> = (props) => ( + + + + +); diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index 4e82edab..0580fb03 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -10,7 +10,6 @@ export const BPMNElementType = { BPMNIntermediateEvent: 'BPMNIntermediateEvent', BPMNEndEvent: 'BPMNEndEvent', BPMNGateway: 'BPMNGateway', - BPMNConversation: 'BPMNConversation', BPMNDataObject: 'BPMNDataObject', BPMNPool: 'BPMNPool', BPMNSwimlane: 'BPMNSwimlane', diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index e1d28cd4..4a1f7ea6 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -58,7 +58,6 @@ import { BPMNGatewayComponent } from './bpmn/bpmn-gateway/bpmn-gateway-component import { BPMNTransactionComponent } from './bpmn/bpmn-transaction/bpmn-transaction-component'; import { BPMNCallActivityComponent } from './bpmn/bpmn-call-activity/bpmn-call-activity-component'; import { BPMNAnnotationComponent } from './bpmn/bpmn-annotation/bpmn-annotation-component'; -import { BPMNConversationComponent } from './bpmn/bpmn-conversation/bpmn-conversation-component'; import { BPMNDataObjectComponent } from './bpmn/bpmn-data-object/bpmn-data-object-component'; import { BPMNGroupComponent } from './bpmn/bpmn-group/bpmn-group-component'; import { BPMNPoolComponent } from './bpmn/bpmn-pool/bpmn-pool-component'; @@ -118,7 +117,6 @@ export const Components: { [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventComponent, [UMLElementType.BPMNEndEvent]: BPMNEndEventComponent, [UMLElementType.BPMNGateway]: BPMNGatewayComponent, - [UMLElementType.BPMNConversation]: BPMNConversationComponent, [UMLElementType.BPMNDataObject]: BPMNDataObjectComponent, [UMLElementType.BPMNPool]: BPMNPoolComponent, [UMLElementType.BPMNSwimlane]: BPMNSwimlaneComponent, diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index ae5f11a0..a4285152 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -28,8 +28,10 @@ import { FlowchartFlowlineUpdate } from './flowchart/flowchart-flowline/flowchar import { ColorLegendUpdate } from './common/color-legend/color-legend-update'; import { BPMNFlowUpdate } from './bpmn/bpmn-flow/bpmn-flow-update'; import { BPMNGatewayUpdate } from './bpmn/bpmn-gateway/bpmn-gateway-update'; -import { BPMNConversationUpdate } from './bpmn/bpmn-conversation/bpmn-conversation-update'; import { BPMNPoolUpdate } from './bpmn/bpmn-pool/bpmn-pool-update'; +import { BPMNIntermediateEventUpdate } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-update'; +import { BPMNStartEventUpdate } from './bpmn/bpmn-start-event/bpmn-start-event-update'; +import { BPMNEndEventUpdate } from './bpmn/bpmn-end-event/bpmn-end-event-update'; export type Popups = { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null }; export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null } = { @@ -79,11 +81,10 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.BPMNTransaction]: DefaultPopup, [UMLElementType.BPMNCallActivity]: DefaultPopup, [UMLElementType.BPMNAnnotation]: DefaultPopup, - [UMLElementType.BPMNStartEvent]: DefaultPopup, - [UMLElementType.BPMNIntermediateEvent]: DefaultPopup, - [UMLElementType.BPMNEndEvent]: DefaultPopup, + [UMLElementType.BPMNStartEvent]: BPMNStartEventUpdate, + [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventUpdate, + [UMLElementType.BPMNEndEvent]: BPMNEndEventUpdate, [UMLElementType.BPMNGateway]: BPMNGatewayUpdate, - [UMLElementType.BPMNConversation]: BPMNConversationUpdate, [UMLElementType.BPMNDataObject]: DefaultPopup, [UMLElementType.BPMNGroup]: DefaultPopup, [UMLElementType.BPMNPool]: BPMNPoolUpdate, diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index 6b474519..097a66f9 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -48,7 +48,6 @@ import { BPMNGateway } from './bpmn/bpmn-gateway/bpmn-gateway'; import { BPMNTransaction } from './bpmn/bpmn-transaction/bpmn-transaction'; import { BPMNCallActivity } from './bpmn/bpmn-call-activity/bpmn-call-activity'; import { BPMNAnnotation } from './bpmn/bpmn-annotation/bpmn-annotation'; -import { BPMNConversation } from './bpmn/bpmn-conversation/bpmn-conversation'; import { BPMNDataObject } from './bpmn/bpmn-data-object/bpmn-data-object'; import { BPMNPool } from './bpmn/bpmn-pool/bpmn-pool'; import { BPMNSwimlane } from './bpmn/bpmn-swimlane/bpmn-swimlane'; @@ -104,7 +103,6 @@ export const UMLElements = { [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEvent, [UMLElementType.BPMNEndEvent]: BPMNEndEvent, [UMLElementType.BPMNGateway]: BPMNGateway, - [UMLElementType.BPMNConversation]: BPMNConversation, [UMLElementType.BPMNDataObject]: BPMNDataObject, [UMLElementType.BPMNPool]: BPMNPool, [UMLElementType.BPMNSwimlane]: BPMNSwimlane, diff --git a/src/main/services/layouter/layouter.ts b/src/main/services/layouter/layouter.ts index 6266cc61..38a89393 100644 --- a/src/main/services/layouter/layouter.ts +++ b/src/main/services/layouter/layouter.ts @@ -9,7 +9,7 @@ import { UMLContainerRepository } from '../uml-container/uml-container-repositor import { UMLDiagramRepository } from '../uml-diagram/uml-diagram-repository'; import { MoveAction, MovingActionTypes } from '../uml-element/movable/moving-types'; import { ResizeAction, ResizingActionTypes } from '../uml-element/resizable/resizing-types'; -import { ResizeFrom, UMLElement } from '../uml-element/uml-element'; +import { UMLElement } from '../uml-element/uml-element'; import { UMLElementRepository } from '../uml-element/uml-element-repository'; import { UpdateAction } from '../uml-element/uml-element-types'; import { UMLRelationship } from '../uml-relationship/uml-relationship'; diff --git a/src/main/typings.ts b/src/main/typings.ts index 97e08226..1c199f96 100644 --- a/src/main/typings.ts +++ b/src/main/typings.ts @@ -9,7 +9,9 @@ import { Direction } from './services/uml-element/uml-element-port'; import { IBoundary } from './utils/geometry/boundary'; import { IPath } from './utils/geometry/path'; import { BPMNGatewayType } from './packages/bpmn/bpmn-gateway/bpmn-gateway'; -import { BPMNConversationType } from './packages/bpmn/bpmn-conversation/bpmn-conversation'; +import { BPMNEndEventType } from './packages/bpmn/bpmn-end-event/bpmn-end-event'; +import { BPMNStartEventType } from './packages/bpmn/bpmn-start-event/bpmn-start-event'; +import { BPMNIntermediateEventType } from './packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; export { UMLDiagramType, UMLElementType, UMLRelationshipType, ApollonMode, Locale }; export type { Styles }; @@ -94,8 +96,16 @@ export type BPMNGateway = UMLElement & { gatewayType: BPMNGatewayType; }; -export type BPMNConversation = UMLElement & { - conversationType: BPMNConversationType; +export type BPMNStartEvent = UMLElement & { + eventType: BPMNStartEventType; +}; + +export type BPMNIntermediateEvent = UMLElement & { + eventType: BPMNIntermediateEventType; +}; + +export type BPMNEndEvent = UMLElement & { + eventType: BPMNEndEventType; }; export type BPMNFlow = UMLRelationship & { diff --git a/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap deleted file mode 100644 index cfc3bbfe..00000000 --- a/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`render the bpmn-conversation-component 1`] = ` - -
- - - - - - Conversation - - - - -
- -`; diff --git a/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx deleted file mode 100644 index 4bbca09e..00000000 --- a/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { wrappedRender } from '../../../test-utils/render'; -import * as React from 'react'; -import { BPMNConversationComponent } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation-component'; -import { BPMNConversation } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation'; - -it('render the bpmn-conversation-component', () => { - const conversation: BPMNConversation = new BPMNConversation({ name: 'Conversation' }); - const { getByText, baseElement } = wrappedRender( - - - , - ); - expect(getByText(conversation.name)).toBeInTheDocument(); - expect(baseElement).toMatchSnapshot(); -});