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

Updating c4 and sequence

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-07-04 11:29:38 +02:00
parent 1dfddfde54
commit bedc9399c5
5 changed files with 147 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
cypress/platform/knsv.html
View File

@@ -67,7 +67,7 @@
commit
commit
</div>
<div class="mermaid2" style="width: 50%;">
<div class="mermaid" style="width: 50%;">
sequenceDiagram
title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram
@@ -139,7 +139,7 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" style="width: 100%;">
<div class="mermaid2" style="width: 100%;">
stateDiagram
state Active {
Idle
@@ -165,8 +165,7 @@ stateDiagram
end
end
end
B ->> A: Return
</div>
B ->> A: Return</div>
<div class="mermaid2" style="width: 100%;">
classDiagram
accTitle: My class diagram

10
src/Diagram.js
View File

@@ -80,10 +80,20 @@ class Diagram {
break;
case 'sequenceDiagram':
case 'sequence':
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
if (cnf.sequenceDiagram) {
// backwards compatibility
sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
console.error(
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
);
}
this.parser = sequenceParser;
this.parser.parser.yy = sequenceDb;
this.db = sequenceDb;
this.db.setWrap(cnf.wrap);
this.renderer = sequenceRenderer;
this.txt = this.txt + '\n';
break;
case 'gantt':
this.parser = ganttParser;

55
src/diagrams/c4/c4Renderer.js
View File

@@ -25,7 +25,7 @@ parser.yy = c4Db;
let conf = {};
class Bounds {
constructor() {
constructor(diagObj) {
this.name = '';
this.data = {};
this.data.startx = undefined;
@@ -41,7 +41,7 @@ class Bounds {
this.nextData.stopy = undefined;
this.nextData.cnt = 0;
setConf(parser.yy.getConfig());
setConf(diagObj.db.getConfig());
}
setData(startx, stopx, starty, stopy) {
@@ -96,7 +96,7 @@ class Bounds {
this.updateVal(this.nextData, 'stopy', _stopy, Math.max);
}
init() {
init(diagObj) {
this.name = '';
this.data = {
startx: undefined,
@@ -112,7 +112,7 @@ class Bounds {
stopy: undefined,
cnt: 0,
};
setConf(parser.yy.getConfig());
setConf(diagObj.db.getConfig());
}
bumpLastMargin(margin) {
@@ -411,13 +411,13 @@ let getIntersectPoints = function (fromNode, endNode) {
return { startPoint: startPoint, endPoint: endPoint };
};
export const drawRels = function (diagram, rels, getC4ShapeObj) {
export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
let i = 0;
for (let rel of rels) {
i = i + 1;
let relTextWrap = rel.wrap && conf.wrap;
let relConf = messageFont(conf);
let diagramType = parser.yy.getC4Type();
let diagramType = diagObj.db.getC4Type();
if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;
let textLimitWidth = calculateTextWidth(rel.label.text, relConf);
calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);
@@ -446,9 +446,10 @@ export const drawRels = function (diagram, rels, getC4ShapeObj) {
* @param parentBoundaryAlias
* @param parentBounds
* @param currentBoundarys
* @param diagObj
*/
function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys) {
let currentBounds = new Bounds();
function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) {
let currentBounds = new Bounds(diagObj);
// Calculate the width limit of the boundar. label/type 的长度，
currentBounds.data.widthLimit =
parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);
@@ -527,8 +528,8 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
currentBounds.setData(_x, _x, _y, _y);
}
currentBounds.name = currentBoundary.alias;
let currentPersonOrSystemArray = parser.yy.getC4ShapeArray(currentBoundary.alias);
let currentPersonOrSystemKeys = parser.yy.getC4ShapeKeys(currentBoundary.alias);
let currentPersonOrSystemArray = diagObj.db.getC4ShapeArray(currentBoundary.alias);
let currentPersonOrSystemKeys = diagObj.db.getC4ShapeKeys(currentBoundary.alias);
if (currentPersonOrSystemKeys.length > 0) {
drawC4ShapeArray(
@@ -539,13 +540,19 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
);
}
parentBoundaryAlias = currentBoundary.alias;
let nextCurrentBoundarys = parser.yy.getBoundarys(parentBoundaryAlias);
let nextCurrentBoundarys = diagObj.db.getBoundarys(parentBoundaryAlias);
if (nextCurrentBoundarys.length > 0) {
// draw boundary inside currentBoundary
// bounds.init();
// parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx;
drawInsideBoundary(diagram, parentBoundaryAlias, currentBounds, nextCurrentBoundarys);
drawInsideBoundary(
diagram,
parentBoundaryAlias,
currentBounds,
nextCurrentBoundarys,
diagObj
);
}
// draw boundary
if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds);
@@ -566,9 +573,12 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
* Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
*
* @param {any} text
* @param _text
* @param {any} id
* @param _version
* @param diagObj
*/
export const draw = function (text, id) {
export const draw = function (_text, id, _version, diagObj) {
conf = configApi.getConfig().c4;
const securityLevel = configApi.getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
@@ -580,13 +590,10 @@ export const draw = function (text, id) {
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
let db = parser.yy;
let db = diagObj.db;
parser.yy.clear();
parser.yy.setWrap(conf.wrap);
parser.parse(text + '\n');
diagObj.db.setWrap(conf.wrap);
c4ShapeInRow = db.getC4ShapeInRow();
c4BoundaryInRow = db.getC4BoundaryInRow();
@@ -600,7 +607,7 @@ export const draw = function (text, id) {
svgDraw.insertDatabaseIcon(diagram);
svgDraw.insertClockIcon(diagram);
let screenBounds = new Bounds();
let screenBounds = new Bounds(diagObj);
screenBounds.setData(
conf.diagramMarginX,
@@ -613,12 +620,12 @@ export const draw = function (text, id) {
globalBoundaryMaxX = conf.diagramMarginX;
globalBoundaryMaxY = conf.diagramMarginY;
const title = parser.yy.getTitle();
const c4type = parser.yy.getC4Type();
let currentBoundarys = parser.yy.getBoundarys('');
const title = diagObj.db.getTitle();
const c4type = diagObj.db.getC4Type();
let currentBoundarys = diagObj.db.getBoundarys('');
// switch (c4type) {
// case 'C4Context':
drawInsideBoundary(diagram, '', screenBounds, currentBoundarys);
drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj);
// break;
// }
@@ -628,7 +635,7 @@ export const draw = function (text, id) {
svgDraw.insertArrowCrossHead(diagram);
svgDraw.insertArrowFilledHead(diagram);
drawRels(diagram, parser.yy.getRels(), parser.yy.getC4Shape);
drawRels(diagram, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);
screenBounds.data.stopx = globalBoundaryMaxX;
screenBounds.data.stopy = globalBoundaryMaxY;

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

@@ -1,15 +1,13 @@
import { select, selectAll } from 'd3';
import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
import { log } from '../../logger';
import { parser } from './parser/sequenceDiagram';
// import { parser } from './parser/sequenceDiagram';
import common from '../common/common';
import sequenceDb from './sequenceDb';
// import sequenceDb from './sequenceDb';
import * as configApi from '../../config';
import utils, { assignWithDepth, configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
parser.yy = sequenceDb;
let conf = {};
export const bounds = {
@@ -86,7 +84,7 @@ export const bounds = {
stopy: undefined,
};
this.verticalPos = 0;
setConf(parser.yy.getConfig());
setConf(configApi.getConfig());
},
updateVal: function (obj, key, val, fun) {
if (typeof obj[key] === 'undefined') {
@@ -327,8 +325,9 @@ const boundMessage = function (diagram, msgModel) {
* @param {any} diagram - The parent of the message element
* @param {any} msgModel - The model containing fields describing a message
* @param {float} lineStarty - The Y coordinate at which the message line starts
* @param diagObj
*/
const drawMessage = function (diagram, msgModel, lineStarty) {
const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
let textDims = utils.calculateTextDimensions(message, messageFont(conf));
const textObj = svgDraw.getTextObj();
@@ -394,10 +393,10 @@ const drawMessage = function (diagram, msgModel, lineStarty) {
// Make an SVG Container
// Draw the line
if (
type === parser.yy.LINETYPE.DOTTED ||
type === parser.yy.LINETYPE.DOTTED_CROSS ||
type === parser.yy.LINETYPE.DOTTED_POINT ||
type === parser.yy.LINETYPE.DOTTED_OPEN
type === diagObj.db.LINETYPE.DOTTED ||
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
type === diagObj.db.LINETYPE.DOTTED_POINT ||
type === diagObj.db.LINETYPE.DOTTED_OPEN
) {
line.style('stroke-dasharray', '3, 3');
line.attr('class', 'messageLine1');
@@ -420,14 +419,14 @@ const drawMessage = function (diagram, msgModel, lineStarty) {
line.attr('stroke-width', 2);
line.attr('stroke', 'none'); // handled by theme/css anyway
line.style('fill', 'none'); // remove any fill colour
if (type === parser.yy.LINETYPE.SOLID || type === parser.yy.LINETYPE.DOTTED) {
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
line.attr('marker-end', 'url(' + url + '#arrowhead)');
}
if (type === parser.yy.LINETYPE.SOLID_POINT || type === parser.yy.LINETYPE.DOTTED_POINT) {
if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
line.attr('marker-end', 'url(' + url + '#filled-head)');
}
if (type === parser.yy.LINETYPE.SOLID_CROSS || type === parser.yy.LINETYPE.DOTTED_CROSS) {
if (type === diagObj.db.LINETYPE.SOLID_CROSS || type === diagObj.db.LINETYPE.DOTTED_CROSS) {
line.attr('marker-end', 'url(' + url + '#crosshead)');
}
@@ -581,10 +580,13 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
/**
* Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
*
* @param {any} text
* @param {any} id
* @param {any} text The text of the diagram
* @param _text
* @param {any} id The id of the diagram which will be used as a DOM element id¨
* @param {any} _version Mermaid version from package.json
* @param {any} diagObj A stanard diagram containing the db and the text and type etc of the diagram
*/
export const draw = function (text, id) {
export const draw = function (_text, id, _version, diagObj) {
conf = configApi.getConfig().sequence;
const securityLevel = configApi.getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
@@ -592,28 +594,25 @@ export const draw = function (text, id) {
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
parser.yy.clear();
parser.yy.setWrap(conf.wrap);
parser.parse(text + '\n');
bounds.init();
log.debug(`C:${JSON.stringify(conf, null, 2)}`);
log.debug(diagObj.db);
const diagram =
securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);
// Fetch data from the parsing
const actors = parser.yy.getActors();
const actorKeys = parser.yy.getActorKeys();
const messages = parser.yy.getMessages();
const title = parser.yy.getDiagramTitle();
const actors = diagObj.db.getActors();
const actorKeys = diagObj.db.getActorKeys();
const messages = diagObj.db.getMessages();
const title = diagObj.db.getDiagramTitle();
const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages);
const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages, diagObj);
conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);
svgDraw.insertComputerIcon(diagram);
@@ -621,7 +620,7 @@ export const draw = function (text, id) {
svgDraw.insertClockIcon(diagram);
drawActors(diagram, actors, actorKeys, 0, conf, messages);
const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor);
const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
// The arrow head definition is attached to the svg once
svgDraw.insertArrowHead(diagram);
@@ -658,17 +657,17 @@ export const draw = function (text, id) {
let loopModel, noteModel, msgModel;
switch (msg.type) {
case parser.yy.LINETYPE.NOTE:
case diagObj.db.LINETYPE.NOTE:
noteModel = msg.noteModel;
drawNote(diagram, noteModel);
break;
case parser.yy.LINETYPE.ACTIVE_START:
case diagObj.db.LINETYPE.ACTIVE_START:
bounds.newActivation(msg, diagram, actors);
break;
case parser.yy.LINETYPE.ACTIVE_END:
case diagObj.db.LINETYPE.ACTIVE_END:
activeEnd(msg, bounds.getVerticalPos());
break;
case parser.yy.LINETYPE.LOOP_START:
case diagObj.db.LINETYPE.LOOP_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -677,24 +676,24 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.LOOP_END:
case diagObj.db.LINETYPE.LOOP_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'loop', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
bounds.models.addLoop(loopModel);
break;
case parser.yy.LINETYPE.RECT_START:
case diagObj.db.LINETYPE.RECT_START:
adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, (message) =>
bounds.newLoop(undefined, message.message)
);
break;
case parser.yy.LINETYPE.RECT_END:
case diagObj.db.LINETYPE.RECT_END:
loopModel = bounds.endLoop();
svgDraw.drawBackgroundRect(diagram, loopModel);
bounds.models.addLoop(loopModel);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
break;
case parser.yy.LINETYPE.OPT_START:
case diagObj.db.LINETYPE.OPT_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -703,13 +702,13 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.OPT_END:
case diagObj.db.LINETYPE.OPT_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'opt', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
bounds.models.addLoop(loopModel);
break;
case parser.yy.LINETYPE.ALT_START:
case diagObj.db.LINETYPE.ALT_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -718,7 +717,7 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.ALT_ELSE:
case diagObj.db.LINETYPE.ALT_ELSE:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -727,13 +726,13 @@ export const draw = function (text, id) {
(message) => bounds.addSectionToLoop(message)
);
break;
case parser.yy.LINETYPE.ALT_END:
case diagObj.db.LINETYPE.ALT_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'alt', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
bounds.models.addLoop(loopModel);
break;
case parser.yy.LINETYPE.PAR_START:
case diagObj.db.LINETYPE.PAR_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -742,7 +741,7 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.PAR_AND:
case diagObj.db.LINETYPE.PAR_AND:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -751,19 +750,19 @@ export const draw = function (text, id) {
(message) => bounds.addSectionToLoop(message)
);
break;
case parser.yy.LINETYPE.PAR_END:
case diagObj.db.LINETYPE.PAR_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'par', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
bounds.models.addLoop(loopModel);
break;
case parser.yy.LINETYPE.AUTONUMBER:
case diagObj.db.LINETYPE.AUTONUMBER:
sequenceIndex = msg.message.start || sequenceIndex;
sequenceIndexStep = msg.message.step || sequenceIndexStep;
if (msg.message.visible) parser.yy.enableSequenceNumbers();
else parser.yy.disableSequenceNumbers();
if (msg.message.visible) diagObj.db.enableSequenceNumbers();
else diagObj.db.disableSequenceNumbers();
break;
case parser.yy.LINETYPE.CRITICAL_START:
case diagObj.db.LINETYPE.CRITICAL_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -772,7 +771,7 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.CRITICAL_OPTION:
case diagObj.db.LINETYPE.CRITICAL_OPTION:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -781,13 +780,13 @@ export const draw = function (text, id) {
(message) => bounds.addSectionToLoop(message)
);
break;
case parser.yy.LINETYPE.CRITICAL_END:
case diagObj.db.LINETYPE.CRITICAL_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'critical', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
bounds.models.addLoop(loopModel);
break;
case parser.yy.LINETYPE.BREAK_START:
case diagObj.db.LINETYPE.BREAK_START:
adjustLoopHeightForWrap(
loopWidths,
msg,
@@ -796,7 +795,7 @@ export const draw = function (text, id) {
(message) => bounds.newLoop(message)
);
break;
case parser.yy.LINETYPE.BREAK_END:
case diagObj.db.LINETYPE.BREAK_END:
loopModel = bounds.endLoop();
svgDraw.drawLoop(diagram, loopModel, 'break', conf);
bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
@@ -808,7 +807,7 @@ export const draw = function (text, id) {
msgModel = msg.msgModel;
msgModel.starty = bounds.getVerticalPos();
msgModel.sequenceIndex = sequenceIndex;
msgModel.sequenceVisible = parser.yy.showSequenceNumbers();
msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
let lineStarty = boundMessage(diagram, msgModel);
messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty });
bounds.models.addMessage(msgModel);
@@ -820,21 +819,21 @@ export const draw = function (text, id) {
// Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
if (
[
parser.yy.LINETYPE.SOLID_OPEN,
parser.yy.LINETYPE.DOTTED_OPEN,
parser.yy.LINETYPE.SOLID,
parser.yy.LINETYPE.DOTTED,
parser.yy.LINETYPE.SOLID_CROSS,
parser.yy.LINETYPE.DOTTED_CROSS,
parser.yy.LINETYPE.SOLID_POINT,
parser.yy.LINETYPE.DOTTED_POINT,
diagObj.db.LINETYPE.SOLID_OPEN,
diagObj.db.LINETYPE.DOTTED_OPEN,
diagObj.db.LINETYPE.SOLID,
diagObj.db.LINETYPE.DOTTED,
diagObj.db.LINETYPE.SOLID_CROSS,
diagObj.db.LINETYPE.DOTTED_CROSS,
diagObj.db.LINETYPE.SOLID_POINT,
diagObj.db.LINETYPE.DOTTED_POINT,
].includes(msg.type)
) {
sequenceIndex = sequenceIndex + sequenceIndexStep;
}
});
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty));
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty, diagObj));
if (conf.mirrorActors) {
// Draw actors below diagram
@@ -895,7 +894,7 @@ export const draw = function (text, id) {
(height + extraVertForTitle)
);
addSVGAccessibilityFields(parser.yy, diagram, id);
addSVGAccessibilityFields(diagObj.db, diagram, id);
log.debug(`models:`, bounds.models);
};
@@ -907,9 +906,10 @@ export const draw = function (text, id) {
*
* @param {any} actors - The actors map
* @param {Array} messages - A list of message objects to iterate
* @param diagObj
* @returns {any}
*/
const getMaxMessageWidthPerActor = function (actors, messages) {
const getMaxMessageWidthPerActor = function (actors, messages, diagObj) {
const maxMessageWidthPerActor = {};
messages.forEach(function (msg) {
@@ -917,12 +917,12 @@ const getMaxMessageWidthPerActor = function (actors, messages) {
const actor = actors[msg.to];
// If this is the first actor, and the message is left of it, no need to calculate the margin
if (msg.placement === parser.yy.PLACEMENT.LEFTOF && !actor.prevActor) {
if (msg.placement === diagObj.db.PLACEMENT.LEFTOF && !actor.prevActor) {
return;
}
// If this is the last actor, and the message is right of it, no need to calculate the margin
if (msg.placement === parser.yy.PLACEMENT.RIGHTOF && !actor.nextActor) {
if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF && !actor.nextActor) {
return;
}
@@ -972,17 +972,17 @@ const getMaxMessageWidthPerActor = function (actors, messages) {
maxMessageWidthPerActor[msg.to] || 0,
messageWidth / 2
);
} else if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
} else if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
maxMessageWidthPerActor[msg.from] = Math.max(
maxMessageWidthPerActor[msg.from] || 0,
messageWidth
);
} else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {
} else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
maxMessageWidthPerActor[actor.prevActor] = Math.max(
maxMessageWidthPerActor[actor.prevActor] || 0,
messageWidth
);
} else if (msg.placement === parser.yy.PLACEMENT.OVER) {
} else if (msg.placement === diagObj.db.PLACEMENT.OVER) {
if (actor.prevActor) {
maxMessageWidthPerActor[actor.prevActor] = Math.max(
maxMessageWidthPerActor[actor.prevActor] || 0,
@@ -1070,7 +1070,7 @@ const calculateActorMargins = function (actors, actorToMessageWidth) {
return Math.max(maxHeight, conf.height);
};
const buildNoteModel = function (msg, actors) {
const buildNoteModel = function (msg, actors, diagObj) {
let startx = actors[msg.from].x;
let stopx = actors[msg.to].x;
let shouldWrap = msg.wrap && msg.message;
@@ -1090,7 +1090,7 @@ const buildNoteModel = function (msg, actors) {
stopy: 0,
message: msg.message,
};
if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
noteModel.width = shouldWrap
? Math.max(conf.width, textDimensions.width)
: Math.max(
@@ -1098,7 +1098,7 @@ const buildNoteModel = function (msg, actors) {
textDimensions.width + 2 * conf.noteMargin
);
noteModel.startx = startx + (actors[msg.from].width + conf.actorMargin) / 2;
} else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {
} else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
noteModel.width = shouldWrap
? Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin)
: Math.max(
@@ -1139,18 +1139,18 @@ const buildNoteModel = function (msg, actors) {
return noteModel;
};
const buildMessageModel = function (msg, actors) {
const buildMessageModel = function (msg, actors, diagObj) {
let process = false;
if (
[
parser.yy.LINETYPE.SOLID_OPEN,
parser.yy.LINETYPE.DOTTED_OPEN,
parser.yy.LINETYPE.SOLID,
parser.yy.LINETYPE.DOTTED,
parser.yy.LINETYPE.SOLID_CROSS,
parser.yy.LINETYPE.DOTTED_CROSS,
parser.yy.LINETYPE.SOLID_POINT,
parser.yy.LINETYPE.DOTTED_POINT,
diagObj.db.LINETYPE.SOLID_OPEN,
diagObj.db.LINETYPE.DOTTED_OPEN,
diagObj.db.LINETYPE.SOLID,
diagObj.db.LINETYPE.DOTTED,
diagObj.db.LINETYPE.SOLID_CROSS,
diagObj.db.LINETYPE.DOTTED_CROSS,
diagObj.db.LINETYPE.SOLID_POINT,
diagObj.db.LINETYPE.DOTTED_POINT,
].includes(msg.type)
) {
process = true;
@@ -1192,7 +1192,7 @@ const buildMessageModel = function (msg, actors) {
};
};
const calculateLoopBounds = function (messages, actors) {
const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagObj) {
const loops = {};
const stack = [];
let current, noteModel, msgModel;
@@ -1200,12 +1200,12 @@ const calculateLoopBounds = function (messages, actors) {
messages.forEach(function (msg) {
msg.id = utils.random({ length: 10 });
switch (msg.type) {
case parser.yy.LINETYPE.LOOP_START:
case parser.yy.LINETYPE.ALT_START:
case parser.yy.LINETYPE.OPT_START:
case parser.yy.LINETYPE.PAR_START:
case parser.yy.LINETYPE.CRITICAL_START:
case parser.yy.LINETYPE.BREAK_START:
case diagObj.db.LINETYPE.LOOP_START:
case diagObj.db.LINETYPE.ALT_START:
case diagObj.db.LINETYPE.OPT_START:
case diagObj.db.LINETYPE.PAR_START:
case diagObj.db.LINETYPE.CRITICAL_START:
case diagObj.db.LINETYPE.BREAK_START:
stack.push({
id: msg.id,
msg: msg.message,
@@ -1214,9 +1214,9 @@ const calculateLoopBounds = function (messages, actors) {
width: 0,
});
break;
case parser.yy.LINETYPE.ALT_ELSE:
case parser.yy.LINETYPE.PAR_AND:
case parser.yy.LINETYPE.CRITICAL_OPTION:
case diagObj.db.LINETYPE.ALT_ELSE:
case diagObj.db.LINETYPE.PAR_AND:
case diagObj.db.LINETYPE.CRITICAL_OPTION:
if (msg.message) {
current = stack.pop();
loops[current.id] = current;
@@ -1224,16 +1224,16 @@ const calculateLoopBounds = function (messages, actors) {
stack.push(current);
}
break;
case parser.yy.LINETYPE.LOOP_END:
case parser.yy.LINETYPE.ALT_END:
case parser.yy.LINETYPE.OPT_END:
case parser.yy.LINETYPE.PAR_END:
case parser.yy.LINETYPE.CRITICAL_END:
case parser.yy.LINETYPE.BREAK_END:
case diagObj.db.LINETYPE.LOOP_END:
case diagObj.db.LINETYPE.ALT_END:
case diagObj.db.LINETYPE.OPT_END:
case diagObj.db.LINETYPE.PAR_END:
case diagObj.db.LINETYPE.CRITICAL_END:
case diagObj.db.LINETYPE.BREAK_END:
current = stack.pop();
loops[current.id] = current;
break;
case parser.yy.LINETYPE.ACTIVE_START:
case diagObj.db.LINETYPE.ACTIVE_START:
{
const actorRect = actors[msg.from ? msg.from.actor : msg.to.actor];
const stackedSize = actorActivations(msg.from ? msg.from.actor : msg.to.actor).length;
@@ -1248,7 +1248,7 @@ const calculateLoopBounds = function (messages, actors) {
bounds.activations.push(toAdd);
}
break;
case parser.yy.LINETYPE.ACTIVE_END:
case diagObj.db.LINETYPE.ACTIVE_END:
{
const lastActorActivationIdx = bounds.activations
.map((a) => a.actor)
@@ -1259,7 +1259,7 @@ const calculateLoopBounds = function (messages, actors) {
}
const isNote = msg.placement !== undefined;
if (isNote) {
noteModel = buildNoteModel(msg, actors);
noteModel = buildNoteModel(msg, actors, diagObj);
msg.noteModel = noteModel;
stack.forEach((stk) => {
current = stk;
@@ -1269,7 +1269,7 @@ const calculateLoopBounds = function (messages, actors) {
Math.max(current.width, Math.abs(current.from - current.to)) - conf.labelBoxWidth;
});
} else {
msgModel = buildMessageModel(msg, actors);
msgModel = buildMessageModel(msg, actors, diagObj);
msg.msgModel = msgModel;
if (msgModel.startx && msgModel.stopx && stack.length > 0) {
stack.forEach((stk) => {

17
src/mermaidAPI.js
View File

@@ -361,8 +361,8 @@ const render = function (id, _txt, cb, container) {
try {
switch (graphType) {
case 'c4':
c4Renderer.setConf(cnf.c4);
c4Renderer.draw(txt, id, pkg.version, diag);
diag.renderer.setConf(cnf.c4);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'gitGraph':
gitGraphRenderer.draw(txt, id, pkg.version, diag);
@@ -378,17 +378,8 @@ const render = function (id, _txt, cb, container) {
flowRendererV2.draw(txt, id, pkg.version, diag);
break;
case 'sequence':
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
if (cnf.sequenceDiagram) {
// backwards compatibility
sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
console.error(
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
);
} else {
sequenceRenderer.setConf(cnf.sequence);
}
sequenceRenderer.draw(txt, id, pkg.version, diag);
diag.renderer.setConf(cnf.sequence);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'gantt':
cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;