diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..7e54e3631 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +**/*.spec.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index a1aed17d7..e04aeb4d6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,7 +1,8 @@ { "env": { "browser": true, - "es6": true + "es6": true, + "node": true }, "parserOptions": { "ecmaFeatures": { @@ -10,7 +11,7 @@ }, "sourceType": "module" }, - "extends": ["prettier"], + "extends": ["prettier", "eslint:recommended"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error"] diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js new file mode 100644 index 000000000..5a0501583 --- /dev/null +++ b/cypress/integration/rendering/current.spec.js @@ -0,0 +1,33 @@ +/* eslint-env jest */ +import { imgSnapshotTest } from '../../helpers/util'; + +describe('State diagram', () => { + it('should render a flowchart full of circles', () => { + imgSnapshotTest( + ` + graph LR + 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) + 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) + 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary) + 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary) + 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary) + 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary) + 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary) + 38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary) + 43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary) + 42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary) + 45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity) + 35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity) + 41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity) + 41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers) + 39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays) + 39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays) + 39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost) + 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) + 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) + 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) + `, + {} + ); + }); +}); diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js index 877098608..c61c37744 100644 --- a/src/diagrams/class/classRenderer.js +++ b/src/diagrams/class/classRenderer.js @@ -204,14 +204,12 @@ const drawEdge = function(elem, path, relation) { x = labalPosition.x; y = labalPosition.y; - let p1_card_x, - p1_card_y, - p1_card_padd_x = conf.padding * 2, - p1_card_padd_y = conf.padding; - let p2_card_x, - p2_card_y, - p2_card_padd_x = conf.padding * 2, - p2_card_padd_y = -conf.padding / 2; + let p1_card_x, p1_card_y; + // p1_card_padd_x = conf.padding * 2, + // p1_card_padd_y = conf.padding; + let p2_card_x, p2_card_y; + // p2_card_padd_x = conf.padding * 2, + // p2_card_padd_y = -conf.padding / 2; if (l % 2 !== 0 && l > 1) { let cardinality_1_point = utils.calcCardinalityPosition( relation.relation.type1 !== 'none', @@ -258,8 +256,7 @@ const drawEdge = function(elem, path, relation) { logger.info('Rendering relation ' + JSON.stringify(relation)); if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') { const g = elem.append('g').attr('class', 'cardinality'); - const label = g - .append('text') + g.append('text') .attr('class', 'type1') .attr('x', p1_card_x) .attr('y', p1_card_y) @@ -269,8 +266,7 @@ const drawEdge = function(elem, path, relation) { } if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') { const g = elem.append('g').attr('class', 'cardinality'); - const label = g - .append('text') + g.append('text') .attr('class', 'type2') .attr('x', p2_card_x) .attr('y', p2_card_y) diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 35ae8f7cd..825cac842 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -223,7 +223,7 @@ const setClickFun = function(_id, functionName) { return; } if (typeof vertices[id] !== 'undefined') { - funs.push(function(element) { + funs.push(function() { const elem = document.querySelector(`[id="${id}"]`); if (elem !== null) { elem.addEventListener( @@ -395,7 +395,7 @@ export const addSubGraph = function(_id, list, _title) { return false; } if (type in prims) { - return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); + return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line } else { return objs.indexOf(item) >= 0 ? false : objs.push(item); } diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 0d06e39fb..fac20a742 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -376,7 +376,7 @@ export const draw = function(text, id) { }; // Override normal arrowhead defined in d3. Remove style & add class to allow css styling. - render.arrows().normal = function normal(parent, id, edge, type) { + render.arrows().normal = function normal(parent, id) { const marker = parent .append('marker') .attr('id', id) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index 9eb2b8c38..90f5066a0 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -387,10 +387,11 @@ const compileTasks = function() { const task = rawTasks[pos]; let startTime = ''; switch (rawTasks[pos].raw.startTime.type) { - case 'prevTaskEnd': + case 'prevTaskEnd': { const prevTask = findTaskById(task.prevTaskId); task.startTime = prevTask.endTime; break; + } case 'getStartDate': startTime = getStartDate(undefined, dateFormat, rawTasks[pos].raw.startTime.startData); if (startTime) { @@ -501,7 +502,7 @@ const setClickFun = function(id, functionName, functionArgs) { * @param callbackFunction A function to be executed when clicked on the task or the task's text */ const pushFun = function(id, callbackFunction) { - funs.push(function(element) { + funs.push(function() { // const elem = d3.select(element).select(`[id="${id}"]`) const elem = document.querySelector(`[id="${id}"]`); if (elem !== null) { @@ -510,7 +511,7 @@ const pushFun = function(id, callbackFunction) { }); } }); - funs.push(function(element) { + funs.push(function() { // const elem = d3.select(element).select(`[id="${id}-text"]`) const elem = document.querySelector(`[id="${id}-text"]`); if (elem !== null) { diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 98f8b66a6..3bf258251 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -102,7 +102,7 @@ export const draw = function(text, id) { drawToday(leftPadding, topPadding, pageWidth, pageHeight); } - function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) { + function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) { // Draw background rects covering the entire width of the graph, these form the section rows. svg .append('g') @@ -401,7 +401,7 @@ export const draw = function(text, id) { const hash = {}; const result = []; for (let i = 0, l = arr.length; i < l; ++i) { - if (!hash.hasOwnProperty(arr[i])) { + if (!hash.hasOwnProperty(arr[i])) { // eslint-disable-line // it works with objects! in FF, at least hash[arr[i]] = true; result.push(arr[i]); diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js index 0ea21866d..a66022caa 100644 --- a/src/diagrams/pie/pieRenderer.js +++ b/src/diagrams/pie/pieRenderer.js @@ -21,7 +21,7 @@ export const setConf = function(cnf) { * @param id */ let w; -export const draw = (txt, id, ver) => { +export const draw = (txt, id) => { try { const parser = pieParser.parser; parser.yy = pieData; diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 2dad748d3..86bb6010c 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -514,11 +514,12 @@ export const draw = function(text, id) { bounds.newLoop(undefined, msg.message); bounds.bumpVerticalPos(conf.boxMargin); break; - case parser.yy.LINETYPE.RECT_END: + case parser.yy.LINETYPE.RECT_END: { const rectData = bounds.endLoop(); svgDraw.drawBackgroundRect(diagram, rectData); bounds.bumpVerticalPos(conf.boxMargin); break; + } case parser.yy.LINETYPE.OPT_START: bounds.bumpVerticalPos(conf.boxMargin); bounds.newLoop(msg.message); diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 4658f174f..b7c29bd80 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -16,7 +16,7 @@ export const drawRect = function(elem, rectData) { return rectElem; }; -export const drawText = function(elem, textData, width) { +export const drawText = function(elem, textData) { // Remove and ignore br:s const nText = textData.text.replace(//gi, ' '); @@ -374,7 +374,7 @@ const _drawTextCandidateFunc = (function() { function _setTextAttrs(toText, fromTextAttrsDict) { for (const key in fromTextAttrsDict) { - if (fromTextAttrsDict.hasOwnProperty(key)) { + if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line toText.attr(key, fromTextAttrsDict[key]); } } diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index ddbc5337d..79d46092b 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -2,7 +2,7 @@ import * as d3 from 'd3'; import idCache from './id-cache.js'; import stateDb from './stateDb'; import utils from '../../utils'; -import { getConfig, conf } from '../../config'; +import { getConfig } from '../../config'; // let conf; @@ -131,15 +131,15 @@ export const drawDescrState = (g, stateDef) => { */ export const addIdAndBox = (g, stateDef) => { // TODO Move hardcodings to conf - const addTspan = function(textEl, txt, isFirst) { - const tSpan = textEl - .append('tspan') - .attr('x', 2 * getConfig().state.padding) - .text(txt); - if (!isFirst) { - tSpan.attr('dy', getConfig().state.textHeight); - } - }; + // const addTspan = function(textEl, txt, isFirst) { + // const tSpan = textEl + // .append('tspan') + // .attr('x', 2 * getConfig().state.padding) + // .text(txt); + // if (!isFirst) { + // tSpan.attr('dy', getConfig().state.textHeight); + // } + // }; const title = g .append('text') .attr('x', 2 * getConfig().state.padding) @@ -148,7 +148,7 @@ export const addIdAndBox = (g, stateDef) => { .attr('class', 'state-title') .text(stateDef.id); - const titleHeight = title.node().getBBox().height; + const titleBox = title.node().getBBox(); const lineY = 1 - getConfig().state.textHeight; const descrLine = g @@ -159,7 +159,7 @@ export const addIdAndBox = (g, stateDef) => { .attr('class', 'descr-divider'); const graphBox = g.node().getBBox(); - title.attr('x', graphBox.width / 2 - title.node().getBBox().width / 2); + title.attr('x', graphBox.width / 2 - titleBox.width / 2); descrLine.attr('x2', graphBox.width + getConfig().state.padding); // White color @@ -241,7 +241,7 @@ const drawForkJoinState = (g, stateDef) => { .attr('y', getConfig().state.padding); }; -export const drawText = function(elem, textData, width) { +export const drawText = function(elem, textData) { // Remove and ignore br:s const nText = textData.text.replace(//gi, ' '); @@ -264,7 +264,7 @@ export const drawText = function(elem, textData, width) { const _drawLongText = (_text, x, y, g) => { let textHeight = 0; - let textWidth = 0; + const textElem = g.append('text'); textElem.style('text-anchor', 'start'); textElem.attr('class', 'noteText'); @@ -317,8 +317,7 @@ export const drawNote = (text, g) => { * @param {*} stateDef */ -let cnt = 0; -export const drawState = function(elem, stateDef, graph, doc) { +export const drawState = function(elem, stateDef) { const id = stateDef.id; const stateInfo = { id: id, diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js index 44d6fe6ea..e8f43d413 100644 --- a/src/diagrams/state/stateDb.js +++ b/src/diagrams/state/stateDb.js @@ -9,7 +9,7 @@ const setRootDoc = o => { const getRootDoc = () => rootDoc; const extract = doc => { - const res = { states: [], relations: [] }; + // const res = { states: [], relations: [] }; clear(); doc.forEach(item => { @@ -37,8 +37,8 @@ let documents = { let currentDocument = documents.root; let startCnt = 0; -let endCnt = 0; -let stateCnt = 0; +let endCnt = 0; // eslint-disable-line +// let stateCnt = 0; /** * Function called by parser when a node definition has been found. diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js index c929df7f2..e0ba69a6a 100644 --- a/src/diagrams/state/stateRenderer.js +++ b/src/diagrams/state/stateRenderer.js @@ -4,15 +4,12 @@ import graphlib from 'graphlib'; import { logger } from '../../logger'; import stateDb from './stateDb'; import { parser } from './parser/stateDiagram'; -import utils from '../../utils'; -import idCache from './id-cache'; -import { drawState, addIdAndBox, drawEdge, drawNote } from './shapes'; +// import idCache from './id-cache'; +import { drawState, addIdAndBox, drawEdge } from './shapes'; import { getConfig } from '../../config'; parser.yy = stateDb; -let total = 0; - // TODO Move conf object to main conf in mermaidAPI let conf; // { @@ -28,20 +25,20 @@ let conf; const transformationLog = {}; -export const setConf = function(cnf) {}; +export const setConf = function() {}; // Todo optimize -const getGraphId = function(label) { - const keys = idCache.keys(); +// const getGraphId = function(label) { +// const keys = idCache.keys(); - for (let i = 0; i < keys.length; i++) { - if (idCache.get(keys[i]).label === label) { - return keys[i]; - } - } +// for (let i = 0; i < keys.length; i++) { +// if (idCache.get(keys[i]).label === label) { +// return keys[i]; +// } +// } - return undefined; -}; +// return undefined; +// }; /** * Setup arrow head and define the marker. The result is appended to the svg. @@ -90,7 +87,7 @@ export const draw = function(text, id) { }); const rootDoc = stateDb.getRootDoc(); - const n = renderDoc(rootDoc, diagram); + renderDoc(rootDoc, diagram); const bounds = diagram.node().getBBox(); @@ -129,7 +126,6 @@ const renderDoc = (doc, diagram, parentId) => { // multigraph: false, compound: true, // acyclicer: 'greedy', - rankdir: 'LR', ranker: 'tight-tree', ranksep: conf.edgeLengthFactor // isMultiGraph: false @@ -159,7 +155,6 @@ const renderDoc = (doc, diagram, parentId) => { const keys = Object.keys(states); - total = keys.length; let first = true; for (let i = 0; i < keys.length; i++) { diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index ae26cffb3..57563897f 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -317,7 +317,6 @@ const config = { forkWidth: 70, forkHeight: 7, // Used - padding: 5, miniPadding: 2, // Font size factor, this is used to guess the width of the edges labels before rendering by dagre // layout. This might need updating if/when switching font diff --git a/src/utils.js b/src/utils.js index c03621749..05e3a127d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -122,7 +122,7 @@ const calcLabelPosition = points => { const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => { let prevPoint; - let totalDistance = 0; + let totalDistance = 0; // eslint-disable-line if (points[0] !== initialPosition) { points = points.reverse(); }