mermaid-js / mermaid / #74

pending completion

Build # #74

Build Type

push

github-actions

Committed by

web-flow

Commit Message

<a href="https://github.com/mermaid-js/mermaid/commit/<a class=hub.com/mermaid-js/mermaid/commit/19eb37cdfe4daedc1c5561167d6182d018e8daab">19eb37cdf<a href="https://github.com/mermaid-js/mermaid/commit/19eb37cdfe4daedc1c5561167d6182d018e8daab">">Merge </a><a class="double-link" href="https://github.com/mermaid-js/mermaid/commit/<a class="double-link" href="https://github.com/mermaid-js/mermaid/commit/86e63b16144f8aaa951c4787d0053aa45954e3a3">86e63b161</a>">86e63b161</a><a href="https://github.com/mermaid-js/mermaid/commit/19eb37cdfe4daedc1c5561167d6182d018e8daab"> into d01f49427">d01f49427</a>

Run Details

1396 of 2746 branches covered (50.84%)

Branch coverage included in aggregate %.

3072 of 5757 relevant lines covered (53.36%)

196.97 hits per line

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

5.79

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

let idCache = {};

let classCnt = 0;
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.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);

  const addTspan = function(textEl, txt, isFirst) {
    const tSpan = textEl
      .append('tspan')
      .attr('x', conf.padding)
      .text(txt);
    if (!isFirst) {
      tSpan.attr('dy', conf.textHeight);
    }
  };

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

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

  // add title
  const 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;
  });

  // add class title
  const classTitle = title
    .append('tspan')
    .text(classDef.id)
    .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);
  });

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

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

  idCache[id] = classInfo;
  classCnt++;
  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;	2✔
10
11	let idCache = {};	2✔
12
13	let classCnt = 0;	2✔
14	const conf = {	2✔
15	dividerMargin: 10,
16	padding: 5,
17	textHeight: 10
18	};
19
20	// Todo optimize
21	const getGraphId = function(label) {	2✔
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) {	2✔
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;	2✔
139	const drawEdge = function(elem, path, relation) {	2✔
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.type1 !== 'none') {	×
187	svgPath.attr(	×
188	'marker-start',
189	'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'
190	);
191	}
192	if (relation.relation.type2 !== 'none') {	×
193	svgPath.attr(	×
194	'marker-end',
195	'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'
196	);
197	}
198
199	let x, y;
200	const l = path.points.length;	×
201	// Calculate Label position
202	let labalPosition = utils.calcLabelPosition(path.points);	×
203	x = labalPosition.x;	×
204	y = labalPosition.y;	×
205
206	let p1_card_x, p1_card_y;
207	// p1_card_padd_x = conf.padding * 2,
208	// p1_card_padd_y = conf.padding;
209	let p2_card_x, p2_card_y;
210	// p2_card_padd_x = conf.padding * 2,
211	// p2_card_padd_y = -conf.padding / 2;
212	if (l % 2 !== 0 && l > 1) {	×
213	let cardinality_1_point = utils.calcCardinalityPosition(	×
214	relation.relation.type1 !== 'none',
215	path.points,
216	path.points[0]
217	);
218	let cardinality_2_point = utils.calcCardinalityPosition(	×
219	relation.relation.type2 !== 'none',
220	path.points,
221	path.points[l - 1]
222	);
223
224	logger.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point));	×
225	logger.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point));	×
226
227	p1_card_x = cardinality_1_point.x;	×
228	p1_card_y = cardinality_1_point.y;	×
229	p2_card_x = cardinality_2_point.x;	×
230	p2_card_y = cardinality_2_point.y;	×
231	}
232
233	if (typeof relation.title !== 'undefined') {	×
234	const g = elem.append('g').attr('class', 'classLabel');	×
235	const label = g	×
236	.append('text')
237	.attr('class', 'label')
238	.attr('x', x)
239	.attr('y', y)
240	.attr('fill', 'red')
241	.attr('text-anchor', 'middle')
242	.text(relation.title);
243
244	window.label = label;	×
245	const bounds = label.node().getBBox();	×
246
247	g.insert('rect', ':first-child')	×
248	.attr('class', 'box')
249	.attr('x', bounds.x - conf.padding / 2)
250	.attr('y', bounds.y - conf.padding / 2)
251	.attr('width', bounds.width + conf.padding)
252	.attr('height', bounds.height + conf.padding);
253	}
254
255	logger.info('Rendering relation ' + JSON.stringify(relation));	×
256	if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {	×
257	const g = elem.append('g').attr('class', 'cardinality');	×
258	g.append('text')	×
259	.attr('class', 'type1')
260	.attr('x', p1_card_x)
261	.attr('y', p1_card_y)
262	.attr('fill', 'black')
263	.attr('font-size', '6')
264	.text(relation.relationTitle1);
265	}
266	if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {	×
267	const g = elem.append('g').attr('class', 'cardinality');	×
268	g.append('text')	×
269	.attr('class', 'type2')
270	.attr('x', p2_card_x)
271	.attr('y', p2_card_y)
272	.attr('fill', 'black')
273	.attr('font-size', '6')
274	.text(relation.relationTitle2);
275	}
276
277	edgeCount++;	×
278	};
279
280	const drawClass = function(elem, classDef) {	2✔
281	logger.info('Rendering class ' + classDef);	×
282
283	const addTspan = function(textEl, txt, isFirst) {	×
284	const tSpan = textEl	×
285	.append('tspan')
286	.attr('x', conf.padding)
287	.text(txt);
288	if (!isFirst) {	×
289	tSpan.attr('dy', conf.textHeight);	×
290	}
291	};
292
293	const id = 'classId' + classCnt;	×
294	const classInfo = {	×
295	id: id,
296	label: classDef.id,
297	width: 0,
298	height: 0
299	};
300
301	// add class group
302	const g = elem	×
303	.append('g')
304	.attr('id', id)
305	.attr('class', 'classGroup');
306
307	// add title
308	const title = g	×
309	.append('text')
310	.attr('y', conf.textHeight + conf.padding)
311	.attr('x', 0);
312
313	// add annotations
314	let isFirst = true;	×
315	classDef.annotations.forEach(function(member) {	×
316	const titleText2 = title.append('tspan').text('«' + member + '»');	×
317	if (!isFirst) titleText2.attr('dy', conf.textHeight);	×
318	isFirst = false;	×
319	});
320
321	// add class title
322	const classTitle = title	×
323	.append('tspan')
324	.text(classDef.id)
325	.attr('class', 'title');
326
327	// If class has annotations the title needs to have an offset of the text height
328	if (!isFirst) classTitle.attr('dy', conf.textHeight);	×
329
330	const titleHeight = title.node().getBBox().height;	×
331
332	const membersLine = g	×
333	.append('line') // text label for the x axis
334	.attr('x1', 0)
335	.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
336	.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);
337
338	const members = g	×
339	.append('text') // text label for the x axis
340	.attr('x', conf.padding)
341	.attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
342	.attr('fill', 'white')
343	.attr('class', 'classText');
344
345	isFirst = true;	×
346	classDef.members.forEach(function(member) {	×
347	addTspan(members, member, isFirst);	×
348	isFirst = false;	×
349	});
350
351	const membersBox = members.node().getBBox();	×
352
353	const methodsLine = g	×
354	.append('line') // text label for the x axis
355	.attr('x1', 0)
356	.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
357	.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);
358
359	const methods = g	×
360	.append('text') // text label for the x axis
361	.attr('x', conf.padding)
362	.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
363	.attr('fill', 'white')
364	.attr('class', 'classText');
365
366	isFirst = true;	×
367
368	classDef.methods.forEach(function(method) {	×
369	addTspan(methods, method, isFirst);	×
370	isFirst = false;	×
371	});
372
373	const classBox = g.node().getBBox();	×
374	const rect = g	×
375	.insert('rect', ':first-child')
376	.attr('x', 0)
377	.attr('y', 0)
378	.attr('width', classBox.width + 2 * conf.padding)
379	.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
380
381	const rectWidth = rect.node().getBBox().width;	×
382
383	// Center title
384	// We subtract the width of each text element from the class box width and divide it by 2
385	title.node().childNodes.forEach(function(x) {	×
386	x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);	×
387	});
388
389	membersLine.attr('x2', rectWidth);	×
390	methodsLine.attr('x2', rectWidth);	×
391
392	classInfo.width = rectWidth;	×
393	classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;	×
394
395	idCache[id] = classInfo;	×
396	classCnt++;	×
397	return classInfo;	×
398	};
399
400	export const setConf = function(cnf) {	2✔
401	const keys = Object.keys(cnf);	×
402
403	keys.forEach(function(key) {	×
404	conf[key] = cnf[key];	×
405	});
406	};
407	/**
408	* Draws a flowchart in the tag with id: id based on the graph definition in text.
409	* @param text
410	* @param id
411	*/
412	export const draw = function(text, id) {	2✔
413	idCache = {};	×
414	parser.yy.clear();	×
415	parser.parse(text);	×
416
417	logger.info('Rendering diagram ' + text);	×
418
419	/// / Fetch the default direction, use TD if none was found
420	const diagram = d3.select(`[id='${id}']`);	×
421	insertMarkers(diagram);	×
422
423	// Layout graph, Create a new directed graph
424	const g = new graphlib.Graph({	×
425	multigraph: true
426	});
427
428	// Set an object for the graph label
429	g.setGraph({	×
430	isMultiGraph: true
431	});
432
433	// Default to assigning a new object as a label for each new edge.
434	g.setDefaultEdgeLabel(function() {	×
435	return {};	×
436	});
437
438	const classes = classDb.getClasses();	×
439	const keys = Object.keys(classes);	×
440	for (let i = 0; i < keys.length; i++) {	×
441	const classDef = classes[keys[i]];	×
442	const node = drawClass(diagram, classDef);	×
443	// Add nodes to the graph. The first argument is the node id. The second is
444	// metadata about the node. In this case we're going to add labels to each of
445	// our nodes.
446	g.setNode(node.id, node);	×
447	logger.info('Org height: ' + node.height);	×
448	}
449
450	const relations = classDb.getRelations();	×
451	relations.forEach(function(relation) {	×
452	logger.info(	×
453	'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
454	);
455	g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {	×
456	relation: relation
457	});
458	});
459	dagre.layout(g);	×
460	g.nodes().forEach(function(v) {	×
461	if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {	×
462	logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));	×
463	d3.select('#' + v).attr(	×
464	'transform',
465	'translate(' +
466	(g.node(v).x - g.node(v).width / 2) +
467	',' +
468	(g.node(v).y - g.node(v).height / 2) +
469	' )'
470	);
471	}
472	});
473	g.edges().forEach(function(e) {	×
474	if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {	×
475	logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));	×
476	drawEdge(diagram, g.edge(e), g.edge(e).relation);	×
477	}
478	});
479
480	diagram.attr('height', '100%');	×
481	diagram.attr('width', `${g.graph().width * 1.5 + 20}`);	×
482	diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));	×
483	};
484
485	export default {
486	setConf,
487	draw
488	};

mermaid-js / mermaid / #74

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