diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index e1912a307..2625d19c1 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -2,8 +2,8 @@ import { imgSnapshotTest } from '../../helpers/util'; -context('Aliasing', () => { - it('should render a simple sequence diagrams', () => { +context('Sequence diagram', () => { + it('should render a simple sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram @@ -32,6 +32,23 @@ context('Aliasing', () => { {} ); }); + it('should handle different line breaks', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant 1 as multiline
using #lt;br#gt; + participant 2 as multiline
using #lt;br/#gt; + participant 3 as multiline
using #lt;br /#gt; + 1->>2: multiline
using #lt;br#gt; + note right of 2: multiline
using #lt;br#gt; + 2->>3: multiline
using #lt;br/#gt; + note right of 3: multiline
using #lt;br/#gt; + 3->>1: multiline
using #lt;br /#gt; + note right of 1: multiline
using #lt;br /#gt; + `, + {} + ); + }); context('background rects', () => { it('should render a single and nested rects', () => { imgSnapshotTest( diff --git a/dist/index.html b/dist/index.html index 8355c23b6..0b3db789f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -356,6 +356,18 @@ and Alice -->> John: Parallel message 2 end +
+ sequenceDiagram + participant 1 as multiline
using #lt;br#gt; + participant 2 as multiline
using #lt;br/#gt; + participant 3 as multiline
using #lt;br /#gt; + 1->>2: multiline
using #lt;br#gt; + note right of 2: multiline
using #lt;br#gt; + 2->>3: multiline
using #lt;br/#gt; + note right of 3: multiline
using #lt;br/#gt; + 3->>1: multiline
using #lt;br /#gt; + note right of 1: multiline
using #lt;br /#gt; +

diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js index 398db8e6e..90875948b 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -333,6 +333,34 @@ describe('when parsing a sequenceDiagram', function() { expect(messages[0].from).toBe('Alice'); expect(messages[2].from).toBe('John'); }); + it('it should handle different line breaks', function() { + const str = + 'sequenceDiagram\n' + + 'participant 1 as multiline
text\n' + + 'participant 2 as multiline
text\n' + + 'participant 3 as multiline
text\n' + + '1->>2: multiline
text\n' + + 'note right of 2: multiline
text\n' + + '2->>3: multiline
text\n' + + 'note right of 3: multiline
text\n' + + '3->>1: multiline
text\n' + + 'note right of 1: multiline
text\n'; + + parser.parse(str); + + const actors = parser.yy.getActors(); + expect(actors['1'].description).toBe('multiline
text'); + expect(actors['2'].description).toBe('multiline
text'); + expect(actors['3'].description).toBe('multiline
text'); + + const messages = parser.yy.getMessages(); + expect(messages[0].message).toBe('multiline
text'); + expect(messages[1].message).toBe('multiline
text'); + expect(messages[2].message).toBe('multiline
text'); + expect(messages[3].message).toBe('multiline
text'); + expect(messages[4].message).toBe('multiline
text'); + expect(messages[5].message).toBe('multiline
text'); + }); it('it should handle notes over a single actor', function() { const str = 'sequenceDiagram\n' + 'Alice->Bob: Hello Bob, how are you?\n' + 'Note over Bob: Bob thinks\n'; diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 86bb6010c..b00ad38f0 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -168,7 +168,7 @@ export const bounds = { const _drawLongText = (text, x, y, g, width) => { let textHeight = 0; - const lines = text.split(//gi); + const lines = text.split(/
/gi); for (const line of lines) { const textObj = svgDraw.getTextObj(); textObj.x = x; @@ -233,7 +233,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde let textElem; let counterBreaklines = 0; let breaklineOffset = 17; - const breaklines = msg.message.split(//gi); + const breaklines = msg.message.split(/
/gi); for (const breakline of breaklines) { textElem = g .append('text') // text label for the x axis diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index b7c29bd80..523c6cafd 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -18,7 +18,7 @@ export const drawRect = function(elem, rectData) { export const drawText = function(elem, textData) { // Remove and ignore br:s - const nText = textData.text.replace(//gi, ' '); + const nText = textData.text.replace(/
/gi, ' '); const textElem = elem.append('text'); textElem.attr('x', textData.x); @@ -321,7 +321,7 @@ const _drawTextCandidateFunc = (function() { function byTspan(content, g, x, y, width, height, textAttrs, conf) { const { actorFontSize, actorFontFamily } = conf; - const lines = content.split(//gi); + const lines = content.split(/
/gi); for (let i = 0; i < lines.length; i++) { const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2; const text = g