Implements default gateway flow

src/components/crown/crownButtons/defaultFlowButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <crown-button
+    v-if="node.canBeDefaultFlow()"
+    :title="$t('Set as Default Flow')"
+    v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
+    aria-label="Default Flow"
+    data-test="default-flow"
+    role="menuitem"
+    :src="icon"
+    @click="click"
+  />
+</template>
+
+<script>
+import CrownButton from '@/components/crown/crownButtons/crownButton';
+import icon from '@/assets/default-flow.svg';
+
+export default {
+  components: { CrownButton },
+  props: ['node'],
+  data() {
+    return {
+      icon,
+    };
+  },
+  methods: {
+    click() {
+      this.$emit('default-flow', this.node);
+    },
+  },
+};
+</script>

src/components/crown/crownConfig/crownConfig.vue

@@ -26,6 +26,11 @@
       @toggle-crown-state="showCrown = $event"
     />
 
+    <default-flow
+      :node="node"
+      v-on="$listeners"
+    />
+
     <crown-dropdowns
       :dropdown-data="dropdownData"
       :boundary-event-dropdown-data="boundaryEventDropdownData"
@@ -72,6 +77,7 @@ import SequenceFlowButton from '@/components/crown/crownButtons/sequenceFlowButt
 import AssociationFlowButton from '@/components/crown/crownButtons/associationFlowButton';
 import CopyButton from '@/components/crown/crownButtons/copyButton.vue';
 import CrownDropdowns from '@/components/crown/crownButtons/crownDropdowns';
+import DefaultFlow from '@/components/crown/crownButtons/defaultFlowButton.vue';
 import poolLaneCrownConfig from '@/mixins/poolLaneCrownConfig';
 import { removeFlows } from '@/components/crown/utils.js';
 import pull from 'lodash/pull';
@@ -87,6 +93,7 @@ export default {
     SequenceFlowButton,
     AssociationFlowButton,
     CopyButton,
+    DefaultFlow,
   },
   props: {
     highlighted: Boolean,

src/components/modeler/Modeler.vue

@@ -96,6 +96,7 @@
         @setTooltip="tooltipTarget = $event"
         @replace-node="replaceNode"
         @copy-element="copyElement"
+        @default-flow="toggleDefaultFlow"
       />
     </b-row>
   </span>
@@ -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;

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,

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;
   }

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;