diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 7f4c5f1ad..9a4e2ff0b 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -55,7 +55,29 @@ const conf = {
// wrap text
wrapEnabled: false,
// 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 = {
@@ -495,18 +517,16 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
if (msg.message && loopWidths[msg.message]) {
let loopWidth = loopWidths[msg.message].width;
let minSize =
- Math.round((3 * conf.fontSize) / 4) < 10
- ? conf.fontSize
- : Math.round((3 * conf.fontSize) / 4);
- let textConf = {
- fontSize: minSize,
- fontFamily: conf.messageFontFamily,
- fontWeight: conf.messageFontWeight,
- margin: conf.wrapPadding
- };
- msg.message = msg.wrap
- ? utils.wrapLabel(`[${msg.message}]`, loopWidth, textConf)
- : `[${msg.message}]`;
+ Math.round((3 * conf.messageFontSize) / 4) < 10
+ ? conf.messageFontSize
+ : Math.round((3 * conf.messageFontSize) / 4);
+ let textConf = conf.messageFont();
+ textConf.fontSize = minSize;
+ msg.message = utils.wrapLabel(
+ `[${msg.message}]`,
+ loopWidth - 20 - 2 * conf.wrapPadding,
+ textConf
+ );
heightAdjust = Math.max(
0,
@@ -573,8 +593,9 @@ export const draw = function(text, id) {
messages.forEach(function(msg) {
let loopData,
noteWidth,
+ noteStart,
+ noteEnd,
textWidth,
- textConf,
shouldWrap = msg.wrap && msg.message && !common.lineBreakRegex.test(msg.message);
switch (msg.type) {
@@ -583,24 +604,27 @@ export const draw = function(text, id) {
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
- textConf = {
- fontSize: conf.noteFontSize,
- fontFamily: conf.noteFontFamily,
- fontWeight: conf.noteFontWeight,
- margin: conf.wrapPadding
- };
+ noteStart = startx + actors[msg.from].width / 2;
+ noteEnd = stopx + actors[msg.to].width / 2;
textWidth = utils.calculateTextWidth(
- shouldWrap ? utils.wrapLabel(msg.message, conf.width, textConf) : msg.message,
- textConf
+ shouldWrap ? utils.wrapLabel(msg.message, conf.width, conf.noteFont()) : msg.message,
+ conf.noteFont()
);
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) {
+ noteWidth = shouldWrap
+ ? conf.width
+ : Math.max(
+ actors[msg.from].width / 2 + actors[msg.to].width / 2 - conf.actorMargin,
+ textWidth + 2 * conf.noteMargin
+ );
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(
diagram,
@@ -610,8 +634,18 @@ export const draw = function(text, id) {
noteWidth
);
} 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) {
- msg.message = utils.wrapLabel(msg.message, noteWidth - 2 * conf.wrapPadding, textConf);
+ msg.message = utils.wrapLabel(
+ msg.message,
+ noteWidth - 2 * conf.wrapPadding,
+ conf.noteFont()
+ );
}
drawNote(
diagram,
@@ -624,15 +658,23 @@ export const draw = function(text, id) {
// Single-actor over
textWidth = utils.calculateTextWidth(
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,
- textConf
+ conf.noteFont()
);
noteWidth = shouldWrap
? Math.max(conf.width, actors[msg.to].width)
: Math.max(actors[msg.to].width, conf.width, textWidth + 2 * conf.noteMargin);
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(
diagram,
@@ -643,20 +685,14 @@ export const draw = function(text, id) {
);
} else {
// 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;
if (shouldWrap) {
- msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
+ msg.message = utils.wrapLabel(msg.message, noteWidth, conf.noteFont());
}
let x =
startx < stopx
? startx + actors[msg.from].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);
}
break;
@@ -751,12 +787,6 @@ export const draw = function(text, id) {
const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
startx = fromBounds[fromIdx];
stopx = toBounds[toIdx];
- textConf = {
- fontSize: conf.messageFontSize,
- fontFamily: conf.messageFontFamily,
- fontWeight: conf.messageFontWeight,
- margin: conf.wrapPadding
- };
if (shouldWrap) {
msg.message = utils.wrapLabel(
msg.message,
@@ -764,7 +794,7 @@ export const draw = function(text, id) {
Math.abs(stopx - startx) + 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 isMessage = !isNote;
- const fontSize = isNote ? conf.noteFontSize : conf.messageFontSize;
- const fontFamily = isNote ? conf.noteFontFamily : conf.messageFontFamily;
- const fontWeight = isNote ? conf.noteFontWeight : conf.messageFontWeight;
- const textConf = { fontFamily, fontSize, fontWeight, margin: conf.wrapPadding };
+ const textFont = isNote ? conf.noteFont() : conf.messageFont();
let wrappedMessage = msg.wrap
- ? utils.wrapLabel(msg.message, conf.width - conf.noteMargin, textConf)
+ ? utils.wrapLabel(msg.message, conf.width - conf.noteMargin, textFont)
: msg.message;
- const messageDimensions = utils.calculateTextDimensions(wrappedMessage, {
- fontSize,
- fontFamily,
- fontWeight,
- margin: conf.wrapPadding
- });
+ const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);
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
*/
const calculateActorMargins = function(actors, actorToMessageWidth) {
- const textConf = {
- fontSize: conf.actorFontSize,
- fontFamily: conf.actorFontFamily,
- fontWeight: conf.actorFontWeight,
- margin: conf.wrapPadding
- };
let maxHeight = 0;
Object.keys(actors).forEach(prop => {
const actor = actors[prop];
@@ -971,10 +987,10 @@ const calculateActorMargins = function(actors, actorToMessageWidth) {
actor.description = utils.wrapLabel(
actor.description,
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
? conf.width
: Math.max(conf.width, actDims.width + 2 * conf.wrapPadding);
@@ -1045,14 +1061,19 @@ const calculateLoopMargins = function(messages, actors) {
current = stk;
let from = actors[msg.from];
let to = actors[msg.to];
- if (from.x < to.x) {
- current.from = Math.min(current.from, from.x);
- current.to = Math.max(current.to, to.x);
+ if (from.x === to.x) {
+ current.from = current.to = from.x;
+ current.width = from.width;
} else {
- current.from = Math.min(current.from, to.x);
- current.to = Math.max(current.to, from.x);
+ if (from.x < to.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;
});
}
});
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index b1478df32..7d849875a 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -241,16 +241,18 @@ export const drawLoop = function(elem, bounds, labelText, conf) {
}
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();
txt.text = labelText;
txt.x = bounds.startx;
txt.y = bounds.starty;
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.fontWeight = conf.fontWeight;
+ txt.fontWeight = conf.messageFontWeight;
txt.class = 'labelText'; // Its size & position are fixed.
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.anchor = 'middle';
txt.class = 'loopText';
- txt.fontFamily = conf.fontFamily;
+ txt.fontFamily = conf.messageFontFamily;
txt.fontSize = minSize;
- txt.fontWeight = conf.fontWeight;
- txt.wrap = bounds.wrap;
+ txt.fontWeight = conf.messageFontWeight;
+ txt.wrap = true;
drawText(g, txt);
@@ -273,12 +275,12 @@ export const drawLoop = function(elem, bounds, labelText, conf) {
if (item.message) {
txt.text = item.message;
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.anchor = 'middle';
- txt.fontFamily = conf.fontFamily;
+ txt.fontFamily = conf.messageFontFamily;
txt.fontSize = minSize;
- txt.fontWeight = conf.fontWeight;
+ txt.fontWeight = conf.messageFontWeight;
txt.wrap = bounds.wrap;
drawText(g, txt);
}
diff --git a/src/utils.js b/src/utils.js
index 3cffc3f46..51fe4b480 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -498,7 +498,7 @@ export const wrapLabel = (label, maxWidth, config) => {
return label;
}
config = Object.assign(
- { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15, joinWith: '
' },
+ { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0, joinWith: '
' },
config
);
if (common.lineBreakRegex.test(label)) {
@@ -530,10 +530,7 @@ export const wrapLabel = (label, maxWidth, config) => {
};
const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
- config = Object.assign(
- { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
- config
- );
+ config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 }, config);
const characters = word.split('');
const lines = [];
let currentLine = '';