dd21a4ea58fab410b6152af86fd7dc2e338efd37-PR-1178

Build # dd21a4ea58fab410b6152af86fd7dc2e338efd37-PR-1178

Build Type

github

Committed by GitHub

Commit Message

Merge 7e92f3ec5 into 37ae86344

Pull Request Pull Request #1178: 1119 specify method return type in class diagram

Run Details

1469 of 2898 branches covered (50.69%)

Branch coverage included in aggregate %.

0 of 27 new or added lines in 1 file covered. (0.0%)

53 existing lines in 1 file now uncovered.

3220 of 5954 relevant lines covered (54.08%)

219.6 hits per line

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

4.17

/src/diagrams/class/classRenderer.js

import * as d3 from 'd3';
import dagre from 'dagre';
import graphlib from 'graphlib';
import { logger } from '../../logger';
import classDb from './classDb';
import utils from '../../utils';
import { parser } from './parser/classDiagram';

parser.yy = classDb;

const MERMAID_DOM_ID_PREFIX = 'classid-';
let idCache = {};

const conf = {
  dividerMargin: 10,
  padding: 5,
  textHeight: 10
};

// Todo optimize
const getGraphId = function(label) {
  const keys = Object.keys(idCache);

  for (let i = 0; i < keys.length; i++) {
    if (idCache[keys[i]].label === label) {
      return keys[i];
    }
  }

  return undefined;
};

/**
 * Setup arrow head and define the marker. The result is appended to the svg.
 */
const insertMarkers = function(elem) {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'extensionStart')
    .attr('class', 'extension')
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
    .attr('markerHeight', 240)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 1,7 L18,13 V 1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'extensionEnd')
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 28)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'compositionStart')
    .attr('class', 'extension')
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
    .attr('markerHeight', 240)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'compositionEnd')
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 28)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'aggregationStart')
    .attr('class', 'extension')
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
    .attr('markerHeight', 240)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'aggregationEnd')
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 28)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'dependencyStart')
    .attr('class', 'extension')
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
    .attr('markerHeight', 240)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');

  elem
    .append('defs')
    .append('marker')
    .attr('id', 'dependencyEnd')
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 28)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};

let edgeCount = 0;
const drawEdge = function(elem, path, relation) {
  const getRelationType = function(type) {
    switch (type) {
      case classDb.relationType.AGGREGATION:
        return 'aggregation';
      case classDb.relationType.EXTENSION:
        return 'extension';
      case classDb.relationType.COMPOSITION:
        return 'composition';
      case classDb.relationType.DEPENDENCY:
        return 'dependency';
    }
  };

  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 = d3
    .line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(d3.curveBasis);

  const svgPath = elem
    .append('path')
    .attr('d', lineFunction(lineData))
    .attr('id', 'edge' + edgeCount)
    .attr('class', 'relation');
  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, '\\)');
  }

  if (relation.relation.lineType == 1) {
    svgPath.attr('class', 'relation dashed-line');
  }
  if (relation.relation.type1 !== 'none') {
    svgPath.attr(
      'marker-start',
      'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'
    );
  }
  if (relation.relation.type2 !== 'none') {
    svgPath.attr(
      'marker-end',
      'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'
    );
  }

  let x, y;
  const l = path.points.length;
  // Calculate Label position
  let labalPosition = utils.calcLabelPosition(path.points);
  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;
  if (l % 2 !== 0 && l > 1) {
    let cardinality_1_point = utils.calcCardinalityPosition(
      relation.relation.type1 !== 'none',
      path.points,
      path.points[0]
    );
    let cardinality_2_point = utils.calcCardinalityPosition(
      relation.relation.type2 !== 'none',
      path.points,
      path.points[l - 1]
    );

    logger.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point));
    logger.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point));

    p1_card_x = cardinality_1_point.x;
    p1_card_y = cardinality_1_point.y;
    p2_card_x = cardinality_2_point.x;
    p2_card_y = cardinality_2_point.y;
  }

  if (typeof relation.title !== 'undefined') {
    const g = elem.append('g').attr('class', 'classLabel');
    const label = g
      .append('text')
      .attr('class', 'label')
      .attr('x', x)
      .attr('y', y)
      .attr('fill', 'red')
      .attr('text-anchor', 'middle')
      .text(relation.title);

    window.label = label;
    const bounds = label.node().getBBox();

    g.insert('rect', ':first-child')
      .attr('class', 'box')
      .attr('x', bounds.x - conf.padding / 2)
      .attr('y', bounds.y - conf.padding / 2)
      .attr('width', bounds.width + conf.padding)
      .attr('height', bounds.height + conf.padding);
  }

  logger.info('Rendering relation ' + JSON.stringify(relation));
  if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {
    const g = elem.append('g').attr('class', 'cardinality');
    g.append('text')
      .attr('class', 'type1')
      .attr('x', p1_card_x)
      .attr('y', p1_card_y)
      .attr('fill', 'black')
      .attr('font-size', '6')
      .text(relation.relationTitle1);
  }
  if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {
    const g = elem.append('g').attr('class', 'cardinality');
    g.append('text')
      .attr('class', 'type2')
      .attr('x', p2_card_x)
      .attr('y', p2_card_y)
      .attr('fill', 'black')
      .attr('font-size', '6')
      .text(relation.relationTitle2);
  }

  edgeCount++;
};

const drawClass = function(elem, classDef) {
  logger.info('Rendering class ' + classDef);

  let cssClassStr = 'classGroup ';
  if (classDef.cssClasses.length > 0) {
    cssClassStr = cssClassStr + classDef.cssClasses.join(' ');
  }

  const addTspan = function(textEl, txt, isFirst) {
    let isMethod = txt.indexOf(')') > 1;
    let displayText = txt;
    let cssStyle = '';

    if (isMethod) {
      let method = buildDisplayTextForMethod(txt);
      displayText = method.displayText;
      cssStyle = method.cssStyle;
    }

    const tSpan = textEl
      .append('tspan')
      .attr('x', conf.padding)
      .text(displayText);

    if (cssStyle !== '') {
      tSpan.attr('style', cssStyle);
    }

    if (!isFirst) {
      tSpan.attr('dy', conf.textHeight);
    }
  };

  const buildDisplayTextForMethod = function(txt) {
    let regEx = /(\+|-|~|#)?(\w+)\((\w+\[?\]?)?\s?(\w+)?\)([*|$])?\s?(\w+\[?\]?)?/;
    let cssStyle = '';
    let displayText = txt;
    let methodName = txt;
    let classifier = '';

    let parsedText = txt.match(regEx);

    if (parsedText) {
      let visibility = parsedText[1] ? parsedText[1] : '';
      methodName = parsedText[2] ? parsedText[2] : '';
      let parameterType = parsedText[3] ? parsedText[3] : '';
      let parameterName = parsedText[4] ? parsedText[4] : '';
      classifier = parsedText[5] ? parsedText[5] : '';
      let returnType = parsedText[6] ? ' : ' + parsedText[6] : '';
      displayText =
        visibility + methodName + '(' + parameterType + ' ' + parameterName + ')' + returnType;
    }

    switch (classifier) {
      case '*':
        cssStyle = 'font-style:italic;';
        break;
      case '$':
        cssStyle = 'text-decoration:underline;';
        break;
    }

    let method = {
      methodname: methodName,
      displayText: displayText,
      cssStyle: cssStyle
    };

    return method;
  };

  const id = MERMAID_DOM_ID_PREFIX + classDef.id;
  const classInfo = {
    id: id,
    label: classDef.id,
    width: 0,
    height: 0
  };

  // add class group
  const g = elem
    .append('g')
    .attr('id', id)
    .attr('class', cssClassStr);

  // add title
  let title;
  if (classDef.link) {
    title = g
      .append('svg:a')
      .attr('xlink:href', classDef.link)
      .attr('target', '_blank')
      .append('text')
      .attr('y', conf.textHeight + conf.padding)
      .attr('x', 0);
  } else {
    title = g
      .append('text')
      .attr('y', conf.textHeight + conf.padding)
      .attr('x', 0);
  }

  // add annotations
  let isFirst = true;
  classDef.annotations.forEach(function(member) {
    const titleText2 = title.append('tspan').text('«' + member + '»');
    if (!isFirst) titleText2.attr('dy', conf.textHeight);
    isFirst = false;
  });

  let classTitleString = classDef.id;

  if (classDef.type !== undefined && classDef.type !== '') {
    classTitleString += '<' + classDef.type + '>';
  }

  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);

  const titleHeight = title.node().getBBox().height;

  const membersLine = g
    .append('line') // text label for the x axis
    .attr('x1', 0)
    .attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
    .attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);

  const members = g
    .append('text') // text label for the x axis
    .attr('x', conf.padding)
    .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
    .attr('fill', 'white')
    .attr('class', 'classText');

  isFirst = true;
  classDef.members.forEach(function(member) {
    addTspan(members, member, isFirst);
    isFirst = false;
  });

  const membersBox = members.node().getBBox();

  const methodsLine = g
    .append('line') // text label for the x axis
    .attr('x1', 0)
    .attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
    .attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);

  const methods = g
    .append('text') // text label for the x axis
    .attr('x', conf.padding)
    .attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
    .attr('fill', 'white')
    .attr('class', 'classText');

  isFirst = true;

  classDef.methods.forEach(function(method) {
    addTspan(methods, method, isFirst);
    isFirst = false;
  });

  const classBox = g.node().getBBox();
  const rect = g
    .insert('rect', ':first-child')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', classBox.width + 2 * conf.padding)
    .attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);

  const rectWidth = rect.node().getBBox().width;

  // 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) {
    x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
  });

  if (classDef.tooltip) {
    title.insert('title').text(classDef.tooltip);
  }

  membersLine.attr('x2', rectWidth);
  methodsLine.attr('x2', rectWidth);

  classInfo.width = rectWidth;
  classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;

  idCache[id] = classInfo;
  return classInfo;
};

export const setConf = function(cnf) {
  const keys = Object.keys(cnf);

  keys.forEach(function(key) {
    conf[key] = cnf[key];
  });
};

/**
 * Draws a flowchart in the tag with id: id based on the graph definition in text.
 * @param text
 * @param id
 */
export const draw = function(text, id) {
  idCache = {};
  parser.yy.clear();
  parser.parse(text);

  logger.info('Rendering diagram ' + text);

  /// / Fetch the default direction, use TD if none was found
  const diagram = d3.select(`[id='${id}']`);
  insertMarkers(diagram);

  // Layout graph, Create a new directed graph
  const g = new graphlib.Graph({
    multigraph: true
  });

  // Set an object for the graph label
  g.setGraph({
    isMultiGraph: true
  });

  // Default to assigning a new object as a label for each new edge.
  g.setDefaultEdgeLabel(function() {
    return {};
  });

  const classes = classDb.getClasses();
  const keys = Object.keys(classes);
  for (let i = 0; i < keys.length; i++) {
    const classDef = classes[keys[i]];
    const node = drawClass(diagram, classDef);

    // Add nodes to the graph. The first argument is the node id. The second is
    // metadata about the node. In this case we're going to add labels to each of
    // our nodes.
    g.setNode(node.id, node);

    logger.info('Org height: ' + node.height);
  }

  const relations = classDb.getRelations();
  relations.forEach(function(relation) {
    logger.info(
      'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
    );
    g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {
      relation: relation
    });
  });
  dagre.layout(g);
  g.nodes().forEach(function(v) {
    if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
      logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
      d3.select('#' + v).attr(
        'transform',
        'translate(' +
          (g.node(v).x - g.node(v).width / 2) +
          ',' +
          (g.node(v).y - g.node(v).height / 2) +
          ' )'
      );
    }
  });
  g.edges().forEach(function(e) {
    if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
      logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
      drawEdge(diagram, g.edge(e), g.edge(e).relation);
    }
  });

  diagram.attr('height', '100%');
  diagram.attr('width', `${g.graph().width * 1.5 + 20}`);
  diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
};

export default {
  setConf,
  draw
};

1	import * as d3 from 'd3';
2	import dagre from 'dagre';
3	import graphlib from 'graphlib';
4	import { logger } from '../../logger';
5	import classDb from './classDb';
6	import utils from '../../utils';
7	import { parser } from './parser/classDiagram';
8
9	parser.yy = classDb;	4✔
10
11	const MERMAID_DOM_ID_PREFIX = 'classid-';	4✔
12	let idCache = {};	4✔
13
14	const conf = {	4✔
15	dividerMargin: 10,
16	padding: 5,
17	textHeight: 10
18	};
19
20	// Todo optimize
21	const getGraphId = function(label) {	4✔
22	const keys = Object.keys(idCache);	×
23
24	for (let i = 0; i < keys.length; i++) {	×
25	if (idCache[keys[i]].label === label) {	×
26	return keys[i];	×
27	}
28	}
29
30	return undefined;	×
31	};
32
33	/**
34	* Setup arrow head and define the marker. The result is appended to the svg.
35	*/
36	const insertMarkers = function(elem) {	4✔
37	elem	×
38	.append('defs')
39	.append('marker')
40	.attr('id', 'extensionStart')
41	.attr('class', 'extension')
42	.attr('refX', 0)
43	.attr('refY', 7)
44	.attr('markerWidth', 190)
45	.attr('markerHeight', 240)
46	.attr('orient', 'auto')
47	.append('path')
48	.attr('d', 'M 1,7 L18,13 V 1 Z');
49
50	elem	×
51	.append('defs')
52	.append('marker')
53	.attr('id', 'extensionEnd')
54	.attr('refX', 19)
55	.attr('refY', 7)
56	.attr('markerWidth', 20)
57	.attr('markerHeight', 28)
58	.attr('orient', 'auto')
59	.append('path')
60	.attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead
61
62	elem	×
63	.append('defs')
64	.append('marker')
65	.attr('id', 'compositionStart')
66	.attr('class', 'extension')
67	.attr('refX', 0)
68	.attr('refY', 7)
69	.attr('markerWidth', 190)
70	.attr('markerHeight', 240)
71	.attr('orient', 'auto')
72	.append('path')
73	.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
74
75	elem	×
76	.append('defs')
77	.append('marker')
78	.attr('id', 'compositionEnd')
79	.attr('refX', 19)
80	.attr('refY', 7)
81	.attr('markerWidth', 20)
82	.attr('markerHeight', 28)
83	.attr('orient', 'auto')
84	.append('path')
85	.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
86
87	elem	×
88	.append('defs')
89	.append('marker')
90	.attr('id', 'aggregationStart')
91	.attr('class', 'extension')
92	.attr('refX', 0)
93	.attr('refY', 7)
94	.attr('markerWidth', 190)
95	.attr('markerHeight', 240)
96	.attr('orient', 'auto')
97	.append('path')
98	.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
99
100	elem	×
101	.append('defs')
102	.append('marker')
103	.attr('id', 'aggregationEnd')
104	.attr('refX', 19)
105	.attr('refY', 7)
106	.attr('markerWidth', 20)
107	.attr('markerHeight', 28)
108	.attr('orient', 'auto')
109	.append('path')
110	.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
111
112	elem	×
113	.append('defs')
114	.append('marker')
115	.attr('id', 'dependencyStart')
116	.attr('class', 'extension')
117	.attr('refX', 0)
118	.attr('refY', 7)
119	.attr('markerWidth', 190)
120	.attr('markerHeight', 240)
121	.attr('orient', 'auto')
122	.append('path')
123	.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
124
125	elem	×
126	.append('defs')
127	.append('marker')
128	.attr('id', 'dependencyEnd')
129	.attr('refX', 19)
130	.attr('refY', 7)
131	.attr('markerWidth', 20)
132	.attr('markerHeight', 28)
133	.attr('orient', 'auto')
134	.append('path')
135	.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
136	};
137
138	let edgeCount = 0;	4✔
139	const drawEdge = function(elem, path, relation) {	4✔
140	const getRelationType = function(type) {	×
141	switch (type) {	×
142	case classDb.relationType.AGGREGATION:
143	return 'aggregation';	×
144	case classDb.relationType.EXTENSION:
145	return 'extension';	×
146	case classDb.relationType.COMPOSITION:
147	return 'composition';	×
148	case classDb.relationType.DEPENDENCY:
149	return 'dependency';	×
150	}
151	};
152
153	path.points = path.points.filter(p => !Number.isNaN(p.y));	×
154
155	// The data for our line
156	const lineData = path.points;	×
157
158	// This is the accessor function we talked about above
159	const lineFunction = d3	×
160	.line()
161	.x(function(d) {
162	return d.x;	×
163	})
164	.y(function(d) {
165	return d.y;	×
166	})
167	.curve(d3.curveBasis);
168
169	const svgPath = elem	×
170	.append('path')
171	.attr('d', lineFunction(lineData))
172	.attr('id', 'edge' + edgeCount)
173	.attr('class', 'relation');
174	let url = '';	×
175	if (conf.arrowMarkerAbsolute) {	×
176	url =	×
177	window.location.protocol +
178	'//' +
179	window.location.host +
180	window.location.pathname +
181	window.location.search;
182	url = url.replace(/\(/g, '\\(');	×
183	url = url.replace(/\)/g, '\\)');	×
184	}
185
186	if (relation.relation.lineType == 1) {	×
187	svgPath.attr('class', 'relation dashed-line');	×
188	}
189	if (relation.relation.type1 !== 'none') {	×
190	svgPath.attr(	×
191	'marker-start',
192	'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'
193	);
194	}
195	if (relation.relation.type2 !== 'none') {	×
196	svgPath.attr(	×
197	'marker-end',
198	'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'
199	);
200	}
201
202	let x, y;
203	const l = path.points.length;	×
204	// Calculate Label position
205	let labalPosition = utils.calcLabelPosition(path.points);	×
206	x = labalPosition.x;	×
207	y = labalPosition.y;	×
208
209	let p1_card_x, p1_card_y;
210	// p1_card_padd_x = conf.padding * 2,
211	// p1_card_padd_y = conf.padding;
212	let p2_card_x, p2_card_y;
213	// p2_card_padd_x = conf.padding * 2,
214	// p2_card_padd_y = -conf.padding / 2;
215	if (l % 2 !== 0 && l > 1) {	×
216	let cardinality_1_point = utils.calcCardinalityPosition(	×
217	relation.relation.type1 !== 'none',
218	path.points,
219	path.points[0]
220	);
221	let cardinality_2_point = utils.calcCardinalityPosition(	×
222	relation.relation.type2 !== 'none',
223	path.points,
224	path.points[l - 1]
225	);
226
227	logger.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point));	×
228	logger.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point));	×
229
230	p1_card_x = cardinality_1_point.x;	×
231	p1_card_y = cardinality_1_point.y;	×
232	p2_card_x = cardinality_2_point.x;	×
233	p2_card_y = cardinality_2_point.y;	×
234	}
235
236	if (typeof relation.title !== 'undefined') {	×
237	const g = elem.append('g').attr('class', 'classLabel');	×
238	const label = g	×
239	.append('text')
240	.attr('class', 'label')
241	.attr('x', x)
242	.attr('y', y)
243	.attr('fill', 'red')
244	.attr('text-anchor', 'middle')
245	.text(relation.title);
246
247	window.label = label;	×
248	const bounds = label.node().getBBox();	×
249
250	g.insert('rect', ':first-child')	×
251	.attr('class', 'box')
252	.attr('x', bounds.x - conf.padding / 2)
253	.attr('y', bounds.y - conf.padding / 2)
254	.attr('width', bounds.width + conf.padding)
255	.attr('height', bounds.height + conf.padding);
256	}
257
258	logger.info('Rendering relation ' + JSON.stringify(relation));	×
259	if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {	×
260	const g = elem.append('g').attr('class', 'cardinality');	×
261	g.append('text')	×
262	.attr('class', 'type1')
263	.attr('x', p1_card_x)
264	.attr('y', p1_card_y)
265	.attr('fill', 'black')
266	.attr('font-size', '6')
267	.text(relation.relationTitle1);
268	}
269	if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {	×
270	const g = elem.append('g').attr('class', 'cardinality');	×
271	g.append('text')	×
272	.attr('class', 'type2')
273	.attr('x', p2_card_x)
274	.attr('y', p2_card_y)
275	.attr('fill', 'black')
276	.attr('font-size', '6')
277	.text(relation.relationTitle2);
278	}
279
280	edgeCount++;	×
281	};
282
283	const drawClass = function(elem, classDef) {	4✔
284	logger.info('Rendering class ' + classDef);	×
285
286	let cssClassStr = 'classGroup ';	×
287	if (classDef.cssClasses.length > 0) {	×
288	cssClassStr = cssClassStr + classDef.cssClasses.join(' ');	×
289	}
290
291	const addTspan = function(textEl, txt, isFirst) {	×
NEW 292	let isMethod = txt.indexOf(')') > 1;	×
293	let displayText = txt;	×
294	let cssStyle = '';	×
295
NEW 296	if (isMethod) {	×
NEW 297	let method = buildDisplayTextForMethod(txt);	×
NEW 298	displayText = method.displayText;	×
NEW UNCOV 299	cssStyle = method.cssStyle;	×
300	}
301
302	const tSpan = textEl	×
303	.append('tspan')
304	.attr('x', conf.padding)
305	.text(displayText);
306
307	if (cssStyle !== '') {	×
308	tSpan.attr('style', cssStyle);	×
309	}
310
311	if (!isFirst) {	×
312	tSpan.attr('dy', conf.textHeight);	×
313	}
314	};
315
NEW 316	const buildDisplayTextForMethod = function(txt) {	×
NEW 317	let regEx = /(\+\|-\|~\|#)?(\w+)\((\w+\[?\]?)?\s?(\w+)?\)([*\|$])?\s?(\w+\[?\]?)?/;	×
NEW 318	let cssStyle = '';	×
NEW 319	let displayText = txt;	×
NEW 320	let methodName = txt;	×
NEW 321	let classifier = '';	×
322
NEW 323	let parsedText = txt.match(regEx);	×
324
NEW 325	if (parsedText) {	×
NEW 326	let visibility = parsedText[1] ? parsedText[1] : '';	×
NEW 327	methodName = parsedText[2] ? parsedText[2] : '';	×
NEW 328	let parameterType = parsedText[3] ? parsedText[3] : '';	×
NEW 329	let parameterName = parsedText[4] ? parsedText[4] : '';	×
NEW 330	classifier = parsedText[5] ? parsedText[5] : '';	×
NEW 331	let returnType = parsedText[6] ? ' : ' + parsedText[6] : '';	×
NEW 332	displayText =	×
333	visibility + methodName + '(' + parameterType + ' ' + parameterName + ')' + returnType;
334	}
335
NEW 336	switch (classifier) {	×
337	case '*':
NEW 338	cssStyle = 'font-style:italic;';	×
NEW 339	break;	×
340	case '$':
NEW 341	cssStyle = 'text-decoration:underline;';	×
NEW 342	break;	×
343	}
344
NEW 345	let method = {	×
346	methodname: methodName,
347	displayText: displayText,
348	cssStyle: cssStyle
349	};
350
NEW 351	return method;	×
352	};
353
354	const id = MERMAID_DOM_ID_PREFIX + classDef.id;	×
355	const classInfo = {	×
356	id: id,
357	label: classDef.id,
358	width: 0,
359	height: 0
360	};
361
362	// add class group
UNCOV 363	const g = elem	×
364	.append('g')
365	.attr('id', id)
366	.attr('class', cssClassStr);
367
368	// add title
369	let title;
UNCOV 370	if (classDef.link) {	×
UNCOV 371	title = g	×
372	.append('svg:a')
373	.attr('xlink:href', classDef.link)
374	.attr('target', '_blank')
375	.append('text')
376	.attr('y', conf.textHeight + conf.padding)
377	.attr('x', 0);
378	} else {
UNCOV 379	title = g	×
380	.append('text')
381	.attr('y', conf.textHeight + conf.padding)
382	.attr('x', 0);
383	}
384
385	// add annotations
UNCOV 386	let isFirst = true;	×
UNCOV 387	classDef.annotations.forEach(function(member) {	×
UNCOV 388	const titleText2 = title.append('tspan').text('«' + member + '»');	×
UNCOV 389	if (!isFirst) titleText2.attr('dy', conf.textHeight);	×
UNCOV 390	isFirst = false;	×
391	});
392
393	let classTitleString = classDef.id;	×
394
395	if (classDef.type !== undefined && classDef.type !== '') {	×
396	classTitleString += '<' + classDef.type + '>';	×
397	}
398
399	const classTitle = title	×
400	.append('tspan')
401	.text(classTitleString)
402	.attr('class', 'title');
403
404	// If class has annotations the title needs to have an offset of the text height
405	if (!isFirst) classTitle.attr('dy', conf.textHeight);	×
406
UNCOV 407	const titleHeight = title.node().getBBox().height;	×
408
UNCOV 409	const membersLine = g	×
410	.append('line') // text label for the x axis
411	.attr('x1', 0)
412	.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
413	.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);
414
415	const members = g	×
416	.append('text') // text label for the x axis
417	.attr('x', conf.padding)
418	.attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
419	.attr('fill', 'white')
420	.attr('class', 'classText');
421
UNCOV 422	isFirst = true;	×
UNCOV 423	classDef.members.forEach(function(member) {	×
UNCOV 424	addTspan(members, member, isFirst);	×
UNCOV 425	isFirst = false;	×
426	});
427
428	const membersBox = members.node().getBBox();	×
429
430	const methodsLine = g	×
431	.append('line') // text label for the x axis
432	.attr('x1', 0)
433	.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
434	.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);
435
436	const methods = g	×
437	.append('text') // text label for the x axis
438	.attr('x', conf.padding)
439	.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
440	.attr('fill', 'white')
441	.attr('class', 'classText');
442
UNCOV 443	isFirst = true;	×
444
UNCOV 445	classDef.methods.forEach(function(method) {	×
UNCOV 446	addTspan(methods, method, isFirst);	×
UNCOV 447	isFirst = false;	×
448	});
449
UNCOV 450	const classBox = g.node().getBBox();	×
451	const rect = g	×
452	.insert('rect', ':first-child')
453	.attr('x', 0)
454	.attr('y', 0)
455	.attr('width', classBox.width + 2 * conf.padding)
456	.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
457
UNCOV 458	const rectWidth = rect.node().getBBox().width;	×
459
460	// Center title
461	// We subtract the width of each text element from the class box width and divide it by 2
UNCOV 462	title.node().childNodes.forEach(function(x) {	×
UNCOV 463	x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);	×
464	});
465
UNCOV 466	if (classDef.tooltip) {	×
UNCOV 467	title.insert('title').text(classDef.tooltip);	×
468	}
469
UNCOV 470	membersLine.attr('x2', rectWidth);	×
UNCOV 471	methodsLine.attr('x2', rectWidth);	×
472
473	classInfo.width = rectWidth;	×
UNCOV 474	classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;	×
475
476	idCache[id] = classInfo;	×
477	return classInfo;	×
478	};
479
480	export const setConf = function(cnf) {	4✔
UNCOV 481	const keys = Object.keys(cnf);	×
482
483	keys.forEach(function(key) {	×
UNCOV 484	conf[key] = cnf[key];	×
485	});
486	};
487
488	/**
489	* Draws a flowchart in the tag with id: id based on the graph definition in text.
490	* @param text
491	* @param id
492	*/
493	export const draw = function(text, id) {	4✔
UNCOV 494	idCache = {};	×
UNCOV 495	parser.yy.clear();	×
UNCOV 496	parser.parse(text);	×
497
UNCOV 498	logger.info('Rendering diagram ' + text);	×
499
500	/// / Fetch the default direction, use TD if none was found
501	const diagram = d3.select(`[id='${id}']`);	×
502	insertMarkers(diagram);	×
503
504	// Layout graph, Create a new directed graph
UNCOV 505	const g = new graphlib.Graph({	×
506	multigraph: true
507	});
508
509	// Set an object for the graph label
UNCOV 510	g.setGraph({	×
511	isMultiGraph: true
512	});
513
514	// Default to assigning a new object as a label for each new edge.
UNCOV 515	g.setDefaultEdgeLabel(function() {	×
516	return {};	×
517	});
518
UNCOV 519	const classes = classDb.getClasses();	×
UNCOV 520	const keys = Object.keys(classes);	×
521	for (let i = 0; i < keys.length; i++) {	×
522	const classDef = classes[keys[i]];	×
UNCOV 523	const node = drawClass(diagram, classDef);	×
524
525	// Add nodes to the graph. The first argument is the node id. The second is
526	// metadata about the node. In this case we're going to add labels to each of
527	// our nodes.
528	g.setNode(node.id, node);	×
529
UNCOV 530	logger.info('Org height: ' + node.height);	×
531	}
532
UNCOV 533	const relations = classDb.getRelations();	×
534	relations.forEach(function(relation) {	×
UNCOV 535	logger.info(	×
536	'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
537	);
UNCOV 538	g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {	×
539	relation: relation
540	});
541	});
UNCOV 542	dagre.layout(g);	×
UNCOV 543	g.nodes().forEach(function(v) {	×
544	if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {	×
UNCOV 545	logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));	×
UNCOV 546	d3.select('#' + v).attr(	×
547	'transform',
548	'translate(' +
549	(g.node(v).x - g.node(v).width / 2) +
550	',' +
551	(g.node(v).y - g.node(v).height / 2) +
552	' )'
553	);
554	}
555	});
UNCOV 556	g.edges().forEach(function(e) {	×
UNCOV 557	if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {	×
UNCOV 558	logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));	×
UNCOV 559	drawEdge(diagram, g.edge(e), g.edge(e).relation);	×
560	}
561	});
562
563	diagram.attr('height', '100%');	×
564	diagram.attr('width', `${g.graph().width * 1.5 + 20}`);	×
565	diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));	×
566	};
567
568	export default {
569	setConf,
570	draw
571	};

mermaid-js / mermaid / dd21a4ea58fab410b6152af86fd7dc2e338efd37-PR-1178

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