diff --git a/src/assets/default-flow.svg b/src/assets/default-flow.svg new file mode 100644 index 000000000..da950ef7b --- /dev/null +++ b/src/assets/default-flow.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/src/components/crown/crownButtons/defaultFlowButton.vue b/src/components/crown/crownButtons/defaultFlowButton.vue new file mode 100644 index 000000000..26e29d21f --- /dev/null +++ b/src/components/crown/crownButtons/defaultFlowButton.vue @@ -0,0 +1,32 @@ + + + diff --git a/src/components/crown/crownConfig/crownConfig.vue b/src/components/crown/crownConfig/crownConfig.vue index 8e6e4d340..6dda2880f 100644 --- a/src/components/crown/crownConfig/crownConfig.vue +++ b/src/components/crown/crownConfig/crownConfig.vue @@ -26,6 +26,11 @@ @toggle-crown-state="showCrown = $event" /> + + @@ -250,6 +251,13 @@ export default { }, }, methods: { + toggleDefaultFlow(flow) { + const source = flow.definition.sourceRef; + if (source.default && source.default.id === flow.id) { + flow = null; + } + source.set('default', flow); + }, copyElement(node, copyCount) { const clonedNode = node.clone(this.nodeRegistry, this.moddle, this.$t); const yOffset = (node.diagram.bounds.height + 30) * copyCount; diff --git a/src/components/nodes/gateway/gateway.vue b/src/components/nodes/gateway/gateway.vue index 391ca817a..37ae15679 100644 --- a/src/components/nodes/gateway/gateway.vue +++ b/src/components/nodes/gateway/gateway.vue @@ -42,6 +42,11 @@ export default { 'isRendering', ], mixins: [highlightConfig, portsConfig, hideLabelOnDrag], + created() { + const flow = this.node.definition.default || null; + delete this.node.definition.default; + this.$set(this.node.definition, 'default', flow); + }, data() { return { shape: null, diff --git a/src/components/nodes/node.js b/src/components/nodes/node.js index d32a288ac..2e8c0e109 100644 --- a/src/components/nodes/node.js +++ b/src/components/nodes/node.js @@ -25,6 +25,15 @@ export default class Node { return types.includes(this.definition.$type); } + canBeDefaultFlow() { + const validSources = [ + 'bpmn:ExclusiveGateway', + 'bpmn:InclusiveGateway', + ]; + return this.definition.$type === 'bpmn:SequenceFlow' + && validSources.includes(this.definition.sourceRef.$type); + } + isType(type) { return this.type === type; } diff --git a/src/components/nodes/sequenceFlow/sequenceFlow.vue b/src/components/nodes/sequenceFlow/sequenceFlow.vue index 180f4881c..1d5fda8c8 100644 --- a/src/components/nodes/sequenceFlow/sequenceFlow.vue +++ b/src/components/nodes/sequenceFlow/sequenceFlow.vue @@ -77,11 +77,30 @@ export default { if (newNameLabel !== this.nameLabel) { this.nameLabel = newNameLabel; } + this.setDefaultMarker(this.isDefaultFlow()); + }, + deep: true, + }, + 'node.definition.sourceRef': { + handler() { + this.setDefaultMarker(this.isDefaultFlow()); }, deep: true, }, }, methods: { + setDefaultMarker(value) { + this.shape.attr('line', { + sourceMarker: { + 'stroke-width': value ? 2 : 0, + }, + }); + }, + isDefaultFlow() { + return this.node.definition.sourceRef + && this.node.definition.sourceRef.default + && this.node.definition.sourceRef.default.id === this.node.definition.id; + }, updateRouter() { this.shape.router('orthogonal', { padding: 1 }); }, @@ -137,11 +156,21 @@ export default { position: namePosition, }]); }, + createDefaultFlowMarker() { + this.shape.attr('line', { + sourceMarker: { + 'type': 'polyline', + 'stroke-width': this.isDefaultFlow() ? 2 : 0, + points: '2,6 6,-6', + }, + }); + }, }, mounted() { this.shape = new shapes.standard.Link(); this.shape.connector('rounded', { radius: 5 }); this.createLabel(); + this.createDefaultFlowMarker(); this.shape.addTo(this.graph); this.shape.component = this;