diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index f11dcd2fd..69bfb4b7a 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -451,6 +451,7 @@ export default { ], validPreviewElements, centered: false, + currentStageModel: null, }; }, watch: { @@ -782,7 +783,13 @@ export default { this.generateAssets(); } }); - + + this.paperManager.paper.on('link:pointerclick', (linkView) => { + this.currentStageModel = linkView.model; + }); + }, + getCurrentStageModelComponent() { + return this.currentStageModel.component; }, registerCustomNodes() { diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 2ad3c4028..00c21c7d4 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -437,10 +437,80 @@ export default { this.listeningToMouseup = false; } }, + /** + * This function creates a label for a stage. + * @param {string} string - The text to display in the label. + * @returns {Object} The label object. + */ + stageLabel(string, title) { + const label = { + customType: 'stage', + position: { + distance: 0.5, + offset: { x: 0, y: 0 }, + }, + attrs: { + text: { + text: string, + fill: '#ffffff', + fontWeight: 'bold', + fontSize: 12, + }, + rect: { + fill: '#788793', + stroke: '#555555', + strokeWidth: 1, + rx: 3, + ry: 3, + ref: 'text', // Relate rect to text + refWidth: '250%', // Expand width in relation to text + refHeight: '100%', // Expand height in relation to text + refX: '-70%', // Move rect slightly to the left (horizontal padding) + refY: '0%', // Move rect slightly upward (vertical padding) + title: `${this.$t('Stage:')} ${title}`, + }, + }, + }; + return label; + }, + /** + * This function sets the stage label for a link. + * @returns {void} + */ + setStageLabel() { + if (!(this.node.definition?.config)) { + return; + } + const config = JSON.parse(this.node.definition.config); + if (!(config?.stage?.id)) { + return; + } + const label = this.stageLabel(config.stage.order, config.stage.name); + this.$nextTick(()=> { + this.removeStageLabels(); + const linkView = this.shape.findView(this.paper); + const labels = linkView.model.get('labels') || []; + linkView.model.set('labels', [...labels, label]); + }); + }, + /** + * This function removes the stage labels for a link. + * @returns {void} + */ + removeStageLabels() { + const linkView = this.shape.findView(this.paper); + const labels = linkView.model.get('labels') || []; + for (let i = labels.length - 1; i >= 0; i--) { + if (labels[i].customType === 'stage') { + linkView.model.removeLabel(i); + } + } + }, }, created() { this.updateWaypoints = debounce(this.updateWaypoints, 100); this.emitSave.bind(this); + this.setStageLabel(); }, async mounted() { await this.$nextTick();