From 3abd77a1e688f3f739baa30701d68daee82305e3 Mon Sep 17 00:00:00 2001 From: Gene Wood Date: Mon, 23 Dec 2019 08:02:11 -0800 Subject: [PATCH 1/2] Extend the `br` tag regex This extends the `br` tag regex to accommodate an arbitrary amount of any type of whitespace instead of a single space character, which holds more closely to the HTML spec[1] This extends the fix to #702 added in #1153 [1]: http://www.w3.org/TR/REC-xml/#sec-starttags --- src/diagrams/flowchart/flowRenderer.js | 2 +- src/diagrams/sequence/sequenceRenderer.js | 4 ++-- src/diagrams/sequence/svgDraw.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 524742b39..6528a361a 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -246,7 +246,7 @@ export const addEdges = function(edges, g) { edgeData.label = '' + edge.text + ''; } else { edgeData.labelType = 'text'; - edgeData.label = edge.text.replace(/
/g, '\n'); + edgeData.label = edge.text.replace(//g, '\n'); if (typeof edge.style === 'undefined') { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index b00ad38f0..56cd4303d 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 523c6cafd..d8047e403 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 From b4f9dd46a910ca79908e7f22b30d1acb003e7bc8 Mon Sep 17 00:00:00 2001 From: Gene Wood Date: Mon, 23 Dec 2019 08:52:15 -0800 Subject: [PATCH 2/2] Add tests for
case This adds tests for the case where * multiple pieces of whitespace are used * one of those whitespace characters is a tab --- cypress/integration/rendering/sequencediagram.spec.js | 7 +++++-- dist/index.html | 7 +++++-- src/diagrams/sequence/sequenceDiagram.spec.js | 10 ++++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 2625d19c1..5f12bacaf 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -39,12 +39,15 @@ context('Sequence diagram', () => { participant 1 as multiline
using #lt;br#gt; participant 2 as multiline
using #lt;br/#gt; participant 3 as multiline
using #lt;br /#gt; + participant 4 as multiline
using #lt;br \t/#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; + 3->>4: multiline
using #lt;br /#gt; + note right of 4: multiline
using #lt;br /#gt; + 4->>1: multiline
using #lt;br /#gt; + note right of 1: multiline
using #lt;br \t/#gt; `, {} ); diff --git a/dist/index.html b/dist/index.html index 0b3db789f..0dc845291 100644 --- a/dist/index.html +++ b/dist/index.html @@ -361,12 +361,15 @@ end participant 1 as multiline
using #lt;br#gt; participant 2 as multiline
using #lt;br/#gt; participant 3 as multiline
using #lt;br /#gt; + participant 4 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; + 3->>4: multiline
using #lt;br /#gt; + note right of 4: multiline
using #lt;br /#gt; + 4->>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 90875948b..2f1832865 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -339,12 +339,15 @@ describe('when parsing a sequenceDiagram', function() { 'participant 1 as multiline
text\n' + 'participant 2 as multiline
text\n' + 'participant 3 as multiline
text\n' + + 'participant 4 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'; + '3->>4: multiline
text\n' + + 'note right of 4: multiline
text\n' + + '4->>1: multiline
text\n' + + 'note right of 1: multiline
text\n'; parser.parse(str); @@ -352,6 +355,7 @@ describe('when parsing a sequenceDiagram', function() { expect(actors['1'].description).toBe('multiline
text'); expect(actors['2'].description).toBe('multiline
text'); expect(actors['3'].description).toBe('multiline
text'); + expect(actors['4'].description).toBe('multiline
text'); const messages = parser.yy.getMessages(); expect(messages[0].message).toBe('multiline
text'); @@ -360,6 +364,8 @@ describe('when parsing a sequenceDiagram', function() { expect(messages[3].message).toBe('multiline
text'); expect(messages[4].message).toBe('multiline
text'); expect(messages[5].message).toBe('multiline
text'); + expect(messages[6].message).toBe('multiline
text'); + expect(messages[7].message).toBe('multiline
text'); }); it('it should handle notes over a single actor', function() { const str =