marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 10:06:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'bug/3011_multiline_alignment' of github.com:hype09/mermaid into hype09-bug/3011_multiline_alignment

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-08-04 13:05:17 +02:00
parent 3054a809ce ed29fe1aa9
commit aa9149912d
3 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
{ sequence: { noteAlign: 'left' } }
);
});
it('should render multi-line notes aligned to the left when configured', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice->>Bob: I'm short
note left of Alice: I am left aligned<br>but also<br>multiline
Bob->>Alice: Short as well
`,
{ sequence: { noteAlign: 'left' } }
);
});
it('should render notes aligned to the right when configured', () => {
imgSnapshotTest(
`
@@ -137,6 +148,37 @@ context('Sequence diagram', () => {
{ sequence: { noteAlign: 'right' } }
);
});
it('should render multi-line notes aligned to the right when configured', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice->>Bob: I'm short
note left of Alice: I am right aligned<br>but also<br>multiline
Bob->>Alice: Short as well
`,
{ sequence: { noteAlign: 'right' } }
);
});
it('should render multi-line messages aligned to the left when configured', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice->>Bob: I'm short<br>but also<br>multiline
Bob->>Alice: Short as well<br>and also<br>multiline
`,
{ sequence: { messageAlign: 'left' } }
);
});
it('should render multi-line messages aligned to the right when configured', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice->>Bob: I'm short<br>but also<br>multiline
Bob->>Alice: Short as well<br>and also<br>multiline
`,
{ sequence: { messageAlign: 'right' } }
);
});
});
context('auth width scaling', () => {
it('should render long actor descriptions', () => {

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

@@ -229,7 +229,7 @@ const drawNote = function (elem, noteModel) {
textObj.fontWeight = conf.noteFontWeight;
textObj.anchor = conf.noteAlign;
textObj.textMargin = conf.noteMargin;
textObj.valign = conf.noteAlign;
textObj.valign = 'center';
let textElem = drawText(g, textObj);
@@ -342,7 +342,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
textObj.fontSize = conf.messageFontSize;
textObj.fontWeight = conf.messageFontWeight;
textObj.anchor = conf.messageAlign;
textObj.valign = conf.messageAlign;
textObj.valign = 'center';
textObj.textMargin = conf.wrapPadding;
textObj.tspan = false;

4
src/diagrams/sequence/svgDraw.js
View File

@@ -193,7 +193,7 @@ export const drawText = function (elem, textData) {
case 'start':
textData.x = Math.round(textData.x + textData.textMargin);
textData.anchor = 'start';
textData.dominantBaseline = 'text-after-edge';
textData.dominantBaseline = 'middle';
textData.alignmentBaseline = 'middle';
break;
case 'middle':
@@ -207,7 +207,7 @@ export const drawText = function (elem, textData) {
case 'end':
textData.x = Math.round(textData.x + textData.width - textData.textMargin);
textData.anchor = 'end';
textData.dominantBaseline = 'text-before-edge';
textData.dominantBaseline = 'middle';
textData.alignmentBaseline = 'middle';
break;
}