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

10
src/Diagram.js
View File

@@ -80,10 +80,20 @@ class Diagram {
break; break;
case 'sequenceDiagram': case 'sequenceDiagram':
case 'sequence': 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 = sequenceParser;
this.parser.parser.yy = sequenceDb; this.parser.parser.yy = sequenceDb;
this.db = sequenceDb; this.db = sequenceDb;
this.db.setWrap(cnf.wrap);
this.renderer = sequenceRenderer; this.renderer = sequenceRenderer;
this.txt = this.txt + '\n';
break; break;
case 'gantt': case 'gantt':
this.parser = ganttParser; this.parser = ganttParser;

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

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

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

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

17
src/mermaidAPI.js
View File

@@ -361,8 +361,8 @@ const render = function (id, _txt, cb, container) {
try { try {
switch (graphType) { switch (graphType) {
case 'c4': case 'c4':
c4Renderer.setConf(cnf.c4); diag.renderer.setConf(cnf.c4);
c4Renderer.draw(txt, id, pkg.version, diag); diag.renderer.draw(txt, id, pkg.version, diag);
break; break;
case 'gitGraph': case 'gitGraph':
gitGraphRenderer.draw(txt, id, pkg.version, diag); 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); flowRendererV2.draw(txt, id, pkg.version, diag);
break; break;
case 'sequence': case 'sequence':
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; diag.renderer.setConf(cnf.sequence);
if (cnf.sequenceDiagram) { diag.renderer.draw(txt, id, pkg.version, diag);
// 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);
break; break;
case 'gantt': case 'gantt':
cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;