78c8fd374987f61771b589a436227e27fd3a2829-PR-1326

Build # 78c8fd374987f61771b589a436227e27fd3a2829-PR-1326

Build Type

github

Committed by GitHub

Commit Message

Merge a5af24871 into 8fede48e7

Pull Request Pull Request #1326: Feature/1295 generic rendering engine

Run Details

1666 of 3417 branches covered (48.76%)

Branch coverage included in aggregate %.

80 of 682 new or added lines in 23 files covered. (11.73%)

92 existing lines in 3 files now uncovered.

3667 of 7424 relevant lines covered (49.39%)

14936.7 hits per line

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

4.61

/src/diagrams/state/stateRenderer.js

import * as d3 from 'd3';
import dagre from 'dagre';
import graphlib from 'graphlib';
import { logger } from '../../logger';
import stateDb from './stateDb';
import common from '../common/common';
import { parser } from './parser/stateDiagram';
// import idCache from './id-cache';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';

parser.yy = stateDb;

// TODO Move conf object to main conf in mermaidAPI
let conf;

const transformationLog = {};

export const setConf = function() {};

// Todo optimize

/**
 * 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', 'dependencyEnd')
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 28)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
};

/**
 * 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) {
  conf = getConfig().state;
  parser.yy.clear();
  parser.parse(text);
  logger.debug('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 graph = new graphlib.Graph({
    multigraph: true,
    compound: true,
    // acyclicer: 'greedy',
    rankdir: 'RL'
    // ranksep: '20'
  });

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

  const rootDoc = stateDb.getRootDoc();
  renderDoc(rootDoc, diagram, undefined, false);

  const padding = conf.padding;
  const bounds = diagram.node().getBBox();

  const width = bounds.width + padding * 2;
  const height = bounds.height + padding * 2;

  // Zoom in a bit
  diagram.attr('width', width * 1.75);
  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
  diagram.attr(
    'viewBox',
    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
  );
};
const getLabelWidth = text => {
  return text ? text.length * conf.fontSizeFactor : 1;
};

const renderDoc = (doc, diagram, parentId, altBkg) => {
  // // Layout graph, Create a new directed graph
  const graph = new graphlib.Graph({
    compound: true,
    multigraph: true
  });

  let i;
  let edgeFreeDoc = true;
  for (i = 0; i < doc.length; i++) {
    if (doc[i].stmt === 'relation') {
      edgeFreeDoc = false;
      break;
    }
  }

  // Set an object for the graph label
  if (parentId)
    graph.setGraph({
      rankdir: 'LR',
      multigraph: true,
      compound: true,
      // acyclicer: 'greedy',
      ranker: 'tight-tree',
      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
      nodeSep: edgeFreeDoc ? 1 : 50,
      isMultiGraph: true
      // ranksep: 5,
      // nodesep: 1
    });
  else {
    graph.setGraph({
      rankdir: 'TB',
      multigraph: true,
      compound: true,
      // isCompound: true,
      // acyclicer: 'greedy',
      // ranker: 'longest-path'
      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
      nodeSep: edgeFreeDoc ? 1 : 50,
      ranker: 'tight-tree',
      // ranker: 'network-simplex'
      isMultiGraph: true
    });
  }

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

  stateDb.extract(doc);
  const states = stateDb.getStates();
  const relations = stateDb.getRelations();

  const keys = Object.keys(states);

  let first = true;

  for (let i = 0; i < keys.length; i++) {
    const stateDef = states[keys[i]];

    if (parentId) {
      stateDef.parentId = parentId;
    }

    let node;
    if (stateDef.doc) {
      let sub = diagram
        .append('g')
        .attr('id', stateDef.id)
        .attr('class', 'stateGroup');
      node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);

      if (first) {
        // first = false;
        sub = addTitleAndBox(sub, stateDef, altBkg);
        let boxBounds = sub.node().getBBox();
        node.width = boxBounds.width;
        node.height = boxBounds.height + conf.padding / 2;
        transformationLog[stateDef.id] = { y: conf.compositTitleSize };
      } else {
        // sub = addIdAndBox(sub, stateDef);
        let boxBounds = sub.node().getBBox();
        node.width = boxBounds.width;
        node.height = boxBounds.height;
        // transformationLog[stateDef.id] = { y: conf.compositTitleSize };
      }
    } else {
      node = drawState(diagram, stateDef, graph);
    }

    if (stateDef.note) {
      // Draw note note
      const noteDef = {
        descriptions: [],
        id: stateDef.id + '-note',
        note: stateDef.note,
        type: 'note'
      };
      const note = drawState(diagram, noteDef, graph);

      // graph.setNode(node.id, node);
      if (stateDef.note.position === 'left of') {
        graph.setNode(node.id + '-note', note);
        graph.setNode(node.id, node);
      } else {
        graph.setNode(node.id, node);
        graph.setNode(node.id + '-note', note);
      }
      // graph.setNode(node.id);
      graph.setParent(node.id, node.id + '-group');
      graph.setParent(node.id + '-note', node.id + '-group');
    } else {
      // 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.
      graph.setNode(node.id, node);
    }
  }

  logger.debug('Count=', graph.nodeCount(), graph);
  let cnt = 0;
  relations.forEach(function(relation) {
    cnt++;
    logger.debug('Setting edge', relation);
    graph.setEdge(
      relation.id1,
      relation.id2,
      {
        relation: relation,
        width: getLabelWidth(relation.title),
        height: conf.labelHeight * common.getRows(relation.title).length,
        labelpos: 'c'
      },
      'id' + cnt
    );
  });

  dagre.layout(graph);

  logger.debug('Graph after layout', graph.nodes());
  const svgElem = diagram.node();

  graph.nodes().forEach(function(v) {
    if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
      logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
      d3.select('#' + svgElem.id + ' #' + v).attr(
        'transform',
        'translate(' +
          (graph.node(v).x - graph.node(v).width / 2) +
          ',' +
          (graph.node(v).y +
            (transformationLog[v] ? transformationLog[v].y : 0) -
            graph.node(v).height / 2) +
          ' )'
      );
      d3.select('#' + svgElem.id + ' #' + v).attr(
        'data-x-shift',
        graph.node(v).x - graph.node(v).width / 2
      );
      const dividers = document.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');
      dividers.forEach(divider => {
        const parent = divider.parentElement;
        let pWidth = 0;
        let pShift = 0;
        if (parent) {
          if (parent.parentElement) pWidth = parent.parentElement.getBBox().width;
          pShift = parseInt(parent.getAttribute('data-x-shift'), 10);
          if (Number.isNaN(pShift)) {
            pShift = 0;
          }
        }
        divider.setAttribute('x1', 0 - pShift + 8);
        divider.setAttribute('x2', pWidth - pShift - 8);
      });
    } else {
      logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));
    }
  });

  let stateBox = svgElem.getBBox();

  graph.edges().forEach(function(e) {
    if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {
      logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
      drawEdge(diagram, graph.edge(e), graph.edge(e).relation);
    }
  });

  stateBox = svgElem.getBBox();

  const stateInfo = {
    id: parentId ? parentId : 'root',
    label: parentId ? parentId : 'root',
    width: 0,
    height: 0
  };

  stateInfo.width = stateBox.width + 2 * conf.padding;
  stateInfo.height = stateBox.height + 2 * conf.padding;

  logger.debug('Doc rendered', stateInfo, graph);
  return stateInfo;
};

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 stateDb from './stateDb';
6	import common from '../common/common';
7	import { parser } from './parser/stateDiagram';
8	// import idCache from './id-cache';
9	import { drawState, addTitleAndBox, drawEdge } from './shapes';
10	import { getConfig } from '../../config';
11
12	parser.yy = stateDb;	4✔
13
14	// TODO Move conf object to main conf in mermaidAPI
15	let conf;
16
17	const transformationLog = {};	4✔
18
19	export const setConf = function() {};	4✔
20
21	// Todo optimize
22
23	/**
24	* Setup arrow head and define the marker. The result is appended to the svg.
25	*/
26	const insertMarkers = function(elem) {	4✔
27	elem	×
28	.append('defs')
29	.append('marker')
30	.attr('id', 'dependencyEnd')
31	.attr('refX', 19)
32	.attr('refY', 7)
33	.attr('markerWidth', 20)
34	.attr('markerHeight', 28)
35	.attr('orient', 'auto')
36	.append('path')
37	.attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
38	};
39
40	/**
41	* Draws a flowchart in the tag with id: id based on the graph definition in text.
42	* @param text
43	* @param id
44	*/
45	export const draw = function(text, id) {	4✔
46	conf = getConfig().state;	×
47	parser.yy.clear();	×
48	parser.parse(text);	×
49	logger.debug('Rendering diagram ' + text);	×
50
51	// Fetch the default direction, use TD if none was found
52	const diagram = d3.select(`[id='${id}']`);	×
53	insertMarkers(diagram);	×
54
55	// Layout graph, Create a new directed graph
56	const graph = new graphlib.Graph({	×
57	multigraph: true,
58	compound: true,
59	// acyclicer: 'greedy',
60	rankdir: 'RL'
61	// ranksep: '20'
62	});
63
64	// Default to assigning a new object as a label for each new edge.
65	graph.setDefaultEdgeLabel(function() {	×
66	return {};	×
67	});
68
69	const rootDoc = stateDb.getRootDoc();	×
70	renderDoc(rootDoc, diagram, undefined, false);	×
71
72	const padding = conf.padding;	×
73	const bounds = diagram.node().getBBox();	×
74
75	const width = bounds.width + padding * 2;	×
76	const height = bounds.height + padding * 2;	×
77
78	// Zoom in a bit
UNCOV 79	diagram.attr('width', width * 1.75);	×
80	// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
81	diagram.attr(	×
82	'viewBox',
83	`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
84	);
85	};
86	const getLabelWidth = text => {	4✔
87	return text ? text.length * conf.fontSizeFactor : 1;	×
88	};
89
90	const renderDoc = (doc, diagram, parentId, altBkg) => {	4✔
91	// // Layout graph, Create a new directed graph
92	const graph = new graphlib.Graph({	×
93	compound: true,
94	multigraph: true
95	});
96
97	let i;
98	let edgeFreeDoc = true;	×
99	for (i = 0; i < doc.length; i++) {	×
100	if (doc[i].stmt === 'relation') {	×
101	edgeFreeDoc = false;	×
102	break;	×
103	}
104	}
105
106	// Set an object for the graph label
107	if (parentId)	×
108	graph.setGraph({	×
109	rankdir: 'LR',
110	multigraph: true,
111	compound: true,
112	// acyclicer: 'greedy',
113	ranker: 'tight-tree',
114	ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,	×
115	nodeSep: edgeFreeDoc ? 1 : 50,	×
116	isMultiGraph: true
117	// ranksep: 5,
118	// nodesep: 1
119	});
120	else {
121	graph.setGraph({	×
122	rankdir: 'TB',
123	multigraph: true,
124	compound: true,
125	// isCompound: true,
126	// acyclicer: 'greedy',
127	// ranker: 'longest-path'
128	ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,	×
129	nodeSep: edgeFreeDoc ? 1 : 50,	×
130	ranker: 'tight-tree',
131	// ranker: 'network-simplex'
132	isMultiGraph: true
133	});
134	}
135
136	// Default to assigning a new object as a label for each new edge.
137	graph.setDefaultEdgeLabel(function() {	×
138	return {};	×
139	});
140
141	stateDb.extract(doc);	×
142	const states = stateDb.getStates();	×
143	const relations = stateDb.getRelations();	×
144
145	const keys = Object.keys(states);	×
146
147	let first = true;	×
148
149	for (let i = 0; i < keys.length; i++) {	×
150	const stateDef = states[keys[i]];	×
151
152	if (parentId) {	×
153	stateDef.parentId = parentId;	×
154	}
155
156	let node;
157	if (stateDef.doc) {	×
158	let sub = diagram	×
159	.append('g')
160	.attr('id', stateDef.id)
161	.attr('class', 'stateGroup');
162	node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);	×
163
164	if (first) {	×
165	// first = false;
166	sub = addTitleAndBox(sub, stateDef, altBkg);	×
167	let boxBounds = sub.node().getBBox();	×
168	node.width = boxBounds.width;	×
169	node.height = boxBounds.height + conf.padding / 2;	×
170	transformationLog[stateDef.id] = { y: conf.compositTitleSize };	×
171	} else {
172	// sub = addIdAndBox(sub, stateDef);
173	let boxBounds = sub.node().getBBox();	×
174	node.width = boxBounds.width;	×
175	node.height = boxBounds.height;	×
176	// transformationLog[stateDef.id] = { y: conf.compositTitleSize };
177	}
178	} else {
179	node = drawState(diagram, stateDef, graph);	×
180	}
181
182	if (stateDef.note) {	×
183	// Draw note note
184	const noteDef = {	×
185	descriptions: [],
186	id: stateDef.id + '-note',
187	note: stateDef.note,
188	type: 'note'
189	};
190	const note = drawState(diagram, noteDef, graph);	×
191
192	// graph.setNode(node.id, node);
193	if (stateDef.note.position === 'left of') {	×
194	graph.setNode(node.id + '-note', note);	×
195	graph.setNode(node.id, node);	×
196	} else {
197	graph.setNode(node.id, node);	×
198	graph.setNode(node.id + '-note', note);	×
199	}
200	// graph.setNode(node.id);
201	graph.setParent(node.id, node.id + '-group');	×
202	graph.setParent(node.id + '-note', node.id + '-group');	×
203	} else {
204	// Add nodes to the graph. The first argument is the node id. The second is
205	// metadata about the node. In this case we're going to add labels to each of
206	// our nodes.
207	graph.setNode(node.id, node);	×
208	}
209	}
210
211	logger.debug('Count=', graph.nodeCount(), graph);	×
212	let cnt = 0;	×
213	relations.forEach(function(relation) {	×
214	cnt++;	×
215	logger.debug('Setting edge', relation);	×
216	graph.setEdge(	×
217	relation.id1,
218	relation.id2,
219	{
220	relation: relation,
221	width: getLabelWidth(relation.title),
222	height: conf.labelHeight * common.getRows(relation.title).length,
223	labelpos: 'c'
224	},
225	'id' + cnt
226	);
227	});
228
229	dagre.layout(graph);	×
230
231	logger.debug('Graph after layout', graph.nodes());	×
232	const svgElem = diagram.node();	×
233
234	graph.nodes().forEach(function(v) {	×
235	if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {	×
236	logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));	×
237	d3.select('#' + svgElem.id + ' #' + v).attr(	×
238	'transform',
239	'translate(' +
240	(graph.node(v).x - graph.node(v).width / 2) +
241	',' +
242	(graph.node(v).y +
243	(transformationLog[v] ? transformationLog[v].y : 0) -	×
244	graph.node(v).height / 2) +
245	' )'
246	);
247	d3.select('#' + svgElem.id + ' #' + v).attr(	×
248	'data-x-shift',
249	graph.node(v).x - graph.node(v).width / 2
250	);
251	const dividers = document.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');	×
252	dividers.forEach(divider => {	×
253	const parent = divider.parentElement;	×
254	let pWidth = 0;	×
255	let pShift = 0;	×
256	if (parent) {	×
257	if (parent.parentElement) pWidth = parent.parentElement.getBBox().width;	×
258	pShift = parseInt(parent.getAttribute('data-x-shift'), 10);	×
259	if (Number.isNaN(pShift)) {	×
260	pShift = 0;	×
261	}
262	}
263	divider.setAttribute('x1', 0 - pShift + 8);	×
264	divider.setAttribute('x2', pWidth - pShift - 8);	×
265	});
266	} else {
267	logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));	×
268	}
269	});
270
271	let stateBox = svgElem.getBBox();	×
272
273	graph.edges().forEach(function(e) {	×
274	if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {	×
275	logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));	×
276	drawEdge(diagram, graph.edge(e), graph.edge(e).relation);	×
277	}
278	});
279
280	stateBox = svgElem.getBBox();	×
281
282	const stateInfo = {	×
283	id: parentId ? parentId : 'root',	×
284	label: parentId ? parentId : 'root',	×
285	width: 0,
286	height: 0
287	};
288
289	stateInfo.width = stateBox.width + 2 * conf.padding;	×
290	stateInfo.height = stateBox.height + 2 * conf.padding;	×
291
292	logger.debug('Doc rendered', stateInfo, graph);	×
293	return stateInfo;	×
294	};
295
296	export default {
297	setConf,
298	draw
299	};

mermaid-js / mermaid / 78c8fd374987f61771b589a436227e27fd3a2829-PR-1326

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