Add initial bpmn diagram implementation

matthiaslehnertum commented 11 months ago

This PR intends to extend Apollon by the basic support for BPMN diagrams.

Checklist

[x] I documented the TypeScript code using JSDoc style.
[x] I added multiple screenshots/screencasts of my UI changes
[x] I translated all the newly inserted strings into German and English

Motivation and Context

BPMN diagrams should be added as another support diagram type.

Description

This change extends Apollon with basic support for BPMN diagrams. This includes support for the following element types:

start event
intermediate event
end event
task
subprocess
transaction
call activity
annotation
gateways
- complex
- event-based
- exclusive
- exclusive event-based
- inclusive
- parallel
- parallel event-based
conversations
- default
- call

Steps for Testing

Launch Apollon
Select "BPMN" as diagram type
Place BPMN elements onto the canvas

Test Coverage

File	Statements	Branch	Funcs	Line
main/packages/bpmn	29.72	100	0	29.72
bpmn-diagram-preview.ts	16.12	100	0	16.12
index.ts	100	100	100	100
main/packages/bpmn/bpmn-annotation	94.91	100	66.66	94.91
bpmn-annotation-component.tsx	100	100	100	100
bpmn-annotation.ts	83.33	100	50	83.33
main/packages/bpmn/bpmn-call-activity	94	100	66.66	94
bpmn-call-activity-component.tsx	100	100	100	100
bpmn-call-activity.ts	80	100	50	80
main/packages/bpmn/bpmn-conversation	64.2	66.66	28.57	64.2
bpmn-conversation-component.tsx	100	50	100	100
bpmn-conversation-update.tsx	47.87	100	0	47.87
bpmn-conversation.ts	70.21	100	25	70.21
main/packages/bpmn/bpmn-end-event	97.56	60	66.66	97.56
bpmn-end-event-component.tsx	100	50	100	100
bpmn-end-event.ts	92.59	100	50	92.59
main/packages/bpmn/bpmn-flow	66.53	50	42.85	66.53
bpmn-flow-component.tsx	92.22	50	100	92.22
bpmn-flow-update.tsx	45.21	100	0	45.21
bpmn-flow.ts	70	50	33.33	70
main/packages/bpmn/bpmn-gateway	56.39	25	28.57	56.39
bpmn-gateway-component.tsx	74.46	14.28	100	74.46
bpmn-gateway-update.tsx	40	100	0	40
bpmn-gateway.ts	74.07	100	25	74.07
main/packages/bpmn/bpmn-gateway/gateways-components	26.31	100	14.28	26.31
bpmn-complex-gateway-component.tsx	14.58	100	0	14.58
bpmn-event-based-gateway-component.tsx	12.96	100	0	12.96
bpmn-exclusive-event-based-gateway-component.tsx	14.58	100	0	14.58
bpmn-exclusive-gateway-component.tsx	100	100	100	100
bpmn-inclusive-gateway-component.tsx	20.58	100	0	20.58
bpmn-parallel-event-based-gateway-component.tsx	15.9	100	0	15.9
bpmn-parallel-gateway-component.tsx	18.42	100	0	18.42
main/packages/bpmn/bpmn-intermediate-event	97.67	42.85	66.66	97.67
bpmn-intermediate-event-component.tsx	100	33.33	100	100
bpmn-intermediate-event.ts	92.3	100	50	92.3
main/packages/bpmn/bpmn-start-event	97.53	60	66.66	97.53
bpmn-start-event-component.tsx	100	50	100	100
bpmn-start-event.ts	92.59	100	50	92.59
main/packages/bpmn/bpmn-subprocess	94	100	66.66	94
bpmn-subprocess-component.tsx	100	100	100	100
bpmn-subprocess.ts	80	100	50	80
main/packages/bpmn/bpmn-task	93.87	100	66.66	93.87
bpmn-task-component.tsx	100	100	100	100
bpmn-task.ts	80	100	50	80
main/packages/bpmn/bpmn-transaction	94.91	100	66.66	94.91
bpmn-transaction-component.tsx	100	100	100	100
bpmn-transaction.ts	80	100	50	80

Screenshots

Example of a BPMN diagram

Example of selecting a gateway type

loreanvictor commented 10 months ago

@matthiaslehnertum can you add coverage report for the newly added files to the PR? also I suspect you need to run prettier 😅

matthiaslehnertum commented 10 months ago

@loreanvictor I updated the PR and added the test coverage - could you have another look? Stephan would like to get this one merged for version "3.0-beta-1" even if the feature is not extremely well polished so we could get this one tested. 🤔

ls1intum / Apollon