a5af24871529da029703c34a38252bb0cb4c9377

Build # a5af24871529da029703c34a38252bb0cb4c9377

Build Type

push

github

Committed by Knut Sveidqvist

Commit Message

Merge branch 'develop' into feature/1295_generic_rendering_engine

Run Details

1666 of 3417 branches covered (48.76%)

Branch coverage included in aggregate %.

11 of 26 new or added lines in 3 files covered. (42.31%)

84 existing lines in 2 files now uncovered.

3667 of 7424 relevant lines covered (49.39%)

7468.35 hits per line

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

7.83

/src/diagrams/er/erRenderer.js

import graphlib from 'graphlib';
import * as d3 from 'd3';
import erDb from './erDb';
import erParser from './parser/erDiagram';
import dagre from 'dagre';
import { getConfig } from '../../config';
import { logger } from '../../logger';
import erMarkers from './erMarkers';

const conf = {};

/**
 * Allows the top-level API module to inject config specific to this renderer,
 * storing it in the local conf object. Note that generic config still needs to be
 * retrieved using getConfig() imported from the config module
 */
export const setConf = function(cnf) {
  const keys = Object.keys(cnf);
  for (let i = 0; i < keys.length; i++) {
    conf[keys[i]] = cnf[keys[i]];
  }
};

/**
 * Use D3 to construct the svg elements for the entities
 * @param svgNode the svg node that contains the diagram
 * @param entities The entities to be drawn
 * @param graph The graph that contains the vertex and edge definitions post-layout
 * @return The first entity that was inserted
 */
const drawEntities = function(svgNode, entities, graph) {
  const keys = Object.keys(entities);
  let firstOne;

  keys.forEach(function(id) {
    // Create a group for each entity
    const groupNode = svgNode.append('g').attr('id', id);

    firstOne = firstOne === undefined ? id : firstOne;

    // Label the entity - this is done first so that we can get the bounding box
    // which then determines the size of the rectangle
    const textId = 'entity-' + id;
    const textNode = groupNode
      .append('text')
      .attr('id', textId)
      .attr('x', 0)
      .attr('y', (conf.fontSize + 2 * conf.entityPadding) / 2)
      .attr('dominant-baseline', 'middle')
      .attr('text-anchor', 'middle')
      .attr('style', 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize)
      .text(id);

    // Calculate the width and height of the entity
    const textBBox = textNode.node().getBBox();
    const entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2);
    const entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2);

    // Make sure the text gets centred relative to the entity box
    textNode.attr('transform', 'translate(' + entityWidth / 2 + ',' + entityHeight / 2 + ')');

    // Draw the rectangle - insert it before the text so that the text is not obscured
    const rectNode = groupNode
      .insert('rect', '#' + textId)
      .attr('fill', conf.fill)
      .attr('fill-opacity', '100%')
      .attr('stroke', conf.stroke)
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', entityWidth)
      .attr('height', entityHeight);

    const rectBBox = rectNode.node().getBBox();

    // Add the entity to the graph
    graph.setNode(id, {
      width: rectBBox.width,
      height: rectBBox.height,
      shape: 'rect',
      id: id
    });
  });
  return firstOne;
}; // drawEntities

const adjustEntities = function(svgNode, graph) {
  graph.nodes().forEach(function(v) {
    if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
      svgNode
        .select('#' + v)
        .attr(
          'transform',
          'translate(' +
            (graph.node(v).x - graph.node(v).width / 2) +
            ',' +
            (graph.node(v).y - graph.node(v).height / 2) +
            ' )'
        );
    }
  });
  return;
};

const getEdgeName = function(rel) {
  return (rel.entityA + rel.roleA + rel.entityB).replace(/\s/g, '');
};

/**
 * Add each relationship to the graph
 * @param relationships the relationships to be added
 * @param g the graph
 * @return {Array} The array of relationships
 */
const addRelationships = function(relationships, g) {
  relationships.forEach(function(r) {
    g.setEdge(r.entityA, r.entityB, { relationship: r }, getEdgeName(r));
  });
  return relationships;
}; // addRelationships

let relCnt = 0;
/**
 * Draw a relationship using edge information from the graph
 * @param svg the svg node
 * @param rel the relationship to draw in the svg
 * @param g the graph containing the edge information
 * @param insert the insertion point in the svg DOM (because relationships have markers that need to sit 'behind' opaque entity boxes)
 */
const drawRelationshipFromLayout = function(svg, rel, g, insert) {
  relCnt++;

  // Find the edge relating to this relationship
  const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));

  // Get a function that will generate the line path
  const lineFunction = d3
    .line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(d3.curveBasis);

  // Insert the line at the right place
  const svgPath = svg
    .insert('path', '#' + insert)
    .attr('d', lineFunction(edge.points))
    .attr('stroke', conf.stroke)
    .attr('fill', 'none');

  // ...and with dashes if necessary
  if (rel.relSpec.relType === erDb.Identification.NON_IDENTIFYING) {
    svgPath.attr('stroke-dasharray', '8,8');
  }

  // TODO: Understand this better
  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, '\\)');
  }

  // Decide which start and end markers it needs. It may be possible to be more concise here
  // by reversing a start marker to make an end marker...but this will do for now

  // Note that the 'A' entity's marker is at the end of the relationship and the 'B' entity's marker is at the start
  switch (rel.relSpec.cardA) {
    case erDb.Cardinality.ZERO_OR_ONE:
      svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_END + ')');
      break;
    case erDb.Cardinality.ZERO_OR_MORE:
      svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_END + ')');
      break;
    case erDb.Cardinality.ONE_OR_MORE:
      svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_END + ')');
      break;
    case erDb.Cardinality.ONLY_ONE:
      svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_END + ')');
      break;
  }

  switch (rel.relSpec.cardB) {
    case erDb.Cardinality.ZERO_OR_ONE:
      svgPath.attr(
        'marker-start',
        'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_START + ')'
      );
      break;
    case erDb.Cardinality.ZERO_OR_MORE:
      svgPath.attr(
        'marker-start',
        'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_START + ')'
      );
      break;
    case erDb.Cardinality.ONE_OR_MORE:
      svgPath.attr(
        'marker-start',
        'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_START + ')'
      );
      break;
    case erDb.Cardinality.ONLY_ONE:
      svgPath.attr('marker-start', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_START + ')');
      break;
  }

  // Now label the relationship

  // Find the half-way point
  const len = svgPath.node().getTotalLength();
  const labelPoint = svgPath.node().getPointAtLength(len * 0.5);

  // Append a text node containing the label
  const labelId = 'rel' + relCnt;

  const labelNode = svg
    .append('text')
    .attr('id', labelId)
    .attr('x', labelPoint.x)
    .attr('y', labelPoint.y)
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'middle')
    .attr('style', 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize)
    .text(rel.roleA);

  // Figure out how big the opaque 'container' rectangle needs to be
  const labelBBox = labelNode.node().getBBox();

  // Insert the opaque rectangle before the text label
  svg
    .insert('rect', '#' + labelId)
    .attr('x', labelPoint.x - labelBBox.width / 2)
    .attr('y', labelPoint.y - labelBBox.height / 2)
    .attr('width', labelBBox.width)
    .attr('height', labelBBox.height)
    .attr('fill', 'white')
    .attr('fill-opacity', '85%');

  return;
};

/**
 * Draw en E-R diagram in the tag with id: id based on the text definition of the diagram
 * @param text the text of the diagram
 * @param id the unique id of the DOM node that contains the diagram
 */
export const draw = function(text, id) {
  logger.info('Drawing ER diagram');
  erDb.clear();
  const parser = erParser.parser;
  parser.yy = erDb;

  // Parse the text to populate erDb
  try {
    parser.parse(text);
  } catch (err) {
    logger.debug('Parsing failed');
  }

  // Get a reference to the svg node that contains the text
  const svg = d3.select(`[id='${id}']`);

  // Add cardinality marker definitions to the svg
  erMarkers.insertMarkers(svg, conf);

  // Now we have to construct the diagram in a specific way:
  // ---
  // 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)
  // 2. Make sure they are all added to the graph
  // 3. Add all the edges (relationships) to the graph aswell
  // 4. Let dagre do its magic to layout the graph.  This assigns:
  //    - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
  //    - the path co-ordinates for each edge
  //    But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0
  // 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by
  //    its centre point, which is obtained from the graph, and it's width and height
  // 6. And finally, create all the edges in the svg node using information from the graph
  // ---

  // Create the graph
  let g;

  // TODO: Explore directed vs undirected graphs, and how the layout is affected
  // An E-R diagram could be said to be undirected, but there is merit in setting
  // the direction from parent to child in a one-to-many as this influences graphlib to
  // put the parent above the child (does it?), which is intuitive.  Most relationships
  // in ER diagrams are one-to-many.
  g = new graphlib.Graph({
    multigraph: true,
    directed: true,
    compound: false
  })
    .setGraph({
      rankdir: conf.layoutDirection,
      marginx: 20,
      marginy: 20,
      nodesep: 100,
      edgesep: 100,
      ranksep: 100
    })
    .setDefaultEdgeLabel(function() {
      return {};
    });

  // Draw the entities (at 0,0), returning the first svg node that got
  // inserted - this represents the insertion point for relationship paths
  const firstEntity = drawEntities(svg, erDb.getEntities(), g);

  // TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above

  // Add all the relationships to the graph
  const relationships = addRelationships(erDb.getRelationships(), g);

  dagre.layout(g); // Node and edge positions will be updated

  // Adjust the positions of the entities so that they adhere to the layout
  adjustEntities(svg, g);

  // Draw the relationships
  relationships.forEach(function(rel) {
    drawRelationshipFromLayout(svg, rel, g, firstEntity);
  });

  const padding = conf.diagramPadding;

  const svgBounds = svg.node().getBBox();
  const width = svgBounds.width + padding * 2;
  const height = svgBounds.height + padding * 2;

  svg.attr('height', height);
  svg.attr('width', '100%');
  svg.attr('style', `max-width: ${width}px;`);
  svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
}; // draw

export default {
  setConf,
  draw
};

1	import graphlib from 'graphlib';
2	import * as d3 from 'd3';
3	import erDb from './erDb';
4	import erParser from './parser/erDiagram';
5	import dagre from 'dagre';
6	import { getConfig } from '../../config';
7	import { logger } from '../../logger';
8	import erMarkers from './erMarkers';
9
10	const conf = {};	2✔
11
12	/**
13	* Allows the top-level API module to inject config specific to this renderer,
14	* storing it in the local conf object. Note that generic config still needs to be
15	* retrieved using getConfig() imported from the config module
16	*/
17	export const setConf = function(cnf) {	2✔
18	const keys = Object.keys(cnf);	×
19	for (let i = 0; i < keys.length; i++) {	×
20	conf[keys[i]] = cnf[keys[i]];	×
21	}
22	};
23
24	/**
25	* Use D3 to construct the svg elements for the entities
26	* @param svgNode the svg node that contains the diagram
27	* @param entities The entities to be drawn
28	* @param graph The graph that contains the vertex and edge definitions post-layout
29	* @return The first entity that was inserted
30	*/
31	const drawEntities = function(svgNode, entities, graph) {	2✔
32	const keys = Object.keys(entities);	×
33	let firstOne;
34
35	keys.forEach(function(id) {	×
36	// Create a group for each entity
37	const groupNode = svgNode.append('g').attr('id', id);	×
38
39	firstOne = firstOne === undefined ? id : firstOne;	×
40
41	// Label the entity - this is done first so that we can get the bounding box
42	// which then determines the size of the rectangle
43	const textId = 'entity-' + id;	×
44	const textNode = groupNode	×
45	.append('text')
46	.attr('id', textId)
47	.attr('x', 0)
48	.attr('y', (conf.fontSize + 2 * conf.entityPadding) / 2)
49	.attr('dominant-baseline', 'middle')
50	.attr('text-anchor', 'middle')
51	.attr('style', 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize)
52	.text(id);
53
54	// Calculate the width and height of the entity
55	const textBBox = textNode.node().getBBox();	×
56	const entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2);	×
57	const entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2);	×
58
59	// Make sure the text gets centred relative to the entity box
60	textNode.attr('transform', 'translate(' + entityWidth / 2 + ',' + entityHeight / 2 + ')');	×
61
62	// Draw the rectangle - insert it before the text so that the text is not obscured
63	const rectNode = groupNode	×
64	.insert('rect', '#' + textId)
65	.attr('fill', conf.fill)
66	.attr('fill-opacity', '100%')
67	.attr('stroke', conf.stroke)
68	.attr('x', 0)
69	.attr('y', 0)
70	.attr('width', entityWidth)
71	.attr('height', entityHeight);
72
73	const rectBBox = rectNode.node().getBBox();	×
74
75	// Add the entity to the graph
76	graph.setNode(id, {	×
77	width: rectBBox.width,
78	height: rectBBox.height,
79	shape: 'rect',
80	id: id
81	});
82	});
83	return firstOne;	×
84	}; // drawEntities
85
86	const adjustEntities = function(svgNode, graph) {	2✔
87	graph.nodes().forEach(function(v) {	×
88	if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {	×
89	svgNode	×
90	.select('#' + v)
91	.attr(
92	'transform',
93	'translate(' +
94	(graph.node(v).x - graph.node(v).width / 2) +
95	',' +
96	(graph.node(v).y - graph.node(v).height / 2) +
97	' )'
98	);
99	}
100	});
101	return;	×
102	};
103
104	const getEdgeName = function(rel) {	2✔
105	return (rel.entityA + rel.roleA + rel.entityB).replace(/\s/g, '');	×
106	};
107
108	/**
109	* Add each relationship to the graph
110	* @param relationships the relationships to be added
111	* @param g the graph
112	* @return {Array} The array of relationships
113	*/
114	const addRelationships = function(relationships, g) {	2✔
115	relationships.forEach(function(r) {	×
116	g.setEdge(r.entityA, r.entityB, { relationship: r }, getEdgeName(r));	×
117	});
118	return relationships;	×
119	}; // addRelationships
120
121	let relCnt = 0;	2✔
122	/**
123	* Draw a relationship using edge information from the graph
124	* @param svg the svg node
125	* @param rel the relationship to draw in the svg
126	* @param g the graph containing the edge information
127	* @param insert the insertion point in the svg DOM (because relationships have markers that need to sit 'behind' opaque entity boxes)
128	*/
129	const drawRelationshipFromLayout = function(svg, rel, g, insert) {	2✔
130	relCnt++;	×
131
132	// Find the edge relating to this relationship
133	const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));	×
134
135	// Get a function that will generate the line path
136	const lineFunction = d3	×
137	.line()
138	.x(function(d) {
139	return d.x;	×
140	})
141	.y(function(d) {
142	return d.y;	×
143	})
144	.curve(d3.curveBasis);
145
146	// Insert the line at the right place
147	const svgPath = svg	×
148	.insert('path', '#' + insert)
149	.attr('d', lineFunction(edge.points))
150	.attr('stroke', conf.stroke)
151	.attr('fill', 'none');
152
153	// ...and with dashes if necessary
NEW 154	if (rel.relSpec.relType === erDb.Identification.NON_IDENTIFYING) {	×
NEW 155	svgPath.attr('stroke-dasharray', '8,8');	×
156	}
157
158	// TODO: Understand this better
159	let url = '';	×
160	if (conf.arrowMarkerAbsolute) {	×
161	url =	×
162	window.location.protocol +
163	'//' +
164	window.location.host +
165	window.location.pathname +
166	window.location.search;
167	url = url.replace(/\(/g, '\\(');	×
168	url = url.replace(/\)/g, '\\)');	×
169	}
170
171	// Decide which start and end markers it needs. It may be possible to be more concise here
172	// by reversing a start marker to make an end marker...but this will do for now
173
174	// Note that the 'A' entity's marker is at the end of the relationship and the 'B' entity's marker is at the start
NEW 175	switch (rel.relSpec.cardA) {	×
176	case erDb.Cardinality.ZERO_OR_ONE:
NEW 177	svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_END + ')');	×
UNCOV 178	break;	×
179	case erDb.Cardinality.ZERO_OR_MORE:
180	svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_END + ')');	×
181	break;	×
182	case erDb.Cardinality.ONE_OR_MORE:
183	svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_END + ')');	×
184	break;	×
185	case erDb.Cardinality.ONLY_ONE:
186	svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_END + ')');	×
187	break;	×
188	}
189
NEW 190	switch (rel.relSpec.cardB) {	×
191	case erDb.Cardinality.ZERO_OR_ONE:
UNCOV 192	svgPath.attr(	×
193	'marker-start',
194	'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_START + ')'
195	);
196	break;	×
197	case erDb.Cardinality.ZERO_OR_MORE:
198	svgPath.attr(	×
199	'marker-start',
200	'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_START + ')'
201	);
202	break;	×
203	case erDb.Cardinality.ONE_OR_MORE:
204	svgPath.attr(	×
205	'marker-start',
206	'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_START + ')'
207	);
208	break;	×
209	case erDb.Cardinality.ONLY_ONE:
NEW 210	svgPath.attr('marker-start', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_START + ')');	×
UNCOV 211	break;	×
212	}
213
214	// Now label the relationship
215
216	// Find the half-way point
217	const len = svgPath.node().getTotalLength();	×
218	const labelPoint = svgPath.node().getPointAtLength(len * 0.5);	×
219
220	// Append a text node containing the label
221	const labelId = 'rel' + relCnt;	×
222
223	const labelNode = svg	×
224	.append('text')
225	.attr('id', labelId)
226	.attr('x', labelPoint.x)
227	.attr('y', labelPoint.y)
228	.attr('text-anchor', 'middle')
229	.attr('dominant-baseline', 'middle')
230	.attr('style', 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize)
231	.text(rel.roleA);
232
233	// Figure out how big the opaque 'container' rectangle needs to be
234	const labelBBox = labelNode.node().getBBox();	×
235
236	// Insert the opaque rectangle before the text label
237	svg	×
238	.insert('rect', '#' + labelId)
239	.attr('x', labelPoint.x - labelBBox.width / 2)
240	.attr('y', labelPoint.y - labelBBox.height / 2)
241	.attr('width', labelBBox.width)
242	.attr('height', labelBBox.height)
243	.attr('fill', 'white')
244	.attr('fill-opacity', '85%');
245
246	return;	×
247	};
248
249	/**
250	* Draw en E-R diagram in the tag with id: id based on the text definition of the diagram
251	* @param text the text of the diagram
252	* @param id the unique id of the DOM node that contains the diagram
253	*/
254	export const draw = function(text, id) {	2✔
255	logger.info('Drawing ER diagram');	×
256	erDb.clear();	×
257	const parser = erParser.parser;	×
258	parser.yy = erDb;	×
259
260	// Parse the text to populate erDb
261	try {	×
262	parser.parse(text);	×
263	} catch (err) {
264	logger.debug('Parsing failed');	×
265	}
266
267	// Get a reference to the svg node that contains the text
268	const svg = d3.select(`[id='${id}']`);	×
269
270	// Add cardinality marker definitions to the svg
271	erMarkers.insertMarkers(svg, conf);	×
272
273	// Now we have to construct the diagram in a specific way:
274	// ---
275	// 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)
276	// 2. Make sure they are all added to the graph
277	// 3. Add all the edges (relationships) to the graph aswell
278	// 4. Let dagre do its magic to layout the graph. This assigns:
279	// - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
280	// - the path co-ordinates for each edge
281	// But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0
282	// 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by
283	// its centre point, which is obtained from the graph, and it's width and height
284	// 6. And finally, create all the edges in the svg node using information from the graph
285	// ---
286
287	// Create the graph
288	let g;
289
290	// TODO: Explore directed vs undirected graphs, and how the layout is affected
291	// An E-R diagram could be said to be undirected, but there is merit in setting
292	// the direction from parent to child in a one-to-many as this influences graphlib to
293	// put the parent above the child (does it?), which is intuitive. Most relationships
294	// in ER diagrams are one-to-many.
295	g = new graphlib.Graph({	×
296	multigraph: true,
297	directed: true,
298	compound: false
299	})
300	.setGraph({
301	rankdir: conf.layoutDirection,
302	marginx: 20,
303	marginy: 20,
304	nodesep: 100,
305	edgesep: 100,
306	ranksep: 100
307	})
308	.setDefaultEdgeLabel(function() {
309	return {};	×
310	});
311
312	// Draw the entities (at 0,0), returning the first svg node that got
313	// inserted - this represents the insertion point for relationship paths
314	const firstEntity = drawEntities(svg, erDb.getEntities(), g);	×
315
316	// TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above
317
318	// Add all the relationships to the graph
319	const relationships = addRelationships(erDb.getRelationships(), g);	×
320
321	dagre.layout(g); // Node and edge positions will be updated	×
322
323	// Adjust the positions of the entities so that they adhere to the layout
324	adjustEntities(svg, g);	×
325
326	// Draw the relationships
327	relationships.forEach(function(rel) {	×
328	drawRelationshipFromLayout(svg, rel, g, firstEntity);	×
329	});
330
NEW 331	const padding = conf.diagramPadding;	×
332
333	const svgBounds = svg.node().getBBox();	×
NEW 334	const width = svgBounds.width + padding * 2;	×
NEW 335	const height = svgBounds.height + padding * 2;	×
336
NEW 337	svg.attr('height', height);	×
NEW 338	svg.attr('width', '100%');	×
NEW 339	svg.attr('style', `max-width: ${width}px;`);	×
NEW 340	svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);	×
341	}; // draw
342
343	export default {
344	setConf,
345	draw
346	};

mermaid-js / mermaid / a5af24871529da029703c34a38252bb0cb4c9377

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