marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 10:06:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tweaked the PR for long messages

Browse Source
This commit is contained in:
Chris Moran
2020-06-19 12:45:04 -04:00
parent 710b88efae
commit 5646518352
3 changed files with 103 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,7 +55,29 @@ const conf = {
// wrap text // wrap text
wrapEnabled: false, wrapEnabled: false,
// padding for wrapped text // padding for wrapped text
wrapPadding: 15 wrapPadding: 15,
messageFont: () => {
return {
fontFamily: conf.messageFontFamily,
fontSize: conf.messageFontSize,
fontWeight: conf.messageFontWeight
};
},
noteFont: () => {
return {
fontFamily: conf.noteFontFamily,
fontSize: conf.noteFontSize,
fontWeight: conf.noteFontWeight
};
},
actorFont: () => {
return {
fontFamily: conf.actorFontFamily,
fontSize: conf.actorFontSize,
fontWeight: conf.actorFontWeight
};
}
}; };
export const bounds = { export const bounds = {
@@ -495,18 +517,16 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
if (msg.message && loopWidths[msg.message]) { if (msg.message && loopWidths[msg.message]) {
let loopWidth = loopWidths[msg.message].width; let loopWidth = loopWidths[msg.message].width;
let minSize = let minSize =
Math.round((3 * conf.fontSize) / 4) < 10 Math.round((3 * conf.messageFontSize) / 4) < 10
? conf.fontSize ? conf.messageFontSize
: Math.round((3 * conf.fontSize) / 4); : Math.round((3 * conf.messageFontSize) / 4);
let textConf = { let textConf = conf.messageFont();
fontSize: minSize, textConf.fontSize = minSize;
fontFamily: conf.messageFontFamily, msg.message = utils.wrapLabel(
fontWeight: conf.messageFontWeight, `[${msg.message}]`,
margin: conf.wrapPadding loopWidth - 20 - 2 * conf.wrapPadding,
}; textConf
msg.message = msg.wrap );
? utils.wrapLabel(`[${msg.message}]`, loopWidth, textConf)
: `[${msg.message}]`;
heightAdjust = Math.max( heightAdjust = Math.max(
0, 0,
@@ -573,8 +593,9 @@ export const draw = function(text, id) {
messages.forEach(function(msg) { messages.forEach(function(msg) {
let loopData, let loopData,
noteWidth, noteWidth,
noteStart,
noteEnd,
textWidth, textWidth,
textConf,
shouldWrap = msg.wrap && msg.message && !common.lineBreakRegex.test(msg.message); shouldWrap = msg.wrap && msg.message && !common.lineBreakRegex.test(msg.message);
switch (msg.type) { switch (msg.type) {
@@ -583,24 +604,27 @@ export const draw = function(text, id) {
startx = actors[msg.from].x; startx = actors[msg.from].x;
stopx = actors[msg.to].x; stopx = actors[msg.to].x;
textConf = { noteStart = startx + actors[msg.from].width / 2;
fontSize: conf.noteFontSize, noteEnd = stopx + actors[msg.to].width / 2;
fontFamily: conf.noteFontFamily,
fontWeight: conf.noteFontWeight,
margin: conf.wrapPadding
};
textWidth = utils.calculateTextWidth( textWidth = utils.calculateTextWidth(
shouldWrap ? utils.wrapLabel(msg.message, conf.width, textConf) : msg.message, shouldWrap ? utils.wrapLabel(msg.message, conf.width, conf.noteFont()) : msg.message,
textConf conf.noteFont()
); );
noteWidth = shouldWrap ? conf.width : Math.max(conf.width, textWidth + 2 * conf.noteMargin); noteWidth = shouldWrap ? conf.width : Math.max(conf.width, textWidth + 2 * conf.noteMargin);
logger.debug(
`msg:${msg.message} start:${startx} stop:${stopx} tw:${textWidth} nw:${noteWidth}`
);
if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) { if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
noteWidth = shouldWrap
? conf.width
: Math.max(
actors[msg.from].width / 2 + actors[msg.to].width / 2 - conf.actorMargin,
textWidth + 2 * conf.noteMargin
);
if (shouldWrap) { if (shouldWrap) {
msg.message = utils.wrapLabel(msg.message, noteWidth - 2 * conf.wrapPadding, textConf); msg.message = utils.wrapLabel(
msg.message,
noteWidth - 2 * conf.wrapPadding,
conf.noteFont()
);
} }
drawNote( drawNote(
diagram, diagram,
@@ -610,8 +634,18 @@ export const draw = function(text, id) {
noteWidth noteWidth
); );
} else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) { } else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {
noteWidth = shouldWrap
? conf.width
: Math.max(
actors[msg.from].width / 2 + actors[msg.to].width / 2 - conf.actorMargin,
textWidth + 2 * conf.noteMargin
);
if (shouldWrap) { if (shouldWrap) {
msg.message = utils.wrapLabel(msg.message, noteWidth - 2 * conf.wrapPadding, textConf); msg.message = utils.wrapLabel(
msg.message,
noteWidth - 2 * conf.wrapPadding,
conf.noteFont()
);
} }
drawNote( drawNote(
diagram, diagram,
@@ -624,15 +658,23 @@ export const draw = function(text, id) {
// Single-actor over // Single-actor over
textWidth = utils.calculateTextWidth( textWidth = utils.calculateTextWidth(
shouldWrap shouldWrap
? utils.wrapLabel(msg.message, Math.max(conf.width, actors[msg.to].width), textConf) ? utils.wrapLabel(
msg.message,
Math.max(conf.width, actors[msg.to].width),
conf.noteFont()
)
: msg.message, : msg.message,
textConf conf.noteFont()
); );
noteWidth = shouldWrap noteWidth = shouldWrap
? Math.max(conf.width, actors[msg.to].width) ? Math.max(conf.width, actors[msg.to].width)
: Math.max(actors[msg.to].width, conf.width, textWidth + 2 * conf.noteMargin); : Math.max(actors[msg.to].width, conf.width, textWidth + 2 * conf.noteMargin);
if (shouldWrap) { if (shouldWrap) {
msg.message = utils.wrapLabel(msg.message, noteWidth - 2 * conf.wrapPadding, textConf); msg.message = utils.wrapLabel(
msg.message,
noteWidth - 2 * conf.wrapPadding,
conf.noteFont()
);
} }
drawNote( drawNote(
diagram, diagram,
@@ -643,20 +685,14 @@ export const draw = function(text, id) {
); );
} else { } else {
// Multi-actor over // Multi-actor over
let noteStart = startx + actors[msg.from].width / 2;
let noteEnd = stopx + actors[msg.to].width / 2;
noteWidth = Math.abs(noteStart - noteEnd) + conf.actorMargin; noteWidth = Math.abs(noteStart - noteEnd) + conf.actorMargin;
if (shouldWrap) { if (shouldWrap) {
msg.message = utils.wrapLabel(msg.message, noteWidth, textConf); msg.message = utils.wrapLabel(msg.message, noteWidth, conf.noteFont());
} }
let x = let x =
startx < stopx startx < stopx
? startx + actors[msg.from].width / 2 - conf.actorMargin / 2 ? startx + actors[msg.from].width / 2 - conf.actorMargin / 2
: stopx + actors[msg.to].width / 2 - conf.actorMargin / 2; : stopx + actors[msg.to].width / 2 - conf.actorMargin / 2;
logger.debug(
`msg:${msg.message} start:${startx} stop:${stopx} tw:${textWidth} nw:${noteWidth}`
);
drawNote(diagram, x, bounds.getVerticalPos(), msg, noteWidth); drawNote(diagram, x, bounds.getVerticalPos(), msg, noteWidth);
} }
break; break;
@@ -751,12 +787,6 @@ export const draw = function(text, id) {
const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1; const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
startx = fromBounds[fromIdx]; startx = fromBounds[fromIdx];
stopx = toBounds[toIdx]; stopx = toBounds[toIdx];
textConf = {
fontSize: conf.messageFontSize,
fontFamily: conf.messageFontFamily,
fontWeight: conf.messageFontWeight,
margin: conf.wrapPadding
};
if (shouldWrap) { if (shouldWrap) {
msg.message = utils.wrapLabel( msg.message = utils.wrapLabel(
msg.message, msg.message,
@@ -764,7 +794,7 @@ export const draw = function(text, id) {
Math.abs(stopx - startx) + conf.messageMargin * 2, Math.abs(stopx - startx) + conf.messageMargin * 2,
conf.width + conf.messageMargin * 2 conf.width + conf.messageMargin * 2
), ),
textConf conf.messageFont()
); );
} }
@@ -877,19 +907,11 @@ const getMaxMessageWidthPerActor = function(actors, messages) {
const isNote = msg.placement !== undefined; const isNote = msg.placement !== undefined;
const isMessage = !isNote; const isMessage = !isNote;
const fontSize = isNote ? conf.noteFontSize : conf.messageFontSize; const textFont = isNote ? conf.noteFont() : conf.messageFont();
const fontFamily = isNote ? conf.noteFontFamily : conf.messageFontFamily;
const fontWeight = isNote ? conf.noteFontWeight : conf.messageFontWeight;
const textConf = { fontFamily, fontSize, fontWeight, margin: conf.wrapPadding };
let wrappedMessage = msg.wrap let wrappedMessage = msg.wrap
? utils.wrapLabel(msg.message, conf.width - conf.noteMargin, textConf) ? utils.wrapLabel(msg.message, conf.width - conf.noteMargin, textFont)
: msg.message; : msg.message;
const messageDimensions = utils.calculateTextDimensions(wrappedMessage, { const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);
fontSize,
fontFamily,
fontWeight,
margin: conf.wrapPadding
});
const messageWidth = messageDimensions.width; const messageWidth = messageDimensions.width;
/* /*
@@ -958,12 +980,6 @@ const getMaxMessageWidthPerActor = function(actors, messages) {
* @param actorToMessageWidth - A map of actor key -> max message width it holds * @param actorToMessageWidth - A map of actor key -> max message width it holds
*/ */
const calculateActorMargins = function(actors, actorToMessageWidth) { const calculateActorMargins = function(actors, actorToMessageWidth) {
const textConf = {
fontSize: conf.actorFontSize,
fontFamily: conf.actorFontFamily,
fontWeight: conf.actorFontWeight,
margin: conf.wrapPadding
};
let maxHeight = 0; let maxHeight = 0;
Object.keys(actors).forEach(prop => { Object.keys(actors).forEach(prop => {
const actor = actors[prop]; const actor = actors[prop];
@@ -971,10 +987,10 @@ const calculateActorMargins = function(actors, actorToMessageWidth) {
actor.description = utils.wrapLabel( actor.description = utils.wrapLabel(
actor.description, actor.description,
conf.width - 2 * conf.wrapPadding, conf.width - 2 * conf.wrapPadding,
textConf conf.actorFont()
); );
} }
const actDims = utils.calculateTextDimensions(actor.description, textConf); const actDims = utils.calculateTextDimensions(actor.description, conf.actorFont());
actor.width = actor.wrap actor.width = actor.wrap
? conf.width ? conf.width
: Math.max(conf.width, actDims.width + 2 * conf.wrapPadding); : Math.max(conf.width, actDims.width + 2 * conf.wrapPadding);
@@ -1045,14 +1061,19 @@ const calculateLoopMargins = function(messages, actors) {
current = stk; current = stk;
let from = actors[msg.from]; let from = actors[msg.from];
let to = actors[msg.to]; let to = actors[msg.to];
if (from.x < to.x) { if (from.x === to.x) {
current.from = Math.min(current.from, from.x); current.from = current.to = from.x;
current.to = Math.max(current.to, to.x); current.width = from.width;
} else { } else {
current.from = Math.min(current.from, to.x); if (from.x < to.x) {
current.to = Math.max(current.to, from.x); current.from = Math.min(current.from, from.x);
current.to = Math.max(current.to, to.x);
} else {
current.from = Math.min(current.from, to.x);
current.to = Math.max(current.to, from.x);
}
current.width = Math.abs(current.from - current.to) - 20 + 2 * conf.wrapPadding;
} }
current.width = Math.abs(current.from - current.to) - 20 + 2 * conf.wrapPadding;
}); });
} }
}); });

20
src/diagrams/sequence/svgDraw.js
View File

@@ -241,16 +241,18 @@ export const drawLoop = function(elem, bounds, labelText, conf) {
} }
let minSize = let minSize =
Math.round((3 * conf.fontSize) / 4) < 10 ? conf.fontSize : Math.round((3 * conf.fontSize) / 4); Math.round((3 * conf.messageFontSize) / 4) < 10
? conf.messageFontSize
: Math.round((3 * conf.messageFontSize) / 4);
let txt = getTextObj(); let txt = getTextObj();
txt.text = labelText; txt.text = labelText;
txt.x = bounds.startx; txt.x = bounds.startx;
txt.y = bounds.starty; txt.y = bounds.starty;
txt.labelMargin = 1.5 * 10; // This is the small box that says "loop" txt.labelMargin = 1.5 * 10; // This is the small box that says "loop"
txt.fontFamily = conf.fontFamily; txt.fontFamily = conf.messageFontFamily;
txt.fontSize = minSize; txt.fontSize = minSize;
txt.fontWeight = conf.fontWeight; txt.fontWeight = conf.messageFontWeight;
txt.class = 'labelText'; // Its size & position are fixed. txt.class = 'labelText'; // Its size & position are fixed.
let labelElem = drawLabel(g, txt); let labelElem = drawLabel(g, txt);
@@ -261,10 +263,10 @@ export const drawLoop = function(elem, bounds, labelText, conf) {
txt.y = bounds.starty + conf.boxMargin + conf.boxTextMargin; txt.y = bounds.starty + conf.boxMargin + conf.boxTextMargin;
txt.anchor = 'middle'; txt.anchor = 'middle';
txt.class = 'loopText'; txt.class = 'loopText';
txt.fontFamily = conf.fontFamily; txt.fontFamily = conf.messageFontFamily;
txt.fontSize = minSize; txt.fontSize = minSize;
txt.fontWeight = conf.fontWeight; txt.fontWeight = conf.messageFontWeight;
txt.wrap = bounds.wrap; txt.wrap = true;
drawText(g, txt); drawText(g, txt);
@@ -273,12 +275,12 @@ export const drawLoop = function(elem, bounds, labelText, conf) {
if (item.message) { if (item.message) {
txt.text = item.message; txt.text = item.message;
txt.x = bounds.startx + (bounds.stopx - bounds.startx) / 2; txt.x = bounds.startx + (bounds.stopx - bounds.startx) / 2;
txt.y = bounds.sections[idx] + 1.5 * conf.boxMargin; txt.y = bounds.sections[idx] + conf.boxMargin + conf.boxTextMargin;
txt.class = 'loopText'; txt.class = 'loopText';
txt.anchor = 'middle'; txt.anchor = 'middle';
txt.fontFamily = conf.fontFamily; txt.fontFamily = conf.messageFontFamily;
txt.fontSize = minSize; txt.fontSize = minSize;
txt.fontWeight = conf.fontWeight; txt.fontWeight = conf.messageFontWeight;
txt.wrap = bounds.wrap; txt.wrap = bounds.wrap;
drawText(g, txt); drawText(g, txt);
} }

7
src/utils.js
View File

@@ -498,7 +498,7 @@ export const wrapLabel = (label, maxWidth, config) => {
return label; return label;
} }
config = Object.assign( config = Object.assign(
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15, joinWith: '<br/>' }, { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0, joinWith: '<br/>' },
config config
); );
if (common.lineBreakRegex.test(label)) { if (common.lineBreakRegex.test(label)) {
@@ -530,10 +530,7 @@ export const wrapLabel = (label, maxWidth, config) => {
}; };
const breakString = (word, maxWidth, hyphenCharacter = '-', config) => { const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
config = Object.assign( config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 }, config);
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
config
);
const characters = word.split(''); const characters = word.split('');
const lines = []; const lines = [];
let currentLine = ''; let currentLine = '';