diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 4e4b0f74d..b1282fbea 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -211,35 +211,44 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg, sequenceInd const g = elem.append('g') const txtCenter = startx + (stopx - startx) / 2 - const textElem = g.append('text') // text label for the x axis + let textElem + let counterBreaklines = 0 + let breaklineOffset = 17 + const breaklines = msg.message.split(//ig) + for (const breakline of breaklines) { + textElem = g.append('text') // text label for the x axis .attr('x', txtCenter) - .attr('y', verticalPos - 7) + .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset) .style('text-anchor', 'middle') .attr('class', 'messageText') - .text(msg.message) + .text(breakline.trim()) + counterBreaklines++ + } + const offsetLineCounter = counterBreaklines-1 + const totalOffset = offsetLineCounter * breaklineOffset let textWidth = (textElem._groups || textElem)[0][0].getBBox().width let line if (startx === stopx) { if (conf.rightAngles) { - line = g.append('path').attr('d', `M ${startx},${verticalPos} H ${startx + (conf.width / 2)} V ${verticalPos + 25} H ${startx}`) + line = g.append('path').attr('d', `M ${startx},${verticalPos + totalOffset} H ${startx + (conf.width / 2)} V ${verticalPos + 25 + totalOffset} H ${startx}`) } else { line = g.append('path') - .attr('d', 'M ' + startx + ',' + verticalPos + ' C ' + (startx + 60) + ',' + (verticalPos - 10) + ' ' + (startx + 60) + ',' + - (verticalPos + 30) + ' ' + startx + ',' + (verticalPos + 20)) + .attr('d', 'M ' + startx + ',' + (verticalPos + totalOffset) + ' C ' + (startx + 60) + ',' + (verticalPos - 10 + totalOffset) + ' ' + (startx + 60) + ',' + + (verticalPos + 30 + totalOffset) + ' ' + startx + ',' + (verticalPos + 20 + totalOffset)) } - bounds.bumpVerticalPos(30) + bounds.bumpVerticalPos(30+totalOffset) const dx = Math.max(textWidth / 2, 100) - bounds.insert(startx - dx, bounds.getVerticalPos() - 10, stopx + dx, bounds.getVerticalPos()) + bounds.insert(startx - dx, bounds.getVerticalPos() - 10 + totalOffset, stopx + dx, bounds.getVerticalPos() + totalOffset) } else { line = g.append('line') line.attr('x1', startx) line.attr('y1', verticalPos) line.attr('x2', stopx) line.attr('y2', verticalPos) - bounds.insert(startx, bounds.getVerticalPos() - 10, stopx, bounds.getVerticalPos()) + bounds.insert(startx, bounds.getVerticalPos() - 10 + totalOffset, stopx, bounds.getVerticalPos()) + totalOffset } // Make an SVG Container // Draw the line