marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-02 20:04:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update of prettier, eslint and rules

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-07-15 11:35:12 +02:00
parent 896c7eca57
commit 5399214ad8
80 changed files with 1192 additions and 1329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/diagrams/class/classDb.js
View File

@@ -13,11 +13,11 @@ let classCounter = 0;
let funs = [];
export const parseDirective = function(statement, context, type) {
export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
};
const splitClassNameAndType = function(id) {
const splitClassNameAndType = function (id) {
let genericType = '';
let className = id;
@@ -36,7 +36,7 @@ const splitClassNameAndType = function(id) {
* @param id
* @public
*/
export const addClass = function(id) {
export const addClass = function (id) {
let classId = splitClassNameAndType(id);
// Only add class if not exists
if (typeof classes[classId.className] !== 'undefined') return;
@@ -48,7 +48,7 @@ export const addClass = function(id) {
methods: [],
members: [],
annotations: [],
domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter
domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter,
};
classCounter++;
@@ -59,7 +59,7 @@ export const addClass = function(id) {
* @param id
* @public
*/
export const lookUpDomId = function(id) {
export const lookUpDomId = function (id) {
const classKeys = Object.keys(classes);
for (let i = 0; i < classKeys.length; i++) {
if (classes[classKeys[i]].id === id) {
@@ -68,25 +68,25 @@ export const lookUpDomId = function(id) {
}
};
export const clear = function() {
export const clear = function () {
relations = [];
classes = {};
funs = [];
funs.push(setupToolTips);
};
export const getClass = function(id) {
export const getClass = function (id) {
return classes[id];
};
export const getClasses = function() {
export const getClasses = function () {
return classes;
};
export const getRelations = function() {
export const getRelations = function () {
return relations;
};
export const addRelation = function(relation) {
export const addRelation = function (relation) {
log.debug('Adding relation: ' + JSON.stringify(relation));
addClass(relation.id1);
addClass(relation.id2);
@@ -104,7 +104,7 @@ export const addRelation = function(relation) {
* @param annotation The name of the annotation without any brackets
* @public
*/
export const addAnnotation = function(className, annotation) {
export const addAnnotation = function (className, annotation) {
const validatedClassName = splitClassNameAndType(className).className;
classes[validatedClassName].annotations.push(annotation);
};
@@ -118,7 +118,7 @@ export const addAnnotation = function(className, annotation) {
* Otherwise the member will be treated as a normal property
* @public
*/
export const addMember = function(className, member) {
export const addMember = function (className, member) {
const validatedClassName = splitClassNameAndType(className).className;
const theClass = classes[validatedClassName];
@@ -137,14 +137,14 @@ export const addMember = function(className, member) {
}
};
export const addMembers = function(className, members) {
export const addMembers = function (className, members) {
if (Array.isArray(members)) {
members.reverse();
members.forEach(member => addMember(className, member));
members.forEach((member) => addMember(className, member));
}
};
export const cleanupLabel = function(label) {
export const cleanupLabel = function (label) {
if (label.substring(0, 1) === ':') {
return label.substr(1).trim();
} else {
@@ -157,8 +157,8 @@ export const cleanupLabel = function(label) {
* @param ids Comma separated list of ids
* @param className Class to add
*/
export const setCssClass = function(ids, className) {
ids.split(',').forEach(function(_id) {
export const setCssClass = function (ids, className) {
ids.split(',').forEach(function (_id) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') {
@@ -172,9 +172,9 @@ export const setCssClass = function(ids, className) {
* @param ids Comma separated list of ids
* @param tooltip Tooltip to add
*/
const setTooltip = function(ids, tooltip) {
const setTooltip = function (ids, tooltip) {
const config = configApi.getConfig();
ids.split(',').forEach(function(id) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
classes[id].tooltip = common.sanitizeText(tooltip, config);
}
@@ -187,9 +187,9 @@ const setTooltip = function(ids, tooltip) {
* @param linkStr URL to create a link for
* @param target Target of the link, _blank by default as originally defined in the svgDraw.js file
*/
export const setLink = function(ids, linkStr, target) {
export const setLink = function (ids, linkStr, target) {
const config = configApi.getConfig();
ids.split(',').forEach(function(_id) {
ids.split(',').forEach(function (_id) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') {
@@ -210,15 +210,15 @@ export const setLink = function(ids, linkStr, target) {
* @param functionName Function to be called on click
* @param functionArgs Function args the function should be called with
*/
export const setClickEvent = function(ids, functionName, functionArgs) {
ids.split(',').forEach(function(id) {
export const setClickEvent = function (ids, functionName, functionArgs) {
ids.split(',').forEach(function (id) {
setClickFunc(id, functionName, functionArgs);
classes[id].haveCallback = true;
});
setCssClass(ids, 'clickable');
};
const setClickFunc = function(domId, functionName, functionArgs) {
const setClickFunc = function (domId, functionName, functionArgs) {
const config = configApi.getConfig();
let id = domId;
let elemId = lookUpDomId(id);
@@ -250,12 +250,12 @@ const setClickFunc = function(domId, functionName, functionArgs) {
argList.push(elemId);
}
funs.push(function() {
funs.push(function () {
const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) {
elem.addEventListener(
'click',
function() {
function () {
utils.runFunc(functionName, ...argList);
},
false
@@ -265,38 +265,35 @@ const setClickFunc = function(domId, functionName, functionArgs) {
}
};
export const bindFunctions = function(element) {
funs.forEach(function(fun) {
export const bindFunctions = function (element) {
funs.forEach(function (fun) {
fun(element);
});
};
export const lineType = {
LINE: 0,
DOTTED_LINE: 1
DOTTED_LINE: 1,
};
export const relationType = {
AGGREGATION: 0,
EXTENSION: 1,
COMPOSITION: 2,
DEPENDENCY: 3
DEPENDENCY: 3,
};
const setupToolTips = function(element) {
const setupToolTips = function (element) {
let tooltipElem = select('.mermaidTooltip');
if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);
}
const svg = select(element).select('svg');
const nodes = svg.selectAll('g.node');
nodes
.on('mouseover', function() {
.on('mouseover', function () {
const el = select(this);
const title = el.attr('title');
// Dont try to draw a tooltip if no data is provided
@@ -305,21 +302,15 @@ const setupToolTips = function(element) {
}
const rect = this.getBoundingClientRect();
tooltipElem
.transition()
.duration(200)
.style('opacity', '.9');
tooltipElem.transition().duration(200).style('opacity', '.9');
tooltipElem
.html(el.attr('title'))
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
.style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
el.classed('hover', true);
})
.on('mouseout', function() {
tooltipElem
.transition()
.duration(500)
.style('opacity', 0);
.on('mouseout', function () {
tooltipElem.transition().duration(500).style('opacity', 0);
const el = select(this);
el.classed('hover', false);
});
@@ -346,5 +337,5 @@ export default {
setCssClass,
setLink,
setTooltip,
lookUpDomId
lookUpDomId,
};

46
src/diagrams/class/classRenderer-v2.js
View File

@@ -20,7 +20,7 @@ const padding = 20;
const conf = {
dividerMargin: 10,
padding: 5,
textHeight: 10
textHeight: 10,
};
/**
@@ -28,14 +28,14 @@ const conf = {
* @param vert Object containing the vertices.
* @param g The graph that is to be drawn.
*/
export const addClasses = function(classes, g) {
export const addClasses = function (classes, g) {
// const svg = select(`[id="${svgId}"]`);
const keys = Object.keys(classes);
log.info('keys:', keys);
log.info(classes);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
keys.forEach(function(id) {
keys.forEach(function (id) {
const vertex = classes[id];
/**
@@ -109,7 +109,7 @@ export const addClasses = function(classes, g) {
link: vertex.link,
width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type,
padding: getConfig().flowchart.padding
padding: getConfig().flowchart.padding,
});
log.info('setNode', {
@@ -123,7 +123,7 @@ export const addClasses = function(classes, g) {
id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type,
padding: getConfig().flowchart.padding
padding: getConfig().flowchart.padding,
});
});
};
@@ -133,7 +133,7 @@ export const addClasses = function(classes, g) {
* @param {Object} edges The edges to add to the graph
* @param {Object} g The graph object
*/
export const addRelations = function(relations, g) {
export const addRelations = function (relations, g) {
let cnt = 0;
let defaultStyle;
@@ -145,7 +145,7 @@ export const addRelations = function(relations, g) {
// defaultLabelStyle = defaultStyles.labelStyle;
// }
relations.forEach(function(edge) {
relations.forEach(function (edge) {
cnt++;
const edgeData = {};
//Set relationship style and line type
@@ -227,7 +227,7 @@ export const addRelations = function(relations, g) {
};
// Todo optimize
const getGraphId = function(label) {
const getGraphId = function (label) {
const keys = Object.keys(idCache);
for (let i = 0; i < keys.length; i++) {
@@ -239,10 +239,10 @@ const getGraphId = function(label) {
return undefined;
};
export const setConf = function(cnf) {
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
keys.forEach(function(key) {
keys.forEach(function (key) {
conf[key] = cnf[key];
});
};
@@ -252,7 +252,7 @@ export const setConf = function(cnf) {
* @param text
* @param id
*/
export const drawOld = function(text, id) {
export const drawOld = function (text, id) {
idCache = {};
parser.yy.clear();
parser.parse(text);
@@ -265,16 +265,16 @@ export const drawOld = function(text, id) {
// Layout graph, Create a new directed graph
const g = new graphlib.Graph({
multigraph: true
multigraph: true,
});
// Set an object for the graph label
g.setGraph({
isMultiGraph: true
isMultiGraph: true,
});
// Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function() {
g.setDefaultEdgeLabel(function () {
return {};
});
@@ -297,7 +297,7 @@ export const drawOld = function(text, id) {
const relations = classDb.getRelations();
log.info('relations:', relations);
relations.forEach(function(relation) {
relations.forEach(function (relation) {
log.info(
'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
);
@@ -305,14 +305,14 @@ export const drawOld = function(text, id) {
getGraphId(relation.id1),
getGraphId(relation.id2),
{
relation: relation
relation: relation,
},
relation.title || 'DEFAULT'
);
});
dagre.layout(g);
g.nodes().forEach(function(v) {
g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
select('#' + lookUpDomId(v)).attr(
@@ -326,7 +326,7 @@ export const drawOld = function(text, id) {
}
});
g.edges().forEach(function(e) {
g.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);
@@ -345,7 +345,7 @@ export const drawOld = function(text, id) {
diagram.attr('viewBox', vBox);
};
export const draw = function(text, id) {
export const draw = function (text, id) {
log.info('Drawing class');
classDb.clear();
// const parser = classDb.parser;
@@ -369,16 +369,16 @@ export const draw = function(text, id) {
// Create the input mermaid.graph
const g = new graphlib.Graph({
multigraph: true,
compound: true
compound: true,
})
.setGraph({
rankdir: dir,
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
marginy: 8
marginy: 8,
})
.setDefaultEdgeLabel(function() {
.setDefaultEdgeLabel(function () {
return {};
});
@@ -500,7 +500,7 @@ export const draw = function(text, id) {
export default {
setConf,
draw
draw,
};
function getArrowMarker(type) {
let marker;

28
src/diagrams/class/classRenderer.js
View File

@@ -15,11 +15,11 @@ const padding = 20;
const conf = {
dividerMargin: 10,
padding: 5,
textHeight: 10
textHeight: 10,
};
// Todo optimize
const getGraphId = function(label) {
const getGraphId = function (label) {
const keys = Object.keys(idCache);
for (let i = 0; i < keys.length; i++) {
@@ -34,7 +34,7 @@ const getGraphId = function(label) {
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
const insertMarkers = function(elem) {
const insertMarkers = function (elem) {
elem
.append('defs')
.append('marker')
@@ -136,10 +136,10 @@ const insertMarkers = function(elem) {
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
export const setConf = function(cnf) {
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
keys.forEach(function(key) {
keys.forEach(function (key) {
conf[key] = cnf[key];
});
};
@@ -149,7 +149,7 @@ export const setConf = function(cnf) {
* @param text
* @param id
*/
export const draw = function(text, id) {
export const draw = function (text, id) {
idCache = {};
parser.yy.clear();
parser.parse(text);
@@ -163,16 +163,16 @@ export const draw = function(text, id) {
// Layout graph, Create a new directed graph
const g = new graphlib.Graph({
multigraph: true
multigraph: true,
});
// Set an object for the graph label
g.setGraph({
isMultiGraph: true
isMultiGraph: true,
});
// Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function() {
g.setDefaultEdgeLabel(function () {
return {};
});
@@ -193,7 +193,7 @@ export const draw = function(text, id) {
}
const relations = classDb.getRelations();
relations.forEach(function(relation) {
relations.forEach(function (relation) {
log.info(
'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
);
@@ -201,14 +201,14 @@ export const draw = function(text, id) {
getGraphId(relation.id1),
getGraphId(relation.id2),
{
relation: relation
relation: relation,
},
relation.title || 'DEFAULT'
);
});
dagre.layout(g);
g.nodes().forEach(function(v) {
g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
select('#' + lookUpDomId(v)).attr(
@@ -222,7 +222,7 @@ export const draw = function(text, id) {
}
});
g.edges().forEach(function(e) {
g.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);
@@ -243,5 +243,5 @@ export const draw = function(text, id) {
export default {
setConf,
draw
draw,
};

2
src/diagrams/class/styles.js
View File

@@ -1,4 +1,4 @@
const getStyles = options =>
const getStyles = (options) =>
`g.classGroup text {
fill: ${options.nodeBorder};
fill: ${options.classText};

59
src/diagrams/class/svgDraw.js
View File

@@ -4,8 +4,8 @@ import utils from '../../utils';
import { log } from '../../logger';
let edgeCount = 0;
export const drawEdge = function(elem, path, relation, conf) {
const getRelationType = function(type) {
export const drawEdge = function (elem, path, relation, conf) {
const getRelationType = function (type) {
switch (type) {
case relationType.AGGREGATION:
return 'aggregation';
@@ -18,17 +18,17 @@ export const drawEdge = function(elem, path, relation, conf) {
}
};
path.points = path.points.filter(p => !Number.isNaN(p.y));
path.points = path.points.filter((p) => !Number.isNaN(p.y));
// The data for our line
const lineData = path.points;
// This is the accessor function we talked about above
const lineFunction = line()
.x(function(d) {
.x(function (d) {
return d.x;
})
.y(function(d) {
.y(function (d) {
return d.y;
})
.curve(curveBasis);
@@ -144,7 +144,7 @@ export const drawEdge = function(elem, path, relation, conf) {
edgeCount++;
};
export const drawClass = function(elem, classDef, conf) {
export const drawClass = function (elem, classDef, conf) {
log.info('Rendering class ' + classDef);
const id = classDef.id;
@@ -152,14 +152,11 @@ export const drawClass = function(elem, classDef, conf) {
id: id,
label: classDef.id,
width: 0,
height: 0
height: 0,
};
// add class group
const g = elem
.append('g')
.attr('id', lookUpDomId(id))
.attr('class', 'classGroup');
const g = elem.append('g').attr('id', lookUpDomId(id)).attr('class', 'classGroup');
// add title
let title;
@@ -180,7 +177,7 @@ export const drawClass = function(elem, classDef, conf) {
// add annotations
let isFirst = true;
classDef.annotations.forEach(function(member) {
classDef.annotations.forEach(function (member) {
const titleText2 = title.append('tspan').text('«' + member + '»');
if (!isFirst) titleText2.attr('dy', conf.textHeight);
isFirst = false;
@@ -192,10 +189,7 @@ export const drawClass = function(elem, classDef, conf) {
classTitleString += '<' + classDef.type + '>';
}
const classTitle = title
.append('tspan')
.text(classTitleString)
.attr('class', 'title');
const classTitle = title.append('tspan').text(classTitleString).attr('class', 'title');
// If class has annotations the title needs to have an offset of the text height
if (!isFirst) classTitle.attr('dy', conf.textHeight);
@@ -216,7 +210,7 @@ export const drawClass = function(elem, classDef, conf) {
.attr('class', 'classText');
isFirst = true;
classDef.members.forEach(function(member) {
classDef.members.forEach(function (member) {
addTspan(members, member, isFirst, conf);
isFirst = false;
});
@@ -238,7 +232,7 @@ export const drawClass = function(elem, classDef, conf) {
isFirst = true;
classDef.methods.forEach(function(method) {
classDef.methods.forEach(function (method) {
addTspan(methods, method, isFirst, conf);
isFirst = false;
});
@@ -262,7 +256,7 @@ export const drawClass = function(elem, classDef, conf) {
// Center title
// We subtract the width of each text element from the class box width and divide it by 2
title.node().childNodes.forEach(function(x) {
title.node().childNodes.forEach(function (x) {
x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
});
@@ -279,7 +273,7 @@ export const drawClass = function(elem, classDef, conf) {
return classInfo;
};
export const parseMember = function(text) {
export const parseMember = function (text) {
const fieldRegEx = /(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+)/;
const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/;
@@ -295,7 +289,7 @@ export const parseMember = function(text) {
}
};
const buildFieldDisplay = function(parsedText) {
const buildFieldDisplay = function (parsedText) {
let displayText = '';
try {
@@ -311,11 +305,11 @@ const buildFieldDisplay = function(parsedText) {
return {
displayText: displayText,
cssStyle: ''
cssStyle: '',
};
};
const buildMethodDisplay = function(parsedText) {
const buildMethodDisplay = function (parsedText) {
let cssStyle = '';
let displayText = '';
@@ -335,11 +329,11 @@ const buildMethodDisplay = function(parsedText) {
return {
displayText: displayText,
cssStyle: cssStyle
cssStyle: cssStyle,
};
};
const buildLegacyDisplay = function(text) {
const buildLegacyDisplay = function (text) {
// if for some reason we dont have any match, use old format to parse text
let displayText = '';
let cssStyle = '';
@@ -382,17 +376,14 @@ const buildLegacyDisplay = function(text) {
return {
displayText: displayText,
cssStyle: cssStyle
cssStyle: cssStyle,
};
};
const addTspan = function(textEl, txt, isFirst, conf) {
const addTspan = function (textEl, txt, isFirst, conf) {
let member = parseMember(txt);
const tSpan = textEl
.append('tspan')
.attr('x', conf.padding)
.text(member.displayText);
const tSpan = textEl.append('tspan').attr('x', conf.padding).text(member.displayText);
if (member.cssStyle !== '') {
tSpan.attr('style', member.cssStyle);
@@ -403,7 +394,7 @@ const addTspan = function(textEl, txt, isFirst, conf) {
}
};
const parseGenericTypes = function(text) {
const parseGenericTypes = function (text) {
let cleanedText = text;
if (text.indexOf('~') != -1) {
@@ -416,7 +407,7 @@ const parseGenericTypes = function(text) {
}
};
const parseClassifier = function(classifier) {
const parseClassifier = function (classifier) {
switch (classifier) {
case '*':
return 'font-style:italic;';
@@ -430,5 +421,5 @@ const parseClassifier = function(classifier) {
export default {
drawClass,
drawEdge,
parseMember
parseMember,
};