From 9ec3788c804c19d5254473d402f060987d4deee6 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Mon, 11 Sep 2023 23:47:20 +0200 Subject: [PATCH 01/14] Add initial bpmn diagram implementation --- public/index.html.ejs | 1 + .../components/create-pane/create-pane.tsx | 5 ++ src/main/i18n/de.json | 4 + src/main/i18n/en.json | 4 + .../packages/bpmn/bpmn-diagram-preview.ts | 79 +++++++++++++++++++ .../bmpn-end-event-component.tsx | 43 ++++++++++ .../bpmn/bpmn-end-event/bpmn-end-event.ts | 26 ++++++ .../bpmn-event-based-gateway-component.tsx | 27 +++++++ .../bpmn-event-based-gateway.tsx | 18 +++++ .../bpmn-exclusive-gateway-component.tsx | 30 +++++++ .../bpmn-exclusive-gateway.tsx | 18 +++++ .../bpmn-inclusive-gateway-component.tsx | 27 +++++++ .../bpmn-inclusive-gateway.tsx | 18 +++++ .../bpmn-intermediate-event-component.tsx | 48 +++++++++++ .../bpmn-intermediate-event.ts | 27 +++++++ .../bpmn-parallel-gateway-component.tsx | 31 ++++++++ .../bpmn-parallel-gateway.tsx | 15 ++++ .../bpmn-sequence-flow-component.tsx | 18 +++++ .../bpmn-squence-flow/bpmn-sequence-flow.ts | 6 ++ .../bpmn/bpmn-start-event/bmpn-start-event.ts | 27 +++++++ .../bpmn-start-event-component.tsx | 42 ++++++++++ .../bpmn-subprocess-component.tsx | 36 +++++++++ .../bpmn/bpmn-subprocess/bpmn-subprocess.ts | 15 ++++ .../bpmn/bpmn-task/bpmn-task-component.tsx | 35 ++++++++ src/main/packages/bpmn/bpmn-task/bpmn-task.ts | 15 ++++ src/main/packages/bpmn/index.ts | 17 ++++ src/main/packages/components.ts | 20 +++++ src/main/packages/diagram-type.ts | 1 + src/main/packages/popups.ts | 10 +++ src/main/packages/uml-element-type.ts | 6 +- src/main/packages/uml-elements.ts | 18 +++++ src/main/packages/uml-relationship-type.ts | 6 +- src/main/packages/uml-relationships.ts | 2 + 33 files changed, 693 insertions(+), 2 deletions(-) create mode 100644 src/main/packages/bpmn/bpmn-diagram-preview.ts create mode 100644 src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts create mode 100644 src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx create mode 100644 src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx create mode 100644 src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx create mode 100644 src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts create mode 100644 src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx create mode 100644 src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts create mode 100644 src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts create mode 100644 src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess.ts create mode 100644 src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-task/bpmn-task.ts create mode 100644 src/main/packages/bpmn/index.ts diff --git a/public/index.html.ejs b/public/index.html.ejs index 329fcb85b..66c3c5c77 100644 --- a/public/index.html.ejs +++ b/public/index.html.ejs @@ -36,6 +36,7 @@ + diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx index 823a3f435..a82a5ec8b 100644 --- a/src/main/components/create-pane/create-pane.tsx +++ b/src/main/components/create-pane/create-pane.tsx @@ -28,6 +28,7 @@ import { composeSyntaxTreePreview } from '../../packages/syntax-tree/syntax-tree import { composeFlowchartPreview } from '../../packages/flowchart/flowchart-diagram-preview'; import { ColorLegend } from '../../packages/common/color-legend/color-legend'; import { Separator } from './create-pane-styles'; +import { composeBPMNPreview } from '../../packages/bpmn/bpmn-diagram-preview'; type OwnProps = {}; type StateProps = { @@ -79,6 +80,10 @@ const getInitialState = ({ type, canvas, translate, colorEnabled, scale }: Props break; case UMLDiagramType.Flowchart: previews.push(...composeFlowchartPreview(canvas, translate, scale)); + break; + case UMLDiagramType.BPMN: + previews.push(...composeBPMNPreview(canvas, translate, scale)); + break; } if (colorEnabled) { utils.push( diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index cb7f1b77f..a184a7293 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -117,6 +117,10 @@ }, "ColorLegend": { "ColorLegend": "Farbe Beschreibung" + }, + "BPMN": { + "BPMNTask": "Task", + "BPMNSubprocess": "Sub-Prozess" } } } diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index 952e0ff3c..cb1eac03b 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -117,6 +117,10 @@ }, "ColorLegend": { "ColorLegend": "Color Description" + }, + "BPMN": { + "BPMNTask": "Task", + "BPMNSubprocess": "Subprocess" } } } diff --git a/src/main/packages/bpmn/bpmn-diagram-preview.ts b/src/main/packages/bpmn/bpmn-diagram-preview.ts new file mode 100644 index 000000000..932f93fad --- /dev/null +++ b/src/main/packages/bpmn/bpmn-diagram-preview.ts @@ -0,0 +1,79 @@ +import { ILayer } from '../../services/layouter/layer'; +import { computeDimension, IBoundary } from '../../utils/geometry/boundary'; +import { ComposePreview, PreviewElement } from '../compose-preview'; +import { BPMNTask } from './bpmn-task/bpmn-task'; +import { BPMNSubprocess } from './bpmn-subprocess/bpmn-subprocess'; +import { BPMNStartEvent } from './bpmn-start-event/bmpn-start-event'; +import { BPMNIntermediateEvent } from './bpmn-intermediate-event/bpmn-intermediate-event'; +import { BPMNEndEvent } from './bpmn-end-event/bpmn-end-event'; +import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway/bpmn-exclusive-gateway'; +import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway/bpmn-inclusive-gateway'; +import { BPMNParallelGateway } from './bpmn-parallel-gateway/bpmn-parallel-gateway'; +import { BPMNEventBasedGateway } from './bpmn-event-based-gateway/bpmn-event-based-gateway'; + +export const composeBPMNPreview: ComposePreview = ( + layer: ILayer, + translate: (id: string) => string, + scale: number, +): PreviewElement[] => { + const elements: PreviewElement[] = []; + const defaultBounds: IBoundary = { x: 0, y: 0, width: 150 * scale, height: computeDimension(scale, 70) }; + + elements.push( + new BPMNTask({ + name: translate('packages.BPMN.BPMNTask'), + bounds: defaultBounds, + }), + ); + + elements.push( + new BPMNSubprocess({ + name: translate('packages.BPMN.BPMNSubprocess'), + bounds: defaultBounds, + }), + ); + + elements.push( + new BPMNStartEvent({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNIntermediateEvent({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNEndEvent({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNExclusiveGateway({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNInclusiveGateway({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNParallelGateway({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + elements.push( + new BPMNEventBasedGateway({ + bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + }), + ); + + return elements; +}; diff --git a/src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx b/src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx new file mode 100644 index 000000000..1495523b5 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx @@ -0,0 +1,43 @@ +import React, { ComponentType, FunctionComponent } from 'react'; +import { BPMNEndEvent } 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, ThemedCircleContrast } from '../../../components/theme/themedComponents'; + +type OwnProps = { + element: BPMNEndEvent; + scale: number; +}; + +type StateProps = { interactive: boolean; interactable: boolean }; + +type DispatchProps = {}; + +type Props = OwnProps & StateProps & DispatchProps & withThemeProps; + +const enhance = compose, OwnProps>>( + withTheme, + connect((state, props) => ({ + interactive: state.interactive.includes(props.element.id), + interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight, + })), +); + +export const BPMNEndEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { + return ( + + + + ); +}; + +export const BPMNEndEventComponent = enhance(BPMNEndEventC); 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 new file mode 100644 index 000000000..ae182bed5 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts @@ -0,0 +1,26 @@ +import { DeepPartial } from 'redux'; +import { BPMNElementType, BPMNRelationshipType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { assign } from '../../../utils/fx/assign'; +import { IBoundary } from '../../../utils/geometry/boundary'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNEndEvent extends UMLElement { + static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNEndEvent; + bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + + constructor(values?: DeepPartial) { + super(values); + assign(this, values); + } + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx new file mode 100644 index 000000000..87c665be9 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx @@ -0,0 +1,27 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNEventBasedGateway } from './bpmn-event-based-gateway'; +import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( + + + + +); + +export interface Props { + element: BPMNEventBasedGateway; + scale: number; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx new file mode 100644 index 000000000..5f59dd9b8 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx @@ -0,0 +1,18 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; + +export class BPMNEventBasedGateway extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNEventBasedGateway; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx new file mode 100644 index 000000000..706b2f9c5 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx @@ -0,0 +1,30 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ element, scale }) => ( + + + + + +); + +export interface Props { + element: BPMNExclusiveGateway; + scale: number; +} diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx new file mode 100644 index 000000000..99b78d937 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx @@ -0,0 +1,18 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; + +export class BPMNExclusiveGateway extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNExclusiveGateway; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx new file mode 100644 index 000000000..c84f6ecbb --- /dev/null +++ b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx @@ -0,0 +1,27 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway'; +import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( + + + + +); + +export interface Props { + element: BPMNInclusiveGateway; + scale: number; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx new file mode 100644 index 000000000..51a98da76 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx @@ -0,0 +1,18 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; + +export class BPMNInclusiveGateway extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNInclusiveGateway; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} 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 new file mode 100644 index 000000000..e18320160 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component.tsx @@ -0,0 +1,48 @@ +import React, { ComponentType, FunctionComponent } from 'react'; +import { BPMNIntermediateEvent } from './bpmn-intermediate-event'; +import { connect, ConnectedComponent } from 'react-redux'; +import { ModelState } from '../../../components/store/model-state'; +import { compose } from 'redux'; +import { withTheme, withThemeProps } from '../../../components/theme/styles'; +import { ApollonView } from '../../../services/editor/editor-types'; +import { ThemedCircle, ThemedCircleContrast } from '../../../components/theme/themedComponents'; + +type OwnProps = { + element: BPMNIntermediateEvent; + scale: number; +}; + +type StateProps = { interactive: boolean; interactable: boolean }; + +type DispatchProps = {}; + +type Props = OwnProps & StateProps & DispatchProps & withThemeProps; + +const enhance = compose, OwnProps>>( + withTheme, + connect((state, props) => ({ + interactive: state.interactive.includes(props.element.id), + interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight, + })), +); + +const BPMNIntermediateEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { + return ( + + + + + ); +}; + +export const BPMNIntermediateEventComponent = enhance(BPMNIntermediateEventC); 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 new file mode 100644 index 000000000..037f3f429 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts @@ -0,0 +1,27 @@ +import { DeepPartial } from 'redux'; +import { BPMNElementType, BPMNRelationshipType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { assign } from '../../../utils/fx/assign'; +import { IBoundary } from '../../../utils/geometry/boundary'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNIntermediateEvent extends UMLElement { + static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNIntermediateEvent; + bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + + constructor(values?: DeepPartial) { + super(values); + assign(this, values); + } + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx new file mode 100644 index 000000000..c46d008d9 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx @@ -0,0 +1,31 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNParallelGateway } from './bpmn-parallel-gateway'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNParallelGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( + + + + + +); + +export interface Props { + element: BPMNParallelGateway; + scale: number; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx new file mode 100644 index 000000000..05bc366dc --- /dev/null +++ b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx @@ -0,0 +1,15 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNParallelGateway extends UMLElement { + type: UMLElementType = BPMNElementType.BPMNParallelGateway; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx new file mode 100644 index 000000000..091b289f4 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx @@ -0,0 +1,18 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNSequenceFlow } from './bpmn-sequence-flow'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; + +export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) => ( + + `${point.x} ${point.y}`).join(',')} + strokeColor={element.strokeColor} + fillColor="none" + strokeWidth={1} + /> + +); + +interface Props { + element: BPMNSequenceFlow; +} diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts new file mode 100644 index 000000000..166f78418 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts @@ -0,0 +1,6 @@ +import { BPMNRelationshipType } from '..'; +import { UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; + +export class BPMNSequenceFlow extends UMLRelationship { + type = BPMNRelationshipType.BPMNSequenceFlow; +} diff --git a/src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts b/src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts new file mode 100644 index 000000000..ecd590e41 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts @@ -0,0 +1,27 @@ +import { DeepPartial } from 'redux'; +import { BPMNElementType, BPMNRelationshipType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { assign } from '../../../utils/fx/assign'; +import { IBoundary } from '../../../utils/geometry/boundary'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNStartEvent extends UMLElement { + static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + + type: UMLElementType = BPMNElementType.BPMNStartEvent; + bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + + constructor(values?: DeepPartial) { + super(values); + assign(this, values); + } + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} 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 new file mode 100644 index 000000000..586bba4fc --- /dev/null +++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event-component.tsx @@ -0,0 +1,42 @@ +import React, { ComponentType, FunctionComponent } from 'react'; +import { BPMNStartEvent } from './bmpn-start-event'; +import { connect, ConnectedComponent } from 'react-redux'; +import { ModelState } from '../../../components/store/model-state'; +import { compose } from 'redux'; +import { withTheme, withThemeProps } from '../../../components/theme/styles'; +import { ApollonView } from '../../../services/editor/editor-types'; +import { ThemedCircle } from '../../../components/theme/themedComponents'; + +type OwnProps = { + element: BPMNStartEvent; + scale: number; +}; + +type StateProps = { interactive: boolean; interactable: boolean }; + +type DispatchProps = {}; + +type Props = OwnProps & StateProps & DispatchProps & withThemeProps; + +const enhance = compose, OwnProps>>( + withTheme, + connect((state, props) => ({ + interactive: state.interactive.includes(props.element.id), + interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight, + })), +); + +const BPMNStartEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { + return ( + + + + ); +}; + +export const BPMNStartEventComponent = enhance(BPMNStartEventC); diff --git a/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx new file mode 100644 index 000000000..e9c6b5972 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx @@ -0,0 +1,36 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNSubprocess } from './bpmn-subprocess'; +import { ThemedRect } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNSubprocessComponent: FunctionComponent = ({ element, scale, fillColor }) => ( + + + + {element.name} + + +); + +interface Props { + element: BPMNSubprocess; + scale: number; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess.ts b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess.ts new file mode 100644 index 000000000..9ef36f354 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess.ts @@ -0,0 +1,15 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNSubprocess extends UMLElement { + type: UMLElementType = BPMNElementType.BPMNSubprocess; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx b/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx new file mode 100644 index 000000000..dd4803e56 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx @@ -0,0 +1,35 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNTask } from './bpmn-task'; +import { ThemedRect } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNTaskComponent: FunctionComponent = ({ element, scale, fillColor }) => ( + + + + {element.name} + + +); + +interface Props { + element: BPMNTask; + scale: number; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-task/bpmn-task.ts b/src/main/packages/bpmn/bpmn-task/bpmn-task.ts new file mode 100644 index 000000000..b12311079 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-task/bpmn-task.ts @@ -0,0 +1,15 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNTask extends UMLElement { + type: UMLElementType = BPMNElementType.BPMNTask; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts new file mode 100644 index 000000000..ff297d33e --- /dev/null +++ b/src/main/packages/bpmn/index.ts @@ -0,0 +1,17 @@ +import { BPMNSequenceFlow } from './bpmn-squence-flow/bpmn-sequence-flow'; + +export const BPMNElementType = { + BPMNTask: 'BPMNTask', + BPMNSubprocess: 'BPMNSubprocess', + BPMNStartEvent: 'BPMNStartEvent', + BPMNIntermediateEvent: 'BPMNIntermediateEvent', + BPMNEndEvent: 'BPMNEndEvent', + BPMNExclusiveGateway: 'BPMNExclusiveGateway', + BPMNInclusiveGateway: 'BPMNInclusiveGateway', + BPMNParallelGateway: 'BPMNParallelGateway', + BPMNEventBasedGateway: 'BPMNEventBasedGateway', +} as const; + +export const BPMNRelationshipType = { + BPMNSequenceFlow: 'BPMNSequenceFlow', +} as const; diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 1b375d2a3..3615870b9 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -47,6 +47,16 @@ import { FlowchartDecisionComponent } from './flowchart/flowchart-decision/flowc import { FlowchartFunctionCallComponent } from './flowchart/flowchart-function-call/flowchart-function-call-component'; import { FlowchartInputOutputComponent } from './flowchart/flowchart-input-output/flowchart-input-output-component'; import { ColorLegendComponent } from './common/color-legend/color-legend-component'; +import { BPMNSequenceFlowComponent } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-component'; +import { BPMNTaskComponent } from './bpmn/bpmn-task/bpmn-task-component'; +import { BPMNSubprocessComponent } from './bpmn/bpmn-subprocess/bpmn-subprocess-component'; +import { BPMNStartEventComponent } from './bpmn/bpmn-start-event/bpmn-start-event-component'; +import { BPMNIntermediateEventComponent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component'; +import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bmpn-end-event-component'; +import { BPMNExclusiveGatewayComponent } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component'; +import { BPMNInclusiveGatewayComponent } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component'; +import { BPMNParallelGatewayComponent } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component'; +import { BPMNEventBasedGatewayComponent } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component'; export const Components: { [key in UMLElementType | UMLRelationshipType]: @@ -92,6 +102,15 @@ export const Components: { [UMLElementType.FlowchartInputOutput]: FlowchartInputOutputComponent, [UMLElementType.FlowchartFunctionCall]: FlowchartFunctionCallComponent, [UMLElementType.ColorLegend]: ColorLegendComponent, + [UMLElementType.BPMNTask]: BPMNTaskComponent, + [UMLElementType.BPMNSubprocess]: BPMNSubprocessComponent, + [UMLElementType.BPMNStartEvent]: BPMNStartEventComponent, + [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventComponent, + [UMLElementType.BPMNEndEvent]: BPMNEndEventComponent, + [UMLElementType.BPMNExclusiveGateway]: BPMNExclusiveGatewayComponent, + [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGatewayComponent, + [UMLElementType.BPMNParallelGateway]: BPMNParallelGatewayComponent, + [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGatewayComponent, [UMLRelationshipType.ClassAggregation]: UMLAssociationComponent, [UMLRelationshipType.ClassBidirectional]: UMLAssociationComponent, [UMLRelationshipType.ClassComposition]: UMLAssociationComponent, @@ -117,4 +136,5 @@ export const Components: { [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcComponent, [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLinkComponent, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineComponent, + [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowComponent, }; diff --git a/src/main/packages/diagram-type.ts b/src/main/packages/diagram-type.ts index af1e54a17..6b6630838 100644 --- a/src/main/packages/diagram-type.ts +++ b/src/main/packages/diagram-type.ts @@ -12,4 +12,5 @@ export const UMLDiagramType = { ReachabilityGraph: 'ReachabilityGraph', SyntaxTree: 'SyntaxTree', Flowchart: 'Flowchart', + BPMN: 'BPMN', } as const; diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index c28035a2d..9d00edbff 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -69,6 +69,15 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.FlowchartFunctionCall]: FlowchartFunctionCallUpdate, [UMLElementType.FlowchartInputOutput]: FlowchartInputOutputUpdate, [UMLElementType.ColorLegend]: ColorLegendUpdate, + [UMLElementType.BPMNTask]: DefaultPopup, + [UMLElementType.BPMNSubprocess]: DefaultPopup, + [UMLElementType.BPMNStartEvent]: DefaultPopup, + [UMLElementType.BPMNIntermediateEvent]: DefaultPopup, + [UMLElementType.BPMNEndEvent]: DefaultPopup, + [UMLElementType.BPMNExclusiveGateway]: DefaultPopup, + [UMLElementType.BPMNInclusiveGateway]: DefaultPopup, + [UMLElementType.BPMNParallelGateway]: DefaultPopup, + [UMLElementType.BPMNEventBasedGateway]: DefaultPopup, // Relationships [UMLRelationshipType.ClassAggregation]: UMLClassAssociationUpdate, [UMLRelationshipType.ClassBidirectional]: UMLClassAssociationUpdate, @@ -95,4 +104,5 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcUpdate, [UMLRelationshipType.SyntaxTreeLink]: DefaultRelationshipPopup, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineUpdate, + [UMLRelationshipType.BPMNSequenceFlow]: DefaultRelationshipPopup, }; diff --git a/src/main/packages/uml-element-type.ts b/src/main/packages/uml-element-type.ts index a8a6d4524..8d1c783ed 100644 --- a/src/main/packages/uml-element-type.ts +++ b/src/main/packages/uml-element-type.ts @@ -11,6 +11,7 @@ import { SyntaxTreeElementType } from './syntax-tree'; import { FlowchartElementType } from './flowchart'; import { ColorLegendElementType } from './common/color-legend'; import { ReachabilityGraphElementType } from './uml-reachability-graph'; +import { BPMNElementType } from './bpmn'; export type UMLElementType = | keyof typeof ClassElementType @@ -24,7 +25,8 @@ export type UMLElementType = | keyof typeof ReachabilityGraphElementType | keyof typeof SyntaxTreeElementType | keyof typeof FlowchartElementType - | keyof typeof ColorLegendElementType; + | keyof typeof ColorLegendElementType + | keyof typeof BPMNElementType; export const UMLElementType = { ...ClassElementType, @@ -39,6 +41,7 @@ export const UMLElementType = { ...SyntaxTreeElementType, ...FlowchartElementType, ...ColorLegendElementType, + ...BPMNElementType, }; export const UMLElementsForDiagram: { [key in UMLDiagramType]: any } = { @@ -54,6 +57,7 @@ export const UMLElementsForDiagram: { [key in UMLDiagramType]: any } = { [UMLDiagramType.ReachabilityGraph]: ReachabilityGraphElementType, [UMLDiagramType.SyntaxTree]: SyntaxTreeElementType, [UMLDiagramType.Flowchart]: FlowchartElementType, + [UMLDiagramType.BPMN]: BPMNElementType, }, ...ColorLegendElementType, }; diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index e338649b4..f9d7ed3ba 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -38,6 +38,15 @@ import { FlowchartDecision } from './flowchart/flowchart-decision/flowchart-deci import { FlowchartProcess } from './flowchart/flowchart-process/flowchart-process'; import { FlowchartInputOutput } from './flowchart/flowchart-input-output/flowchart-input-output'; import { ColorLegend } from './common/color-legend/color-legend'; +import { BPMNTask } from './bpmn/bpmn-task/bpmn-task'; +import { BPMNSubprocess } from './bpmn/bpmn-subprocess/bpmn-subprocess'; +import { BPMNStartEvent } from './bpmn/bpmn-start-event/bmpn-start-event'; +import { BPMNIntermediateEvent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; +import { BPMNEndEvent } from './bpmn/bpmn-end-event/bpmn-end-event'; +import { BPMNExclusiveGateway } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway'; +import { BPMNInclusiveGateway } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway'; +import { BPMNParallelGateway } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway'; +import { BPMNEventBasedGateway } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway'; export const UMLElements = { [UMLElementType.Package]: UMLClassPackage, @@ -79,4 +88,13 @@ export const UMLElements = { [UMLElementType.FlowchartDecision]: FlowchartDecision, [UMLElementType.FlowchartInputOutput]: FlowchartInputOutput, [UMLElementType.ColorLegend]: ColorLegend, + [UMLElementType.BPMNTask]: BPMNTask, + [UMLElementType.BPMNSubprocess]: BPMNSubprocess, + [UMLElementType.BPMNStartEvent]: BPMNStartEvent, + [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEvent, + [UMLElementType.BPMNEndEvent]: BPMNEndEvent, + [UMLElementType.BPMNExclusiveGateway]: BPMNExclusiveGateway, + [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGateway, + [UMLElementType.BPMNParallelGateway]: BPMNParallelGateway, + [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGateway, }; diff --git a/src/main/packages/uml-relationship-type.ts b/src/main/packages/uml-relationship-type.ts index 2fb4b0711..f3ec5ece7 100644 --- a/src/main/packages/uml-relationship-type.ts +++ b/src/main/packages/uml-relationship-type.ts @@ -10,6 +10,7 @@ import { PetriNetRelationshipType } from './uml-petri-net'; import { ReachabilityGraphRelationshipType } from './uml-reachability-graph'; import { SyntaxTreeRelationshipType } from './syntax-tree'; import { FlowchartRelationshipType } from './flowchart'; +import { BPMNRelationshipType } from './bpmn'; export type UMLRelationshipType = | keyof typeof ClassRelationshipType @@ -22,7 +23,8 @@ export type UMLRelationshipType = | keyof typeof PetriNetRelationshipType | keyof typeof ReachabilityGraphRelationshipType | keyof typeof SyntaxTreeRelationshipType - | keyof typeof FlowchartRelationshipType; + | keyof typeof FlowchartRelationshipType + | keyof typeof BPMNRelationshipType; export const UMLRelationshipType = { ...ClassRelationshipType, @@ -36,6 +38,7 @@ export const UMLRelationshipType = { ...ReachabilityGraphRelationshipType, ...SyntaxTreeRelationshipType, ...FlowchartRelationshipType, + ...BPMNRelationshipType, }; export const DefaultUMLRelationshipType: { [key in UMLDiagramType]: UMLRelationshipType } = { @@ -50,4 +53,5 @@ export const DefaultUMLRelationshipType: { [key in UMLDiagramType]: UMLRelations [UMLDiagramType.ReachabilityGraph]: ReachabilityGraphRelationshipType.ReachabilityGraphArc, [UMLDiagramType.SyntaxTree]: SyntaxTreeRelationshipType.SyntaxTreeLink, [UMLDiagramType.Flowchart]: FlowchartRelationshipType.FlowchartFlowline, + [UMLDiagramType.BPMN]: BPMNRelationshipType.BPMNSequenceFlow, }; diff --git a/src/main/packages/uml-relationships.ts b/src/main/packages/uml-relationships.ts index bd729d7c4..71e1edf85 100644 --- a/src/main/packages/uml-relationships.ts +++ b/src/main/packages/uml-relationships.ts @@ -25,6 +25,7 @@ import { UMLPetriNetArc } from './uml-petri-net/uml-petri-net-arc/uml-petri-net- import { UMLReachabilityGraphArc } from './uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc'; import { SyntaxTreeLink } from './syntax-tree/syntax-tree-link/syntax-tree-link'; import { FlowchartFlowline } from './flowchart/flowchart-flowline/flowchart-flowline'; +import { BPMNSequenceFlow } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow'; type UMLRelationships = { [key in UMLRelationshipType]: new (values?: IUMLRelationship) => UMLRelationship }; @@ -54,4 +55,5 @@ export const UMLRelationships = { [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArc, [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLink, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowline, + [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlow, }; From 4985c696f2839e4fc88a5fd216743cdca819afc7 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Mon, 25 Sep 2023 23:04:11 +0200 Subject: [PATCH 02/14] Add remaining bpmn base elements --- src/main/i18n/de.json | 11 ++- src/main/i18n/en.json | 11 ++- .../bpmn-call-activity.ts} | 4 +- .../bpmn-transaction-component.tsx | 35 +++++++ .../packages/bpmn/bpmn-diagram-preview.ts | 42 ++++++-- ...onent.tsx => bpmn-end-event-component.tsx} | 21 +++- .../bpmn/bpmn-end-event/bpmn-end-event.ts | 5 +- .../bpmn-event-based-gateway-component.tsx | 21 +++- ...ateway.tsx => bpmn-event-based-gateway.ts} | 5 +- .../bpmn-exclusive-gateway-component.tsx | 19 +++- ...-gateway.tsx => bpmn-exclusive-gateway.ts} | 5 +- .../bpmn-inclusive-gateway-component.tsx | 21 +++- ...-gateway.tsx => bpmn-inclusive-gateway.ts} | 5 +- .../bpmn-intermediate-event-component.tsx | 19 +++- .../bpmn-intermediate-event.ts | 5 +- .../bpmn-parallel-gateway-component.tsx | 15 ++- .../bpmn-parallel-gateway.ts | 19 ++++ .../bpmn-sequence-flow-component.tsx | 80 +++++++++++++--- .../bpmn-sequence-flow-update.tsx | 95 +++++++++++++++++++ .../bpmn-squence-flow/bpmn-sequence-flow.ts | 15 ++- .../bpmn-start-event-component.tsx | 19 +++- ...mpn-start-event.ts => bpmn-start-event.ts} | 6 +- .../bpmn-subprocess-component.tsx | 11 +-- .../bpmn/bpmn-task/bpmn-task-component.tsx | 11 +-- .../bpmn-transaction-component.tsx | 44 +++++++++ .../bpmn/bpmn-transaction/bpmn-transaction.ts | 15 +++ src/main/packages/bpmn/index.ts | 2 + src/main/packages/components.ts | 6 +- src/main/packages/popups.ts | 5 +- src/main/packages/uml-elements.ts | 6 +- 30 files changed, 493 insertions(+), 85 deletions(-) rename src/main/packages/bpmn/{bpmn-parallel-gateway/bpmn-parallel-gateway.tsx => bpmn-call-activity/bpmn-call-activity.ts} (80%) create mode 100644 src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx rename src/main/packages/bpmn/bpmn-end-event/{bmpn-end-event-component.tsx => bpmn-end-event-component.tsx} (72%) rename src/main/packages/bpmn/bpmn-event-based-gateway/{bpmn-event-based-gateway.tsx => bpmn-event-based-gateway.ts} (82%) rename src/main/packages/bpmn/bpmn-exclusive-gateway/{bpmn-exclusive-gateway.tsx => bpmn-exclusive-gateway.ts} (82%) rename src/main/packages/bpmn/bpmn-inclusive-gateway/{bpmn-inclusive-gateway.tsx => bpmn-inclusive-gateway.ts} (82%) create mode 100644 src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts create mode 100644 src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx rename src/main/packages/bpmn/bpmn-start-event/{bmpn-start-event.ts => bpmn-start-event.ts} (90%) create mode 100644 src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-transaction/bpmn-transaction.ts diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index a184a7293..38f030247 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -120,7 +120,16 @@ }, "BPMN": { "BPMNTask": "Task", - "BPMNSubprocess": "Sub-Prozess" + "BPMNSubprocess": "Sub-Prozess", + "BPMNTransaction": "Transaktion", + "BPMNCallActivity": "Aufruf-Aktivität", + "BPMNStartEvent": "Start-Event", + "BPMNIntermediateEvent": "Zwischen-Event", + "BPMNEndEvent": "End-Event", + "BPMNEventBasedGateway": "Ereignis-basierter Gateway", + "BPMNInclusiveGateway": "Inklusiver Gateway", + "BPMNExclusiveGateway": "Exklusiver Gateway", + "BPMNParallelGateway": "Paralleler Gateway" } } } diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index cb1eac03b..53df2f0a6 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -120,7 +120,16 @@ }, "BPMN": { "BPMNTask": "Task", - "BPMNSubprocess": "Subprocess" + "BPMNSubprocess": "Subprocess", + "BPMNTransaction": "Transaction", + "BPMNCallActivity": "Call Activity", + "BPMNStartEvent": "Start Event", + "BPMNIntermediateEvent": "Intermediate Event", + "BPMNEndEvent": "End Event", + "BPMNEventBasedGateway": "Event-based Gateway", + "BPMNInclusiveGateway": "Inclusive Gateway", + "BPMNExclusiveGateway": "Exclusive Gateway", + "BPMNParallelGateway": "Parallel Gateway" } } } diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx b/src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity.ts similarity index 80% rename from src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx rename to src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity.ts index 05bc366dc..9437227a8 100644 --- a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.tsx +++ b/src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity.ts @@ -5,8 +5,8 @@ import { UMLElement } from '../../../services/uml-element/uml-element'; import { calculateNameBounds } from '../../../utils/name-bounds'; import { UMLElementType } from '../../uml-element-type'; -export class BPMNParallelGateway extends UMLElement { - type: UMLElementType = BPMNElementType.BPMNParallelGateway; +export class BPMNCallActivity extends UMLElement { + type: UMLElementType = BPMNElementType.BPMNCallActivity; render(canvas: ILayer): ILayoutable[] { this.bounds = calculateNameBounds(this, canvas); diff --git a/src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx b/src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx new file mode 100644 index 000000000..8fc2df170 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx @@ -0,0 +1,35 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNCallActivity } from './bpmn-call-activity'; +import { ThemedRect } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNCallActivityComponent: FunctionComponent = ({ element, fillColor }) => ( + + + + {element.name} + + +); + +interface Props { + element: BPMNCallActivity; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-diagram-preview.ts b/src/main/packages/bpmn/bpmn-diagram-preview.ts index 932f93fad..cb726cb9e 100644 --- a/src/main/packages/bpmn/bpmn-diagram-preview.ts +++ b/src/main/packages/bpmn/bpmn-diagram-preview.ts @@ -3,21 +3,22 @@ import { computeDimension, IBoundary } from '../../utils/geometry/boundary'; import { ComposePreview, PreviewElement } from '../compose-preview'; import { BPMNTask } from './bpmn-task/bpmn-task'; import { BPMNSubprocess } from './bpmn-subprocess/bpmn-subprocess'; -import { BPMNStartEvent } from './bpmn-start-event/bmpn-start-event'; +import { BPMNStartEvent } from './bpmn-start-event/bpmn-start-event'; import { BPMNIntermediateEvent } from './bpmn-intermediate-event/bpmn-intermediate-event'; import { BPMNEndEvent } from './bpmn-end-event/bpmn-end-event'; import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway/bpmn-exclusive-gateway'; import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway/bpmn-inclusive-gateway'; import { BPMNParallelGateway } from './bpmn-parallel-gateway/bpmn-parallel-gateway'; import { BPMNEventBasedGateway } from './bpmn-event-based-gateway/bpmn-event-based-gateway'; +import { BPMNTransaction } from './bpmn-transaction/bpmn-transaction'; +import { BPMNCallActivity } from './bpmn-call-activity/bpmn-call-activity'; export const composeBPMNPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): PreviewElement[] => { const elements: PreviewElement[] = []; - const defaultBounds: IBoundary = { x: 0, y: 0, width: 150 * scale, height: computeDimension(scale, 70) }; + const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: computeDimension(1.0, 60) }; elements.push( new BPMNTask({ @@ -33,45 +34,66 @@ export const composeBPMNPreview: ComposePreview = ( }), ); + elements.push( + new BPMNTransaction({ + name: translate('packages.BPMN.BPMNTransaction'), + bounds: defaultBounds, + }), + ); + + elements.push( + new BPMNCallActivity({ + name: translate('packages.BPMN.BPMNCallActivity'), + bounds: defaultBounds, + }), + ); + elements.push( new BPMNStartEvent({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNStartEvent'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNIntermediateEvent({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNIntermediateEvent'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNEndEvent({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNEndEvent'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNExclusiveGateway({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNExclusiveGateway'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNInclusiveGateway({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNInclusiveGateway'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNParallelGateway({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNParallelGateway'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( new BPMNEventBasedGateway({ - bounds: { x: 0, y: 0, width: 45 * scale, height: 45 * scale }, + name: translate('packages.BPMN.BPMNEventBasedGateway'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); diff --git a/src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx similarity index 72% rename from src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx rename to src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx index 1495523b5..08640bb4f 100644 --- a/src/main/packages/bpmn/bpmn-end-event/bmpn-end-event-component.tsx +++ b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event-component.tsx @@ -5,11 +5,11 @@ 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, ThemedCircleContrast } from '../../../components/theme/themedComponents'; +import { ThemedCircle } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; type OwnProps = { element: BPMNEndEvent; - scale: number; }; type StateProps = { interactive: boolean; interactable: boolean }; @@ -26,16 +26,27 @@ const enhance = compose, OwnProps>>( })), ); -export const BPMNEndEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { +export const BPMNEndEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { return ( + + {element.name} + ); }; 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 ae182bed5..028b99de0 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 @@ -10,10 +10,11 @@ import { UMLElementType } from '../../uml-element-type'; export class BPMNEndEvent extends UMLElement { static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNEndEvent; - bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + name = 'End Event'; constructor(values?: DeepPartial) { super(values); diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx index 87c665be9..b5bfd7f5d 100644 --- a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx @@ -1,8 +1,9 @@ import React, { FunctionComponent } from 'react'; import { BPMNEventBasedGateway } from './bpmn-event-based-gateway'; import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ eleme fillColor={fillColor || element.fillColor} /> + + {element.name} + ); export interface Props { element: BPMNEventBasedGateway; - scale: number; fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts similarity index 82% rename from src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx rename to src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts index 5f59dd9b8..118af45dc 100644 --- a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.tsx +++ b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts @@ -5,14 +5,15 @@ import { UMLElement } from '../../../services/uml-element/uml-element'; import { calculateNameBounds } from '../../../utils/name-bounds'; import { UMLElementType } from '../../uml-element-type'; import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { IBoundary } from '../../../utils/geometry/boundary'; export class BPMNEventBasedGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNEventBasedGateway; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; render(canvas: ILayer): ILayoutable[] { - this.bounds = calculateNameBounds(this, canvas); return [this]; } } diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx index 706b2f9c5..5bd3e9237 100644 --- a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx @@ -1,8 +1,9 @@ import React, { FunctionComponent } from 'react'; import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway'; import { ThemedPolyline } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ element, scale }) => ( +export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ element }) => ( = ({ elemen fillColor={element.fillColor} /> + + {element.name} + ); export interface Props { element: BPMNExclusiveGateway; - scale: number; } diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts similarity index 82% rename from src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx rename to src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts index 99b78d937..56e0b8221 100644 --- a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.tsx +++ b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts @@ -5,14 +5,15 @@ import { UMLElement } from '../../../services/uml-element/uml-element'; import { calculateNameBounds } from '../../../utils/name-bounds'; import { UMLElementType } from '../../uml-element-type'; import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { IBoundary } from '../../../utils/geometry/boundary'; export class BPMNExclusiveGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNExclusiveGateway; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; render(canvas: ILayer): ILayoutable[] { - this.bounds = calculateNameBounds(this, canvas); return [this]; } } diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx index c84f6ecbb..adea27ebb 100644 --- a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx @@ -1,8 +1,9 @@ import React, { FunctionComponent } from 'react'; import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway'; import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ elemen fillColor={fillColor || element.fillColor} /> + + {element.name} + ); export interface Props { element: BPMNInclusiveGateway; - scale: number; fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts similarity index 82% rename from src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx rename to src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts index 51a98da76..ce5a7d069 100644 --- a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.tsx +++ b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts @@ -5,14 +5,15 @@ import { UMLElement } from '../../../services/uml-element/uml-element'; import { calculateNameBounds } from '../../../utils/name-bounds'; import { UMLElementType } from '../../uml-element-type'; import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { IBoundary } from '../../../utils/geometry/boundary'; export class BPMNInclusiveGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNInclusiveGateway; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; render(canvas: ILayer): ILayoutable[] { - this.bounds = calculateNameBounds(this, canvas); return [this]; } } 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 e18320160..faa2cb989 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 @@ -6,10 +6,10 @@ import { compose } from 'redux'; import { withTheme, withThemeProps } from '../../../components/theme/styles'; import { ApollonView } from '../../../services/editor/editor-types'; import { ThemedCircle, ThemedCircleContrast } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; type OwnProps = { element: BPMNIntermediateEvent; - scale: number; }; type StateProps = { interactive: boolean; interactable: boolean }; @@ -26,21 +26,32 @@ const enhance = compose, OwnProps>>( })), ); -const BPMNIntermediateEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { +const BPMNIntermediateEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { return ( + + {element.name} + ); }; 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 037f3f429..4bfd10973 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 @@ -10,11 +10,10 @@ import { UMLElementType } from '../../uml-element-type'; export class BPMNIntermediateEvent extends UMLElement { static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; - - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNIntermediateEvent; - bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; constructor(values?: DeepPartial) { super(values); diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx index c46d008d9..e186d63d8 100644 --- a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx @@ -1,8 +1,9 @@ import React, { FunctionComponent } from 'react'; import { BPMNParallelGateway } from './bpmn-parallel-gateway'; import { ThemedPolyline } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNParallelGatewayComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const BPMNParallelGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ element strokeColor={element.strokeColor} fillColor={element.fillColor} /> + + {element.name} + ); export interface Props { element: BPMNParallelGateway; - scale: number; fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts new file mode 100644 index 000000000..c9691c83d --- /dev/null +++ b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts @@ -0,0 +1,19 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; +import { IBoundary } from '../../../utils/geometry/boundary'; + +export class BPMNParallelGateway extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; + + type: UMLElementType = BPMNElementType.BPMNParallelGateway; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx index 091b289f4..875c028b4 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx @@ -1,17 +1,75 @@ import React, { FunctionComponent } from 'react'; +import { Point } from '../../../utils/geometry/point'; import { BPMNSequenceFlow } from './bpmn-sequence-flow'; -import { ThemedPolyline } from '../../../components/theme/themedComponents'; +import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; -export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) => ( - - `${point.x} ${point.y}`).join(',')} - strokeColor={element.strokeColor} - fillColor="none" - strokeWidth={1} - /> - -); +export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) => { + let position = { x: 0, y: 0 }; + let direction: 'vertical' | 'horizontal' = 'vertical'; + const path = element.path.map((point) => new Point(point.x, point.y)); + let distance = + path.reduce( + (length, point, i, points) => (i + 1 < points.length ? length + points[i + 1].subtract(point).length : length), + 0, + ) / 2; + + for (let index = 0; index < path.length - 1; index++) { + const vector = path[index + 1].subtract(path[index]); + if (vector.length > distance) { + const normalized = vector.normalize(); + direction = Math.abs(normalized.x) > Math.abs(normalized.y) ? 'horizontal' : 'vertical'; + position = path[index].add(normalized.scale(distance)); + break; + } + distance -= vector.length; + } + + const layoutText = (dir: 'vertical' | 'horizontal') => { + switch (dir) { + case 'vertical': + return { + dx: 5, + dominantBaseline: 'middle', + textAnchor: 'start', + }; + case 'horizontal': + return { + dy: -5, + dominantBaseline: 'text-after-edge', + textAnchor: 'middle', + }; + } + }; + + const textColor = element.textColor ? { fill: element.textColor } : {}; + + return ( + + + + + `${point.x} ${point.y}`).join(',')} + strokeColor={element.strokeColor} + fillColor="none" + strokeWidth={1} + markerEnd={`url(#marker-${element.id})`} + /> + + {element.name} + + + ); +}; interface Props { element: BPMNSequenceFlow; diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx new file mode 100644 index 000000000..59a828807 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx @@ -0,0 +1,95 @@ +import React, { Component, ComponentClass } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { Button } from '../../../components/controls/button/button'; +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 { ExchangeIcon } from '../../../components/controls/icon/exchange'; +import { UMLRelationshipRepository } from '../../../services/uml-relationship/uml-relationship-repository'; +import { BPMNSequenceFlow } from './bpmn-sequence-flow'; +import { ColorButton } from '../../../components/controls/color-button/color-button'; +import { StylePane } from '../../../components/style-pane/style-pane'; + +interface OwnProps { + element: BPMNSequenceFlow; +} + +type StateProps = {}; + +interface DispatchProps { + update: typeof UMLElementRepository.update; + delete: typeof UMLElementRepository.delete; + flip: typeof UMLRelationshipRepository.flip; +} + +type Props = OwnProps & StateProps & DispatchProps & I18nContext; + +const enhance = compose>( + localized, + connect(null, { + update: UMLElementRepository.update, + delete: UMLElementRepository.delete, + flip: UMLRelationshipRepository.flip, + }), +); + +const Flex = styled.div` + display: flex; + align-items: baseline; + justify-content: space-between; +`; + +type State = { colorOpen: boolean }; + +class BPMNSequenceFlowUpdateComponent extends Component { + state = { colorOpen: false }; + + private toggleColor = () => { + this.setState((state) => ({ + colorOpen: !state.colorOpen, + })); + }; + + render() { + const { element } = this.props; + + return ( +
+
+ + + + + + +
+ +
+ ); + } + + private rename = (id: string) => (value: string) => { + this.props.update(id, { name: value }); + }; + + private delete = (id: string) => () => { + this.props.delete(id); + }; +} + +export const BPMNSequenceFlowUpdate = enhance(BPMNSequenceFlowUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts index 166f78418..e5c828059 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts @@ -1,6 +1,17 @@ import { BPMNRelationshipType } from '..'; -import { UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; +import { IUMLRelationship, UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; +import { ReachabilityGraphRelationshipType } from '../../uml-reachability-graph'; +import { DeepPartial } from 'redux'; +import { UMLRelationshipCenteredDescription } from '../../../services/uml-relationship/uml-relationship-centered-description'; + +export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription { + static features = { ...UMLRelationship.features }; -export class BPMNSequenceFlow extends UMLRelationship { type = BPMNRelationshipType.BPMNSequenceFlow; + name = ''; + + constructor(values?: DeepPartial) { + super(values); + this.name = (values && values.name) || this.name; + } } 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 586bba4fc..5e564d3db 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,15 +1,15 @@ import React, { ComponentType, FunctionComponent } from 'react'; -import { BPMNStartEvent } from './bmpn-start-event'; +import { BPMNStartEvent } from './bpmn-start-event'; import { connect, ConnectedComponent } from 'react-redux'; import { ModelState } from '../../../components/store/model-state'; import { compose } from 'redux'; 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'; type OwnProps = { element: BPMNStartEvent; - scale: number; }; type StateProps = { interactive: boolean; interactable: boolean }; @@ -26,15 +26,26 @@ const enhance = compose, OwnProps>>( })), ); -const BPMNStartEventC: FunctionComponent = ({ element, interactive, interactable, theme, scale }) => { +const BPMNStartEventC: FunctionComponent = ({ element, interactive, interactable, theme }) => { return ( + + {element.name} + ); }; diff --git a/src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts similarity index 90% rename from src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts rename to src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts index ecd590e41..0ba007d4c 100644 --- a/src/main/packages/bpmn/bpmn-start-event/bmpn-start-event.ts +++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts @@ -10,11 +10,11 @@ import { UMLElementType } from '../../uml-element-type'; export class BPMNStartEvent extends UMLElement { static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; - - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false, updatable: false }; + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNStartEvent; - bounds: IBoundary = { ...this.bounds, width: 45, height: 45 }; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + name = 'Start Event'; constructor(values?: DeepPartial) { super(values); diff --git a/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx index e9c6b5972..40e7bf83a 100644 --- a/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx +++ b/src/main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component.tsx @@ -3,11 +3,11 @@ import { BPMNSubprocess } from './bpmn-subprocess'; import { ThemedRect } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNSubprocessComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const BPMNSubprocessComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ element, sca height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -31,6 +31,5 @@ export const BPMNSubprocessComponent: FunctionComponent = ({ element, sca interface Props { element: BPMNSubprocess; - scale: number; fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx b/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx index dd4803e56..8b7dcca0f 100644 --- a/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx +++ b/src/main/packages/bpmn/bpmn-task/bpmn-task-component.tsx @@ -3,11 +3,11 @@ import { BPMNTask } from './bpmn-task'; import { ThemedRect } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNTaskComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const BPMNTaskComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ element, scale, fi height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -30,6 +30,5 @@ export const BPMNTaskComponent: FunctionComponent = ({ element, scale, fi interface Props { element: BPMNTask; - scale: number; fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx new file mode 100644 index 000000000..a48280a83 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction-component.tsx @@ -0,0 +1,44 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNTransaction } from './bpmn-transaction'; +import { ThemedRect } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNTransactionComponent: FunctionComponent = ({ element, fillColor }) => ( + + + + + {element.name} + + +); + +interface Props { + element: BPMNTransaction; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction.ts b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction.ts new file mode 100644 index 000000000..3f5e3ea82 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-transaction/bpmn-transaction.ts @@ -0,0 +1,15 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; + +export class BPMNTransaction extends UMLElement { + type: UMLElementType = BPMNElementType.BPMNTransaction; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index ff297d33e..bfc8b1049 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -3,6 +3,8 @@ import { BPMNSequenceFlow } from './bpmn-squence-flow/bpmn-sequence-flow'; export const BPMNElementType = { BPMNTask: 'BPMNTask', BPMNSubprocess: 'BPMNSubprocess', + BPMNTransaction: 'BPMNTransaction', + BPMNCallActivity: 'BPMNCallActivity', BPMNStartEvent: 'BPMNStartEvent', BPMNIntermediateEvent: 'BPMNIntermediateEvent', BPMNEndEvent: 'BPMNEndEvent', diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 3615870b9..022acc07d 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -52,11 +52,13 @@ import { BPMNTaskComponent } from './bpmn/bpmn-task/bpmn-task-component'; import { BPMNSubprocessComponent } from './bpmn/bpmn-subprocess/bpmn-subprocess-component'; import { BPMNStartEventComponent } from './bpmn/bpmn-start-event/bpmn-start-event-component'; import { BPMNIntermediateEventComponent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component'; -import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bmpn-end-event-component'; +import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bpmn-end-event-component'; import { BPMNExclusiveGatewayComponent } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component'; import { BPMNInclusiveGatewayComponent } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component'; import { BPMNParallelGatewayComponent } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component'; import { BPMNEventBasedGatewayComponent } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component'; +import {BPMNTransactionComponent} from './bpmn/bpmn-transaction/bpmn-transaction-component'; +import {BPMNCallActivityComponent} from './bpmn/bpmn-call-activity/bpmn-transaction-component'; export const Components: { [key in UMLElementType | UMLRelationshipType]: @@ -104,6 +106,8 @@ export const Components: { [UMLElementType.ColorLegend]: ColorLegendComponent, [UMLElementType.BPMNTask]: BPMNTaskComponent, [UMLElementType.BPMNSubprocess]: BPMNSubprocessComponent, + [UMLElementType.BPMNTransaction]: BPMNTransactionComponent, + [UMLElementType.BPMNCallActivity]: BPMNCallActivityComponent, [UMLElementType.BPMNStartEvent]: BPMNStartEventComponent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventComponent, [UMLElementType.BPMNEndEvent]: BPMNEndEventComponent, diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index 9d00edbff..0d73ac1b3 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -26,6 +26,7 @@ import { FlowchartFunctionCallUpdate } from './flowchart/flowchart-function-call import { FlowchartInputOutputUpdate } from './flowchart/flowchart-input-output/flowchart-input-output-update'; import { FlowchartFlowlineUpdate } from './flowchart/flowchart-flowline/flowchart-flowline-update'; import { ColorLegendUpdate } from './common/color-legend/color-legend-update'; +import { BPMNSequenceFlowUpdate } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-update'; export type Popups = { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null }; export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null } = { @@ -71,6 +72,8 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.ColorLegend]: ColorLegendUpdate, [UMLElementType.BPMNTask]: DefaultPopup, [UMLElementType.BPMNSubprocess]: DefaultPopup, + [UMLElementType.BPMNTransaction]: DefaultPopup, + [UMLElementType.BPMNCallActivity]: DefaultPopup, [UMLElementType.BPMNStartEvent]: DefaultPopup, [UMLElementType.BPMNIntermediateEvent]: DefaultPopup, [UMLElementType.BPMNEndEvent]: DefaultPopup, @@ -104,5 +107,5 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcUpdate, [UMLRelationshipType.SyntaxTreeLink]: DefaultRelationshipPopup, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineUpdate, - [UMLRelationshipType.BPMNSequenceFlow]: DefaultRelationshipPopup, + [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowUpdate, }; diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index f9d7ed3ba..ebf2c964d 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -40,13 +40,15 @@ import { FlowchartInputOutput } from './flowchart/flowchart-input-output/flowcha import { ColorLegend } from './common/color-legend/color-legend'; import { BPMNTask } from './bpmn/bpmn-task/bpmn-task'; import { BPMNSubprocess } from './bpmn/bpmn-subprocess/bpmn-subprocess'; -import { BPMNStartEvent } from './bpmn/bpmn-start-event/bmpn-start-event'; +import { BPMNStartEvent } from './bpmn/bpmn-start-event/bpmn-start-event'; import { BPMNIntermediateEvent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; import { BPMNEndEvent } from './bpmn/bpmn-end-event/bpmn-end-event'; import { BPMNExclusiveGateway } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway'; import { BPMNInclusiveGateway } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway'; import { BPMNParallelGateway } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway'; import { BPMNEventBasedGateway } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway'; +import {BPMNTransaction} from './bpmn/bpmn-transaction/bpmn-transaction'; +import {BPMNCallActivity} from './bpmn/bpmn-call-activity/bpmn-call-activity'; export const UMLElements = { [UMLElementType.Package]: UMLClassPackage, @@ -90,6 +92,8 @@ export const UMLElements = { [UMLElementType.ColorLegend]: ColorLegend, [UMLElementType.BPMNTask]: BPMNTask, [UMLElementType.BPMNSubprocess]: BPMNSubprocess, + [UMLElementType.BPMNTransaction]: BPMNTransaction, + [UMLElementType.BPMNCallActivity]: BPMNCallActivity, [UMLElementType.BPMNStartEvent]: BPMNStartEvent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEvent, [UMLElementType.BPMNEndEvent]: BPMNEndEvent, From 1969ad7a538f882d768cbb8a76510231152e605d Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Tue, 26 Sep 2023 00:21:42 +0200 Subject: [PATCH 03/14] Implement annotations --- src/main/i18n/de.json | 1 + src/main/i18n/en.json | 1 + .../bpmn-annotation-component.tsx | 41 +++++++++++++++++++ .../bpmn/bpmn-annotation/bpmn-annotation.ts | 18 ++++++++ ...t.tsx => bpmn-call-activity-component.tsx} | 2 +- .../packages/bpmn/bpmn-diagram-preview.ts | 8 ++++ .../bpmn-sequence-flow-component.tsx | 2 +- src/main/packages/bpmn/index.ts | 1 + src/main/packages/components.ts | 4 +- src/main/packages/popups.ts | 1 + src/main/packages/uml-elements.ts | 2 + 11 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts rename src/main/packages/bpmn/bpmn-call-activity/{bpmn-transaction-component.tsx => bpmn-call-activity-component.tsx} (97%) diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index 38f030247..fde61aa66 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -123,6 +123,7 @@ "BPMNSubprocess": "Sub-Prozess", "BPMNTransaction": "Transaktion", "BPMNCallActivity": "Aufruf-Aktivität", + "BPMNAnnotation": "Annotation", "BPMNStartEvent": "Start-Event", "BPMNIntermediateEvent": "Zwischen-Event", "BPMNEndEvent": "End-Event", diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index 53df2f0a6..073c570b8 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -123,6 +123,7 @@ "BPMNSubprocess": "Subprocess", "BPMNTransaction": "Transaction", "BPMNCallActivity": "Call Activity", + "BPMNAnnotation": "Annotation", "BPMNStartEvent": "Start Event", "BPMNIntermediateEvent": "Intermediate Event", "BPMNEndEvent": "End Event", diff --git a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx new file mode 100644 index 000000000..b6cab47c0 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx @@ -0,0 +1,41 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNAnnotation } from './bpmn-annotation'; +import { ThemedPath, ThemedPolyline, ThemedRect } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNAnnotationComponent: FunctionComponent = ({ element }) => ( + + + + + {element.name} + + +); + +interface Props { + element: BPMNAnnotation; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts new file mode 100644 index 000000000..4f2b71a06 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts @@ -0,0 +1,18 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import { calculateNameBounds } from '../../../utils/name-bounds'; +import { UMLElementType } from '../../uml-element-type'; +import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; + +export class BPMNAnnotation extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, connectable: false }; + + type: UMLElementType = BPMNElementType.BPMNAnnotation; + + render(canvas: ILayer): ILayoutable[] { + this.bounds = calculateNameBounds(this, canvas); + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx b/src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component.tsx similarity index 97% rename from src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx rename to src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component.tsx index 8fc2df170..22b7c19c7 100644 --- a/src/main/packages/bpmn/bpmn-call-activity/bpmn-transaction-component.tsx +++ b/src/main/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component.tsx @@ -11,7 +11,7 @@ export const BPMNCallActivityComponent: FunctionComponent = ({ element, f width={element.bounds.width} height={element.bounds.height} strokeColor={element.strokeColor} - strokeWidth={4} + strokeWidth={3} fillColor={fillColor || element.fillColor} /> = ({ element }) orient="auto" markerUnits="strokeWidth" > - + `${point.x} ${point.y}`).join(',')} diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index bfc8b1049..0022b2222 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -5,6 +5,7 @@ export const BPMNElementType = { BPMNSubprocess: 'BPMNSubprocess', BPMNTransaction: 'BPMNTransaction', BPMNCallActivity: 'BPMNCallActivity', + BPMNAnnotation: 'BPMNAnnotation', BPMNStartEvent: 'BPMNStartEvent', BPMNIntermediateEvent: 'BPMNIntermediateEvent', BPMNEndEvent: 'BPMNEndEvent', diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 022acc07d..33f75efc6 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -58,7 +58,8 @@ import { BPMNInclusiveGatewayComponent } from './bpmn/bpmn-inclusive-gateway/bpm import { BPMNParallelGatewayComponent } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component'; import { BPMNEventBasedGatewayComponent } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component'; import {BPMNTransactionComponent} from './bpmn/bpmn-transaction/bpmn-transaction-component'; -import {BPMNCallActivityComponent} from './bpmn/bpmn-call-activity/bpmn-transaction-component'; +import {BPMNCallActivityComponent} from './bpmn/bpmn-call-activity/bpmn-call-activity-component'; +import {BPMNAnnotationComponent} from './bpmn/bpmn-annotation/bpmn-annotation-component'; export const Components: { [key in UMLElementType | UMLRelationshipType]: @@ -108,6 +109,7 @@ export const Components: { [UMLElementType.BPMNSubprocess]: BPMNSubprocessComponent, [UMLElementType.BPMNTransaction]: BPMNTransactionComponent, [UMLElementType.BPMNCallActivity]: BPMNCallActivityComponent, + [UMLElementType.BPMNAnnotation]: BPMNAnnotationComponent, [UMLElementType.BPMNStartEvent]: BPMNStartEventComponent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventComponent, [UMLElementType.BPMNEndEvent]: BPMNEndEventComponent, diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index 0d73ac1b3..ba421e308 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -74,6 +74,7 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.BPMNSubprocess]: DefaultPopup, [UMLElementType.BPMNTransaction]: DefaultPopup, [UMLElementType.BPMNCallActivity]: DefaultPopup, + [UMLElementType.BPMNAnnotation]: DefaultPopup, [UMLElementType.BPMNStartEvent]: DefaultPopup, [UMLElementType.BPMNIntermediateEvent]: DefaultPopup, [UMLElementType.BPMNEndEvent]: DefaultPopup, diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index ebf2c964d..1b6d0a2e4 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -49,6 +49,7 @@ import { BPMNParallelGateway } from './bpmn/bpmn-parallel-gateway/bpmn-parallel- import { BPMNEventBasedGateway } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-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'; export const UMLElements = { [UMLElementType.Package]: UMLClassPackage, @@ -94,6 +95,7 @@ export const UMLElements = { [UMLElementType.BPMNSubprocess]: BPMNSubprocess, [UMLElementType.BPMNTransaction]: BPMNTransaction, [UMLElementType.BPMNCallActivity]: BPMNCallActivity, + [UMLElementType.BPMNAnnotation]: BPMNAnnotation, [UMLElementType.BPMNStartEvent]: BPMNStartEvent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEvent, [UMLElementType.BPMNEndEvent]: BPMNEndEvent, From 016cdb85579c0f16d1555a2ebada61e765ef6652 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Tue, 26 Sep 2023 11:30:27 +0200 Subject: [PATCH 04/14] Add support for conversation elements --- src/main/i18n/de.json | 3 +- src/main/i18n/en.json | 3 +- .../bpmn-conversation-component.tsx | 30 +++++++++++++++++++ .../bpmn-conversation/bpmn-conversation.ts | 18 +++++++++++ .../packages/bpmn/bpmn-diagram-preview.ts | 8 +++++ src/main/packages/bpmn/index.ts | 1 + src/main/packages/components.ts | 2 ++ src/main/packages/popups.ts | 1 + src/main/packages/uml-elements.ts | 2 ++ 9 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index fde61aa66..08999c93b 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -130,7 +130,8 @@ "BPMNEventBasedGateway": "Ereignis-basierter Gateway", "BPMNInclusiveGateway": "Inklusiver Gateway", "BPMNExclusiveGateway": "Exklusiver Gateway", - "BPMNParallelGateway": "Paralleler Gateway" + "BPMNParallelGateway": "Paralleler Gateway", + "BPMNConversation": "Konversation" } } } diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index 073c570b8..0046134ee 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -130,7 +130,8 @@ "BPMNEventBasedGateway": "Event-based Gateway", "BPMNInclusiveGateway": "Inclusive Gateway", "BPMNExclusiveGateway": "Exclusive Gateway", - "BPMNParallelGateway": "Parallel Gateway" + "BPMNParallelGateway": "Parallel Gateway", + "BPMNConversation": "Conversation" } } } diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx new file mode 100644 index 000000000..06393dfa8 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx @@ -0,0 +1,30 @@ +import React, { FunctionComponent } from 'react'; +import {BPMNConversation} from './bpmn-conversation'; +import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; +import { Multiline } from '../../../utils/svg/multiline'; + +export const BPMNConversationComponent: FunctionComponent = ({ element, fillColor }) => ( + + + + {element.name} + + +); + +export interface Props { + element: BPMNConversation; + fillColor?: string; +} diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts new file mode 100644 index 000000000..e16820319 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts @@ -0,0 +1,18 @@ +import { BPMNElementType } from '..'; +import { ILayer } from '../../../services/layouter/layer'; +import { ILayoutable } from '../../../services/layouter/layoutable'; +import { 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'; + +export class BPMNConversation extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; + + type: UMLElementType = BPMNElementType.BPMNConversation; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-diagram-preview.ts b/src/main/packages/bpmn/bpmn-diagram-preview.ts index 2fe059c3e..c64ddea13 100644 --- a/src/main/packages/bpmn/bpmn-diagram-preview.ts +++ b/src/main/packages/bpmn/bpmn-diagram-preview.ts @@ -13,6 +13,7 @@ import { BPMNEventBasedGateway } from './bpmn-event-based-gateway/bpmn-event-bas import { BPMNTransaction } from './bpmn-transaction/bpmn-transaction'; import { BPMNCallActivity } from './bpmn-call-activity/bpmn-call-activity'; import { BPMNAnnotation } from './bpmn-annotation/bpmn-annotation'; +import {BPMNConversation} from './bpmn-conversation/bpmn-conversation'; export const composeBPMNPreview: ComposePreview = ( layer: ILayer, @@ -105,5 +106,12 @@ export const composeBPMNPreview: ComposePreview = ( }), ); + elements.push( + new BPMNConversation({ + name: translate('packages.BPMN.BPMNConversation'), + bounds: { x: 0, y: 0, width: 40, height: 40 }, + }), + ); + return elements; }; diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index 0022b2222..a7cfcafb2 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -13,6 +13,7 @@ export const BPMNElementType = { BPMNInclusiveGateway: 'BPMNInclusiveGateway', BPMNParallelGateway: 'BPMNParallelGateway', BPMNEventBasedGateway: 'BPMNEventBasedGateway', + BPMNConversation: 'BPMNConversation', } as const; export const BPMNRelationshipType = { diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 33f75efc6..a4ee4428e 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -60,6 +60,7 @@ import { BPMNEventBasedGatewayComponent } from './bpmn/bpmn-event-based-gateway/ 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'; export const Components: { [key in UMLElementType | UMLRelationshipType]: @@ -117,6 +118,7 @@ export const Components: { [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGatewayComponent, [UMLElementType.BPMNParallelGateway]: BPMNParallelGatewayComponent, [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGatewayComponent, + [UMLElementType.BPMNConversation]: BPMNConversationComponent, [UMLRelationshipType.ClassAggregation]: UMLAssociationComponent, [UMLRelationshipType.ClassBidirectional]: UMLAssociationComponent, [UMLRelationshipType.ClassComposition]: UMLAssociationComponent, diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index ba421e308..87ec7c18b 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -82,6 +82,7 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.BPMNInclusiveGateway]: DefaultPopup, [UMLElementType.BPMNParallelGateway]: DefaultPopup, [UMLElementType.BPMNEventBasedGateway]: DefaultPopup, + [UMLElementType.BPMNConversation]: DefaultPopup, // Relationships [UMLRelationshipType.ClassAggregation]: UMLClassAssociationUpdate, [UMLRelationshipType.ClassBidirectional]: UMLClassAssociationUpdate, diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index 1b6d0a2e4..65a464872 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -50,6 +50,7 @@ import { BPMNEventBasedGateway } from './bpmn/bpmn-event-based-gateway/bpmn-even 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'; export const UMLElements = { [UMLElementType.Package]: UMLClassPackage, @@ -103,4 +104,5 @@ export const UMLElements = { [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGateway, [UMLElementType.BPMNParallelGateway]: BPMNParallelGateway, [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGateway, + [UMLElementType.BPMNConversation]: BPMNConversation, }; From 41f1995add9919023e045c38a3f8f5334fb01d74 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sat, 7 Oct 2023 12:22:52 +0200 Subject: [PATCH 05/14] Finalize base gateways and conversations --- src/main/i18n/de.json | 15 ++- src/main/i18n/en.json | 15 ++- .../bpmn-conversation-component.tsx | 14 ++- .../bpmn-conversation-update.tsx | 98 +++++++++++++++++ .../bpmn-conversation/bpmn-conversation.ts | 32 +++++- .../packages/bpmn/bpmn-diagram-preview.ts | 36 +----- .../bpmn-event-based-gateway.ts | 19 ---- .../bpmn-exclusive-gateway.ts | 19 ---- .../bpmn-gateway/bpmn-gateway-component.tsx | 48 ++++++++ .../bpmn/bpmn-gateway/bpmn-gateway-update.tsx | 104 ++++++++++++++++++ .../bpmn/bpmn-gateway/bpmn-gateway.ts | 47 ++++++++ .../bpmn-complex-gateway-component.tsx | 47 ++++++++ .../bpmn-event-based-gateway-component.tsx | 51 +++++++++ ...xclusive-event-based-gateway-component.tsx | 45 ++++++++ .../bpmn-exclusive-gateway-component.tsx | 10 +- .../bpmn-inclusive-gateway-component.tsx | 15 +-- ...arallel-event-based-gateway-component.tsx} | 25 +++-- .../bpmn-parallel-gateway-component.tsx | 15 +-- .../bpmn-inclusive-gateway.ts | 19 ---- .../bpmn-parallel-gateway.ts | 19 ---- src/main/packages/bpmn/index.ts | 5 +- src/main/packages/components.ts | 10 +- src/main/packages/popups.ts | 9 +- src/main/packages/uml-elements.ts | 10 +- .../uml-relationship-centered-description.ts | 1 + src/main/typings.ts | 10 ++ 26 files changed, 554 insertions(+), 184 deletions(-) create mode 100644 src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx delete mode 100644 src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts delete mode 100644 src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts create mode 100644 src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx create mode 100644 src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts create mode 100644 src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx create mode 100644 src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx rename src/main/packages/bpmn/{bpmn-exclusive-gateway => bpmn-gateway/gateways-components}/bpmn-exclusive-gateway-component.tsx (81%) rename src/main/packages/bpmn/{bpmn-inclusive-gateway => bpmn-gateway/gateways-components}/bpmn-inclusive-gateway-component.tsx (70%) rename src/main/packages/bpmn/{bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx => bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx} (51%) rename src/main/packages/bpmn/{bpmn-parallel-gateway => bpmn-gateway/gateways-components}/bpmn-parallel-gateway-component.tsx (75%) delete mode 100644 src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts delete mode 100644 src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index 08999c93b..06e6ce521 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -127,11 +127,16 @@ "BPMNStartEvent": "Start-Event", "BPMNIntermediateEvent": "Zwischen-Event", "BPMNEndEvent": "End-Event", - "BPMNEventBasedGateway": "Ereignis-basierter Gateway", - "BPMNInclusiveGateway": "Inklusiver Gateway", - "BPMNExclusiveGateway": "Exklusiver Gateway", - "BPMNParallelGateway": "Paralleler Gateway", - "BPMNConversation": "Konversation" + "BPMNGateway": "Gateway", + "BPMNComplexGateway": "Komplex", + "BPMNEventBasedGateway": "Ereignis-basiert", + "BPMNExclusiveGateway": "Exklusiv", + "BPMNExclusiveEventBasedGateway": "Exklusiv Ereignis-basiert", + "BPMNInclusiveGateway": "Inklusiv", + "BPMNParallelGateway": "Parallel", + "BPMNParallelEventBasedGateway": "Parallel Ereignis-basiert", + "BPMNConversation": "Konversation", + "BPMNCallConversation": "Aufruf-Konversation" } } } diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index 0046134ee..bc883ebb2 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -127,11 +127,16 @@ "BPMNStartEvent": "Start Event", "BPMNIntermediateEvent": "Intermediate Event", "BPMNEndEvent": "End Event", - "BPMNEventBasedGateway": "Event-based Gateway", - "BPMNInclusiveGateway": "Inclusive Gateway", - "BPMNExclusiveGateway": "Exclusive Gateway", - "BPMNParallelGateway": "Parallel Gateway", - "BPMNConversation": "Conversation" + "BPMNGateway": "Gateway", + "BPMNComplexGateway": "Complex", + "BPMNEventBasedGateway": "Event-based", + "BPMNInclusiveGateway": "Inclusive", + "BPMNExclusiveGateway": "Exclusive", + "BPMNExclusiveEventBasedGateway": "Exclusive Event-based", + "BPMNParallelGateway": "Parallel", + "BPMNParallelEventBasedGateway": "Parallel Event-based", + "BPMNConversation": "Conversation", + "BPMNCallConversation": "Call Conversation" } } } diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx index 06393dfa8..903866593 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx @@ -1,14 +1,19 @@ import React, { FunctionComponent } from 'react'; -import {BPMNConversation} from './bpmn-conversation'; +import { BPMNConversation } from './bpmn-conversation'; import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; -export const BPMNConversationComponent: FunctionComponent = ({ element, fillColor }) => ( +export const BPMNConversationComponent: FunctionComponent = ({ element }) => ( = ({ element, f export interface Props { element: BPMNConversation; - fillColor?: string; } diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx new file mode 100644 index 000000000..3d10199f2 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx @@ -0,0 +1,98 @@ +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 { Switch } from '../../../components/controls/switch/switch'; +import {BPMNConversation, BPMNConversationType} from './bpmn-conversation'; +import {Dropdown} from '../../../components/controls/dropdown/dropdown'; + +interface OwnProps { + element: BPMNConversation; +} + +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 BPMNConversationUpdateComponent extends Component { + render() { + const { element } = this.props; + + return ( +
+
+ + + + + +
+
+ + + {this.props.translate('packages.BPMN.BPMNConversation')} + + + {this.props.translate('packages.BPMN.BPMNCallConversation')} + + +
+
+ ); + } + + /** + * Rename the conversation + * @param id The ID of the conversation 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 + */ + private changeConversationType = (id: string) => (value: string) => { + this.props.update(id, { conversationType: value as BPMNConversationType }); + }; + + /** + * Delete a conversation + * @param id The ID of the conversation that should be deleted + */ + private delete = (id: string) => () => { + this.props.delete(id); + }; +} + +export const BPMNConversationUpdate = enhance(BPMNConversationUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts index e16820319..3fdb9338a 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts @@ -1,16 +1,46 @@ import { BPMNElementType } from '..'; import { ILayer } from '../../../services/layouter/layer'; import { ILayoutable } from '../../../services/layouter/layoutable'; -import { UMLElement } from '../../../services/uml-element/uml-element'; +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 {BPMNGatewayType} from '../bpmn-gateway/bpmn-gateway'; + +export type BPMNConversationType = 'default' | 'call'; export class BPMNConversation extends UMLElement { 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[], + ) { + super.deserialize(values, children); + this.conversationType = values.conversationType || BPMNConversation.defaultConversationType; + } render(canvas: ILayer): ILayoutable[] { return [this]; diff --git a/src/main/packages/bpmn/bpmn-diagram-preview.ts b/src/main/packages/bpmn/bpmn-diagram-preview.ts index c64ddea13..3ab3e4c6b 100644 --- a/src/main/packages/bpmn/bpmn-diagram-preview.ts +++ b/src/main/packages/bpmn/bpmn-diagram-preview.ts @@ -6,14 +6,11 @@ import { BPMNSubprocess } from './bpmn-subprocess/bpmn-subprocess'; import { BPMNStartEvent } from './bpmn-start-event/bpmn-start-event'; import { BPMNIntermediateEvent } from './bpmn-intermediate-event/bpmn-intermediate-event'; import { BPMNEndEvent } from './bpmn-end-event/bpmn-end-event'; -import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway/bpmn-exclusive-gateway'; -import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway/bpmn-inclusive-gateway'; -import { BPMNParallelGateway } from './bpmn-parallel-gateway/bpmn-parallel-gateway'; -import { BPMNEventBasedGateway } from './bpmn-event-based-gateway/bpmn-event-based-gateway'; +import { BPMNGateway } from './bpmn-gateway/bpmn-gateway'; import { BPMNTransaction } from './bpmn-transaction/bpmn-transaction'; import { BPMNCallActivity } from './bpmn-call-activity/bpmn-call-activity'; import { BPMNAnnotation } from './bpmn-annotation/bpmn-annotation'; -import {BPMNConversation} from './bpmn-conversation/bpmn-conversation'; +import { BPMNConversation } from './bpmn-conversation/bpmn-conversation'; export const composeBPMNPreview: ComposePreview = ( layer: ILayer, @@ -79,39 +76,18 @@ export const composeBPMNPreview: ComposePreview = ( ); elements.push( - new BPMNExclusiveGateway({ - name: translate('packages.BPMN.BPMNExclusiveGateway'), + new BPMNGateway({ + name: translate('packages.BPMN.BPMNGateway'), bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); elements.push( - new BPMNInclusiveGateway({ - name: translate('packages.BPMN.BPMNInclusiveGateway'), + new BPMNConversation({ + name: translate('packages.BPMN.BPMNConversation'), bounds: { x: 0, y: 0, width: 40, height: 40 }, }), ); - elements.push( - new BPMNParallelGateway({ - name: translate('packages.BPMN.BPMNParallelGateway'), - bounds: { x: 0, y: 0, width: 40, height: 40 }, - }), - ); - - elements.push( - new BPMNEventBasedGateway({ - name: translate('packages.BPMN.BPMNEventBasedGateway'), - bounds: { x: 0, y: 0, width: 40, height: 40 }, - }), - ); - - elements.push( - new BPMNConversation({ - name: translate('packages.BPMN.BPMNConversation'), - bounds: { x: 0, y: 0, width: 40, height: 40 }, - }), - ); - return elements; }; diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts b/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts deleted file mode 100644 index 118af45dc..000000000 --- a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BPMNElementType } from '..'; -import { ILayer } from '../../../services/layouter/layer'; -import { ILayoutable } from '../../../services/layouter/layoutable'; -import { UMLElement } from '../../../services/uml-element/uml-element'; -import { calculateNameBounds } from '../../../utils/name-bounds'; -import { UMLElementType } from '../../uml-element-type'; -import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; -import { IBoundary } from '../../../utils/geometry/boundary'; - -export class BPMNEventBasedGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; - - type: UMLElementType = BPMNElementType.BPMNEventBasedGateway; - bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; - - render(canvas: ILayer): ILayoutable[] { - return [this]; - } -} diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts b/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts deleted file mode 100644 index 56e0b8221..000000000 --- a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BPMNElementType } from '..'; -import { ILayer } from '../../../services/layouter/layer'; -import { ILayoutable } from '../../../services/layouter/layoutable'; -import { UMLElement } from '../../../services/uml-element/uml-element'; -import { calculateNameBounds } from '../../../utils/name-bounds'; -import { UMLElementType } from '../../uml-element-type'; -import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; -import { IBoundary } from '../../../utils/geometry/boundary'; - -export class BPMNExclusiveGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; - - type: UMLElementType = BPMNElementType.BPMNExclusiveGateway; - bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; - - render(canvas: ILayer): ILayoutable[] { - return [this]; - } -} diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx new file mode 100644 index 000000000..656b8e070 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx @@ -0,0 +1,48 @@ +import React, { FunctionComponent } from 'react'; +import { BPMNGateway } from './bpmn-gateway'; +import { BPMNEventBasedGatewayComponent } from './gateways-components/bpmn-event-based-gateway-component'; +import { BPMNExclusiveGatewayComponent } from './gateways-components/bpmn-exclusive-gateway-component'; +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 { + BPMNExclusiveEventBasedGatewayComponent +} from './gateways-components/bpmn-exclusive-event-based-gateway-component'; +import { + BPMNParallelEventBasedGatewayComponent +} from './gateways-components/bpmn-parallel-event-based-gateway-component'; + +export const BPMNGatewayComponent: FunctionComponent = (props) => { + + let GatewayComponent = BPMNExclusiveGatewayComponent; + + switch (props.element.gatewayType) { + case 'complex': + GatewayComponent = BPMNComplexGatewayComponent; + break; + case 'event-based': + GatewayComponent = BPMNEventBasedGatewayComponent; + break; + case 'exclusive': + GatewayComponent = BPMNExclusiveGatewayComponent; + break; + case 'exclusive-event-based': + GatewayComponent = BPMNExclusiveEventBasedGatewayComponent; + break; + case 'inclusive': + GatewayComponent = BPMNInclusiveGatewayComponent; + break; + case 'parallel': + GatewayComponent = BPMNParallelGatewayComponent; + break; + case 'parallel-event-based': + GatewayComponent = BPMNParallelEventBasedGatewayComponent; + break; + } + + return ; +}; + +export interface Props { + element: BPMNGateway; +} diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx new file mode 100644 index 000000000..e584c84e0 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-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 { BPMNGateway, BPMNGatewayType } from './bpmn-gateway'; +import { Switch } from '../../../components/controls/switch/switch'; +import {Dropdown} from '../../../components/controls/dropdown/dropdown'; +import {UseCaseRelationshipType} from '../../uml-use-case-diagram'; + +interface OwnProps { + element: BPMNGateway; +} + +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 BPMNGatewayUpdateComponent extends Component { + render() { + const { element } = this.props; + + return ( +
+
+ + + + + +
+
+ + + {this.props.translate('packages.BPMN.BPMNComplexGateway')} + + + {this.props.translate('packages.BPMN.BPMNEventBasedGateway')} + + {this.props.translate('packages.BPMN.BPMNExclusiveGateway')} + {this.props.translate('packages.BPMN.BPMNExclusiveEventBasedGateway')} + {this.props.translate('packages.BPMN.BPMNInclusiveGateway')} + {this.props.translate('packages.BPMN.BPMNParallelGateway')} + {this.props.translate('packages.BPMN.BPMNParallelEventBasedGateway')} + +
+
+ ); + } + + /** + * Rename the gateway + * @param id The ID of the gateway that should be renamed + */ + private rename = (id: string) => (value: string) => { + this.props.update(id, { name: value }); + }; + + /** + * Change the type of the gateway + * @param id The ID of the gateway whose type should be changed + */ + private changeGatewayType = (id: string) => (value: string) => { + this.props.update(id, { gatewayType: value as BPMNGatewayType }); + }; + + /** + * Delete a gateway + * @param id The ID of the gateway that should be deleted + */ + private delete = (id: string) => () => { + this.props.delete(id); + }; +} + +export const BPMNGatewayUpdate = enhance(BPMNGatewayUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts new file mode 100644 index 000000000..75e74eb2e --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts @@ -0,0 +1,47 @@ +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'; + +export type BPMNGatewayType = 'complex' | 'event-based' | 'exclusive' | 'exclusive-event-based' | 'inclusive' | 'parallel' | 'parallel-event-based'; + +export class BPMNGateway extends UMLElement { + static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; + static defaultGatewayType: BPMNGatewayType = 'exclusive'; + + type: UMLElementType = BPMNElementType.BPMNGateway; + bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; + gatewayType: BPMNGatewayType; + + constructor(values?: DeepPartial) { + super(values); + assign(this, values); + this.gatewayType = values?.gatewayType || BPMNGateway.defaultGatewayType; + } + + serialize(children?: UMLElement[]): Apollon.BPMNGateway { + return { + ...super.serialize(), + type: this.type as keyof typeof BPMNElementType, + gatewayType: this.gatewayType, + }; + } + + deserialize( + values: T & { gatewayType?: BPMNGatewayType }, + children?: Apollon.UMLModelElement[], + ) { + super.deserialize(values, children); + this.gatewayType = values.gatewayType || BPMNGateway.defaultGatewayType; + } + + render(canvas: ILayer): ILayoutable[] { + return [this]; + } +} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx new file mode 100644 index 000000000..96d5b1a7d --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx @@ -0,0 +1,47 @@ +import React, { FunctionComponent } from 'react'; +import { ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; + +export const BPMNComplexGatewayComponent: FunctionComponent = ({ element }) => ( + + + + + + + + {element.name} + + +); 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 new file mode 100644 index 000000000..ade21ad50 --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-event-based-gateway-component.tsx @@ -0,0 +1,51 @@ +import React, { FunctionComponent } from 'react'; +import {ThemedCircle, ThemedPath, ThemedPolyline} from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; + +export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ element }) => ( + + + + + + + {element.name} + + +); diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx new file mode 100644 index 000000000..fdcec5f9f --- /dev/null +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx @@ -0,0 +1,45 @@ +import React, { FunctionComponent } from 'react'; +import {ThemedCircle, ThemedPath, ThemedPolyline} from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; + +export const BPMNExclusiveEventBasedGatewayComponent: FunctionComponent = ({ element }) => ( + + + + + + {element.name} + + +); diff --git a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx similarity index 81% rename from src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx rename to src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx index 5bd3e9237..f7253906b 100644 --- a/src/main/packages/bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from 'react'; -import { BPMNExclusiveGateway } from './bpmn-exclusive-gateway'; -import { ThemedPolyline } from '../../../components/theme/themedComponents'; -import { Multiline } from '../../../utils/svg/multiline'; +import { ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ element }) => ( @@ -35,7 +35,3 @@ export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ elemen ); - -export interface Props { - element: BPMNExclusiveGateway; -} diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx similarity index 70% rename from src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx rename to src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx index adea27ebb..b8a469eae 100644 --- a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx @@ -1,16 +1,16 @@ import React, { FunctionComponent } from 'react'; -import { BPMNInclusiveGateway } from './bpmn-inclusive-gateway'; -import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; -import { Multiline } from '../../../utils/svg/multiline'; +import { ThemedCircle, ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; -export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( +export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ element }) => ( = ({ elemen ); - -export interface Props { - element: BPMNInclusiveGateway; - fillColor?: string; -} diff --git a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx similarity index 51% rename from src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx rename to src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx index b5bfd7f5d..724054759 100644 --- a/src/main/packages/bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx @@ -1,16 +1,16 @@ import React, { FunctionComponent } from 'react'; -import { BPMNEventBasedGateway } from './bpmn-event-based-gateway'; -import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; -import { Multiline } from '../../../utils/svg/multiline'; +import { ThemedCircle, ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; -export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( +export const BPMNParallelEventBasedGatewayComponent: FunctionComponent = ({ element }) => ( = ({ eleme r={Math.min(element.bounds.width, element.bounds.height) / 2 - 12} strokeColor={element.strokeColor} /> + + = ({ eleme ); - -export interface Props { - element: BPMNEventBasedGateway; - fillColor?: string; -} diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx similarity index 75% rename from src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx rename to src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx index e186d63d8..90cac5535 100644 --- a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx @@ -1,16 +1,16 @@ import React, { FunctionComponent } from 'react'; -import { BPMNParallelGateway } from './bpmn-parallel-gateway'; -import { ThemedPolyline } from '../../../components/theme/themedComponents'; -import { Multiline } from '../../../utils/svg/multiline'; +import { ThemedPolyline } from '../../../../components/theme/themedComponents'; +import { Multiline } from '../../../../utils/svg/multiline'; +import { Props } from '../bpmn-gateway-component'; -export const BPMNParallelGatewayComponent: FunctionComponent = ({ element, fillColor }) => ( +export const BPMNParallelGatewayComponent: FunctionComponent = ({ element }) => ( = ({ element ); - -export interface Props { - element: BPMNParallelGateway; - fillColor?: string; -} diff --git a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts b/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts deleted file mode 100644 index ce5a7d069..000000000 --- a/src/main/packages/bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BPMNElementType } from '..'; -import { ILayer } from '../../../services/layouter/layer'; -import { ILayoutable } from '../../../services/layouter/layoutable'; -import { UMLElement } from '../../../services/uml-element/uml-element'; -import { calculateNameBounds } from '../../../utils/name-bounds'; -import { UMLElementType } from '../../uml-element-type'; -import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; -import { IBoundary } from '../../../utils/geometry/boundary'; - -export class BPMNInclusiveGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; - - type: UMLElementType = BPMNElementType.BPMNInclusiveGateway; - bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; - - render(canvas: ILayer): ILayoutable[] { - return [this]; - } -} diff --git a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts b/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts deleted file mode 100644 index c9691c83d..000000000 --- a/src/main/packages/bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BPMNElementType } from '..'; -import { ILayer } from '../../../services/layouter/layer'; -import { ILayoutable } from '../../../services/layouter/layoutable'; -import { UMLElement } from '../../../services/uml-element/uml-element'; -import { calculateNameBounds } from '../../../utils/name-bounds'; -import { UMLElementType } from '../../uml-element-type'; -import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; -import { IBoundary } from '../../../utils/geometry/boundary'; - -export class BPMNParallelGateway extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; - - type: UMLElementType = BPMNElementType.BPMNParallelGateway; - bounds: IBoundary = { ...this.bounds, width: 40, height: 40 }; - - render(canvas: ILayer): ILayoutable[] { - return [this]; - } -} diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index a7cfcafb2..adf05a11e 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -9,10 +9,7 @@ export const BPMNElementType = { BPMNStartEvent: 'BPMNStartEvent', BPMNIntermediateEvent: 'BPMNIntermediateEvent', BPMNEndEvent: 'BPMNEndEvent', - BPMNExclusiveGateway: 'BPMNExclusiveGateway', - BPMNInclusiveGateway: 'BPMNInclusiveGateway', - BPMNParallelGateway: 'BPMNParallelGateway', - BPMNEventBasedGateway: 'BPMNEventBasedGateway', + BPMNGateway: 'BPMNGateway', BPMNConversation: 'BPMNConversation', } as const; diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index a4ee4428e..12955263b 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -53,10 +53,7 @@ import { BPMNSubprocessComponent } from './bpmn/bpmn-subprocess/bpmn-subprocess- import { BPMNStartEventComponent } from './bpmn/bpmn-start-event/bpmn-start-event-component'; import { BPMNIntermediateEventComponent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component'; import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bpmn-end-event-component'; -import { BPMNExclusiveGatewayComponent } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway-component'; -import { BPMNInclusiveGatewayComponent } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway-component'; -import { BPMNParallelGatewayComponent } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway-component'; -import { BPMNEventBasedGatewayComponent } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway-component'; +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'; @@ -114,10 +111,7 @@ export const Components: { [UMLElementType.BPMNStartEvent]: BPMNStartEventComponent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEventComponent, [UMLElementType.BPMNEndEvent]: BPMNEndEventComponent, - [UMLElementType.BPMNExclusiveGateway]: BPMNExclusiveGatewayComponent, - [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGatewayComponent, - [UMLElementType.BPMNParallelGateway]: BPMNParallelGatewayComponent, - [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGatewayComponent, + [UMLElementType.BPMNGateway]: BPMNGatewayComponent, [UMLElementType.BPMNConversation]: BPMNConversationComponent, [UMLRelationshipType.ClassAggregation]: UMLAssociationComponent, [UMLRelationshipType.ClassBidirectional]: UMLAssociationComponent, diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index 87ec7c18b..f33e514b6 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -27,6 +27,8 @@ import { FlowchartInputOutputUpdate } from './flowchart/flowchart-input-output/f import { FlowchartFlowlineUpdate } from './flowchart/flowchart-flowline/flowchart-flowline-update'; import { ColorLegendUpdate } from './common/color-legend/color-legend-update'; import { BPMNSequenceFlowUpdate } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-update'; +import {BPMNGatewayUpdate} from './bpmn/bpmn-gateway/bpmn-gateway-update'; +import {BPMNConversationUpdate} from './bpmn/bpmn-conversation/bpmn-conversation-update'; export type Popups = { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null }; export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null } = { @@ -78,11 +80,8 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLElementType.BPMNStartEvent]: DefaultPopup, [UMLElementType.BPMNIntermediateEvent]: DefaultPopup, [UMLElementType.BPMNEndEvent]: DefaultPopup, - [UMLElementType.BPMNExclusiveGateway]: DefaultPopup, - [UMLElementType.BPMNInclusiveGateway]: DefaultPopup, - [UMLElementType.BPMNParallelGateway]: DefaultPopup, - [UMLElementType.BPMNEventBasedGateway]: DefaultPopup, - [UMLElementType.BPMNConversation]: DefaultPopup, + [UMLElementType.BPMNGateway]: BPMNGatewayUpdate, + [UMLElementType.BPMNConversation]: BPMNConversationUpdate, // Relationships [UMLRelationshipType.ClassAggregation]: UMLClassAssociationUpdate, [UMLRelationshipType.ClassBidirectional]: UMLClassAssociationUpdate, diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index 65a464872..0728e43b2 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -43,10 +43,7 @@ import { BPMNSubprocess } from './bpmn/bpmn-subprocess/bpmn-subprocess'; import { BPMNStartEvent } from './bpmn/bpmn-start-event/bpmn-start-event'; import { BPMNIntermediateEvent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; import { BPMNEndEvent } from './bpmn/bpmn-end-event/bpmn-end-event'; -import { BPMNExclusiveGateway } from './bpmn/bpmn-exclusive-gateway/bpmn-exclusive-gateway'; -import { BPMNInclusiveGateway } from './bpmn/bpmn-inclusive-gateway/bpmn-inclusive-gateway'; -import { BPMNParallelGateway } from './bpmn/bpmn-parallel-gateway/bpmn-parallel-gateway'; -import { BPMNEventBasedGateway } from './bpmn/bpmn-event-based-gateway/bpmn-event-based-gateway'; +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'; @@ -100,9 +97,6 @@ export const UMLElements = { [UMLElementType.BPMNStartEvent]: BPMNStartEvent, [UMLElementType.BPMNIntermediateEvent]: BPMNIntermediateEvent, [UMLElementType.BPMNEndEvent]: BPMNEndEvent, - [UMLElementType.BPMNExclusiveGateway]: BPMNExclusiveGateway, - [UMLElementType.BPMNInclusiveGateway]: BPMNInclusiveGateway, - [UMLElementType.BPMNParallelGateway]: BPMNParallelGateway, - [UMLElementType.BPMNEventBasedGateway]: BPMNEventBasedGateway, + [UMLElementType.BPMNGateway]: BPMNGateway, [UMLElementType.BPMNConversation]: BPMNConversation, }; diff --git a/src/main/services/uml-relationship/uml-relationship-centered-description.ts b/src/main/services/uml-relationship/uml-relationship-centered-description.ts index 5159242b9..563e8ea7f 100644 --- a/src/main/services/uml-relationship/uml-relationship-centered-description.ts +++ b/src/main/services/uml-relationship/uml-relationship-centered-description.ts @@ -1,3 +1,4 @@ + import { UMLRelationshipType } from '../../packages/uml-relationship-type'; import { IPath } from '../../utils/geometry/path'; import { ILayer } from '../layouter/layer'; diff --git a/src/main/typings.ts b/src/main/typings.ts index 89bbb57ed..4ebf44572 100644 --- a/src/main/typings.ts +++ b/src/main/typings.ts @@ -8,6 +8,8 @@ import { ApollonMode, Locale } from './services/editor/editor-types'; 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'; export { UMLDiagramType, UMLElementType, UMLRelationshipType, ApollonMode, Locale }; export type { Styles }; @@ -88,6 +90,14 @@ export type UMLPetriNetPlace = UMLElement & { capacity: number | string; }; +export type BPMNGateway = UMLElement & { + gatewayType: BPMNGatewayType; +}; + +export type BPMNConversation = UMLElement & { + conversationType: BPMNConversationType; +}; + export type UMLReachabilityGraphMarking = UMLElement & { isInitialMarking: boolean; }; From 48f02b457028db4e24994258a0e62e0c4be4675c Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sat, 7 Oct 2023 14:18:34 +0200 Subject: [PATCH 06/14] Add support for selection flow types --- .DS_Store | Bin 0 -> 8196 bytes src/.DS_Store | Bin 0 -> 6148 bytes src/main/i18n/de.json | 7 ++- src/main/i18n/en.json | 11 +++-- .../bpmn/bpmn-annotation/bpmn-annotation.ts | 2 +- .../bpmn-conversation-component.tsx | 5 +- .../bpmn-conversation-update.tsx | 12 ++--- .../bpmn-conversation/bpmn-conversation.ts | 12 ++--- .../bpmn-end-event-component.tsx | 5 +- .../bpmn-gateway/bpmn-gateway-component.tsx | 21 ++++---- .../bpmn/bpmn-gateway/bpmn-gateway-update.tsx | 28 +++++++---- .../bpmn/bpmn-gateway/bpmn-gateway.ts | 9 +++- .../bpmn-complex-gateway-component.tsx | 25 +++++----- .../bpmn-event-based-gateway-component.tsx | 45 ++++++++++-------- ...xclusive-event-based-gateway-component.tsx | 33 +++++++------ .../bpmn-exclusive-gateway-component.tsx | 5 +- .../bpmn-inclusive-gateway-component.tsx | 5 +- ...parallel-event-based-gateway-component.tsx | 25 +++++----- .../bpmn-parallel-gateway-component.tsx | 5 +- .../bpmn-intermediate-event-component.tsx | 5 +- .../bpmn-sequence-flow-component.tsx | 20 ++++++-- .../bpmn-sequence-flow-update.tsx | 23 ++++++++- .../bpmn-squence-flow/bpmn-sequence-flow.ts | 32 +++++++++++-- .../bpmn-start-event-component.tsx | 5 +- src/main/typings.ts | 4 ++ 25 files changed, 220 insertions(+), 124 deletions(-) create mode 100644 .DS_Store create mode 100644 src/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7e9b50a957dff45a60de234cc7b81169581e3d42 GIT binary patch literal 8196 zcmeHM%Wl&^6ur}g#!=cTm8g^rk|nk!w3PA?nN0EnmXFu!3`Erd4LrEZ88V&PX$NY@c(-b9~2>>kyG>jJlgd6(aIb*_KOat|@$- z>r7eDXVzc^_(X@aPp{}DRjD(Bb|;(yP64NYQ@|_KR%&?$ycbX@lt4qMZ9 zqO78mP;?S{WT7(@Ax8(#mv9m_WnJqOa0<*Sz`6Sp?I3SIq`Hy6_o=@hC7mEj0$_Mq z)lsXzWkHXqfGqzL4QNO`N-4F_-!1g2iI(385{ju$Asyi;vptAAmWMobDS;PjB=Ob4 zmEbP|GN3kW6|C#L|FT#sbRy@G&D`0EJ>tTV#m!-ykOE5q*6W+0*K_E+Lwoo_(xg2L z&3a9vm!M68d+$+;&SY?{Mh2LYSX+$JjoF>o<8T=KI#WlE{vNfD=BDXIu0whW7w-d4AJ)iWll}oiLy9@;ywgO8C>HO I_@@f|0RzcTbN~PV literal 0 HcmV?d00001 diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b9c1928dd311ae3e5063feb81d4d730f577f863d GIT binary patch literal 6148 zcmeHKO>fgc5S>jEx>1Fc14unu;u@8NQa;p+Nz0*^9x#GKLBS?bv2eXn>@*TlB%jNV z;o4u)ztg_i-9&9luP8z@((K!vomqR|T00&hQoYHbOVlDF4P~q~(fmbtp7oy8yrltD zyv9*xz9*SUFy;kC)}H}ByE>gwOey6n=l2eCJJ(k1MwWibv>5qwzD!10T9lp6m8xyj z8;>^irry$DqaS7(m2o*Kdhz&#M<0#Jl0`pGKBdEHzxCw6OAO^J2j#*sAA0}Fp$jKvpNw_;Jn!G7<)af&YpDRX>ald)SiCt@k#^xi)})gR-z+4 awE}y<9bo9OatI4VegrHH(g*|plz|&Q{B92b literal 0 HcmV?d00001 diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json index 06e6ce521..f6e018b2b 100644 --- a/src/main/i18n/de.json +++ b/src/main/i18n/de.json @@ -125,7 +125,7 @@ "BPMNCallActivity": "Aufruf-Aktivität", "BPMNAnnotation": "Annotation", "BPMNStartEvent": "Start-Event", - "BPMNIntermediateEvent": "Zwischen-Event", + "BPMNIntermediateEvent": "Event", "BPMNEndEvent": "End-Event", "BPMNGateway": "Gateway", "BPMNComplexGateway": "Komplex", @@ -136,7 +136,10 @@ "BPMNParallelGateway": "Parallel", "BPMNParallelEventBasedGateway": "Parallel Ereignis-basiert", "BPMNConversation": "Konversation", - "BPMNCallConversation": "Aufruf-Konversation" + "BPMNCallConversation": "Aufruf-Konversation", + "BPMNSequenceFlow": "Sequenz", + "BPMNMessageFlow": "Nachricht", + "BPMNAssociationFlow": "Assoziation" } } } diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json index bc883ebb2..25d8cf30c 100644 --- a/src/main/i18n/en.json +++ b/src/main/i18n/en.json @@ -124,9 +124,9 @@ "BPMNTransaction": "Transaction", "BPMNCallActivity": "Call Activity", "BPMNAnnotation": "Annotation", - "BPMNStartEvent": "Start Event", - "BPMNIntermediateEvent": "Intermediate Event", - "BPMNEndEvent": "End Event", + "BPMNStartEvent": "Start", + "BPMNIntermediateEvent": "Event", + "BPMNEndEvent": "End", "BPMNGateway": "Gateway", "BPMNComplexGateway": "Complex", "BPMNEventBasedGateway": "Event-based", @@ -136,7 +136,10 @@ "BPMNParallelGateway": "Parallel", "BPMNParallelEventBasedGateway": "Parallel Event-based", "BPMNConversation": "Conversation", - "BPMNCallConversation": "Call Conversation" + "BPMNCallConversation": "Call Conversation", + "BPMNSequenceFlow": "Sequence", + "BPMNMessageFlow": "Message", + "BPMNAssociationFlow": "Association" } } } diff --git a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts index 4f2b71a06..c8f6b0d81 100644 --- a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts +++ b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation.ts @@ -7,7 +7,7 @@ import { UMLElementType } from '../../uml-element-type'; import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features'; export class BPMNAnnotation extends UMLElement { - static features: UMLElementFeatures = { ...UMLElement.features, connectable: false }; + static features: UMLElementFeatures = { ...UMLElement.features }; type: UMLElementType = BPMNElementType.BPMNAnnotation; diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx index 903866593..aa49c46cf 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx @@ -16,13 +16,14 @@ export const BPMNConversationComponent: FunctionComponent = ({ element }) strokeWidth={element.conversationType === 'call' ? 3 : 1} /> {element.name} diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx index 3d10199f2..c7eaf3900 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-update.tsx @@ -11,8 +11,8 @@ 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 { BPMNConversation, BPMNConversationType } from './bpmn-conversation'; +import { Dropdown } from '../../../components/controls/dropdown/dropdown'; interface OwnProps { element: BPMNConversation; @@ -58,12 +58,8 @@ class BPMNConversationUpdateComponent extends Component {
- - {this.props.translate('packages.BPMN.BPMNConversation')} - - - {this.props.translate('packages.BPMN.BPMNCallConversation')} - + {this.props.translate('packages.BPMN.BPMNConversation')} + {this.props.translate('packages.BPMN.BPMNCallConversation')}
diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts index 3fdb9338a..854831fb1 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts @@ -1,14 +1,14 @@ 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 { 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 { DeepPartial } from 'redux'; +import { assign } from '../../../utils/fx/assign'; import * as Apollon from '../../../typings'; -import {BPMNGatewayType} from '../bpmn-gateway/bpmn-gateway'; +import { BPMNGatewayType } from '../bpmn-gateway/bpmn-gateway'; export type BPMNConversationType = 'default' | 'call'; @@ -35,8 +35,8 @@ export class BPMNConversation extends UMLElement { } deserialize( - values: T & { conversationType?: BPMNConversationType }, - children?: Apollon.UMLModelElement[], + values: T & { conversationType?: BPMNConversationType }, + children?: Apollon.UMLModelElement[], ) { super.deserialize(values, children); this.conversationType = values.conversationType || BPMNConversation.defaultConversationType; 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 08640bb4f..15424dc52 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 @@ -37,13 +37,14 @@ export const BPMNEndEventC: FunctionComponent = ({ element, interactive, strokeWidth={3} /> {element.name} 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 656b8e070..a7c436ac4 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx @@ -4,18 +4,13 @@ import { BPMNEventBasedGatewayComponent } from './gateways-components/bpmn-event import { BPMNExclusiveGatewayComponent } from './gateways-components/bpmn-exclusive-gateway-component'; 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 { - BPMNExclusiveEventBasedGatewayComponent -} from './gateways-components/bpmn-exclusive-event-based-gateway-component'; -import { - BPMNParallelEventBasedGatewayComponent -} from './gateways-components/bpmn-parallel-event-based-gateway-component'; +import { BPMNComplexGatewayComponent } from './gateways-components/bpmn-complex-gateway-component'; +import { BPMNExclusiveEventBasedGatewayComponent } from './gateways-components/bpmn-exclusive-event-based-gateway-component'; +import { BPMNParallelEventBasedGatewayComponent } from './gateways-components/bpmn-parallel-event-based-gateway-component'; export const BPMNGatewayComponent: FunctionComponent = (props) => { - let GatewayComponent = BPMNExclusiveGatewayComponent; - + switch (props.element.gatewayType) { case 'complex': GatewayComponent = BPMNComplexGatewayComponent; @@ -39,8 +34,12 @@ export const BPMNGatewayComponent: FunctionComponent = (props) => { GatewayComponent = BPMNParallelEventBasedGatewayComponent; break; } - - return ; + + return ( + + + + ); }; export interface Props { 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 e584c84e0..3c975bfa5 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx @@ -12,8 +12,8 @@ import { styled } from '../../../components/theme/styles'; import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository'; import { BPMNGateway, BPMNGatewayType } from './bpmn-gateway'; import { Switch } from '../../../components/controls/switch/switch'; -import {Dropdown} from '../../../components/controls/dropdown/dropdown'; -import {UseCaseRelationshipType} from '../../uml-use-case-diagram'; +import { Dropdown } from '../../../components/controls/dropdown/dropdown'; +import { UseCaseRelationshipType } from '../../uml-use-case-diagram'; interface OwnProps { element: BPMNGateway; @@ -59,17 +59,25 @@ class BPMNGatewayUpdateComponent extends Component {
- - {this.props.translate('packages.BPMN.BPMNComplexGateway')} - + {this.props.translate('packages.BPMN.BPMNComplexGateway')} {this.props.translate('packages.BPMN.BPMNEventBasedGateway')} - {this.props.translate('packages.BPMN.BPMNExclusiveGateway')} - {this.props.translate('packages.BPMN.BPMNExclusiveEventBasedGateway')} - {this.props.translate('packages.BPMN.BPMNInclusiveGateway')} - {this.props.translate('packages.BPMN.BPMNParallelGateway')} - {this.props.translate('packages.BPMN.BPMNParallelEventBasedGateway')} + + {this.props.translate('packages.BPMN.BPMNExclusiveGateway')} + + + {this.props.translate('packages.BPMN.BPMNExclusiveEventBasedGateway')} + + + {this.props.translate('packages.BPMN.BPMNInclusiveGateway')} + + + {this.props.translate('packages.BPMN.BPMNParallelGateway')} + + + {this.props.translate('packages.BPMN.BPMNParallelEventBasedGateway')} +
diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts index 75e74eb2e..10850281f 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts @@ -9,7 +9,14 @@ import { DeepPartial } from 'redux'; import { assign } from '../../../utils/fx/assign'; import * as Apollon from '../../../typings'; -export type BPMNGatewayType = 'complex' | 'event-based' | 'exclusive' | 'exclusive-event-based' | 'inclusive' | 'parallel' | 'parallel-event-based'; +export type BPMNGatewayType = + | 'complex' + | 'event-based' + | 'exclusive' + | 'exclusive-event-based' + | 'inclusive' + | 'parallel' + | 'parallel-event-based'; export class BPMNGateway extends UMLElement { static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx index 96d5b1a7d..70a8e1712 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-complex-gateway-component.tsx @@ -22,24 +22,25 @@ export const BPMNComplexGatewayComponent: FunctionComponent = ({ element strokeColor={element.strokeColor} fillColor={element.fillColor} /> - - + + {element.name} 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 ade21ad50..aa76c6997 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 { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../../components/theme/themedComponents'; import { Multiline } from '../../../../utils/svg/multiline'; import { Props } from '../bpmn-gateway-component'; @@ -18,32 +18,35 @@ export const BPMNEventBasedGatewayComponent: FunctionComponent = ({ eleme r={Math.min(element.bounds.width, element.bounds.height) / 2 - 12} strokeColor={element.strokeColor} /> - - + + {element.name} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx index fdcec5f9f..d9521b2df 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-event-based-gateway-component.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from 'react'; -import {ThemedCircle, ThemedPath, ThemedPolyline} from '../../../../components/theme/themedComponents'; +import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../../components/theme/themedComponents'; import { Multiline } from '../../../../utils/svg/multiline'; import { Props } from '../bpmn-gateway-component'; @@ -18,26 +18,29 @@ export const BPMNExclusiveEventBasedGatewayComponent: FunctionComponent = r={Math.min(element.bounds.width, element.bounds.height) / 2 - 12} strokeColor={element.strokeColor} /> - + {element.name} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx index f7253906b..b1576ff4b 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-exclusive-gateway-component.tsx @@ -23,13 +23,14 @@ export const BPMNExclusiveGatewayComponent: FunctionComponent = ({ elemen fillColor={element.fillColor} /> {element.name} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx index b8a469eae..b78e33c18 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-inclusive-gateway-component.tsx @@ -19,13 +19,14 @@ export const BPMNInclusiveGatewayComponent: FunctionComponent = ({ elemen strokeColor={element.strokeColor} /> {element.name} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx index 724054759..24216d564 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-event-based-gateway-component.tsx @@ -18,24 +18,25 @@ export const BPMNParallelEventBasedGatewayComponent: FunctionComponent = r={Math.min(element.bounds.width, element.bounds.height) / 2 - 12} strokeColor={element.strokeColor} /> - - + + {element.name} diff --git a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx index 90cac5535..ccc2ab639 100644 --- a/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/gateways-components/bpmn-parallel-gateway-component.tsx @@ -23,13 +23,14 @@ export const BPMNParallelGatewayComponent: FunctionComponent = ({ element fillColor={element.fillColor} /> {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 faa2cb989..eb917a7f5 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 @@ -42,13 +42,14 @@ const BPMNIntermediateEventC: FunctionComponent = ({ element, interactive strokeColor={interactable && interactive ? theme.interactive.normal : element.fillColor} /> {element.name} diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx index d58f3b97f..3d9e48ad8 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from 'react'; import { Point } from '../../../utils/geometry/point'; import { BPMNSequenceFlow } from './bpmn-sequence-flow'; -import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; +import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) => { let position = { x: 0, y: 0 }; @@ -46,7 +46,19 @@ export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) return ( + + + = ({ element }) strokeColor={element.strokeColor} fillColor="none" strokeWidth={1} - markerEnd={`url(#marker-${element.id})`} + markerStart={element.flowType === 'message' ? `url(#marker-start-${element.id})` : undefined} + markerEnd={element.flowType !== 'association' ? `url(#marker-end-${element.id})` : undefined} + strokeDasharray={element.flowType !== 'sequence' ? 4 : undefined} /> {element.name} diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx index 59a828807..dae268c45 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx @@ -11,9 +11,12 @@ import { styled } from '../../../components/theme/styles'; import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository'; import { ExchangeIcon } from '../../../components/controls/icon/exchange'; import { UMLRelationshipRepository } from '../../../services/uml-relationship/uml-relationship-repository'; -import { BPMNSequenceFlow } from './bpmn-sequence-flow'; +import { BPMNFlowType, BPMNSequenceFlow } from './bpmn-sequence-flow'; import { ColorButton } from '../../../components/controls/color-button/color-button'; import { StylePane } from '../../../components/style-pane/style-pane'; +import { Dropdown } from '../../../components/controls/dropdown/dropdown'; +import { BPMNFlow } from '../../../typings'; +import { Divider } from '../../../components/controls/divider/divider'; interface OwnProps { element: BPMNSequenceFlow; @@ -72,6 +75,16 @@ class BPMNSequenceFlowUpdateComponent extends Component { + +
+ + {this.props.translate('packages.BPMN.BPMNSequenceFlow')} + {this.props.translate('packages.BPMN.BPMNMessageFlow')} + + {this.props.translate('packages.BPMN.BPMNAssociationFlow')} + + +
{ this.props.update(id, { name: value }); }; + /** + * Change the type of the gateway + * @param id The ID of the gateway whose type should be changed + */ + private changeFlowType = (id: string) => (value: string) => { + this.props.update(id, { flowType: value as BPMNFlowType }); + }; + private delete = (id: string) => () => { this.props.delete(id); }; diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts index e5c828059..3b21a14cc 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts @@ -1,17 +1,43 @@ -import { BPMNRelationshipType } from '..'; +import { BPMNElementType, BPMNRelationshipType } from '..'; import { IUMLRelationship, UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; import { ReachabilityGraphRelationshipType } from '../../uml-reachability-graph'; import { DeepPartial } from 'redux'; import { UMLRelationshipCenteredDescription } from '../../../services/uml-relationship/uml-relationship-centered-description'; +import { UMLElement } from '../../../services/uml-element/uml-element'; +import * as Apollon from '../../../typings'; +import { BPMNGatewayType } from '../bpmn-gateway/bpmn-gateway'; +import { BPMNFlow } from '../../../typings'; + +export type BPMNFlowType = 'sequence' | 'message' | 'association'; export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription { static features = { ...UMLRelationship.features }; + static defaultFlowType: BPMNFlowType = 'sequence'; type = BPMNRelationshipType.BPMNSequenceFlow; name = ''; - constructor(values?: DeepPartial) { + flowType: BPMNFlowType; + + constructor(values?: DeepPartial) { super(values); - this.name = (values && values.name) || this.name; + this.name = values?.name || this.name; + this.flowType = values?.flowType || BPMNSequenceFlow.defaultFlowType; + } + + serialize(children?: UMLElement[]): Apollon.BPMNFlow { + return { + ...super.serialize(), + type: this.type as keyof typeof BPMNRelationshipType, + flowType: this.flowType, + }; + } + + deserialize( + values: T & { flowType?: BPMNFlowType }, + children?: Apollon.UMLModelElement[], + ) { + super.deserialize(values, children); + this.flowType = values.flowType || BPMNSequenceFlow.defaultFlowType; } } 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 5e564d3db..f0c1b5910 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 @@ -36,13 +36,14 @@ const BPMNStartEventC: FunctionComponent = ({ element, interactive, inter strokeColor={interactable && interactive ? theme.interactive.normal : element.fillColor} /> {element.name} diff --git a/src/main/typings.ts b/src/main/typings.ts index 4ebf44572..f7db72edc 100644 --- a/src/main/typings.ts +++ b/src/main/typings.ts @@ -98,6 +98,10 @@ export type BPMNConversation = UMLElement & { conversationType: BPMNConversationType; }; +export type BPMNFlow = UMLRelationship & { + flowType: 'sequence' | 'message' | 'association'; +}; + export type UMLReachabilityGraphMarking = UMLElement & { isInitialMarking: boolean; }; From 7864c42b5f6e8292522bbc3c900198452d0be3be Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sat, 7 Oct 2023 14:19:39 +0200 Subject: [PATCH 07/14] Remove no longer needed imports --- .../bpmn/bpmn-annotation/bpmn-annotation-component.tsx | 2 +- .../bpmn/bpmn-conversation/bpmn-conversation-component.tsx | 2 +- .../packages/bpmn/bpmn-conversation/bpmn-conversation.ts | 1 - src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx | 2 -- .../bpmn-intermediate-event-component.tsx | 2 +- .../packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts | 6 ++---- 6 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx index b6cab47c0..3ad159e2d 100644 --- a/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx +++ b/src/main/packages/bpmn/bpmn-annotation/bpmn-annotation-component.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; import { BPMNAnnotation } from './bpmn-annotation'; -import { ThemedPath, ThemedPolyline, ThemedRect } from '../../../components/theme/themedComponents'; +import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; export const BPMNAnnotationComponent: FunctionComponent = ({ element }) => ( diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx index aa49c46cf..962fefb57 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation-component.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; import { BPMNConversation } from './bpmn-conversation'; -import { ThemedCircle, ThemedPolyline } from '../../../components/theme/themedComponents'; +import { ThemedPolyline } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; export const BPMNConversationComponent: FunctionComponent = ({ element }) => ( diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts index 854831fb1..e47f4a5a5 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts @@ -8,7 +8,6 @@ import { IBoundary } from '../../../utils/geometry/boundary'; import { DeepPartial } from 'redux'; import { assign } from '../../../utils/fx/assign'; import * as Apollon from '../../../typings'; -import { BPMNGatewayType } from '../bpmn-gateway/bpmn-gateway'; export type BPMNConversationType = 'default' | 'call'; 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 3c975bfa5..fc45d44bc 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx @@ -11,9 +11,7 @@ import { ModelState } from '../../../components/store/model-state'; import { styled } from '../../../components/theme/styles'; import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository'; import { BPMNGateway, BPMNGatewayType } from './bpmn-gateway'; -import { Switch } from '../../../components/controls/switch/switch'; import { Dropdown } from '../../../components/controls/dropdown/dropdown'; -import { UseCaseRelationshipType } from '../../uml-use-case-diagram'; interface OwnProps { element: BPMNGateway; 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 eb917a7f5..62c842cbc 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 @@ -5,7 +5,7 @@ import { ModelState } from '../../../components/store/model-state'; import { compose } from 'redux'; import { withTheme, withThemeProps } from '../../../components/theme/styles'; import { ApollonView } from '../../../services/editor/editor-types'; -import { ThemedCircle, ThemedCircleContrast } from '../../../components/theme/themedComponents'; +import { ThemedCircle } from '../../../components/theme/themedComponents'; import { Multiline } from '../../../utils/svg/multiline'; type OwnProps = { diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts index 3b21a14cc..fa6d29254 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts +++ b/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts @@ -1,11 +1,9 @@ -import { BPMNElementType, BPMNRelationshipType } from '..'; -import { IUMLRelationship, UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; -import { ReachabilityGraphRelationshipType } from '../../uml-reachability-graph'; +import { BPMNRelationshipType } from '..'; +import { UMLRelationship } from '../../../services/uml-relationship/uml-relationship'; import { DeepPartial } from 'redux'; import { UMLRelationshipCenteredDescription } from '../../../services/uml-relationship/uml-relationship-centered-description'; import { UMLElement } from '../../../services/uml-element/uml-element'; import * as Apollon from '../../../typings'; -import { BPMNGatewayType } from '../bpmn-gateway/bpmn-gateway'; import { BPMNFlow } from '../../../typings'; export type BPMNFlowType = 'sequence' | 'message' | 'association'; From e7f187a5f623191e4fbd7f7a491ae2ff7743acdb Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sat, 7 Oct 2023 14:47:56 +0200 Subject: [PATCH 08/14] Add snapshot test vor all new bpmn components --- .../bpmn/bpmn-end-event/bpmn-end-event.ts | 2 +- .../bpmn-flow-component.tsx} | 6 +- .../bpmn-flow-update.tsx} | 9 ++- .../bpmn-flow.ts} | 11 ++- .../bpmn-intermediate-event.ts | 2 +- .../bpmn/bpmn-start-event/bpmn-start-event.ts | 2 +- src/main/packages/bpmn/index.ts | 4 +- src/main/packages/components.ts | 12 ++-- src/main/packages/popups.ts | 8 +-- src/main/packages/uml-relationship-type.ts | 2 +- src/main/packages/uml-relationships.ts | 4 +- .../bpmn-annotation-component-test.tsx.snap | 43 ++++++++++++ .../bpmn-annotation-component-test.tsx | 24 +++++++ ...bpmn-call-activity-component-test.tsx.snap | 38 ++++++++++ .../bpmn-call-activity-component-test.tsx | 26 +++++++ .../bpmn-conversation-component-test.tsx.snap | 34 +++++++++ .../bpmn-conversation-component-test.tsx | 26 +++++++ .../bpmn-end-event-component-test.tsx.snap | 36 ++++++++++ .../bpmn-end-event-component-test.tsx | 26 +++++++ .../bpmn-flow-component-test.tsx.snap | 69 +++++++++++++++++++ .../bpmn-flow/bpmn-flow-component-test.tsx | 26 +++++++ .../bpmn-gateway-component-test.tsx.snap | 47 +++++++++++++ .../bpmn-gateway-component-test.tsx | 26 +++++++ ...intermediate-event-component-test.tsx.snap | 43 ++++++++++++ ...bpmn-intermediate-event-component-test.tsx | 26 +++++++ .../bpmn-start-event-component-test.tsx.snap | 35 ++++++++++ .../bpmn-start-event-component-test.tsx | 26 +++++++ .../bpmn-subprocess-component-test.tsx.snap | 38 ++++++++++ .../bpmn-subprocess-component-test.tsx | 26 +++++++ .../bpmn-task-component-test.tsx.snap | 37 ++++++++++ .../bpmn-task/bpmn-task-component-test.tsx | 26 +++++++ .../bpmn-transaction-component-test.tsx.snap | 48 +++++++++++++ .../bpmn-transaction-component-test.tsx | 26 +++++++ 33 files changed, 782 insertions(+), 32 deletions(-) rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow-component.tsx => bpmn-flow/bpmn-flow-component.tsx} (94%) rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow-update.tsx => bpmn-flow/bpmn-flow-update.tsx} (92%) rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow.ts => bpmn-flow/bpmn-flow.ts} (74%) create mode 100644 src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx create mode 100644 src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap create mode 100644 src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx 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 028b99de0..7318cfcf5 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 @@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; export class BPMNEndEvent extends UMLElement { - static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNEndEvent; diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx similarity index 94% rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx index 3d9e48ad8..9c7d6659f 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx +++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx @@ -1,9 +1,9 @@ import React, { FunctionComponent } from 'react'; import { Point } from '../../../utils/geometry/point'; -import { BPMNSequenceFlow } from './bpmn-sequence-flow'; +import { BPMNFlow } from './bpmn-flow'; import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; -export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) => { +export const BPMNFlowComponent: FunctionComponent = ({ element }) => { let position = { x: 0, y: 0 }; let direction: 'vertical' | 'horizontal' = 'vertical'; const path = element.path.map((point) => new Point(point.x, point.y)); @@ -86,5 +86,5 @@ export const BPMNSequenceFlowComponent: FunctionComponent = ({ element }) }; interface Props { - element: BPMNSequenceFlow; + element: BPMNFlow; } diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx similarity index 92% rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx index dae268c45..56156f504 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx +++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx @@ -11,15 +11,14 @@ import { styled } from '../../../components/theme/styles'; import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository'; import { ExchangeIcon } from '../../../components/controls/icon/exchange'; import { UMLRelationshipRepository } from '../../../services/uml-relationship/uml-relationship-repository'; -import { BPMNFlowType, BPMNSequenceFlow } from './bpmn-sequence-flow'; +import { BPMNFlowType, BPMNFlow } from './bpmn-flow'; import { ColorButton } from '../../../components/controls/color-button/color-button'; import { StylePane } from '../../../components/style-pane/style-pane'; import { Dropdown } from '../../../components/controls/dropdown/dropdown'; -import { BPMNFlow } from '../../../typings'; import { Divider } from '../../../components/controls/divider/divider'; interface OwnProps { - element: BPMNSequenceFlow; + element: BPMNFlow; } type StateProps = {}; @@ -49,7 +48,7 @@ const Flex = styled.div` type State = { colorOpen: boolean }; -class BPMNSequenceFlowUpdateComponent extends Component { +class BPMNFlowUpdateComponent extends Component { state = { colorOpen: false }; private toggleColor = () => { @@ -113,4 +112,4 @@ class BPMNSequenceFlowUpdateComponent extends Component { }; } -export const BPMNSequenceFlowUpdate = enhance(BPMNSequenceFlowUpdateComponent); +export const BPMNFlowUpdate = enhance(BPMNFlowUpdateComponent); diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts similarity index 74% rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts index fa6d29254..57a6ce20b 100644 --- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts +++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts @@ -4,23 +4,22 @@ import { DeepPartial } from 'redux'; import { UMLRelationshipCenteredDescription } from '../../../services/uml-relationship/uml-relationship-centered-description'; import { UMLElement } from '../../../services/uml-element/uml-element'; import * as Apollon from '../../../typings'; -import { BPMNFlow } from '../../../typings'; export type BPMNFlowType = 'sequence' | 'message' | 'association'; -export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription { +export class BPMNFlow extends UMLRelationshipCenteredDescription { static features = { ...UMLRelationship.features }; static defaultFlowType: BPMNFlowType = 'sequence'; - type = BPMNRelationshipType.BPMNSequenceFlow; + type = BPMNRelationshipType.BPMNFlow; name = ''; flowType: BPMNFlowType; - constructor(values?: DeepPartial) { + constructor(values?: DeepPartial) { super(values); this.name = values?.name || this.name; - this.flowType = values?.flowType || BPMNSequenceFlow.defaultFlowType; + this.flowType = values?.flowType || BPMNFlow.defaultFlowType; } serialize(children?: UMLElement[]): Apollon.BPMNFlow { @@ -36,6 +35,6 @@ export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription { children?: Apollon.UMLModelElement[], ) { super.deserialize(values, children); - this.flowType = values.flowType || BPMNSequenceFlow.defaultFlowType; + this.flowType = values.flowType || BPMNFlow.defaultFlowType; } } 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 4bfd10973..b375dfeaf 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 @@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; export class BPMNIntermediateEvent extends UMLElement { - static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNIntermediateEvent; 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 0ba007d4c..9c1aa60f5 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 @@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary'; import { UMLElementType } from '../../uml-element-type'; export class BPMNStartEvent extends UMLElement { - static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow]; + static supportedRelationships = [BPMNRelationshipType.BPMNFlow]; static features: UMLElementFeatures = { ...UMLElement.features, resizable: false }; type: UMLElementType = BPMNElementType.BPMNStartEvent; diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts index adf05a11e..561b81495 100644 --- a/src/main/packages/bpmn/index.ts +++ b/src/main/packages/bpmn/index.ts @@ -1,4 +1,4 @@ -import { BPMNSequenceFlow } from './bpmn-squence-flow/bpmn-sequence-flow'; +import { BPMNFlow } from './bpmn-flow/bpmn-flow'; export const BPMNElementType = { BPMNTask: 'BPMNTask', @@ -14,5 +14,5 @@ export const BPMNElementType = { } as const; export const BPMNRelationshipType = { - BPMNSequenceFlow: 'BPMNSequenceFlow', + BPMNFlow: 'BPMNFlow', } as const; diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 12955263b..22526bd9d 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -47,17 +47,17 @@ import { FlowchartDecisionComponent } from './flowchart/flowchart-decision/flowc import { FlowchartFunctionCallComponent } from './flowchart/flowchart-function-call/flowchart-function-call-component'; import { FlowchartInputOutputComponent } from './flowchart/flowchart-input-output/flowchart-input-output-component'; import { ColorLegendComponent } from './common/color-legend/color-legend-component'; -import { BPMNSequenceFlowComponent } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-component'; +import { BPMNFlowComponent } from './bpmn/bpmn-flow/bpmn-flow-component'; import { BPMNTaskComponent } from './bpmn/bpmn-task/bpmn-task-component'; import { BPMNSubprocessComponent } from './bpmn/bpmn-subprocess/bpmn-subprocess-component'; import { BPMNStartEventComponent } from './bpmn/bpmn-start-event/bpmn-start-event-component'; import { BPMNIntermediateEventComponent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component'; import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bpmn-end-event-component'; 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 { 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'; export const Components: { [key in UMLElementType | UMLRelationshipType]: @@ -138,5 +138,5 @@ export const Components: { [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcComponent, [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLinkComponent, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineComponent, - [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowComponent, + [UMLRelationshipType.BPMNFlow]: BPMNFlowComponent, }; diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts index f33e514b6..d8269d9da 100644 --- a/src/main/packages/popups.ts +++ b/src/main/packages/popups.ts @@ -26,9 +26,9 @@ import { FlowchartFunctionCallUpdate } from './flowchart/flowchart-function-call import { FlowchartInputOutputUpdate } from './flowchart/flowchart-input-output/flowchart-input-output-update'; import { FlowchartFlowlineUpdate } from './flowchart/flowchart-flowline/flowchart-flowline-update'; import { ColorLegendUpdate } from './common/color-legend/color-legend-update'; -import { BPMNSequenceFlowUpdate } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-update'; -import {BPMNGatewayUpdate} from './bpmn/bpmn-gateway/bpmn-gateway-update'; -import {BPMNConversationUpdate} from './bpmn/bpmn-conversation/bpmn-conversation-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'; export type Popups = { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null }; export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null } = { @@ -108,5 +108,5 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcUpdate, [UMLRelationshipType.SyntaxTreeLink]: DefaultRelationshipPopup, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineUpdate, - [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowUpdate, + [UMLRelationshipType.BPMNFlow]: BPMNFlowUpdate, }; diff --git a/src/main/packages/uml-relationship-type.ts b/src/main/packages/uml-relationship-type.ts index f3ec5ece7..555e7811d 100644 --- a/src/main/packages/uml-relationship-type.ts +++ b/src/main/packages/uml-relationship-type.ts @@ -53,5 +53,5 @@ export const DefaultUMLRelationshipType: { [key in UMLDiagramType]: UMLRelations [UMLDiagramType.ReachabilityGraph]: ReachabilityGraphRelationshipType.ReachabilityGraphArc, [UMLDiagramType.SyntaxTree]: SyntaxTreeRelationshipType.SyntaxTreeLink, [UMLDiagramType.Flowchart]: FlowchartRelationshipType.FlowchartFlowline, - [UMLDiagramType.BPMN]: BPMNRelationshipType.BPMNSequenceFlow, + [UMLDiagramType.BPMN]: BPMNRelationshipType.BPMNFlow, }; diff --git a/src/main/packages/uml-relationships.ts b/src/main/packages/uml-relationships.ts index 71e1edf85..18e9fecda 100644 --- a/src/main/packages/uml-relationships.ts +++ b/src/main/packages/uml-relationships.ts @@ -25,7 +25,7 @@ import { UMLPetriNetArc } from './uml-petri-net/uml-petri-net-arc/uml-petri-net- import { UMLReachabilityGraphArc } from './uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc'; import { SyntaxTreeLink } from './syntax-tree/syntax-tree-link/syntax-tree-link'; import { FlowchartFlowline } from './flowchart/flowchart-flowline/flowchart-flowline'; -import { BPMNSequenceFlow } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow'; +import { BPMNFlow } from './bpmn/bpmn-flow/bpmn-flow'; type UMLRelationships = { [key in UMLRelationshipType]: new (values?: IUMLRelationship) => UMLRelationship }; @@ -55,5 +55,5 @@ export const UMLRelationships = { [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArc, [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLink, [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowline, - [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlow, + [UMLRelationshipType.BPMNFlow]: BPMNFlow, }; diff --git a/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap new file mode 100644 index 000000000..15dbc7af4 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-annotation-component 1`] = ` + +
+ + + + + + + Annotation + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx new file mode 100644 index 000000000..3b147d685 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx @@ -0,0 +1,24 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-annotation-component', () => { + const annotation: BPMNAnnotation = new BPMNAnnotation({ name: 'Annotation' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(annotation.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap new file mode 100644 index 000000000..f4aba5d8a --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-call-activity-component 1`] = ` + +
+ + + + + + Call Activity + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx new file mode 100644 index 000000000..f5380daa2 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNCallActivity } from '../../../../../main/packages/bpmn/bpmn-call-activity/bpmn-call-activity'; +import { BPMNCallActivityComponent } from '../../../../../main/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-call-activity-component', () => { + const callActivity: BPMNCallActivity = new BPMNCallActivity({ name: 'Call Activity' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(callActivity.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); 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 new file mode 100644 index 000000000..cfc3bbfe2 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap @@ -0,0 +1,34 @@ +// 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 new file mode 100644 index 000000000..c8ea06c93 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNConversationComponent } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation-component'; +import { BPMNConversation } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +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(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap new file mode 100644 index 000000000..41345541b --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-end-event-component 1`] = ` + +
+ + + + + + End + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx new file mode 100644 index 000000000..f7b5f1b57 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNEndEventComponent } from '../../../../../main/packages/bpmn/bpmn-end-event/bpmn-end-event-component'; +import { BPMNEndEvent } from '../../../../../main/packages/bpmn/bpmn-end-event/bpmn-end-event'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-end-event-component', () => { + const endEvent: BPMNEndEvent = new BPMNEndEvent({ name: 'End' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(endEvent.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap new file mode 100644 index 000000000..b04755b94 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-flow-component 1`] = ` + +
+ + + + + + + + + + + Sequence + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx new file mode 100644 index 000000000..049fb22d0 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNFlow } from '../../../../../main/packages/bpmn/bpmn-flow/bpmn-flow'; +import { BPMNFlowComponent } from '../../../../../main/packages/bpmn/bpmn-flow/bpmn-flow-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-flow-component', () => { + const flow: BPMNFlow = new BPMNFlow({ id: '1', name: 'Sequence' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(flow.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap new file mode 100644 index 000000000..d37dcf9a5 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-gateway-component 1`] = ` + +
+ + + + + + + + + Gateway + + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx new file mode 100644 index 000000000..6da9e308e --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNGateway } from '../../../../../main/packages/bpmn/bpmn-gateway/bpmn-gateway'; +import { BPMNGatewayComponent } from '../../../../../main/packages/bpmn/bpmn-gateway/bpmn-gateway-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-gateway-component', () => { + const gateway: BPMNGateway = new BPMNGateway({ name: 'Gateway' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(gateway.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap new file mode 100644 index 000000000..bdbb19d4f --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-intermediate-event-component 1`] = ` + +
+ + + + + + + Event + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx new file mode 100644 index 000000000..07db25765 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNIntermediateEvent } from '../../../../../main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; +import { BPMNIntermediateEventComponent } from '../../../../../main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-intermediate-event-component', () => { + const intermediateEvent: BPMNIntermediateEvent = new BPMNIntermediateEvent({ name: 'Event' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(intermediateEvent.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap new file mode 100644 index 000000000..808137bfc --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-start-event-component 1`] = ` + +
+ + + + + + Start + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx new file mode 100644 index 000000000..53a1589d3 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNStartEvent } from '../../../../../main/packages/bpmn/bpmn-start-event/bpmn-start-event'; +import { BPMNStartEventComponent } from '../../../../../main/packages/bpmn/bpmn-start-event/bpmn-start-event-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-start-event-component', () => { + const startEvent: BPMNStartEvent = new BPMNStartEvent({ name: 'Start' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(startEvent.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap new file mode 100644 index 000000000..bf892c3cc --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-subprocess-component 1`] = ` + +
+ + + + + + SyntaxTreeTerminal + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx new file mode 100644 index 000000000..1d325f3e9 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNSubprocess } from '../../../../../main/packages/bpmn/bpmn-subprocess/bpmn-subprocess'; +import { BPMNSubprocessComponent } from '../../../../../main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-subprocess-component', () => { + const subprocess: BPMNSubprocess = new BPMNSubprocess({ name: 'SyntaxTreeTerminal' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(subprocess.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap new file mode 100644 index 000000000..de09db07a --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-task-component 1`] = ` + +
+ + + + + + Task + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx new file mode 100644 index 000000000..23883fbaf --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNTask } from '../../../../../main/packages/bpmn/bpmn-task/bpmn-task'; +import { BPMNTaskComponent } from '../../../../../main/packages/bpmn/bpmn-task/bpmn-task-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-task-component', () => { + const task: BPMNTask = new BPMNTask({ name: 'Task' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(task.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); diff --git a/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap new file mode 100644 index 000000000..003470487 --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render the bpmn-transaction-component 1`] = ` + +
+ + + + + + + Transaction + + + + +
+ +`; diff --git a/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx new file mode 100644 index 000000000..c963fb01b --- /dev/null +++ b/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx @@ -0,0 +1,26 @@ +import { wrappedRender } from '../../../test-utils/render'; +import * as React from 'react'; +import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal'; +import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component'; +import { Multiline } from '../../../../../main/utils/svg/multiline'; +import { CSSProperties } from 'react'; +import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation'; +import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component'; +import { BPMNTransaction } from '../../../../../main/packages/bpmn/bpmn-transaction/bpmn-transaction'; +import { BPMNTransactionComponent } from '../../../../../main/packages/bpmn/bpmn-transaction/bpmn-transaction-component'; + +// override getStringWidth, because it uses by jsdom unsupported SVGElement methods +Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => { + return 0; +}; + +it('render the bpmn-transaction-component', () => { + const transaction: BPMNTransaction = new BPMNTransaction({ name: 'Transaction' }); + const { getByText, baseElement } = wrappedRender( + + + , + ); + expect(getByText(transaction.name)).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); +}); From ffe50bec67888ea6e2814a18cc345f012ae750b9 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sat, 14 Oct 2023 17:43:03 +0900 Subject: [PATCH 09/14] Update formatting --- src/main/components/connectable/connection-preview.tsx | 7 +++---- src/main/components/uml-element/movable/movable.tsx | 3 +-- src/main/packages/uml-elements.ts | 8 ++++---- src/main/services/editor/editor-repository.ts | 2 +- .../uml-relationship-centered-description.ts | 1 - src/main/typings.ts | 2 +- src/main/utils/clamp.ts | 2 +- 7 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/main/components/connectable/connection-preview.tsx b/src/main/components/connectable/connection-preview.tsx index 42a704143..54dc8a0db 100644 --- a/src/main/components/connectable/connection-preview.tsx +++ b/src/main/components/connectable/connection-preview.tsx @@ -96,10 +96,9 @@ class Preview extends Component { if (event instanceof PointerEvent) { position = new Point(event.clientX - offset.x, event.clientY - offset.y).scale(1 / zoomFactor); } else { - position = new Point( - event.targetTouches[0].clientX - offset.x, - event.targetTouches[0].clientY - offset.y, - ).scale(1 / zoomFactor); + position = new Point(event.targetTouches[0].clientX - offset.x, event.targetTouches[0].clientY - offset.y).scale( + 1 / zoomFactor, + ); } this.setState({ position }); diff --git a/src/main/components/uml-element/movable/movable.tsx b/src/main/components/uml-element/movable/movable.tsx index d0959e5b5..bc67f38c6 100644 --- a/src/main/components/uml-element/movable/movable.tsx +++ b/src/main/components/uml-element/movable/movable.tsx @@ -51,8 +51,7 @@ export const movable = ( moveWindow: { x: number; y: number } = { x: 0, y: 0 }; move = (x: number, y: number) => { - - const {zoomFactor = 1} = this.props; + const { zoomFactor = 1 } = this.props; x = Math.round(x / 10) * 10; y = Math.round(y / 10) * 10; diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts index 0728e43b2..f6c8cc6be 100644 --- a/src/main/packages/uml-elements.ts +++ b/src/main/packages/uml-elements.ts @@ -44,10 +44,10 @@ import { BPMNStartEvent } from './bpmn/bpmn-start-event/bpmn-start-event'; import { BPMNIntermediateEvent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event'; import { BPMNEndEvent } from './bpmn/bpmn-end-event/bpmn-end-event'; 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 { 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'; export const UMLElements = { [UMLElementType.Package]: UMLClassPackage, diff --git a/src/main/services/editor/editor-repository.ts b/src/main/services/editor/editor-repository.ts index 880b6dacd..274f9826b 100644 --- a/src/main/services/editor/editor-repository.ts +++ b/src/main/services/editor/editor-repository.ts @@ -1,4 +1,4 @@ -import {ApollonView, ChangeViewAction, ChangeZoomFactorAction, EditorActionTypes} from './editor-types'; +import { ApollonView, ChangeViewAction, ChangeZoomFactorAction, EditorActionTypes } from './editor-types'; export class EditorRepository { static changeView = (view: ApollonView): ChangeViewAction => ({ diff --git a/src/main/services/uml-relationship/uml-relationship-centered-description.ts b/src/main/services/uml-relationship/uml-relationship-centered-description.ts index 563e8ea7f..5159242b9 100644 --- a/src/main/services/uml-relationship/uml-relationship-centered-description.ts +++ b/src/main/services/uml-relationship/uml-relationship-centered-description.ts @@ -1,4 +1,3 @@ - import { UMLRelationshipType } from '../../packages/uml-relationship-type'; import { IPath } from '../../utils/geometry/path'; import { ILayer } from '../layouter/layer'; diff --git a/src/main/typings.ts b/src/main/typings.ts index f7db72edc..3f9d9fb39 100644 --- a/src/main/typings.ts +++ b/src/main/typings.ts @@ -9,7 +9,7 @@ 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 { BPMNConversationType } from './packages/bpmn/bpmn-conversation/bpmn-conversation'; export { UMLDiagramType, UMLElementType, UMLRelationshipType, ApollonMode, Locale }; export type { Styles }; diff --git a/src/main/utils/clamp.ts b/src/main/utils/clamp.ts index 1c982590c..844c8f474 100644 --- a/src/main/utils/clamp.ts +++ b/src/main/utils/clamp.ts @@ -6,4 +6,4 @@ */ export const clamp = (value: number, min: number, max: number): number => { return Math.max(min, Math.min(value, max)); -}; \ No newline at end of file +}; From 0953cd65c7d04ffe94d5b41fd47b0304d0f81bb0 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sun, 15 Oct 2023 22:33:43 +0900 Subject: [PATCH 10/14] Remove DS Store file --- .gitignore | 3 ++- src/.DS_Store | Bin 6148 -> 0 bytes 2 files changed, 2 insertions(+), 1 deletion(-) delete mode 100644 src/.DS_Store diff --git a/.gitignore b/.gitignore index 541fa922a..f697294d2 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ dist/ /coverage/ /docs/build/ cypress -test-report.html \ No newline at end of file +test-report.html +**/.DS_Store diff --git a/src/.DS_Store b/src/.DS_Store deleted file mode 100644 index b9c1928dd311ae3e5063feb81d4d730f577f863d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKO>fgc5S>jEx>1Fc14unu;u@8NQa;p+Nz0*^9x#GKLBS?bv2eXn>@*TlB%jNV z;o4u)ztg_i-9&9luP8z@((K!vomqR|T00&hQoYHbOVlDF4P~q~(fmbtp7oy8yrltD zyv9*xz9*SUFy;kC)}H}ByE>gwOey6n=l2eCJJ(k1MwWibv>5qwzD!10T9lp6m8xyj z8;>^irry$DqaS7(m2o*Kdhz&#M<0#Jl0`pGKBdEHzxCw6OAO^J2j#*sAA0}Fp$jKvpNw_;Jn!G7<)af&YpDRX>ald)SiCt@k#^xi)})gR-z+4 awE}y<9bo9OatI4VegrHH(g*|plz|&Q{B92b From b1a387e7c80ce27ad0f6a09804869378e870cb1b Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sun, 15 Oct 2023 22:37:52 +0900 Subject: [PATCH 11/14] Delete .DS_Store --- .DS_Store | Bin 8196 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 7e9b50a957dff45a60de234cc7b81169581e3d42..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHM%Wl&^6ur}g#!=cTm8g^rk|nk!w3PA?nN0EnmXFu!3`Erd4LrEZ88V&PX$NY@c(-b9~2>>kyG>jJlgd6(aIb*_KOat|@$- z>r7eDXVzc^_(X@aPp{}DRjD(Bb|;(yP64NYQ@|_KR%&?$ycbX@lt4qMZ9 zqO78mP;?S{WT7(@Ax8(#mv9m_WnJqOa0<*Sz`6Sp?I3SIq`Hy6_o=@hC7mEj0$_Mq z)lsXzWkHXqfGqzL4QNO`N-4F_-!1g2iI(385{ju$Asyi;vptAAmWMobDS;PjB=Ob4 zmEbP|GN3kW6|C#L|FT#sbRy@G&D`0EJ>tTV#m!-ykOE5q*6W+0*K_E+Lwoo_(xg2L z&3a9vm!M68d+$+;&SY?{Mh2LYSX+$JjoF>o<8T=KI#WlE{vNfD=BDXIu0whW7w-d4AJ)iWll}oiLy9@;ywgO8C>HO I_@@f|0RzcTbN~PV From 8b4d2a280e6994b231e16c6240008d8550d2d586 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sun, 15 Oct 2023 22:49:29 +0900 Subject: [PATCH 12/14] Add missing return types --- src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts | 2 +- src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts | 2 +- src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts index e47f4a5a5..d9b6573dc 100644 --- a/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts +++ b/src/main/packages/bpmn/bpmn-conversation/bpmn-conversation.ts @@ -36,7 +36,7 @@ export class BPMNConversation extends UMLElement { deserialize( values: T & { conversationType?: BPMNConversationType }, children?: Apollon.UMLModelElement[], - ) { + ): void { super.deserialize(values, children); this.conversationType = values.conversationType || BPMNConversation.defaultConversationType; } diff --git a/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts index 57a6ce20b..23dc9f7d9 100644 --- a/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts +++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts @@ -33,7 +33,7 @@ export class BPMNFlow extends UMLRelationshipCenteredDescription { deserialize( values: T & { flowType?: BPMNFlowType }, children?: Apollon.UMLModelElement[], - ) { + ): void { super.deserialize(values, children); this.flowType = values.flowType || BPMNFlow.defaultFlowType; } diff --git a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts index 10850281f..c6280c0ec 100644 --- a/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts +++ b/src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts @@ -43,7 +43,7 @@ export class BPMNGateway extends UMLElement { deserialize( values: T & { gatewayType?: BPMNGatewayType }, children?: Apollon.UMLModelElement[], - ) { + ): void { super.deserialize(values, children); this.gatewayType = values.gatewayType || BPMNGateway.defaultGatewayType; } From 360e5f657832ecb384116208b27e742ff620c9c0 Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Sun, 15 Oct 2023 23:17:59 +0900 Subject: [PATCH 13/14] Remove scale property --- src/main/components/create-pane/create-pane.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx index 7aa7cf651..6369944f3 100644 --- a/src/main/components/create-pane/create-pane.tsx +++ b/src/main/components/create-pane/create-pane.tsx @@ -81,7 +81,7 @@ const getInitialState = ({ type, canvas, translate, colorEnabled }: Props) => { previews.push(...composeFlowchartPreview(canvas, translate)); break; case UMLDiagramType.BPMN: - previews.push(...composeBPMNPreview(canvas, translate, scale)); + previews.push(...composeBPMNPreview(canvas, translate)); break; } if (colorEnabled) { From 00df788f16c51971a974acf4c9e97cf945ea602c Mon Sep 17 00:00:00 2001 From: Stephan Krusche Date: Sun, 15 Oct 2023 21:40:11 +0200 Subject: [PATCH 14/14] add beta for diagram type --- public/index.html.ejs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html.ejs b/public/index.html.ejs index 66c3c5c77..446a166c5 100644 --- a/public/index.html.ejs +++ b/public/index.html.ejs @@ -36,7 +36,7 @@ - + @@ -89,4 +89,4 @@ - \ No newline at end of file +