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

Fix #3011: Support left- and right-alignment for multi-line messages and notes

Browse Source 
Previously, messages and notes that had multiple lines (via `<br>`-tags) were only displayed correctly
when using the default `center` value for the `messageAlign` and `noteAlign` configuration options.
Using `left` or `right` for the alignment options caused the text to collapse and become illegible,
as outlined in issue #3011.

This comes as a side-effect from how the internal `valign` text-rendering option was configured for
messages and notes:

```js
// Example from `sequenceRenderer.js: drawMessage()`
textObj.anchor = conf.messageAlign;
textObj.valign = conf.messageAlign;
```

Both the `anchor` option (which controls left-right alignment) and the `valign` option (which controls
vertical top-down placement) were set to the same value, the user-provided `messageAlign` config option.

While `left` and `right` are valid values for the `anchor` option, they were effectively no-ops for the
`valign` option, which only supports `top`, `start`, `middle`, `center`, `bottom`, and `end`.

To fix the issue, the `valign` property is now always set to `center` for notes and messages.
Similarly, the `dominantBaseline` option of texts is now always set to `middle`, rather than setting it to
either `text-{before,after}-edge`, which caused left-aligned multi-line text to always be "top-left" aligned
inside a note (or "bottom-right" when attempting to right-align).

Now, texts in messages and notes are always vertically centered and alignment options correctly apply for
both single and multi-line content.
This commit is contained in:
Paik Paustian
2022-07-03 11:41:18 +02:00
parent 1509ee68be
commit ed29fe1aa9
3 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;
}