Skip to content

Commit

Permalink
allow selecting BPMN event types
Browse files Browse the repository at this point in the history
  • Loading branch information
matthiaslehnertum committed Nov 19, 2023
1 parent 3eb936f commit a5cddf3
Show file tree
Hide file tree
Showing 40 changed files with 688 additions and 263 deletions.
27 changes: 23 additions & 4 deletions src/main/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
27 changes: 23 additions & 4 deletions src/main/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

This file was deleted.

48 changes: 0 additions & 48 deletions src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts

This file was deleted.

43 changes: 41 additions & 2 deletions src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 a 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
Expand All @@ -48,6 +83,10 @@ export const BPMNEndEventC: FunctionComponent<Props> = ({ element, interactive,
>
{element.name}
</Multiline>
{renderIconForType(element.eventType, {
x: element.bounds.width / 2 - 10,
y: element.bounds.height / 2 - 10,
})}
</g>
);
};
Expand Down
104 changes: 104 additions & 0 deletions src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-update.tsx
Original file line number Diff line number Diff line change
@@ -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);
24 changes: 23 additions & 1 deletion src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<UMLContainer>) {
constructor(values?: DeepPartial<BPMNEndEvent>) {
super(values);
assign<UMLContainer>(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<T extends Apollon.UMLModelElement>(
values: T & { eventType?: BPMNEndEventType },
children?: Apollon.UMLModelElement[],
): void {
super.deserialize(values, children);
this.eventType = values.eventType || BPMNEndEvent.defaultEventType;
}

render(canvas: ILayer): ILayoutable[] {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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> = (props) => {
let GatewayComponent = BPMNExclusiveGatewayComponent;
Expand All @@ -26,9 +25,6 @@ export const BPMNGatewayComponent: FunctionComponent<Props> = (props) => {
case 'parallel':
GatewayComponent = BPMNParallelGatewayComponent;
break;
case 'parallel-event-based':
GatewayComponent = BPMNParallelEventBasedGatewayComponent;
break;
}

return (
Expand Down
Loading

0 comments on commit a5cddf3

Please sign in to comment.