From fc70a8e1454b20bb7b0162d84ba580ef8588c2a5 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Sat, 4 Apr 2020 21:53:31 +0200
Subject: [PATCH] #1271 Fix autonumber positioning in sequence diagrams with
 multiline texts

---
 .../integration/rendering/sequencediagram.spec.js   | 13 +++++++++++++
 dist/index.html                                     |  8 ++++++++
 src/diagrams/sequence/sequenceRenderer.js           |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index c084b73c1..cf65485c7 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -182,5 +182,18 @@ context('Sequence diagram', () => {
       {}
       );
     });
+    it('should render autonumber with different line breaks', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        autonumber
+        Alice->>John: Hello John,<br>how are you?
+        Alice->>John: John,<br/>can you hear me?
+        John-->>Alice: Hi Alice,<br />I can hear you!
+        John-->>Alice: I feel great!
+      `,
+      {}
+      );
+    });
   });
 });
diff --git a/dist/index.html b/dist/index.html
index 46af0d709..6c6d9dc8c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -441,6 +441,14 @@ end
     4->>1: multiline<br 	/>using #lt;br 	/#gt;
     note right of 1: multiline<br 	/>using #lt;br 	/#gt;
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    autonumber
+    Alice->>John: Hello John,<br>how are you?
+    Alice->>John: John,<br/>can you hear me?
+    John-->>Alice: Hi Alice,<br />I can hear you!
+    John-->>Alice: I feel great!
+  </div>
 
   <hr/>
 
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 96f99d9c2..c297a6526 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -362,7 +362,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
     line.attr('marker-start', 'url(' + url + '#sequencenumber)');
     g.append('text')
       .attr('x', startx)
-      .attr('y', verticalPos + 4)
+      .attr('y', verticalPos + 4 + totalOffset)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')