Sequence diagram fixes & improvements

This commit fixes some bugs, and I believe, improves upon the current
implementation.

In no particular order, it adds:

1. Control over note font size, family and alignment (now defaults to
center)
2. Dynamic actor resizing - actor's width will now scale if its
description is bigger than the static configured width
3. Dynamic actor margins - the margin between actors will now be
dynamically calculated by taking into account the width of connecting
messages or notes
4. Fixed a small visual annoyance where a loop arrow would intersect
with the text it loops on
5. Fixed a bug where if global config -> fontFamily wasn't defined, it
would override the actorFontFamily with an undefined
6. Removed some stale / commented out code
7. Added missing config variables to the global config object in mermaidAPI.js
8. Added messageFontSize, messageFontFamily to control message (non-note)
font settings
9. Memoized the actor widths in a pre-calculation that takes notes and
signals lengths into account
10. Removed redundant console.log lines
11. Extracted out actor width & margin calculation to getMaxMessageWidthPerActor, and
calculateActorMargins
This commit is contained in:
Danny Shemesh
2020-04-23 07:37:32 +03:00
parent 197d006860
commit 5f6887b316
3 changed files with 344 additions and 39 deletions

View File

@@ -79,10 +79,11 @@ let actorCnt = -1;
* @param actor - The actor to draw.
* @param config - The sequence diagram config object.
*/
export const drawActor = function(elem, left, verticalPos, description, conf) {
const center = left + conf.width / 2;
export const drawActor = function(elem, actor, conf) {
const center = actor.x + actor.width / 2;
const g = elem.append('g');
if (verticalPos === 0) {
if (actor.y === 0) {
actorCnt++;
g.append('line')
.attr('id', 'actor' + actorCnt)
@@ -96,18 +97,18 @@ export const drawActor = function(elem, left, verticalPos, description, conf) {
}
const rect = getNoteRect();
rect.x = left;
rect.y = verticalPos;
rect.x = actor.x;
rect.y = actor.y;
rect.fill = '#eaeaea';
rect.width = conf.width;
rect.height = conf.height;
rect.width = actor.width;
rect.height = actor.height;
rect.class = 'actor';
rect.rx = 3;
rect.ry = 3;
drawRect(g, rect);
_drawTextCandidateFunc(conf)(
description,
actor.description,
g,
rect.x,
rect.y,