mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-04 04:44:08 +01:00
Merge branch 'develop' into feature/2249_sequence_diagram_popup_menus
This commit is contained in:
E Jenkins
@@ -11,11 +11,11 @@ let titleWrapped = false;
|
||||
let sequenceNumbersEnabled = false;
|
||||
let wrapEnabled = false;
|
||||
|
||||
export const parseDirective = function(statement, context, type) {
|
||||
export const parseDirective = function (statement, context, type) {
|
||||
mermaidAPI.parseDirective(this, statement, context, type);
|
||||
};
|
||||
|
||||
export const addActor = function(id, name, description) {
|
||||
export const addActor = function (id, name, description) {
|
||||
// Don't allow description nulling
|
||||
const old = actors[id];
|
||||
if (old && name === old.name && description == null) return;
|
||||
@@ -42,7 +42,7 @@ export const addActor = function(id, name, description) {
|
||||
prevActor = id;
|
||||
};
|
||||
|
||||
const activationCount = part => {
|
||||
const activationCount = (part) => {
|
||||
let i;
|
||||
let count = 0;
|
||||
for (i = 0; i < messages.length; i++) {
|
||||
@@ -60,17 +60,17 @@ const activationCount = part => {
|
||||
return count;
|
||||
};
|
||||
|
||||
export const addMessage = function(idFrom, idTo, message, answer) {
|
||||
export const addMessage = function (idFrom, idTo, message, answer) {
|
||||
messages.push({
|
||||
from: idFrom,
|
||||
to: idTo,
|
||||
message: message.text,
|
||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
||||
answer: answer
|
||||
answer: answer,
|
||||
});
|
||||
};
|
||||
|
||||
export const addSignal = function(
|
||||
export const addSignal = function (
|
||||
idFrom,
|
||||
idTo,
|
||||
message = { text: undefined, wrap: undefined },
|
||||
@@ -86,7 +86,7 @@ export const addSignal = function(
|
||||
token: '->>-',
|
||||
line: '1',
|
||||
loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
|
||||
expected: ["'ACTIVE_PARTICIPANT'"]
|
||||
expected: ["'ACTIVE_PARTICIPANT'"],
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
@@ -96,47 +96,47 @@ export const addSignal = function(
|
||||
to: idTo,
|
||||
message: message.text,
|
||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
||||
type: messageType
|
||||
type: messageType,
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
export const getMessages = function() {
|
||||
export const getMessages = function () {
|
||||
return messages;
|
||||
};
|
||||
|
||||
export const getActors = function() {
|
||||
export const getActors = function () {
|
||||
return actors;
|
||||
};
|
||||
export const getActor = function(id) {
|
||||
export const getActor = function (id) {
|
||||
return actors[id];
|
||||
};
|
||||
export const getActorKeys = function() {
|
||||
export const getActorKeys = function () {
|
||||
return Object.keys(actors);
|
||||
};
|
||||
export const getTitle = function() {
|
||||
export const getTitle = function () {
|
||||
return title;
|
||||
};
|
||||
export const getTitleWrapped = function() {
|
||||
export const getTitleWrapped = function () {
|
||||
return titleWrapped;
|
||||
};
|
||||
export const enableSequenceNumbers = function() {
|
||||
export const enableSequenceNumbers = function () {
|
||||
sequenceNumbersEnabled = true;
|
||||
};
|
||||
export const showSequenceNumbers = () => sequenceNumbersEnabled;
|
||||
|
||||
export const setWrap = function(wrapSetting) {
|
||||
export const setWrap = function (wrapSetting) {
|
||||
wrapEnabled = wrapSetting;
|
||||
};
|
||||
|
||||
export const autoWrap = () => wrapEnabled;
|
||||
|
||||
export const clear = function() {
|
||||
export const clear = function () {
|
||||
actors = {};
|
||||
messages = [];
|
||||
};
|
||||
|
||||
export const parseMessage = function(str) {
|
||||
export const parseMessage = function (str) {
|
||||
const _str = str.trim();
|
||||
const message = {
|
||||
text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
|
||||
@@ -145,7 +145,7 @@ export const parseMessage = function(str) {
|
||||
? true
|
||||
: _str.match(/^[:]?nowrap:/) !== null
|
||||
? false
|
||||
: undefined
|
||||
: undefined,
|
||||
};
|
||||
log.debug('parseMessage:', message);
|
||||
return message;
|
||||
@@ -174,26 +174,26 @@ export const LINETYPE = {
|
||||
RECT_START: 22,
|
||||
RECT_END: 23,
|
||||
SOLID_POINT: 24,
|
||||
DOTTED_POINT: 25
|
||||
DOTTED_POINT: 25,
|
||||
};
|
||||
|
||||
export const ARROWTYPE = {
|
||||
FILLED: 0,
|
||||
OPEN: 1
|
||||
OPEN: 1,
|
||||
};
|
||||
|
||||
export const PLACEMENT = {
|
||||
LEFTOF: 0,
|
||||
RIGHTOF: 1,
|
||||
OVER: 2
|
||||
OVER: 2,
|
||||
};
|
||||
|
||||
export const addNote = function(actor, placement, message) {
|
||||
export const addNote = function (actor, placement, message) {
|
||||
const note = {
|
||||
actor: actor,
|
||||
placement: placement,
|
||||
message: message.text,
|
||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap
|
||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
||||
};
|
||||
|
||||
// Coerce actor into a [to, from, ...] array
|
||||
@@ -206,7 +206,7 @@ export const addNote = function(actor, placement, message) {
|
||||
message: message.text,
|
||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
||||
type: LINETYPE.NOTE,
|
||||
placement: placement
|
||||
placement: placement,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -291,14 +291,14 @@ export const getActorProperty = function (actor, key) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export const setTitle = function(titleWrap) {
|
||||
export const setTitle = function (titleWrap) {
|
||||
title = titleWrap.text;
|
||||
titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap;
|
||||
};
|
||||
|
||||
export const apply = function(param) {
|
||||
export const apply = function (param) {
|
||||
if (param instanceof Array) {
|
||||
param.forEach(function(item) {
|
||||
param.forEach(function (item) {
|
||||
apply(item);
|
||||
});
|
||||
} else {
|
||||
@@ -397,5 +397,5 @@ export default {
|
||||
PLACEMENT,
|
||||
addNote,
|
||||
setTitle,
|
||||
apply
|
||||
apply,
|
||||
};
|
||||
|
||||
@@ -1391,7 +1391,7 @@ Bob->>Alice: Fine!`;
|
||||
});
|
||||
it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
|
||||
const str = `
|
||||
%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
|
||||
%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "messageFontWeight": 400, "wrap": true }}}%%
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
|
||||
Note left of Alice: Bob thinks
|
||||
@@ -1407,7 +1407,7 @@ Bob->>Alice: Fine!`;
|
||||
expect(mermaid.theme).toBe('dark');
|
||||
expect(mermaid.sequence.fontFamily).toBe('Menlo');
|
||||
expect(mermaid.sequence.fontSize).toBe(18);
|
||||
expect(mermaid.sequence.fontWeight).toBe(400);
|
||||
expect(mermaid.sequence.messageFontWeight).toBe(400);
|
||||
expect(msgs.every(v => v.wrap)).toBe(true);
|
||||
|
||||
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
|
||||
|
||||
@@ -16,65 +16,65 @@ export const bounds = {
|
||||
startx: undefined,
|
||||
stopx: undefined,
|
||||
starty: undefined,
|
||||
stopy: undefined
|
||||
stopy: undefined,
|
||||
},
|
||||
verticalPos: 0,
|
||||
sequenceItems: [],
|
||||
activations: [],
|
||||
models: {
|
||||
getHeight: function() {
|
||||
getHeight: function () {
|
||||
return (
|
||||
Math.max.apply(
|
||||
null,
|
||||
this.actors.length === 0 ? [0] : this.actors.map(actor => actor.height || 0)
|
||||
this.actors.length === 0 ? [0] : this.actors.map((actor) => actor.height || 0)
|
||||
) +
|
||||
(this.loops.length === 0
|
||||
? 0
|
||||
: this.loops.map(it => it.height || 0).reduce((acc, h) => acc + h)) +
|
||||
: this.loops.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
|
||||
(this.messages.length === 0
|
||||
? 0
|
||||
: this.messages.map(it => it.height || 0).reduce((acc, h) => acc + h)) +
|
||||
: this.messages.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
|
||||
(this.notes.length === 0
|
||||
? 0
|
||||
: this.notes.map(it => it.height || 0).reduce((acc, h) => acc + h))
|
||||
: this.notes.map((it) => it.height || 0).reduce((acc, h) => acc + h))
|
||||
);
|
||||
},
|
||||
clear: function() {
|
||||
clear: function () {
|
||||
this.actors = [];
|
||||
this.loops = [];
|
||||
this.messages = [];
|
||||
this.notes = [];
|
||||
},
|
||||
addActor: function(actorModel) {
|
||||
addActor: function (actorModel) {
|
||||
this.actors.push(actorModel);
|
||||
},
|
||||
addLoop: function(loopModel) {
|
||||
addLoop: function (loopModel) {
|
||||
this.loops.push(loopModel);
|
||||
},
|
||||
addMessage: function(msgModel) {
|
||||
addMessage: function (msgModel) {
|
||||
this.messages.push(msgModel);
|
||||
},
|
||||
addNote: function(noteModel) {
|
||||
addNote: function (noteModel) {
|
||||
this.notes.push(noteModel);
|
||||
},
|
||||
lastActor: function() {
|
||||
lastActor: function () {
|
||||
return this.actors[this.actors.length - 1];
|
||||
},
|
||||
lastLoop: function() {
|
||||
lastLoop: function () {
|
||||
return this.loops[this.loops.length - 1];
|
||||
},
|
||||
lastMessage: function() {
|
||||
lastMessage: function () {
|
||||
return this.messages[this.messages.length - 1];
|
||||
},
|
||||
lastNote: function() {
|
||||
lastNote: function () {
|
||||
return this.notes[this.notes.length - 1];
|
||||
},
|
||||
actors: [],
|
||||
loops: [],
|
||||
messages: [],
|
||||
notes: []
|
||||
notes: [],
|
||||
},
|
||||
init: function() {
|
||||
init: function () {
|
||||
this.sequenceItems = [];
|
||||
this.activations = [];
|
||||
this.models.clear();
|
||||
@@ -82,19 +82,19 @@ export const bounds = {
|
||||
startx: undefined,
|
||||
stopx: undefined,
|
||||
starty: undefined,
|
||||
stopy: undefined
|
||||
stopy: undefined,
|
||||
};
|
||||
this.verticalPos = 0;
|
||||
setConf(parser.yy.getConfig());
|
||||
},
|
||||
updateVal: function(obj, key, val, fun) {
|
||||
updateVal: function (obj, key, val, fun) {
|
||||
if (typeof obj[key] === 'undefined') {
|
||||
obj[key] = val;
|
||||
} else {
|
||||
obj[key] = fun(val, obj[key]);
|
||||
}
|
||||
},
|
||||
updateBounds: function(startx, starty, stopx, stopy) {
|
||||
updateBounds: function (startx, starty, stopx, stopy) {
|
||||
const _self = this;
|
||||
let cnt = 0;
|
||||
function updateFn(type) {
|
||||
@@ -122,7 +122,7 @@ export const bounds = {
|
||||
this.sequenceItems.forEach(updateFn());
|
||||
this.activations.forEach(updateFn('activation'));
|
||||
},
|
||||
insert: function(startx, starty, stopx, stopy) {
|
||||
insert: function (startx, starty, stopx, stopy) {
|
||||
const _startx = Math.min(startx, stopx);
|
||||
const _stopx = Math.max(startx, stopx);
|
||||
const _starty = Math.min(starty, stopy);
|
||||
@@ -135,7 +135,7 @@ export const bounds = {
|
||||
|
||||
this.updateBounds(_startx, _starty, _stopx, _stopy);
|
||||
},
|
||||
newActivation: function(message, diagram, actors) {
|
||||
newActivation: function (message, diagram, actors) {
|
||||
const actorRect = actors[message.from.actor];
|
||||
const stackedSize = actorActivations(message.from.actor).length || 0;
|
||||
const x = actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;
|
||||
@@ -145,19 +145,19 @@ export const bounds = {
|
||||
stopx: x + conf.activationWidth,
|
||||
stopy: undefined,
|
||||
actor: message.from.actor,
|
||||
anchored: svgDraw.anchorElement(diagram)
|
||||
anchored: svgDraw.anchorElement(diagram),
|
||||
});
|
||||
},
|
||||
endActivation: function(message) {
|
||||
endActivation: function (message) {
|
||||
// find most recent activation for given actor
|
||||
const lastActorActivationIdx = this.activations
|
||||
.map(function(activation) {
|
||||
.map(function (activation) {
|
||||
return activation.actor;
|
||||
})
|
||||
.lastIndexOf(message.from.actor);
|
||||
return this.activations.splice(lastActorActivationIdx, 1)[0];
|
||||
},
|
||||
createLoop: function(title = { message: undefined, wrap: false, width: undefined }, fill) {
|
||||
createLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
|
||||
return {
|
||||
startx: undefined,
|
||||
starty: this.verticalPos,
|
||||
@@ -167,16 +167,16 @@ export const bounds = {
|
||||
wrap: title.wrap,
|
||||
width: title.width,
|
||||
height: 0,
|
||||
fill: fill
|
||||
fill: fill,
|
||||
};
|
||||
},
|
||||
newLoop: function(title = { message: undefined, wrap: false, width: undefined }, fill) {
|
||||
newLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
|
||||
this.sequenceItems.push(this.createLoop(title, fill));
|
||||
},
|
||||
endLoop: function() {
|
||||
endLoop: function () {
|
||||
return this.sequenceItems.pop();
|
||||
},
|
||||
addSectionToLoop: function(message) {
|
||||
addSectionToLoop: function (message) {
|
||||
const loop = this.sequenceItems.pop();
|
||||
loop.sections = loop.sections || [];
|
||||
loop.sectionTitles = loop.sectionTitles || [];
|
||||
@@ -184,16 +184,16 @@ export const bounds = {
|
||||
loop.sectionTitles.push(message);
|
||||
this.sequenceItems.push(loop);
|
||||
},
|
||||
bumpVerticalPos: function(bump) {
|
||||
bumpVerticalPos: function (bump) {
|
||||
this.verticalPos = this.verticalPos + bump;
|
||||
this.data.stopy = this.verticalPos;
|
||||
},
|
||||
getVerticalPos: function() {
|
||||
getVerticalPos: function () {
|
||||
return this.verticalPos;
|
||||
},
|
||||
getBounds: function() {
|
||||
getBounds: function () {
|
||||
return { bounds: this.data, models: this.models };
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -201,7 +201,7 @@ export const bounds = {
|
||||
* @param elem - The diagram to draw to.
|
||||
* @param noteModel:{x: number, y: number, message: string, width: number} - startx: x axis start position, verticalPos: y axis position, messsage: the message to be shown, width: Set this with a custom width to override the default configured width.
|
||||
*/
|
||||
const drawNote = function(elem, noteModel) {
|
||||
const drawNote = function (elem, noteModel) {
|
||||
bounds.bumpVerticalPos(conf.boxMargin);
|
||||
noteModel.height = conf.boxMargin;
|
||||
noteModel.starty = bounds.getVerticalPos();
|
||||
@@ -231,7 +231,7 @@ const drawNote = function(elem, noteModel) {
|
||||
|
||||
let textHeight = Math.round(
|
||||
textElem
|
||||
.map(te => (te._groups || te)[0][0].getBBox().height)
|
||||
.map((te) => (te._groups || te)[0][0].getBBox().height)
|
||||
.reduce((acc, curr) => acc + curr)
|
||||
);
|
||||
|
||||
@@ -244,25 +244,25 @@ const drawNote = function(elem, noteModel) {
|
||||
bounds.models.addNote(noteModel);
|
||||
};
|
||||
|
||||
const messageFont = cnf => {
|
||||
const messageFont = (cnf) => {
|
||||
return {
|
||||
fontFamily: cnf.messageFontFamily,
|
||||
fontSize: cnf.messageFontSize,
|
||||
fontWeight: cnf.messageFontWeight
|
||||
fontWeight: cnf.messageFontWeight,
|
||||
};
|
||||
};
|
||||
const noteFont = cnf => {
|
||||
const noteFont = (cnf) => {
|
||||
return {
|
||||
fontFamily: cnf.noteFontFamily,
|
||||
fontSize: cnf.noteFontSize,
|
||||
fontWeight: cnf.noteFontWeight,
|
||||
};
|
||||
};
|
||||
const actorFont = cnf => {
|
||||
const actorFont = (cnf) => {
|
||||
return {
|
||||
fontFamily: cnf.actorFontFamily,
|
||||
fontSize: cnf.actorFontSize,
|
||||
fontWeight: cnf.actorFontWeight
|
||||
fontWeight: cnf.actorFontWeight,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -271,7 +271,7 @@ const actorFont = cnf => {
|
||||
* @param g - the parent of the message element
|
||||
* @param msgModel - the model containing fields describing a message
|
||||
*/
|
||||
const drawMessage = function(g, msgModel) {
|
||||
const drawMessage = function (g, msgModel) {
|
||||
bounds.bumpVerticalPos(10);
|
||||
const { startx, stopx, starty, message, type, sequenceIndex } = msgModel;
|
||||
const lines = common.splitBreaks(message).length;
|
||||
@@ -309,8 +309,9 @@ const drawMessage = function(g, msgModel) {
|
||||
.append('path')
|
||||
.attr(
|
||||
'd',
|
||||
`M ${startx},${lineStarty} H ${startx +
|
||||
Math.max(conf.width / 2, textWidth / 2)} V ${lineStarty + 25} H ${startx}`
|
||||
`M ${startx},${lineStarty} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${
|
||||
lineStarty + 25
|
||||
} H ${startx}`
|
||||
);
|
||||
} else {
|
||||
totalOffset += conf.boxMargin;
|
||||
@@ -416,7 +417,7 @@ const drawMessage = function(g, msgModel) {
|
||||
bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
|
||||
};
|
||||
|
||||
export const drawActors = function(diagram, actors, actorKeys, verticalPos) {
|
||||
export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
|
||||
// Draw the actors
|
||||
let prevWidth = 0;
|
||||
let prevMargin = 0;
|
||||
@@ -463,7 +464,7 @@ export const drawActorsPopup = function(diagram, actors, actorKeys) {
|
||||
return { maxHeight: maxHeight, maxWidth: maxWidth };
|
||||
};
|
||||
|
||||
export const setConf = function(cnf) {
|
||||
export const setConf = function (cnf) {
|
||||
assignWithDepth(conf, cnf);
|
||||
|
||||
if (cnf.fontFamily) {
|
||||
@@ -477,21 +478,21 @@ export const setConf = function(cnf) {
|
||||
}
|
||||
};
|
||||
|
||||
const actorActivations = function(actor) {
|
||||
return bounds.activations.filter(function(activation) {
|
||||
const actorActivations = function (actor) {
|
||||
return bounds.activations.filter(function (activation) {
|
||||
return activation.actor === actor;
|
||||
});
|
||||
};
|
||||
|
||||
const activationBounds = function(actor, actors) {
|
||||
const activationBounds = function (actor, actors) {
|
||||
// handle multiple stacked activations for same actor
|
||||
const actorObj = actors[actor];
|
||||
const activations = actorActivations(actor);
|
||||
|
||||
const left = activations.reduce(function(acc, activation) {
|
||||
const left = activations.reduce(function (acc, activation) {
|
||||
return Math.min(acc, activation.startx);
|
||||
}, actorObj.x + actorObj.width / 2);
|
||||
const right = activations.reduce(function(acc, activation) {
|
||||
const right = activations.reduce(function (acc, activation) {
|
||||
return Math.max(acc, activation.stopx);
|
||||
}, actorObj.x + actorObj.width / 2);
|
||||
return [left, right];
|
||||
@@ -522,7 +523,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
|
||||
* @param text
|
||||
* @param id
|
||||
*/
|
||||
export const draw = function(text, id) {
|
||||
export const draw = function (text, id) {
|
||||
conf = configApi.getConfig().sequence;
|
||||
parser.yy.clear();
|
||||
parser.yy.setWrap(conf.wrap);
|
||||
@@ -573,7 +574,7 @@ export const draw = function(text, id) {
|
||||
|
||||
// Draw the messages/signals
|
||||
let sequenceIndex = 1;
|
||||
messages.forEach(function(msg) {
|
||||
messages.forEach(function (msg) {
|
||||
let loopModel, noteModel, msgModel;
|
||||
|
||||
switch (msg.type) {
|
||||
@@ -593,7 +594,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
message => bounds.newLoop(message)
|
||||
(message) => bounds.newLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.LOOP_END:
|
||||
@@ -603,7 +604,7 @@ export const draw = function(text, id) {
|
||||
bounds.models.addLoop(loopModel);
|
||||
break;
|
||||
case parser.yy.LINETYPE.RECT_START:
|
||||
adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, message =>
|
||||
adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, (message) =>
|
||||
bounds.newLoop(undefined, message.message)
|
||||
);
|
||||
break;
|
||||
@@ -619,7 +620,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
message => bounds.newLoop(message)
|
||||
(message) => bounds.newLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.OPT_END:
|
||||
@@ -634,7 +635,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
message => bounds.newLoop(message)
|
||||
(message) => bounds.newLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.ALT_ELSE:
|
||||
@@ -643,7 +644,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
conf.boxMargin,
|
||||
message => bounds.addSectionToLoop(message)
|
||||
(message) => bounds.addSectionToLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.ALT_END:
|
||||
@@ -658,7 +659,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
message => bounds.newLoop(message)
|
||||
(message) => bounds.newLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.PAR_AND:
|
||||
@@ -667,7 +668,7 @@ export const draw = function(text, id) {
|
||||
msg,
|
||||
conf.boxMargin + conf.boxTextMargin,
|
||||
conf.boxMargin,
|
||||
message => bounds.addSectionToLoop(message)
|
||||
(message) => bounds.addSectionToLoop(message)
|
||||
);
|
||||
break;
|
||||
case parser.yy.LINETYPE.PAR_END:
|
||||
@@ -698,7 +699,7 @@ export const draw = function(text, id) {
|
||||
parser.yy.LINETYPE.SOLID_CROSS,
|
||||
parser.yy.LINETYPE.DOTTED_CROSS,
|
||||
parser.yy.LINETYPE.SOLID_POINT,
|
||||
parser.yy.LINETYPE.DOTTED_POINT
|
||||
parser.yy.LINETYPE.DOTTED_POINT,
|
||||
].includes(msg.type)
|
||||
) {
|
||||
sequenceIndex++;
|
||||
@@ -774,10 +775,10 @@ export const draw = function(text, id) {
|
||||
* @param actors - The actors map
|
||||
* @param messages - A list of message objects to iterate
|
||||
*/
|
||||
const getMaxMessageWidthPerActor = function(actors, messages) {
|
||||
const getMaxMessageWidthPerActor = function (actors, messages) {
|
||||
const maxMessageWidthPerActor = {};
|
||||
|
||||
messages.forEach(function(msg) {
|
||||
messages.forEach(function (msg) {
|
||||
if (actors[msg.to] && actors[msg.from]) {
|
||||
const actor = actors[msg.to];
|
||||
|
||||
@@ -893,9 +894,9 @@ const getRequiredPopupWidth = function(actor) {
|
||||
* @param actors - The actors map to calculate margins for
|
||||
* @param actorToMessageWidth - A map of actor key -> max message width it holds
|
||||
*/
|
||||
const calculateActorMargins = function(actors, actorToMessageWidth) {
|
||||
const calculateActorMargins = function (actors, actorToMessageWidth) {
|
||||
let maxHeight = 0;
|
||||
Object.keys(actors).forEach(prop => {
|
||||
Object.keys(actors).forEach((prop) => {
|
||||
const actor = actors[prop];
|
||||
if (actor.wrap) {
|
||||
actor.description = utils.wrapLabel(
|
||||
@@ -936,7 +937,7 @@ const calculateActorMargins = function(actors, actorToMessageWidth) {
|
||||
return Math.max(maxHeight, conf.height);
|
||||
};
|
||||
|
||||
const buildNoteModel = function(msg, actors) {
|
||||
const buildNoteModel = function (msg, actors) {
|
||||
let startx = actors[msg.from].x;
|
||||
let stopx = actors[msg.to].x;
|
||||
let shouldWrap = msg.wrap && msg.message;
|
||||
@@ -954,7 +955,7 @@ const buildNoteModel = function(msg, actors) {
|
||||
stopx: 0,
|
||||
starty: 0,
|
||||
stopy: 0,
|
||||
message: msg.message
|
||||
message: msg.message,
|
||||
};
|
||||
if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
|
||||
noteModel.width = shouldWrap
|
||||
@@ -1005,7 +1006,7 @@ const buildNoteModel = function(msg, actors) {
|
||||
return noteModel;
|
||||
};
|
||||
|
||||
const buildMessageModel = function(msg, actors) {
|
||||
const buildMessageModel = function (msg, actors) {
|
||||
let process = false;
|
||||
if (
|
||||
[
|
||||
@@ -1016,7 +1017,7 @@ const buildMessageModel = function(msg, actors) {
|
||||
parser.yy.LINETYPE.SOLID_CROSS,
|
||||
parser.yy.LINETYPE.DOTTED_CROSS,
|
||||
parser.yy.LINETYPE.SOLID_POINT,
|
||||
parser.yy.LINETYPE.DOTTED_POINT
|
||||
parser.yy.LINETYPE.DOTTED_POINT,
|
||||
].includes(msg.type)
|
||||
) {
|
||||
process = true;
|
||||
@@ -1054,16 +1055,16 @@ const buildMessageModel = function(msg, actors) {
|
||||
type: msg.type,
|
||||
wrap: msg.wrap,
|
||||
fromBounds: Math.min.apply(null, allBounds),
|
||||
toBounds: Math.max.apply(null, allBounds)
|
||||
toBounds: Math.max.apply(null, allBounds),
|
||||
};
|
||||
};
|
||||
|
||||
const calculateLoopBounds = function(messages, actors) {
|
||||
const calculateLoopBounds = function (messages, actors) {
|
||||
const loops = {};
|
||||
const stack = [];
|
||||
let current, noteModel, msgModel;
|
||||
|
||||
messages.forEach(function(msg) {
|
||||
messages.forEach(function (msg) {
|
||||
msg.id = utils.random({ length: 10 });
|
||||
switch (msg.type) {
|
||||
case parser.yy.LINETYPE.LOOP_START:
|
||||
@@ -1075,7 +1076,7 @@ const calculateLoopBounds = function(messages, actors) {
|
||||
msg: msg.message,
|
||||
from: Number.MAX_SAFE_INTEGER,
|
||||
to: Number.MIN_SAFE_INTEGER,
|
||||
width: 0
|
||||
width: 0,
|
||||
});
|
||||
break;
|
||||
case parser.yy.LINETYPE.ALT_ELSE:
|
||||
@@ -1104,7 +1105,7 @@ const calculateLoopBounds = function(messages, actors) {
|
||||
startx: x,
|
||||
stopx: x + conf.activationWidth,
|
||||
actor: msg.from.actor,
|
||||
enabled: true
|
||||
enabled: true,
|
||||
};
|
||||
bounds.activations.push(toAdd);
|
||||
}
|
||||
@@ -1112,7 +1113,7 @@ const calculateLoopBounds = function(messages, actors) {
|
||||
case parser.yy.LINETYPE.ACTIVE_END:
|
||||
{
|
||||
const lastActorActivationIdx = bounds.activations
|
||||
.map(a => a.actor)
|
||||
.map((a) => a.actor)
|
||||
.lastIndexOf(msg.from.actor);
|
||||
delete bounds.activations.splice(lastActorActivationIdx, 1)[0];
|
||||
}
|
||||
@@ -1122,7 +1123,7 @@ const calculateLoopBounds = function(messages, actors) {
|
||||
if (isNote) {
|
||||
noteModel = buildNoteModel(msg, actors);
|
||||
msg.noteModel = noteModel;
|
||||
stack.forEach(stk => {
|
||||
stack.forEach((stk) => {
|
||||
current = stk;
|
||||
current.from = Math.min(current.from, noteModel.startx);
|
||||
current.to = Math.max(current.to, noteModel.startx + noteModel.width);
|
||||
@@ -1133,7 +1134,7 @@ const calculateLoopBounds = function(messages, actors) {
|
||||
msgModel = buildMessageModel(msg, actors);
|
||||
msg.msgModel = msgModel;
|
||||
if (msgModel.startx && msgModel.stopx && stack.length > 0) {
|
||||
stack.forEach(stk => {
|
||||
stack.forEach((stk) => {
|
||||
current = stk;
|
||||
if (msgModel.startx === msgModel.stopx) {
|
||||
let from = actors[msg.from];
|
||||
@@ -1165,5 +1166,5 @@ export default {
|
||||
drawActors,
|
||||
drawActorsPopup,
|
||||
setConf,
|
||||
draw
|
||||
draw,
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const getStyles = options =>
|
||||
const getStyles = (options) =>
|
||||
`.actor {
|
||||
stroke: ${options.actorBorder};
|
||||
fill: ${options.actorBkg};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import common from '../common/common';
|
||||
|
||||
export const drawRect = function(elem, rectData) {
|
||||
export const drawRect = function (elem, rectData) {
|
||||
const rectElem = elem.append('rect');
|
||||
rectElem.attr('x', rectData.x);
|
||||
rectElem.attr('y', rectData.y);
|
||||
@@ -234,7 +234,7 @@ export const drawText = function (elem, textData) {
|
||||
return textElems;
|
||||
};
|
||||
|
||||
export const drawLabel = function(elem, txtObject) {
|
||||
export const drawLabel = function (elem, txtObject) {
|
||||
function genPoints(x, y, width, height, cut) {
|
||||
return (
|
||||
x +
|
||||
@@ -275,7 +275,7 @@ let actorCnt = -1;
|
||||
* @param actor - The actor to draw.
|
||||
* @param conf - drawText implementation discriminator object
|
||||
*/
|
||||
export const drawActor = function(elem, actor, conf) {
|
||||
export const drawActor = function (elem, actor, conf) {
|
||||
const center = actor.x + actor.width / 2;
|
||||
|
||||
const boxpluslineGroup = elem.append('g');
|
||||
@@ -341,7 +341,7 @@ export const drawActor = function(elem, actor, conf) {
|
||||
);
|
||||
};
|
||||
|
||||
export const anchorElement = function(elem) {
|
||||
export const anchorElement = function (elem) {
|
||||
return elem.append('g');
|
||||
};
|
||||
/**
|
||||
@@ -352,7 +352,7 @@ export const anchorElement = function(elem) {
|
||||
* @param conf - sequence diagram config object.
|
||||
* @param actorActivations - number of activations on the actor.
|
||||
*/
|
||||
export const drawActivation = function(elem, bounds, verticalPos, conf, actorActivations) {
|
||||
export const drawActivation = function (elem, bounds, verticalPos, conf, actorActivations) {
|
||||
const rect = getNoteRect();
|
||||
const g = bounds.anchored;
|
||||
rect.x = bounds.startx;
|
||||
@@ -378,10 +378,10 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
|
||||
labelBoxWidth,
|
||||
messageFontFamily: fontFamily,
|
||||
messageFontSize: fontSize,
|
||||
messageFontWeight: fontWeight
|
||||
messageFontWeight: fontWeight,
|
||||
} = conf;
|
||||
const g = elem.append('g');
|
||||
const drawLoopLine = function(startx, starty, stopx, stopy) {
|
||||
const drawLoopLine = function (startx, starty, stopx, stopy) {
|
||||
return g
|
||||
.append('line')
|
||||
.attr('x1', startx)
|
||||
@@ -395,7 +395,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
|
||||
drawLoopLine(loopModel.startx, loopModel.stopy, loopModel.stopx, loopModel.stopy);
|
||||
drawLoopLine(loopModel.startx, loopModel.starty, loopModel.startx, loopModel.stopy);
|
||||
if (typeof loopModel.sections !== 'undefined') {
|
||||
loopModel.sections.forEach(function(item) {
|
||||
loopModel.sections.forEach(function (item) {
|
||||
drawLoopLine(loopModel.startx, item.y, loopModel.stopx, item.y).style(
|
||||
'stroke-dasharray',
|
||||
'3, 3'
|
||||
@@ -435,7 +435,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
|
||||
let textElem = drawText(g, txt);
|
||||
|
||||
if (typeof loopModel.sectionTitles !== 'undefined') {
|
||||
loopModel.sectionTitles.forEach(function(item, idx) {
|
||||
loopModel.sectionTitles.forEach(function (item, idx) {
|
||||
if (item.message) {
|
||||
txt.text = item.message;
|
||||
txt.x = loopModel.startx + (loopModel.stopx - loopModel.startx) / 2;
|
||||
@@ -451,7 +451,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
|
||||
textElem = drawText(g, txt);
|
||||
let sectionHeight = Math.round(
|
||||
textElem
|
||||
.map(te => (te._groups || te)[0][0].getBBox().height)
|
||||
.map((te) => (te._groups || te)[0][0].getBBox().height)
|
||||
.reduce((acc, curr) => acc + curr)
|
||||
);
|
||||
loopModel.sections[idx].height += sectionHeight - (boxMargin + boxTextMargin);
|
||||
@@ -468,7 +468,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
|
||||
* @param elem diagram (reference for bounds)
|
||||
* @param bounds shape of the rectangle
|
||||
*/
|
||||
export const drawBackgroundRect = function(elem, bounds) {
|
||||
export const drawBackgroundRect = function (elem, bounds) {
|
||||
const rectElem = drawRect(elem, {
|
||||
x: bounds.startx,
|
||||
y: bounds.starty,
|
||||
@@ -519,7 +519,7 @@ export const insertClockIcon = function (elem) {
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
*/
|
||||
export const insertArrowHead = function(elem) {
|
||||
export const insertArrowHead = function (elem) {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
@@ -536,7 +536,7 @@ export const insertArrowHead = function(elem) {
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
*/
|
||||
export const insertArrowFilledHead = function(elem) {
|
||||
export const insertArrowFilledHead = function (elem) {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
@@ -552,7 +552,7 @@ export const insertArrowFilledHead = function(elem) {
|
||||
/**
|
||||
* Setup node number. The result is appended to the svg.
|
||||
*/
|
||||
export const insertSequenceNumber = function(elem) {
|
||||
export const insertSequenceNumber = function (elem) {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
@@ -571,7 +571,7 @@ export const insertSequenceNumber = function(elem) {
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
*/
|
||||
export const insertArrowCrossHead = function(elem) {
|
||||
export const insertArrowCrossHead = function (elem) {
|
||||
const defs = elem.append('defs');
|
||||
const marker = defs
|
||||
.append('marker')
|
||||
@@ -602,7 +602,7 @@ export const insertArrowCrossHead = function(elem) {
|
||||
// this is actual shape for arrowhead
|
||||
};
|
||||
|
||||
export const getTextObj = function() {
|
||||
export const getTextObj = function () {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
@@ -615,11 +615,11 @@ export const getTextObj = function() {
|
||||
rx: 0,
|
||||
ry: 0,
|
||||
tspan: true,
|
||||
valign: undefined
|
||||
valign: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
export const getNoteRect = function() {
|
||||
export const getNoteRect = function () {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
@@ -629,11 +629,11 @@ export const getNoteRect = function() {
|
||||
anchor: 'start',
|
||||
height: 100,
|
||||
rx: 0,
|
||||
ry: 0
|
||||
ry: 0,
|
||||
};
|
||||
};
|
||||
|
||||
const _drawTextCandidateFunc = (function() {
|
||||
const _drawTextCandidateFunc = (function () {
|
||||
function byText(content, g, x, y, width, height, textAttrs) {
|
||||
const text = g
|
||||
.append('text')
|
||||
|
||||
Reference in New Issue
Block a user