Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix mermaid-js#3011: Support left- and right-alignment for multi-line…
… messages and notes 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 mermaid-js#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.
- Loading branch information