GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1525 from mermaid-js/bug/1524_message_text_vertical_pos

Browse Source 
Bug/1524 message text vertical pos
This commit is contained in:
Knut Sveidqvist 2020-07-04 12:46:24 +02:00 committed by GitHub
commit 5c043dd908
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/current.html
View File

@ -33,23 +33,18 @@ flowchart BT
c1 --apa apa apa--> b1
two --> c2
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
<div class="mermaid" style="width: 50%; height: 200px;">
sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TB
subgraph two
b1
end
subgraph three
c1-->c2
end
c1 --apa apa apa--> b1
b1 --> c2
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
<div class="mermaid" style="width: 50%; height: 200px;">
%%{init: {'config': {'wrap': true }}}%%
sequenceDiagram
participant A as Extremely utterly
A->>Bob: long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob-->A: Pasten ! </div>
<div class="mermaid2" style="width: 50%; height: 200px;">
flowchart BT
subgraph a

20
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@ -1028,7 +1028,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should handle two actors with init directive', function() {
const str = `
@ -1045,7 +1045,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should handle two actors with init directive with multiline directive', function() {
const str = `
@ -1066,7 +1066,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
expect(msgs.every(v => v.wrap)).toBe(true);
});
@ -1100,7 +1100,7 @@ Bob->Alice: Fine!`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors notes to the right', function() {
const str = `
@ -1119,7 +1119,7 @@ Bob->Alice: Fine!`;
const expStopX = conf.actorMargin + conf.width + conf.width / 2 + conf.noteMargin + conf.width;
expect(bounds.stopx).toBe(expStopX);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors notes to the left', function() {
const str = `
@ -1136,7 +1136,7 @@ Bob->Alice: Fine!`;
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors notes to the left with text wrapped (inline)', function() {
const str = `
@ -1155,7 +1155,7 @@ Bob->>Alice: Fine!`;
expect(msgs[0].wrap).toBe(true);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors notes to the left with text wrapped (directive)', function() {
const str = `
@ -1178,7 +1178,7 @@ Bob->>Alice: Fine!`;
expect(msgs.every(v => v.wrap)).toBe(true);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark', function() {
const str = `
@ -1201,7 +1201,7 @@ Bob->>Alice: Fine!`;
expect(msgs.every(v => v.wrap)).toBe(true);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
const str = `
@ -1225,7 +1225,7 @@ Bob->>Alice: Fine!`;
expect(msgs.every(v => v.wrap)).toBe(true);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('it should draw two loops', function() {
const str = `

5
src/diagrams/sequence/sequenceRenderer.js
View File

@ -248,6 +248,7 @@ const drawNote = function(elem, noteModel) {
* @param msgModel - the model containing fields describing a message
*/
const drawMessage = function(g, msgModel) {
bounds.bumpVerticalPos(10);
const { startx, stopx, starty, message, type, sequenceIndex, wrap } = msgModel;
const lines = common.splitBreaks(message).length;
let textDims = utils.calculateTextDimensions(message, conf.messageFont());
@ -257,7 +258,7 @@ const drawMessage = function(g, msgModel) {
bounds.bumpVerticalPos(lineHeight);
const textObj = svgDraw.getTextObj();
textObj.x = startx;
textObj.y = starty;
textObj.y = starty + 10;
textObj.width = stopx - startx;
textObj.class = 'messageText';
textObj.dy = '1em';
@ -273,7 +274,7 @@ const drawMessage = function(g, msgModel) {
drawText(g, textObj);
let totalOffset = textDims.height;
let totalOffset = textDims.height - 10;
let textWidth = textDims.width;