29cbff2226daaa903646b95ef8a9a07ba50c70b5-PR-1148

Build # 29cbff2226daaa903646b95ef8a9a07ba50c70b5-PR-1148

Build Type

github

Committed by GitHub

Commit Message

Merge 4ff405824 into dddd5af83

Pull Request Pull Request #1148: #1142 Simplified arrows/edges in the grammar

Run Details

1429 of 2827 branches covered (50.55%)

Branch coverage included in aggregate %.

57 of 67 new or added lines in 3 files covered. (85.07%)

110 existing lines in 1 file now uncovered.

3110 of 5819 relevant lines covered (53.45%)

200.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

66.12

/src/diagrams/flowchart/flowDb.js

import * as d3 from 'd3';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { logger } from '../../logger';
import utils from '../../utils';
import { getConfig } from '../../config';

// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
const MERMAID_DOM_ID_PREFIX = '';

const config = getConfig();
let vertices = {};
let edges = [];
let classes = [];
let subGraphs = [];
let subGraphLookup = {};
let tooltips = {};
let subCount = 0;
let firstGraphFlag = true;
let direction;
// Functions to be run after graph rendering
let funs = [];

const sanitize = text => {
  let txt = text;
  let htmlLabels = true;
  if (
    config.flowchart &&
    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
  )
    htmlLabels = false;
  if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line
    txt = txt.replace(/<br>/g, '#br#');
    txt = txt.replace(/<br\S*?\/>/g, '#br#');
    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    txt = txt.replace(/=/g, '&equals;');
    txt = txt.replace(/#br#/g, '<br/>');
  }

  return txt;
};

/**
 * Function called by parser when a node definition has been found
 * @param id
 * @param text
 * @param type
 * @param style
 * @param classes
 */
export const addVertex = function(_id, text, type, style, classes) {
  let txt;
  let id = _id;
  if (typeof id === 'undefined') {
    return;
  }
  if (id.trim().length === 0) {
    return;
  }

  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;

  if (typeof vertices[id] === 'undefined') {
    vertices[id] = { id: id, styles: [], classes: [] };
  }
  if (typeof text !== 'undefined') {
    txt = sanitize(text.trim());

    // strip quotes if string starts and exnds with a quote
    if (txt[0] === '"' && txt[txt.length - 1] === '"') {
      txt = txt.substring(1, txt.length - 1);
    }

    vertices[id].text = txt;
  } else {
    if (!vertices[id].text) {
      vertices[id].text = _id;
    }
  }
  if (typeof type !== 'undefined') {
    vertices[id].type = type;
  }
  if (typeof style !== 'undefined') {
    if (style !== null) {
      style.forEach(function(s) {
        vertices[id].styles.push(s);
      });
    }
  }
  if (typeof classes !== 'undefined') {
    if (classes !== null) {
      classes.forEach(function(s) {
        vertices[id].classes.push(s);
      });
    }
  }
};

/**
 * Function called by parser when a link/edge definition has been found
 * @param start
 * @param end
 * @param type
 * @param linktext
 */
export const addLink = function(_start, _end, type, linktext) {
  let start = _start;
  let end = _end;
  if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
  if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
  logger.info('Got edge...', start, end);

  const edge = { start: start, end: end, type: undefined, text: '' };
  linktext = type.text;

  if (typeof linktext !== 'undefined') {
    edge.text = sanitize(linktext.trim());

    // strip quotes if string starts and exnds with a quote
    if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
      edge.text = edge.text.substring(1, edge.text.length - 1);
    }
  }

  if (typeof type !== 'undefined') {
    edge.type = type.type;
    edge.stroke = type.stroke;
  }
  edges.push(edge);
};

/**
 * Updates a link's line interpolation algorithm
 * @param pos
 * @param interpolate
 */
export const updateLinkInterpolate = function(positions, interp) {
  positions.forEach(function(pos) {
    if (pos === 'default') {
      edges.defaultInterpolate = interp;
    } else {
      edges[pos].interpolate = interp;
    }
  });
};

/**
 * Updates a link with a style
 * @param pos
 * @param style
 */
export const updateLink = function(positions, style) {
  positions.forEach(function(pos) {
    if (pos === 'default') {
      edges.defaultStyle = style;
    } else {
      if (utils.isSubstringInArray('fill', style) === -1) {
        style.push('fill:none');
      }
      edges[pos].style = style;
    }
  });
};

export const addClass = function(id, style) {
  if (typeof classes[id] === 'undefined') {
    classes[id] = { id: id, styles: [] };
  }

  if (typeof style !== 'undefined') {
    if (style !== null) {
      style.forEach(function(s) {
        classes[id].styles.push(s);
      });
    }
  }
};

/**
 * Called by parser when a graph definition is found, stores the direction of the chart.
 * @param dir
 */
export const setDirection = function(dir) {
  direction = dir;
  if (direction.match(/.*</)) {
    direction = 'RL';
  }
  if (direction.match(/.*\^/)) {
    direction = 'BT';
  }
  if (direction.match(/.*>/)) {
    direction = 'LR';
  }
  if (direction.match(/.*v/)) {
    direction = 'TB';
  }
};

/**
 * Called by parser when a special node is found, e.g. a clickable element.
 * @param ids Comma separated list of ids
 * @param className Class to add
 */
export const setClass = function(ids, className) {
  ids.split(',').forEach(function(_id) {
    let id = _id;
    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
    if (typeof vertices[id] !== 'undefined') {
      vertices[id].classes.push(className);
    }

    if (typeof subGraphLookup[id] !== 'undefined') {
      subGraphLookup[id].classes.push(className);
    }
  });
};

const setTooltip = function(ids, tooltip) {
  ids.split(',').forEach(function(id) {
    if (typeof tooltip !== 'undefined') {
      tooltips[id] = sanitize(tooltip);
    }
  });
};

const setClickFun = function(_id, functionName) {
  let id = _id;
  if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
  if (config.securityLevel !== 'loose') {
    return;
  }
  if (typeof functionName === 'undefined') {
    return;
  }
  if (typeof vertices[id] !== 'undefined') {
    funs.push(function() {
      const elem = document.querySelector(`[id="${id}"]`);
      if (elem !== null) {
        elem.addEventListener(
          'click',
          function() {
            window[functionName](id);
          },
          false
        );
      }
    });
  }
};

/**
 * Called by parser when a link is found. Adds the URL to the vertex data.
 * @param ids Comma separated list of ids
 * @param linkStr URL to create a link for
 * @param tooltip Tooltip for the clickable element
 */
export const setLink = function(ids, linkStr, tooltip) {
  ids.split(',').forEach(function(_id) {
    let id = _id;
    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
    if (typeof vertices[id] !== 'undefined') {
      if (config.securityLevel !== 'loose') {
        vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')
      } else {
        vertices[id].link = linkStr;
      }
    }
  });
  setTooltip(ids, tooltip);
  setClass(ids, 'clickable');
};
export const getTooltip = function(id) {
  return tooltips[id];
};

/**
 * Called by parser when a click definition is found. Registers an event handler.
 * @param ids Comma separated list of ids
 * @param functionName Function to be called on click
 * @param tooltip Tooltip for the clickable element
 */
export const setClickEvent = function(ids, functionName, tooltip) {
  ids.split(',').forEach(function(id) {
    setClickFun(id, functionName);
  });
  setTooltip(ids, tooltip);
  setClass(ids, 'clickable');
};

export const bindFunctions = function(element) {
  funs.forEach(function(fun) {
    fun(element);
  });
};
export const getDirection = function() {
  return direction.trim();
};
/**
 * Retrieval function for fetching the found nodes after parsing has completed.
 * @returns {{}|*|vertices}
 */
export const getVertices = function() {
  return vertices;
};

/**
 * Retrieval function for fetching the found links after parsing has completed.
 * @returns {{}|*|edges}
 */
export const getEdges = function() {
  return edges;
};

/**
 * Retrieval function for fetching the found class definitions after parsing has completed.
 * @returns {{}|*|classes}
 */
export const getClasses = function() {
  return classes;
};

const setupToolTips = function(element) {
  let tooltipElem = d3.select('.mermaidTooltip');
  if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
    tooltipElem = d3
      .select('body')
      .append('div')
      .attr('class', 'mermaidTooltip')
      .style('opacity', 0);
  }

  const svg = d3.select(element).select('svg');

  const nodes = svg.selectAll('g.node');
  nodes
    .on('mouseover', function() {
      const el = d3.select(this);
      const title = el.attr('title');
      // Dont try to draw a tooltip if no data is provided
      if (title === null) {
        return;
      }
      const rect = this.getBoundingClientRect();

      tooltipElem
        .transition()
        .duration(200)
        .style('opacity', '.9');
      tooltipElem
        .html(el.attr('title'))
        .style('left', rect.left + (rect.right - rect.left) / 2 + 'px')
        .style('top', rect.top - 14 + document.body.scrollTop + 'px');
      el.classed('hover', true);
    })
    .on('mouseout', function() {
      tooltipElem
        .transition()
        .duration(500)
        .style('opacity', 0);
      const el = d3.select(this);
      el.classed('hover', false);
    });
};
funs.push(setupToolTips);

/**
 * Clears the internal graph db so that a new graph can be parsed.
 */
export const clear = function() {
  vertices = {};
  classes = {};
  edges = [];
  funs = [];
  funs.push(setupToolTips);
  subGraphs = [];
  subGraphLookup = {};
  subCount = 0;
  tooltips = [];
  firstGraphFlag = true;
};
/**
 *
 * @returns {string}
 */
export const defaultStyle = function() {
  return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
};

/**
 * Clears the internal graph db so that a new graph can be parsed.
 */
export const addSubGraph = function(_id, list, _title) {
  let id = _id;
  let title = _title;
  if (_id === _title && _title.match(/\s/)) {
    id = undefined;
  }
  function uniq(a) {
    const prims = { boolean: {}, number: {}, string: {} };
    const objs = [];

    return a.filter(function(item) {
      const type = typeof item;
      if (item.trim() === '') {
        return false;
      }
      if (type in prims) {
        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line
      } else {
        return objs.indexOf(item) >= 0 ? false : objs.push(item);
      }
    });
  }

  let nodeList = [];

  nodeList = uniq(nodeList.concat.apply(nodeList, list));
  for (let i = 0; i < nodeList.length; i++) {
    if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
  }

  id = id || 'subGraph' + subCount;
  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
  title = title || '';
  title = sanitize(title);
  subCount = subCount + 1;
  const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
  subGraphs.push(subGraph);
  subGraphLookup[id] = subGraph;
  return id;
};

const getPosForId = function(id) {
  for (let i = 0; i < subGraphs.length; i++) {
    if (subGraphs[i].id === id) {
      return i;
    }
  }
  return -1;
};
let secCount = -1;
const posCrossRef = [];
const indexNodes2 = function(id, pos) {
  const nodes = subGraphs[pos].nodes;
  secCount = secCount + 1;
  if (secCount > 2000) {
    return;
  }
  posCrossRef[secCount] = pos;
  // Check if match
  if (subGraphs[pos].id === id) {
    return {
      result: true,
      count: 0
    };
  }

  let count = 0;
  let posCount = 1;
  while (count < nodes.length) {
    const childPos = getPosForId(nodes[count]);
    // Ignore regular nodes (pos will be -1)
    if (childPos >= 0) {
      const res = indexNodes2(id, childPos);
      if (res.result) {
        return {
          result: true,
          count: posCount + res.count
        };
      } else {
        posCount = posCount + res.count;
      }
    }
    count = count + 1;
  }

  return {
    result: false,
    count: posCount
  };
};

export const getDepthFirstPos = function(pos) {
  return posCrossRef[pos];
};
export const indexNodes = function() {
  secCount = -1;
  if (subGraphs.length > 0) {
    indexNodes2('none', subGraphs.length - 1, 0);
  }
};

export const getSubGraphs = function() {
  return subGraphs;
};

export const firstGraph = () => {
  if (firstGraphFlag) {
    firstGraphFlag = false;
    return true;
  }
  return false;
};

const destructStartLink = _str => {
  const str = _str.trim();

  switch (str) {
    case '<--':
      return { type: 'arrow', stroke: 'normal' };
    case 'x--':
      return { type: 'arrow_cross', stroke: 'normal' };
    case 'o--':
      return { type: 'arrow_circle', stroke: 'normal' };
    case '<-.':
      return { type: 'arrow', stroke: 'dotted' };
    case 'x-.':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case 'o-.':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '<==':
      return { type: 'arrow', stroke: 'thick' };
    case 'x==':
      return { type: 'arrow_cross', stroke: 'thick' };
    case 'o==':
      return { type: 'arrow_circle', stroke: 'thick' };
    case '--':
      return { type: 'arrow_open', stroke: 'normal' };
    case '==':
      return { type: 'arrow_open', stroke: 'thick' };
    case '-.':
      return { type: 'arrow_open', stroke: 'dotted' };
  }
};

const destructEndLink = _str => {
  const str = _str.trim();

  switch (str) {
    case '--x':
      return { type: 'arrow_cross', stroke: 'normal' };
    case '-->':
      return { type: 'arrow', stroke: 'normal' };
    case '<-->':
      return { type: 'double_arrow_point', stroke: 'normal' };
    case 'x--x':
      return { type: 'double_arrow_cross', stroke: 'normal' };
    case 'o--o':
      return { type: 'double_arrow_circle', stroke: 'normal' };
    case 'o.-o':
      return { type: 'double_arrow_circle', stroke: 'dotted' };
    case '<==>':
      return { type: 'double_arrow_point', stroke: 'thick' };
    case 'o==o':
      return { type: 'double_arrow_circle', stroke: 'thick' };
    case 'x==x':
      return { type: 'double_arrow_cross', stroke: 'thick' };
    case 'x.-x':
      return { type: 'double_arrow_cross', stroke: 'dotted' };
    case 'x-.-x':
      return { type: 'double_arrow_cross', stroke: 'dotted' };
    case '<.->':
      return { type: 'double_arrow_point', stroke: 'dotted' };
    case '<-.->':
      return { type: 'double_arrow_point', stroke: 'dotted' };
    case 'o-.-o':
      return { type: 'double_arrow_circle', stroke: 'dotted' };
    case '--o':
      return { type: 'arrow_circle', stroke: 'normal' };
    case '---':
      return { type: 'arrow_open', stroke: 'normal' };
    case '-.-x':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case '-.->':
      return { type: 'arrow', stroke: 'dotted' };
    case '-.-o':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '-.-':
      return { type: 'arrow_open', stroke: 'dotted' };
    case '.-x':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case '.->':
      return { type: 'arrow', stroke: 'dotted' };
    case '.-o':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '.-':
      return { type: 'arrow_open', stroke: 'dotted' };
    case '==x':
      return { type: 'arrow_cross', stroke: 'thick' };
    case '==>':
      return { type: 'arrow', stroke: 'thick' };
    case '==o':
      return { type: 'arrow_circle', stroke: 'thick' };
    case '===':
      return { type: 'arrow_open', stroke: 'thick' };
  }
};

const destructLink = (_str, _startStr) => {
  const info = destructEndLink(_str);
  let startInfo;
  if (_startStr) {
    startInfo = destructStartLink(_startStr);
    console.log(startInfo, info);
    if (startInfo.stroke !== info.stroke) {
      return { type: 'INVALID', stroke: 'INVALID' };
    }

    if (startInfo.type === 'arrow_open') {
      // -- xyz -->  - take arrow type form ending
      startInfo.type = info.type;
    } else {
      // x-- xyz -->  - not supported
      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };

      startInfo.type = 'double_' + startInfo.type;
    }

    if (startInfo.type === 'double_arrow') {
      startInfo.type = 'double_arrow_point';
    }

    return startInfo;
  }

  return info;
};

export default {
  addVertex,
  addLink,
  updateLinkInterpolate,
  updateLink,
  addClass,
  setDirection,
  setClass,
  getTooltip,
  setClickEvent,
  setLink,
  bindFunctions,
  getDirection,
  getVertices,
  getEdges,
  getClasses,
  clear,
  defaultStyle,
  addSubGraph,
  getDepthFirstPos,
  indexNodes,
  getSubGraphs,
  destructLink,
  lex: {
    firstGraph
  }
};

1	import * as d3 from 'd3';
2	import { sanitizeUrl } from '@braintree/sanitize-url';
3	import { logger } from '../../logger';
4	import utils from '../../utils';
5	import { getConfig } from '../../config';
6
7	// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
8	const MERMAID_DOM_ID_PREFIX = '';	28✔
9
10	const config = getConfig();	28✔
11	let vertices = {};	28✔
12	let edges = [];	28✔
13	let classes = [];	28✔
14	let subGraphs = [];	28✔
15	let subGraphLookup = {};	28✔
16	let tooltips = {};	28✔
17	let subCount = 0;	28✔
18	let firstGraphFlag = true;	28✔
19	let direction;
20	// Functions to be run after graph rendering
21	let funs = [];	28✔
22
23	const sanitize = text => {	28✔
24	let txt = text;	242✔
25	let htmlLabels = true;	242✔
26	if (	242!
27	config.flowchart &&	258✔
28	(config.flowchart.htmlLabels === false \|\| config.flowchart.htmlLabels === 'false')
29	)
30	htmlLabels = false;	×
31	if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line	242!
32	txt = txt.replace(/<br>/g, '#br#');	242✔
33	txt = txt.replace(/<br\S*?\/>/g, '#br#');	242✔
34	txt = txt.replace(/</g, '<').replace(/>/g, '>');	242✔
35	txt = txt.replace(/=/g, '=');	242✔
36	txt = txt.replace(/#br#/g, '<br/>');	242✔
37	}
38
39	return txt;	242✔
40	};
41
42	/**
43	* Function called by parser when a node definition has been found
44	* @param id
45	* @param text
46	* @param type
47	* @param style
48	* @param classes
49	*/
50	export const addVertex = function(_id, text, type, style, classes) {	28✔
51	let txt;
52	let id = _id;	856✔
53	if (typeof id === 'undefined') {	856!
54	return;	×
55	}
56	if (id.trim().length === 0) {	856!
57	return;	×
58	}
59
60	if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;	856✔
61
62	if (typeof vertices[id] === 'undefined') {	856✔
63	vertices[id] = { id: id, styles: [], classes: [] };	788✔
64	}
65	if (typeof text !== 'undefined') {	856✔
66	txt = sanitize(text.trim());	108✔
67
68	// strip quotes if string starts and exnds with a quote
69	if (txt[0] === '"' && txt[txt.length - 1] === '"') {	108!
70	txt = txt.substring(1, txt.length - 1);	×
71	}
72
73	vertices[id].text = txt;	108✔
74	} else {
75	if (!vertices[id].text) {	748✔
76	vertices[id].text = _id;	680✔
77	}
78	}
79	if (typeof type !== 'undefined') {	856✔
80	vertices[id].type = type;	108✔
81	}
82	if (typeof style !== 'undefined') {	856✔
83	if (style !== null) {	18!
84	style.forEach(function(s) {	18✔
85	vertices[id].styles.push(s);	26✔
86	});
87	}
88	}
89	if (typeof classes !== 'undefined') {	856!
90	if (classes !== null) {	×
91	classes.forEach(function(s) {	×
92	vertices[id].classes.push(s);	×
93	});
94	}
95	}
96	};
97
98	/**
99	* Function called by parser when a link/edge definition has been found
100	* @param start
101	* @param end
102	* @param type
103	* @param linktext
104	*/
105	export const addLink = function(_start, _end, type, linktext) {	28✔
106	let start = _start;	400✔
107	let end = _end;	400✔
108	if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;	400!
109	if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;	400!
110	logger.info('Got edge...', start, end);	400✔
111
112	const edge = { start: start, end: end, type: undefined, text: '' };	400✔
113	linktext = type.text;	400✔
114
115	if (typeof linktext !== 'undefined') {	400✔
116	edge.text = sanitize(linktext.trim());	96✔
117
118	// strip quotes if string starts and exnds with a quote
119	if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {	96!
120	edge.text = edge.text.substring(1, edge.text.length - 1);	×
121	}
122	}
123
124	if (typeof type !== 'undefined') {	400!
125	edge.type = type.type;	400✔
126	edge.stroke = type.stroke;	400✔
127	}
128	edges.push(edge);	400✔
129	};
130
131	/**
132	* Updates a link's line interpolation algorithm
133	* @param pos
134	* @param interpolate
135	*/
136	export const updateLinkInterpolate = function(positions, interp) {	28✔
137	positions.forEach(function(pos) {	18✔
138	if (pos === 'default') {	22✔
139	edges.defaultInterpolate = interp;	4✔
140	} else {
141	edges[pos].interpolate = interp;	18✔
142	}
143	});
144	};
145
146	/**
147	* Updates a link with a style
148	* @param pos
149	* @param style
150	*/
151	export const updateLink = function(positions, style) {	28✔
152	positions.forEach(function(pos) {	20✔
153	if (pos === 'default') {	24✔
154	edges.defaultStyle = style;	2✔
155	} else {
156	if (utils.isSubstringInArray('fill', style) === -1) {	22✔
157	style.push('fill:none');	16✔
158	}
159	edges[pos].style = style;	22✔
160	}
161	});
162	};
163
164	export const addClass = function(id, style) {	28✔
165	if (typeof classes[id] === 'undefined') {	24!
166	classes[id] = { id: id, styles: [] };	24✔
167	}
168
169	if (typeof style !== 'undefined') {	24!
170	if (style !== null) {	24!
171	style.forEach(function(s) {	24✔
172	classes[id].styles.push(s);	52✔
173	});
174	}
175	}
176	};
177
178	/**
179	* Called by parser when a graph definition is found, stores the direction of the chart.
180	* @param dir
181	*/
182	export const setDirection = function(dir) {	28✔
183	direction = dir;	364✔
184	if (direction.match(/.*</)) {	364✔
185	direction = 'RL';	2✔
186	}
187	if (direction.match(/.*\^/)) {	364✔
188	direction = 'BT';	2✔
189	}
190	if (direction.match(/.*>/)) {	364✔
191	direction = 'LR';	2✔
192	}
193	if (direction.match(/.*v/)) {	364✔
194	direction = 'TB';	2✔
195	}
196	};
197
198	/**
199	* Called by parser when a special node is found, e.g. a clickable element.
200	* @param ids Comma separated list of ids
201	* @param className Class to add
202	*/
203	export const setClass = function(ids, className) {	28✔
204	ids.split(',').forEach(function(_id) {	14✔
205	let id = _id;	16✔
206	if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;	16!
207	if (typeof vertices[id] !== 'undefined') {	16!
208	vertices[id].classes.push(className);	16✔
209	}
210
211	if (typeof subGraphLookup[id] !== 'undefined') {	16!
212	subGraphLookup[id].classes.push(className);	×
213	}
214	});
215	};
216
217	const setTooltip = function(ids, tooltip) {	28✔
218	ids.split(',').forEach(function(id) {	×
219	if (typeof tooltip !== 'undefined') {	×
220	tooltips[id] = sanitize(tooltip);	×
221	}
222	});
223	};
224
225	const setClickFun = function(_id, functionName) {	28✔
226	let id = _id;	×
227	if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;	×
228	if (config.securityLevel !== 'loose') {	×
229	return;	×
230	}
231	if (typeof functionName === 'undefined') {	×
232	return;	×
233	}
234	if (typeof vertices[id] !== 'undefined') {	×
235	funs.push(function() {	×
236	const elem = document.querySelector(`[id="${id}"]`);	×
237	if (elem !== null) {	×
238	elem.addEventListener(	×
239	'click',
240	function() {
241	window[functionName](id);	×
242	},
243	false
244	);
245	}
246	});
247	}
248	};
249
250	/**
251	* Called by parser when a link is found. Adds the URL to the vertex data.
252	* @param ids Comma separated list of ids
253	* @param linkStr URL to create a link for
254	* @param tooltip Tooltip for the clickable element
255	*/
256	export const setLink = function(ids, linkStr, tooltip) {	28✔
257	ids.split(',').forEach(function(_id) {	×
258	let id = _id;	×
259	if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;	×
260	if (typeof vertices[id] !== 'undefined') {	×
261	if (config.securityLevel !== 'loose') {	×
262	vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')	×
263	} else {
264	vertices[id].link = linkStr;	×
265	}
266	}
267	});
268	setTooltip(ids, tooltip);	×
269	setClass(ids, 'clickable');	×
270	};
271	export const getTooltip = function(id) {	28✔
272	return tooltips[id];	×
273	};
274
275	/**
276	* Called by parser when a click definition is found. Registers an event handler.
277	* @param ids Comma separated list of ids
278	* @param functionName Function to be called on click
279	* @param tooltip Tooltip for the clickable element
280	*/
281	export const setClickEvent = function(ids, functionName, tooltip) {	28✔
282	ids.split(',').forEach(function(id) {	×
283	setClickFun(id, functionName);	×
284	});
285	setTooltip(ids, tooltip);	×
286	setClass(ids, 'clickable');	×
287	};
288
289	export const bindFunctions = function(element) {	28✔
290	funs.forEach(function(fun) {	×
291	fun(element);	×
292	});
293	};
294	export const getDirection = function() {	28✔
295	return direction.trim();	8✔
296	};
297	/**
298	* Retrieval function for fetching the found nodes after parsing has completed.
299	* @returns {{}\|*\|vertices}
300	*/
301	export const getVertices = function() {	28✔
302	return vertices;	336✔
303	};
304
305	/**
306	* Retrieval function for fetching the found links after parsing has completed.
307	* @returns {{}\|*\|edges}
308	*/
309	export const getEdges = function() {	28✔
310	return edges;	318✔
311	};
312
313	/**
314	* Retrieval function for fetching the found class definitions after parsing has completed.
315	* @returns {{}\|*\|classes}
316	*/
317	export const getClasses = function() {	28✔
318	return classes;	24✔
319	};
320
321	const setupToolTips = function(element) {	28✔
322	let tooltipElem = d3.select('.mermaidTooltip');	×
323	if ((tooltipElem._groups \|\| tooltipElem)[0][0] === null) {	×
324	tooltipElem = d3	×
325	.select('body')
326	.append('div')
327	.attr('class', 'mermaidTooltip')
328	.style('opacity', 0);
329	}
330
331	const svg = d3.select(element).select('svg');	×
332
333	const nodes = svg.selectAll('g.node');	×
334	nodes	×
335	.on('mouseover', function() {
336	const el = d3.select(this);	×
337	const title = el.attr('title');	×
338	// Dont try to draw a tooltip if no data is provided
339	if (title === null) {	×
340	return;	×
341	}
342	const rect = this.getBoundingClientRect();	×
343
344	tooltipElem	×
345	.transition()
346	.duration(200)
347	.style('opacity', '.9');
348	tooltipElem	×
349	.html(el.attr('title'))
350	.style('left', rect.left + (rect.right - rect.left) / 2 + 'px')
351	.style('top', rect.top - 14 + document.body.scrollTop + 'px');
352	el.classed('hover', true);	×
353	})
354	.on('mouseout', function() {
355	tooltipElem	×
356	.transition()
357	.duration(500)
358	.style('opacity', 0);
359	const el = d3.select(this);	×
360	el.classed('hover', false);	×
361	});
362	};
363	funs.push(setupToolTips);	28✔
364
365	/**
366	* Clears the internal graph db so that a new graph can be parsed.
367	*/
368	export const clear = function() {	28✔
369	vertices = {};	400✔
370	classes = {};	400✔
371	edges = [];	400✔
372	funs = [];	400✔
373	funs.push(setupToolTips);	400✔
374	subGraphs = [];	400✔
375	subGraphLookup = {};	400✔
376	subCount = 0;	400✔
377	tooltips = [];	400✔
378	firstGraphFlag = true;	400✔
379	};
380	/**
381	*
382	* @returns {string}
383	*/
384	export const defaultStyle = function() {	28✔
385	return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';	×
386	};
387
388	/**
389	* Clears the internal graph db so that a new graph can be parsed.
390	*/
391	export const addSubGraph = function(_id, list, _title) {	28✔
392	let id = _id;	38✔
393	let title = _title;	38✔
394	if (_id === _title && _title.match(/\s/)) {	38✔
395	id = undefined;	6✔
396	}
397	function uniq(a) {
398	const prims = { boolean: {}, number: {}, string: {} };	38✔
399	const objs = [];	38✔
400
401	return a.filter(function(item) {	38✔
402	const type = typeof item;	130✔
403	if (item.trim() === '') {	130✔
404	return false;	48✔
405	}
406	if (type in prims) {	82!
407	return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line	82✔
408	} else {
409	return objs.indexOf(item) >= 0 ? false : objs.push(item);	×
410	}
411	});
412	}
413
414	let nodeList = [];	38✔
415
416	nodeList = uniq(nodeList.concat.apply(nodeList, list));	38✔
417	for (let i = 0; i < nodeList.length; i++) {	38✔
418	if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];	78✔
419	}
420
421	id = id \|\| 'subGraph' + subCount;	38✔
422	if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;	38✔
423	title = title \|\| '';	38!
424	title = sanitize(title);	38✔
425	subCount = subCount + 1;	38✔
426	const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };	38✔
427	subGraphs.push(subGraph);	38✔
428	subGraphLookup[id] = subGraph;	38✔
429	return id;	38✔
430	};
431
432	const getPosForId = function(id) {	28✔
433	for (let i = 0; i < subGraphs.length; i++) {	×
434	if (subGraphs[i].id === id) {	×
435	return i;	×
436	}
437	}
438	return -1;	×
439	};
440	let secCount = -1;	28✔
441	const posCrossRef = [];	28✔
442	const indexNodes2 = function(id, pos) {	28✔
443	const nodes = subGraphs[pos].nodes;	×
444	secCount = secCount + 1;	×
445	if (secCount > 2000) {	×
446	return;	×
447	}
448	posCrossRef[secCount] = pos;	×
449	// Check if match
450	if (subGraphs[pos].id === id) {	×
451	return {	×
452	result: true,
453	count: 0
454	};
455	}
456
457	let count = 0;	×
458	let posCount = 1;	×
459	while (count < nodes.length) {	×
460	const childPos = getPosForId(nodes[count]);	×
461	// Ignore regular nodes (pos will be -1)
462	if (childPos >= 0) {	×
463	const res = indexNodes2(id, childPos);	×
464	if (res.result) {	×
465	return {	×
466	result: true,
467	count: posCount + res.count
468	};
469	} else {
470	posCount = posCount + res.count;	×
471	}
472	}
473	count = count + 1;	×
474	}
475
476	return {	×
477	result: false,
478	count: posCount
479	};
480	};
481
482	export const getDepthFirstPos = function(pos) {	28✔
483	return posCrossRef[pos];	×
484	};
485	export const indexNodes = function() {	28✔
486	secCount = -1;	×
487	if (subGraphs.length > 0) {	×
488	indexNodes2('none', subGraphs.length - 1, 0);	×
489	}
490	};
491
492	export const getSubGraphs = function() {	28✔
493	return subGraphs;	22✔
494	};
495
496	export const firstGraph = () => {	28✔
497	if (firstGraphFlag) {	372✔
498	firstGraphFlag = false;	366✔
499	return true;	366✔
500	}
501	return false;	6✔
502	};
503
504	const destructStartLink = _str => {	28✔
505	const str = _str.trim();	52✔
506
507	switch (str) {	52✔
508	case '<--':
509	return { type: 'arrow', stroke: 'normal' };	2✔
510	case 'x--':
511	return { type: 'arrow_cross', stroke: 'normal' };	2✔
512	case 'o--':
513	return { type: 'arrow_circle', stroke: 'normal' };	2✔
514	case '<-.':
515	return { type: 'arrow', stroke: 'dotted' };	2✔
516	case 'x-.':
517	return { type: 'arrow_cross', stroke: 'dotted' };	2✔
518	case 'o-.':
519	return { type: 'arrow_circle', stroke: 'dotted' };	2✔
520	case '<==':
521	return { type: 'arrow', stroke: 'thick' };	2✔
522	case 'x==':
523	return { type: 'arrow_cross', stroke: 'thick' };	2✔
524	case 'o==':
525	return { type: 'arrow_circle', stroke: 'thick' };	2✔
526	case '--':
527	return { type: 'arrow_open', stroke: 'normal' };	30✔
528	case '==':
529	return { type: 'arrow_open', stroke: 'thick' };	2✔
530	case '-.':
531	return { type: 'arrow_open', stroke: 'dotted' };	2✔
532	}
533	};
534
535	const destructEndLink = _str => {	28✔
536	const str = _str.trim();	400✔
537
538	switch (str) {	400!
539	case '--x':
540	return { type: 'arrow_cross', stroke: 'normal' };	56✔
541	case '-->':
542	return { type: 'arrow', stroke: 'normal' };	282✔
543	case '<-->':
544	return { type: 'double_arrow_point', stroke: 'normal' };	2✔
545	case 'x--x':
546	return { type: 'double_arrow_cross', stroke: 'normal' };	2✔
547	case 'o--o':
548	return { type: 'double_arrow_circle', stroke: 'normal' };	2✔
549	case 'o.-o':
NEW 550	return { type: 'double_arrow_circle', stroke: 'dotted' };	×
551	case '<==>':
552	return { type: 'double_arrow_point', stroke: 'thick' };	2✔
553	case 'o==o':
554	return { type: 'double_arrow_circle', stroke: 'thick' };	2✔
555	case 'x==x':
556	return { type: 'double_arrow_cross', stroke: 'thick' };	2✔
557	case 'x.-x':
NEW 558	return { type: 'double_arrow_cross', stroke: 'dotted' };	×
559	case 'x-.-x':
560	return { type: 'double_arrow_cross', stroke: 'dotted' };	2✔
561	case '<.->':
NEW 562	return { type: 'double_arrow_point', stroke: 'dotted' };	×
563	case '<-.->':
564	return { type: 'double_arrow_point', stroke: 'dotted' };	2✔
565	case 'o-.-o':
566	return { type: 'double_arrow_circle', stroke: 'dotted' };	2✔
567	case '--o':
568	return { type: 'arrow_circle', stroke: 'normal' };	6✔
569	case '---':
570	return { type: 'arrow_open', stroke: 'normal' };	18✔
571	case '-.-x':
NEW 572	return { type: 'arrow_cross', stroke: 'dotted' };	×
573	case '-.->':
574	return { type: 'arrow', stroke: 'dotted' };	2✔
575	case '-.-o':
NEW 576	return { type: 'arrow_circle', stroke: 'dotted' };	×
577	case '-.-':
NEW 578	return { type: 'arrow_open', stroke: 'dotted' };	×
579	case '.-x':
580	return { type: 'arrow_cross', stroke: 'dotted' };	2✔
581	case '.->':
582	return { type: 'arrow', stroke: 'dotted' };	4✔
583	case '.-o':
584	return { type: 'arrow_circle', stroke: 'dotted' };	2✔
585	case '.-':
NEW 586	return { type: 'arrow_open', stroke: 'dotted' };	×
587	case '==x':
588	return { type: 'arrow_cross', stroke: 'thick' };	2✔
589	case '==>':
590	return { type: 'arrow', stroke: 'thick' };	6✔
591	case '==o':
592	return { type: 'arrow_circle', stroke: 'thick' };	2✔
593	case '===':
NEW 594	return { type: 'arrow_open', stroke: 'thick' };	×
595	}
596	};
597
598	const destructLink = (_str, _startStr) => {	28✔
599	const info = destructEndLink(_str);	400✔
600	let startInfo;
601	if (_startStr) {	400✔
602	startInfo = destructStartLink(_startStr);	52✔
603	console.log(startInfo, info);	52✔
604	if (startInfo.stroke !== info.stroke) {	52!
NEW 605	return { type: 'INVALID', stroke: 'INVALID' };	×
606	}
607
608	if (startInfo.type === 'arrow_open') {	52✔
609	// -- xyz --> - take arrow type form ending
610	startInfo.type = info.type;	34✔
611	} else {
612	// x-- xyz --> - not supported
613	if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };	18!
614
615	startInfo.type = 'double_' + startInfo.type;	18✔
616	}
617
618	if (startInfo.type === 'double_arrow') {	52✔
619	startInfo.type = 'double_arrow_point';	6✔
620	}
621
622	return startInfo;	52✔
623	}
624
625	return info;	348✔
626	};
627
628	export default {
629	addVertex,
630	addLink,
631	updateLinkInterpolate,
632	updateLink,
633	addClass,
634	setDirection,
635	setClass,
636	getTooltip,
637	setClickEvent,
638	setLink,
639	bindFunctions,
640	getDirection,
641	getVertices,
642	getEdges,
643	getClasses,
644	clear,
645	defaultStyle,
646	addSubGraph,
647	getDepthFirstPos,
648	indexNodes,
649	getSubGraphs,
650	destructLink,
651	lex: {
652	firstGraph
653	}
654	};

mermaid-js / mermaid / 29cbff2226daaa903646b95ef8a9a07ba50c70b5-PR-1148

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous