Commits on Jul 3, 2022

1. 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.

   

   hype09 committed Jul 3, 2022
   Copy the full SHA

   ed29fe1 View commit details

   Browse the repository at this point in the history