8c1284c5232e65def715d50fe05cf8f224476891-PR-1178

Build # 8c1284c5232e65def715d50fe05cf8f224476891-PR-1178

Build Type

github

Committed by GitHub

Commit Message

Merge 60fea6745 into 37ae86344

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

Run Details

1469 of 2888 branches covered (50.87%)

Branch coverage included in aggregate %.

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

52 existing lines in 1 file now uncovered.

3220 of 5949 relevant lines covered (54.13%)

437.52 hits per line

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

4.42

/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 cssStyle = '';
    let methodEnd = txt.indexOf(')') + 1;
    let methodName = txt.substring(0, methodEnd);

    let classifier = txt.substring(methodEnd, methodEnd + 1);

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

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

    let returnTypeStart = txt.indexOf('[') + 1;
    let returnTypeEnd = txt.indexOf(']');

    if (returnTypeStart > 1 && returnTypeEnd > returnTypeStart) {
      let returnType = txt.substring(returnTypeStart, returnTypeEnd);

      method.displayText = methodName + ' : ' + returnType;
    }

    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 cssStyle = '';	×
NEW 318	let methodEnd = txt.indexOf(')') + 1;	×
NEW 319	let methodName = txt.substring(0, methodEnd);	×
320
NEW 321	let classifier = txt.substring(methodEnd, methodEnd + 1);	×
322
NEW 323	switch (classifier) {	×
324	case '*':
NEW 325	cssStyle = 'font-style:italic;';	×
NEW 326	break;	×
327	case '$':
NEW 328	cssStyle = 'text-decoration:underline;';	×
NEW 329	break;	×
330	}
331
NEW 332	let method = {	×
333	methodname: methodName,
334	displayText: methodName,
335	cssStyle: cssStyle
336	};
337
NEW 338	let returnTypeStart = txt.indexOf('[') + 1;	×
NEW 339	let returnTypeEnd = txt.indexOf(']');	×
340
NEW 341	if (returnTypeStart > 1 && returnTypeEnd > returnTypeStart) {	×
NEW 342	let returnType = txt.substring(returnTypeStart, returnTypeEnd);	×
343
NEW 344	method.displayText = methodName + ' : ' + returnType;	×
345	}
346
NEW 347	return method;	×
348	};
349
350	const id = MERMAID_DOM_ID_PREFIX + classDef.id;	×
351	const classInfo = {	×
352	id: id,
353	label: classDef.id,
354	width: 0,
355	height: 0
356	};
357
358	// add class group
359	const g = elem	×
360	.append('g')
361	.attr('id', id)
362	.attr('class', cssClassStr);
363
364	// add title
365	let title;
UNCOV 366	if (classDef.link) {	×
UNCOV 367	title = g	×
368	.append('svg:a')
369	.attr('xlink:href', classDef.link)
370	.attr('target', '_blank')
371	.append('text')
372	.attr('y', conf.textHeight + conf.padding)
373	.attr('x', 0);
374	} else {
UNCOV 375	title = g	×
376	.append('text')
377	.attr('y', conf.textHeight + conf.padding)
378	.attr('x', 0);
379	}
380
381	// add annotations
UNCOV 382	let isFirst = true;	×
UNCOV 383	classDef.annotations.forEach(function(member) {	×
UNCOV 384	const titleText2 = title.append('tspan').text('«' + member + '»');	×
385	if (!isFirst) titleText2.attr('dy', conf.textHeight);	×
UNCOV 386	isFirst = false;	×
387	});
388
UNCOV 389	let classTitleString = classDef.id;	×
390
UNCOV 391	if (classDef.type !== undefined && classDef.type !== '') {	×
392	classTitleString += '<' + classDef.type + '>';	×
393	}
394
395	const classTitle = title	×
396	.append('tspan')
397	.text(classTitleString)
398	.attr('class', 'title');
399
400	// If class has annotations the title needs to have an offset of the text height
401	if (!isFirst) classTitle.attr('dy', conf.textHeight);	×
402
UNCOV 403	const titleHeight = title.node().getBBox().height;	×
404
405	const membersLine = g	×
406	.append('line') // text label for the x axis
407	.attr('x1', 0)
408	.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
409	.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);
410
411	const members = g	×
412	.append('text') // text label for the x axis
413	.attr('x', conf.padding)
414	.attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
415	.attr('fill', 'white')
416	.attr('class', 'classText');
417
UNCOV 418	isFirst = true;	×
UNCOV 419	classDef.members.forEach(function(member) {	×
UNCOV 420	addTspan(members, member, isFirst);	×
421	isFirst = false;	×
422	});
423
UNCOV 424	const membersBox = members.node().getBBox();	×
425
UNCOV 426	const methodsLine = g	×
427	.append('line') // text label for the x axis
428	.attr('x1', 0)
429	.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
430	.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);
431
UNCOV 432	const methods = g	×
433	.append('text') // text label for the x axis
434	.attr('x', conf.padding)
435	.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
436	.attr('fill', 'white')
437	.attr('class', 'classText');
438
UNCOV 439	isFirst = true;	×
440
UNCOV 441	classDef.methods.forEach(function(method) {	×
442	addTspan(methods, method, isFirst);	×
UNCOV 443	isFirst = false;	×
444	});
445
UNCOV 446	const classBox = g.node().getBBox();	×
UNCOV 447	const rect = g	×
448	.insert('rect', ':first-child')
449	.attr('x', 0)
450	.attr('y', 0)
451	.attr('width', classBox.width + 2 * conf.padding)
452	.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
453
UNCOV 454	const rectWidth = rect.node().getBBox().width;	×
455
456	// Center title
457	// We subtract the width of each text element from the class box width and divide it by 2
UNCOV 458	title.node().childNodes.forEach(function(x) {	×
UNCOV 459	x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);	×
460	});
461
UNCOV 462	if (classDef.tooltip) {	×
UNCOV 463	title.insert('title').text(classDef.tooltip);	×
464	}
465
UNCOV 466	membersLine.attr('x2', rectWidth);	×
UNCOV 467	methodsLine.attr('x2', rectWidth);	×
468
469	classInfo.width = rectWidth;	×
UNCOV 470	classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;	×
471
472	idCache[id] = classInfo;	×
473	return classInfo;	×
474	};
475
476	export const setConf = function(cnf) {	4✔
477	const keys = Object.keys(cnf);	×
478
479	keys.forEach(function(key) {	×
480	conf[key] = cnf[key];	×
481	});
482	};
483
484	/**
485	* Draws a flowchart in the tag with id: id based on the graph definition in text.
486	* @param text
487	* @param id
488	*/
489	export const draw = function(text, id) {	4✔
490	idCache = {};	×
UNCOV 491	parser.yy.clear();	×
UNCOV 492	parser.parse(text);	×
493
UNCOV 494	logger.info('Rendering diagram ' + text);	×
495
496	/// / Fetch the default direction, use TD if none was found
UNCOV 497	const diagram = d3.select(`[id='${id}']`);	×
UNCOV 498	insertMarkers(diagram);	×
499
500	// Layout graph, Create a new directed graph
501	const g = new graphlib.Graph({	×
502	multigraph: true
503	});
504
505	// Set an object for the graph label
UNCOV 506	g.setGraph({	×
507	isMultiGraph: true
508	});
509
510	// Default to assigning a new object as a label for each new edge.
511	g.setDefaultEdgeLabel(function() {	×
UNCOV 512	return {};	×
513	});
514
UNCOV 515	const classes = classDb.getClasses();	×
516	const keys = Object.keys(classes);	×
UNCOV 517	for (let i = 0; i < keys.length; i++) {	×
UNCOV 518	const classDef = classes[keys[i]];	×
UNCOV 519	const node = drawClass(diagram, classDef);	×
520
521	// Add nodes to the graph. The first argument is the node id. The second is
522	// metadata about the node. In this case we're going to add labels to each of
523	// our nodes.
UNCOV 524	g.setNode(node.id, node);	×
525
526	logger.info('Org height: ' + node.height);	×
527	}
528
529	const relations = classDb.getRelations();	×
UNCOV 530	relations.forEach(function(relation) {	×
UNCOV 531	logger.info(	×
532	'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
533	);
534	g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {	×
535	relation: relation
536	});
537	});
UNCOV 538	dagre.layout(g);	×
539	g.nodes().forEach(function(v) {	×
540	if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {	×
541	logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));	×
UNCOV 542	d3.select('#' + v).attr(	×
543	'transform',
544	'translate(' +
545	(g.node(v).x - g.node(v).width / 2) +
546	',' +
547	(g.node(v).y - g.node(v).height / 2) +
548	' )'
549	);
550	}
551	});
552	g.edges().forEach(function(e) {	×
UNCOV 553	if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {	×
UNCOV 554	logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));	×
UNCOV 555	drawEdge(diagram, g.edge(e), g.edge(e).relation);	×
556	}
557	});
558
UNCOV 559	diagram.attr('height', '100%');	×
UNCOV 560	diagram.attr('width', `${g.graph().width * 1.5 + 20}`);	×
UNCOV 561	diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));	×
562	};
563
564	export default {
565	setConf,
566	draw
567	};

mermaid-js / mermaid / 8c1284c5232e65def715d50fe05cf8f224476891-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