Merge pull request #3453 from mermaid-js/sidv/cleanup

Cleanup & fix eslint warnings

.eslintrc.json

@@ -63,6 +63,13 @@
       "rules": {
         "no-console": "off"
       }
+    },
+    {
+      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "rules": {
+        "jsdoc/require-jsdoc": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
     }
   ]
 }

src/dagre-wrapper/createLabel.js

@@ -1,11 +1,9 @@
 import { select } from 'd3';
 import { log } from '../logger';
 import { getConfig } from '../config';
-import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { evaluate } from '../diagrams/common/common';
 import { decodeEntities } from '../mermaidAPI';
 
-const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
-
 /**
  * @param dom
  * @param styleFn

src/dagre-wrapper/nodes.js

@@ -6,9 +6,7 @@ import intersect from './intersect/index.js';
 import createLabel from './createLabel';
 import note from './shapes/note';
 import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';
-
-const sanitizeText = (txt) => sanitize(txt, getConfig());
+import { evaluate } from '../diagrams/common/common';
 
 const question = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -348,7 +346,7 @@ const rect = (parent, node) => {
 };
 
 const labelRect = (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'label', true);
+  const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.classes);
   // add the rect

src/diagrams/c4/c4Db.js

@@ -1,6 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import { log } from '../../logger';
 import { sanitizeText } from '../common/common';
 import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
 
@@ -21,7 +20,6 @@ let boundarys = [
 let rels = [];
 let title = '';
 let wrapEnabled = false;
-let description = '';
 let c4ShapeInRow = 4;
 let c4BoundaryInRow = 2;
 var c4Type;
@@ -636,13 +634,13 @@ export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4Bo
   let c4BoundaryInRowValue = c4BoundaryInRow;
 
   if (typeof c4ShapeInRowParam === 'object') {
-    let [key, value] = Object.entries(c4ShapeInRowParam)[0];
+    const value = Object.values(c4ShapeInRowParam)[0];
     c4ShapeInRowValue = parseInt(value);
   } else {
     c4ShapeInRowValue = parseInt(c4ShapeInRowParam);
   }
   if (typeof c4BoundaryInRowParam === 'object') {
-    let [key, value] = Object.entries(c4BoundaryInRowParam)[0];
+    const value = Object.values(c4BoundaryInRowParam)[0];
     c4BoundaryInRowValue = parseInt(value);
   } else {
     c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);
@@ -721,7 +719,6 @@ export const clear = function () {
   boundaryParseStack = [''];
   title = '';
   wrapEnabled = false;
-  description = '';
   c4ShapeInRow = 4;
   c4BoundaryInRow = 2;
 };

src/diagrams/c4/c4Renderer.js

@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
+import svgDraw from './svgDraw';
 import { log } from '../../logger';
 import { parser } from './parser/c4Diagram';
 import common from '../common/common';
@@ -298,7 +298,7 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
 
     currentBounds.insert(c4Shape);
 
-    const height = svgDraw.drawC4Shape(diagram, c4Shape, conf);
+    svgDraw.drawC4Shape(diagram, c4Shape, conf);
   }
 
   currentBounds.bumpLastMargin(conf.c4ShapeMargin);
@@ -616,7 +616,7 @@ export const draw = function (_text, id, _version, diagObj) {
   globalBoundaryMaxY = conf.diagramMarginY;
 
   const title = diagObj.db.getTitle();
-  const c4type = diagObj.db.getC4Type();
+  const c4type = diagObj.db.getC4Type(); // TODO: @knsv: remove this?
   let currentBoundarys = diagObj.db.getBoundarys('');
   // switch (c4type) {
   //   case 'C4Context':

src/diagrams/c4/svgDraw.js

@@ -1,5 +1,4 @@
 import common from '../common/common';
-import { addFunction } from '../../interactionDb';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {

src/diagrams/class/classRenderer-v2.js

@@ -3,7 +3,6 @@ import graphlib from 'graphlib';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
-// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
@@ -11,7 +10,6 @@ import common from '../common/common';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let idCache = {};
-const padding = 20;
 
 const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
 
@@ -235,20 +233,6 @@ export const addRelations = function (relations, g) {
   });
 };
 
-/**
- * Gets the ID with the same label as in the cache
- *
- * @param {string} label The label to look for
- * @returns {string} The resulting ID
- */
-const getGraphId = function (label) {
-  const foundEntry = Object.entries(idCache).find((entry) => entry[1].label === label);
-
-  if (foundEntry) {
-    return foundEntry[0];
-  }
-};
-
 /**
  * Merges the value of `conf` with the passed `cnf`
  *

src/diagrams/class/classRenderer.js

@@ -10,12 +10,6 @@ import addSVGAccessibilityFields from '../../accessibility';
 let idCache = {};
 const padding = 20;
 
-const confa = {
-  dividerMargin: 10,
-  padding: 5,
-  textHeight: 10,
-};
-
 /**
  * Gets the ID with the same label as in the cache
  *
@@ -163,6 +157,7 @@ export const draw = function (text, id, _version, diagObj) {
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
+  // TODO: @knsv doc is not used, bug?
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
   // Fetch the default direction, use TD if none was found

src/diagrams/er/erDb.js

@@ -1,7 +1,7 @@
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import common from '../common/common';
+
 import {
   setAccTitle,
   getAccTitle,
@@ -12,8 +12,6 @@ import {
 
 let entities = {};
 let relationships = [];
-let title = '';
-let description = '';
 
 const Cardinality = {
   ZERO_OR_ONE: 'ZERO_OR_ONE',
@@ -78,7 +76,6 @@ const getRelationships = () => relationships;
 const clear = function () {
   entities = {};
   relationships = [];
-  title = '';
   commonClear();
 };
 

src/diagrams/flowchart/flowRenderer.js

@@ -29,8 +29,6 @@ export const setConf = function (cnf) {
  * @param diagObj
  */
 export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
-  const securityLevel = getConfig().securityLevel;
-
   const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
   const doc = !_doc ? document : _doc;
   const keys = Object.keys(vert);

src/diagrams/gantt/ganttDb.js

@@ -4,7 +4,7 @@ import { log } from '../../logger';
 import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
-import common from '../common/common';
+
 import {
   setAccTitle,
   getAccTitle,
@@ -21,8 +21,6 @@ let todayMarker = '';
 let includes = [];
 let excludes = [];
 let links = {};
-let title = '';
-let accDescription = '';
 let sections = [];
 let tasks = [];
 let currentSection = '';
@@ -34,10 +32,6 @@ let topAxis = false;
 // The serial order of the task in the script
 let lastOrder = 0;
 
-const sanitizeText = function (txt) {
-  return common.sanitizeText(txt, configApi.getConfig());
-};
-
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -47,7 +41,6 @@ export const clear = function () {
   tasks = [];
   currentSection = '';
   funs = [];
-  title = '';
   taskCnt = 0;
   lastTask = undefined;
   lastTaskID = undefined;
@@ -247,7 +240,8 @@ const getStartDate = function (prevTime, dateFormat, str) {
  * - `ms` for milliseconds
  *
  * @param {string} str - A string representing the duration.
- * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input string.
+ * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input
+ *   string.
  */
 const parseDuration = function (str) {
   const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim());

src/diagrams/gantt/ganttRenderer.js

@@ -391,7 +391,6 @@ export const draw = function (text, id, version, diagObj) {
     if (securityLevel === 'sandbox') {
       let sandboxElement;
       sandboxElement = select('#i' + id);
-      const root = select(sandboxElement.nodes()[0].contentDocument.body);
       const doc = sandboxElement.nodes()[0].contentDocument;
 
       rectangles

src/diagrams/git/gitGraphRenderer.js

@@ -5,7 +5,6 @@ import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let allCommitsDict = {};
-let branchNum;
 
 const commitType = {
   NORMAL: 0,
@@ -83,7 +82,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
   });
-  sortedKeys.forEach((key, index) => {
+  sortedKeys.forEach((key) => {
     const commit = commits[key];
 
     const y = branchPos[commit.branch].pos;
@@ -290,18 +289,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
 };
 
 /**
- * Detect if there are other commits between commit1's x-position and commit2's x-position on the same
- * branch as commit2.
+ * Detect if there are other commits between commit1's x-position and commit2's x-position on the
+ * same branch as commit2.
  *
  * @param {any} commit1
  * @param {any} commit2
  * @param allCommits
- * @returns {boolean} if there are commits between commit1's x-position and commit2's x-position
+ * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
  */
 const hasOverlappingCommits = (commit1, commit2, allCommits) => {
-  const commit1Pos = commitPos[commit2.id];
-  const commit2Pos = commitPos[commit1.id];
-
   // Find commits on the same branch as commit2
   const keys = Object.keys(allCommits);
   const overlappingComits = keys.filter((key) => {
@@ -322,7 +318,7 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => {
  * @param {any} y1
  * @param {any} y2
  * @param {any} _depth
- * @returns {number} y value between y1 and y2
+ * @returns {number} Y value between y1 and y2
  */
 const findLane = (y1, y2, _depth) => {
   const depth = _depth || 0;
@@ -355,25 +351,11 @@ const findLane = (y1, y2, _depth) => {
  * @param {any} allCommits
  */
 const drawArrow = (svg, commit1, commit2, allCommits) => {
-  const conf = getConfig();
-
   const p1 = commitPos[commit1.id];
   const p2 = commitPos[commit2.id];
   const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
   // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
 
-  let url = '';
-  if (conf.arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
-
   let arc = '';
   let arc2 = '';
   let radius = 0;
@@ -431,7 +413,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       } ${p2.y}`;
     }
   }
-  const arrow = svg
+  svg
     .append('path')
     .attr('d', lineDef)
     .attr('class', 'arrow arrow' + (colorClassNum % THEME_COLOR_LIMIT));
@@ -439,10 +421,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
 const drawArrows = (svg, commits) => {
   const gArrows = svg.append('g').attr('class', 'commit-arrows');
-  let pos = 0;
-
-  const k = Object.keys(commits);
-  k.forEach((key, index) => {
+  Object.keys(commits).forEach((key) => {
     const commit = commits[key];
     if (commit.parents && commit.parents.length > 0) {
       commit.parents.forEach((parent) => {

src/diagrams/info/infoRenderer.js

@@ -27,7 +27,6 @@ export const draw = (text, id, version, diagObj) => {
       securityLevel === 'sandbox'
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
-    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
     // Parse the graph definition
     // parser.parse(text);

src/diagrams/mindmap/mindmapRenderer.js

@@ -2,7 +2,7 @@
 import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import svgDraw from './svgDraw';
-import { BoundingBox, Layout, Tree } from 'non-layered-tidy-tree-layout';
+import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
 import clone from 'fast-clone';
 import * as db from './mindmapDb';
 
@@ -193,6 +193,7 @@ function layoutMindmap(node, conf) {
 
   // Merge the trees into a single tree
   const result = mergeTrees(node, trees);
+  // TODO: @knsv The function is not called bug?
   eachNode;
   return node;
 }
@@ -232,13 +233,11 @@ export const draw = (text, id, version, diagObj) => {
       securityLevel === 'sandbox'
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
-    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
-
     // Parse the graph definition
 
     const svg = root.select('#' + id);
 
-    const g = svg.append('g');
+    svg.append('g');
     const mm = diagObj.db.getMindmap();
 
     // Draw the graph and start with drawing the nodes without proper position

src/diagrams/mindmap/styles.js

@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert, isDark } from 'khroma';
+import { darken, lighten, isDark } from 'khroma';
 
 const genSections = (options) => {
   let sections = '';

src/diagrams/pie/pieDb.js

@@ -13,8 +13,6 @@ import {
 } from '../../commonDb';
 
 let sections = {};
-let title = '';
-let description = '';
 let showData = false;
 
 export const parseDirective = function (statement, context, type) {
@@ -49,7 +47,6 @@ const cleanupValue = function (value) {
 
 const clear = function () {
   sections = {};
-  title = '';
   showData = false;
   commonClear();
 };

src/diagrams/requirement/requirementDb.js

@@ -1,7 +1,7 @@
 import * as configApi from '../../config';
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import common from '../common/common';
+
 import {
   setAccTitle,
   getAccTitle,
@@ -15,10 +15,6 @@ let latestRequirement = {};
 let requirements = {};
 let latestElement = {};
 let elements = {};
-let title = '';
-let accDescription = '';
-
-const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
 
 const RequirementType = {
   REQUIREMENT: 'Requirement',

src/diagrams/requirement/requirementRenderer.js

@@ -320,7 +320,6 @@ export const draw = (text, id, _version, diagObj) => {
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
   const svg = root.select(`[id='${id}']`);
   markers.insertLineEndings(svg, conf);

src/diagrams/sequence/sequenceDb.js

@@ -16,8 +16,6 @@ let prevActor = undefined;
 let actors = {};
 let messages = [];
 const notes = [];
-let diagramTitle = '';
-let description = '';
 let sequenceNumbersEnabled = false;
 let wrapEnabled;
 
@@ -153,7 +151,6 @@ export const clear = function () {
   actors = {};
   messages = [];
   sequenceNumbersEnabled = false;
-  diagramTitle = '';
   commonClear();
 };
 

src/diagrams/state/stateDb.js

@@ -11,8 +11,6 @@ import {
   clear as commonClear,
 } from '../../commonDb';
 
-const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
-
 const clone = (o) => JSON.parse(JSON.stringify(o));
 let rootDoc = [];
 
@@ -121,10 +119,6 @@ let documents = {
 let currentDocument = documents.root;
 
 let startCnt = 0;
-let endCnt = 0; // let stateCnt = 0;
-
-let title = 'State diagram';
-let description = '';
 
 /**
  * Function called by parser when a node definition has been found.
@@ -179,7 +173,6 @@ export const clear = function (saveCommon) {
   currentDocument = documents.root;
 
   startCnt = 0;
-  endCnt = 0;
   classes = [];
   if (!saveCommon) {
     commonClear();
@@ -211,7 +204,6 @@ export const addRelation = function (_id1, _id2, title) {
     type1 = 'start';
   }
   if (_id2 === '[*]') {
-    endCnt++;
     id2 = 'end' + startCnt;
     type2 = 'end';
   }

src/diagrams/state/stateRenderer-v2.js

@@ -283,7 +283,6 @@ export const draw = function (text, id, _version, diag) {
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = root.select(`[id="${id}"]`);
 
   // Run the renderer. This is what draws the final graph.

src/diagrams/user-journey/journeyDb.js

@@ -1,6 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import common from '../common/common';
 import {
   setAccTitle,
   getAccTitle,
@@ -11,10 +10,6 @@ import {
   clear as commonClear,
 } from '../../commonDb';
 
-const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
-
-let title = '';
-let description = '';
 let currentSection = '';
 
 const sections = [];
@@ -29,8 +24,6 @@ export const clear = function () {
   sections.length = 0;
   tasks.length = 0;
   currentSection = '';
-  title = '';
-  description = '';
   rawTasks.length = 0;
   commonClear();
 };

src/utils.ts

@@ -39,7 +39,6 @@ const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const directiveWithoutOpen =
   /\s*(?:(?:(\w+)(?=:):|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
-const anyComment = /\s*%%.*\n/gm;
 
 /**
  * @function detectInit Detects the init config object from the text
@@ -329,7 +328,6 @@ const calcLabelPosition = (points) => {
 
 const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {
   let prevPoint;
-  let totalDistance = 0;
   log.info('our points', points);
   if (points[0] !== initialPosition) {
     points = points.reverse();
@@ -389,7 +387,6 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
   // Todo looking to faster cloning method
   let points = JSON.parse(JSON.stringify(_points));
   let prevPoint;
-  let totalDistance = 0;
   log.info('our points', points);
   if (position !== 'start_left' && position !== 'start_right') {
     points = points.reverse();
@@ -728,19 +725,6 @@ export const calculateTextDimensions = memoize(
   (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`
 );
 
-/**
- * Applys d3 attributes
- *
- * @param {any} d3Elem D3 Element to apply the attributes onto
- * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of
- *   attributes
- */
-const d3Attrs = function (d3Elem, attrs) {
-  for (const attr of attrs) {
-    d3Elem.attr(attr[0], attr[1]);
-  }
-};
-
 export const initIdGenerator = class iterator {
   constructor(deterministic, seed) {
     this.deterministic = deterministic;