2058

Build # 2058

Build Type

travis-ci

Committed by Ryan Ling

Commit Message

Add `er.useMaxWidth` config option

This restores the option of rendering an ERD with an absolute width,
which is consistent with the approach taken with the other diagram
types.

This logic was lost in #1324, which was probably just a small oversight:

https://github.com/mermaid-js/mermaid/commit/9199546dc#diff-7c38d27acbe0676d923bf19283671616L397-L409

The option defaults to true for backwards compatibility.

Pull Request Pull Request #1534: Add `er.useMaxWidth` config option

Run Details

1985 of 4254 branches covered (46.66%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 1 file covered. (100.0%)

4308 of 9184 relevant lines covered (46.91%)

6115.32 hits per line

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

10.08

/src/diagrams/er/erRenderer.js

import graphlib from 'graphlib';
import { line, curveBasis, select } 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', 0)
      .attr('dominant-baseline', 'middle')
      .attr('text-anchor', 'middle')
      .attr(
        'style',
        'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
      )
      .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 = line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(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 + 'px'
    )
    .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 = 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;

  if (conf.useMaxWidth) {
    svg.attr('width', '100%');
    svg.attr('style', `max-width: ${width}px;`);
  } else {
    svg.attr('height', height);
    svg.attr('width', width);
  }

  svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
}; // draw

export default {
  setConf,
  draw
};

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

mermaid-js / mermaid / 2058

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