Merge pull request #1517 from cmmoran/feature/1483_long_messages
Feature/1483 long messages
This commit is contained in:
commit
eb3f62fd90
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -305,28 +305,25 @@ const config = {
|
|||
* **Default value 20.
|
||||
*/
|
||||
labelBoxHeight: 20,
|
||||
messageFont: () => {
|
||||
const c = getConfig().sequence;
|
||||
messageFont: function() {
|
||||
return {
|
||||
fontFamily: c.messageFontFamily,
|
||||
fontSize: c.messageFontSize,
|
||||
fontWeight: c.messageFontWeight
|
||||
fontFamily: this.messageFontFamily,
|
||||
fontSize: this.messageFontSize,
|
||||
fontWeight: this.messageFontWeight
|
||||
};
|
||||
},
|
||||
noteFont: () => {
|
||||
const c = getConfig().sequence;
|
||||
noteFont: function() {
|
||||
return {
|
||||
fontFamily: c.noteFontFamily,
|
||||
fontSize: c.noteFontSize,
|
||||
fontWeight: c.noteFontWeight
|
||||
fontFamily: this.noteFontFamily,
|
||||
fontSize: this.noteFontSize,
|
||||
fontWeight: this.noteFontWeight
|
||||
};
|
||||
},
|
||||
actorFont: () => {
|
||||
const c = getConfig().sequence;
|
||||
actorFont: function() {
|
||||
return {
|
||||
fontFamily: c.actorFontFamily,
|
||||
fontSize: c.actorFontSize,
|
||||
fontWeight: c.actorFontWeight
|
||||
fontFamily: this.actorFontFamily,
|
||||
fontSize: this.actorFontSize,
|
||||
fontWeight: this.actorFontWeight
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
@ -277,8 +277,9 @@ const drawMessage = function(g, msgModel) {
|
|||
|
||||
let textWidth = textDims.width;
|
||||
|
||||
let line;
|
||||
let line, lineStarty;
|
||||
if (startx === stopx) {
|
||||
lineStarty = bounds.getVerticalPos() + totalOffset;
|
||||
if (conf.rightAngles) {
|
||||
line = g
|
||||
.append('path')
|
||||
|
@ -292,6 +293,7 @@ const drawMessage = function(g, msgModel) {
|
|||
} else {
|
||||
totalOffset += conf.boxMargin;
|
||||
|
||||
lineStarty = bounds.getVerticalPos() + totalOffset;
|
||||
line = g
|
||||
.append('path')
|
||||
.attr(
|
||||
|
@ -299,19 +301,19 @@ const drawMessage = function(g, msgModel) {
|
|||
'M ' +
|
||||
startx +
|
||||
',' +
|
||||
(bounds.getVerticalPos() + totalOffset) +
|
||||
lineStarty +
|
||||
' C ' +
|
||||
(startx + 60) +
|
||||
',' +
|
||||
(bounds.getVerticalPos() - 10 + totalOffset) +
|
||||
(lineStarty - 10) +
|
||||
' ' +
|
||||
(startx + 60) +
|
||||
',' +
|
||||
(bounds.getVerticalPos() + 30 + totalOffset) +
|
||||
(lineStarty + 30) +
|
||||
' ' +
|
||||
startx +
|
||||
',' +
|
||||
(bounds.getVerticalPos() + 20 + totalOffset)
|
||||
(lineStarty + 20)
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -324,18 +326,14 @@ const drawMessage = function(g, msgModel) {
|
|||
bounds.getVerticalPos() + 30 + totalOffset
|
||||
);
|
||||
} else {
|
||||
lineStarty = bounds.getVerticalPos() + totalOffset;
|
||||
totalOffset += conf.boxMargin;
|
||||
line = g.append('line');
|
||||
line.attr('x1', startx);
|
||||
line.attr('y1', bounds.getVerticalPos() + totalOffset);
|
||||
line.attr('y1', lineStarty);
|
||||
line.attr('x2', stopx);
|
||||
line.attr('y2', bounds.getVerticalPos() + totalOffset);
|
||||
bounds.insert(
|
||||
startx,
|
||||
bounds.getVerticalPos() - 10 + totalOffset,
|
||||
stopx,
|
||||
bounds.getVerticalPos() + totalOffset
|
||||
);
|
||||
line.attr('y2', lineStarty);
|
||||
bounds.insert(startx, lineStarty - 10, stopx, lineStarty);
|
||||
}
|
||||
// Make an SVG Container
|
||||
// Draw the line
|
||||
|
@ -363,7 +361,7 @@ const drawMessage = function(g, msgModel) {
|
|||
}
|
||||
|
||||
line.attr('stroke-width', 2);
|
||||
line.attr('stroke', 'black');
|
||||
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) {
|
||||
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||
|
@ -378,7 +376,7 @@ const drawMessage = function(g, msgModel) {
|
|||
line.attr('marker-start', 'url(' + url + '#sequencenumber)');
|
||||
g.append('text')
|
||||
.attr('x', startx)
|
||||
.attr('y', bounds.getVerticalPos() + 4 + totalOffset)
|
||||
.attr('y', lineStarty + 4)
|
||||
.attr('font-family', 'sans-serif')
|
||||
.attr('font-size', '12px')
|
||||
.attr('text-anchor', 'middle')
|
||||
|
@ -459,20 +457,17 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
|
|||
bounds.bumpVerticalPos(preMargin);
|
||||
let heightAdjust = postMargin;
|
||||
if (msg.id && msg.message && loopWidths[msg.id]) {
|
||||
if (msg.wrap) {
|
||||
let loopWidth = loopWidths[msg.id].width;
|
||||
let textConf = conf.messageFont();
|
||||
msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
|
||||
msg.width = loopWidth;
|
||||
let loopWidth = loopWidths[msg.id].width;
|
||||
let textConf = conf.messageFont();
|
||||
msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
|
||||
msg.width = loopWidth;
|
||||
msg.wrap = true;
|
||||
|
||||
// const lines = msg.message.split(common.lineBreakRegex).length;
|
||||
const textDims = utils.calculateTextDimensions(msg.message, textConf);
|
||||
const totalOffset = textDims.height - conf.labelBoxHeight;
|
||||
heightAdjust = postMargin + totalOffset;
|
||||
logger.debug(`${totalOffset} - ${msg.message}`);
|
||||
} else {
|
||||
msg.message = `[${msg.message}]`;
|
||||
}
|
||||
// const lines = msg.message.split(common.lineBreakRegex).length;
|
||||
const textDims = utils.calculateTextDimensions(msg.message, textConf);
|
||||
const totalOffset = textDims.height - conf.labelBoxHeight;
|
||||
heightAdjust = postMargin + totalOffset;
|
||||
logger.debug(`${totalOffset} - ${msg.message}`);
|
||||
}
|
||||
addLoopFn(msg);
|
||||
bounds.bumpVerticalPos(heightAdjust);
|
||||
|
|
47
src/utils.js
47
src/utils.js
|
@ -499,16 +499,20 @@ export const drawSimpleText = function(elem, textData) {
|
|||
};
|
||||
|
||||
export const wrapLabel = (label, maxWidth, config) => {
|
||||
if (!wrapLabel.cache) {
|
||||
// until memoize PR
|
||||
wrapLabel.cache = {};
|
||||
}
|
||||
if (!label) {
|
||||
return label;
|
||||
}
|
||||
config = Object.assign(
|
||||
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0, joinWith: '<br/>' },
|
||||
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '<br/>' },
|
||||
config
|
||||
);
|
||||
const cacheKey = `${label}-${maxWidth}-${JSON.stringify(config)}`;
|
||||
if (wrapLabel[cacheKey]) {
|
||||
return wrapLabel[cacheKey];
|
||||
if (wrapLabel.cache[cacheKey]) {
|
||||
return wrapLabel.cache[cacheKey];
|
||||
}
|
||||
if (common.lineBreakRegex.test(label)) {
|
||||
return label;
|
||||
|
@ -536,15 +540,18 @@ export const wrapLabel = (label, maxWidth, config) => {
|
|||
}
|
||||
});
|
||||
const result = completedLines.filter(line => line !== '').join(config.joinWith);
|
||||
wrapLabel[cacheKey] = result;
|
||||
wrapLabel.cache[cacheKey] = result;
|
||||
return result;
|
||||
};
|
||||
|
||||
const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
|
||||
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 }, config);
|
||||
if (!breakString.cache) {
|
||||
breakString.cache = {};
|
||||
}
|
||||
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
|
||||
const cacheKey = `${word}-${maxWidth}-${hyphenCharacter}-${JSON.stringify(config)}`;
|
||||
if (breakString[cacheKey]) {
|
||||
return breakString[cacheKey];
|
||||
if (breakString.cache[cacheKey]) {
|
||||
return breakString.cache[cacheKey];
|
||||
}
|
||||
const characters = word.split('');
|
||||
const lines = [];
|
||||
|
@ -563,7 +570,7 @@ const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
|
|||
}
|
||||
});
|
||||
const result = { hyphenatedStrings: lines, remainingWord: currentLine };
|
||||
breakString[cacheKey] = result;
|
||||
breakString.cache[cacheKey] = result;
|
||||
return result;
|
||||
};
|
||||
|
||||
|
@ -579,10 +586,7 @@ const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
|
|||
* @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
|
||||
*/
|
||||
export const calculateTextHeight = function(text, config) {
|
||||
config = Object.assign(
|
||||
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
|
||||
config
|
||||
);
|
||||
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
|
||||
return calculateTextDimensions(text, config).height;
|
||||
};
|
||||
|
||||
|
@ -594,10 +598,7 @@ export const calculateTextHeight = function(text, config) {
|
|||
* @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
|
||||
*/
|
||||
export const calculateTextWidth = function(text, config) {
|
||||
config = Object.assign(
|
||||
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
|
||||
config
|
||||
);
|
||||
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
|
||||
return calculateTextDimensions(text, config).width;
|
||||
};
|
||||
|
||||
|
@ -609,17 +610,17 @@ export const calculateTextWidth = function(text, config) {
|
|||
* @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
|
||||
*/
|
||||
export const calculateTextDimensions = function(text, config) {
|
||||
config = Object.assign(
|
||||
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
|
||||
config
|
||||
);
|
||||
if (!calculateTextDimensions.cache) {
|
||||
calculateTextDimensions.cache = {};
|
||||
}
|
||||
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
|
||||
const { fontSize, fontFamily, fontWeight } = config;
|
||||
if (!text) {
|
||||
return { width: 0, height: 0 };
|
||||
}
|
||||
const cacheKey = `${text}-${JSON.stringify(config)}`;
|
||||
if (calculateTextDimensions[cacheKey]) {
|
||||
return calculateTextDimensions[cacheKey];
|
||||
if (calculateTextDimensions.cache[cacheKey]) {
|
||||
return calculateTextDimensions.cache[cacheKey];
|
||||
}
|
||||
|
||||
// We can't really know if the user supplied font family will render on the user agent;
|
||||
|
@ -670,7 +671,7 @@ export const calculateTextDimensions = function(text, config) {
|
|||
? 0
|
||||
: 1;
|
||||
const result = dims[index];
|
||||
calculateTextDimensions[cacheKey] = result;
|
||||
calculateTextDimensions.cache[cacheKey] = result;
|
||||
return result;
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue