GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Add er.useMaxWidth config option

Browse Source 
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:

9199546dca (diff-7c38d27acbe0676d923bf19283671616L397-L409)

The option defaults to true for backwards compatibility.
This commit is contained in:
Ryan Ling 2020-07-11 18:54:26 +10:00
parent c390e9e877
commit 99cb752c71
No known key found for this signature in database
GPG Key ID: F03D4D72670827BB
3 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/Setup.md
View File

@ -705,9 +705,21 @@ T = top, B = bottom, L = left, and R = right.
| --------- | ------------------- | ------- | -------- | ------------------ |
| fontSize | Font Size in pixels | Integer | | Any Positive Value |
**Notes:**Font size (expressed as an integer representing a number of pixels)
**Notes:**Font size (expressed as an integer representing a number of pixels)
**Default value: 12 **
### useMaxWidth
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See Notes | Boolean | Required | true, false |
**Notes:**
When this flag is set to true, the diagram width is locked to 100% and
scaled based on available space. If set to false, the diagram reserves its
absolute width.
**Default value: true**.
## render
Function that renders an svg with a graph from a chart definition. Usage example below.

17
src/config.js
View File

@ -801,10 +801,23 @@ const config = {
*| --- | --- | --- | --- | --- |
*| fontSize| Font Size in pixels| Integer | | Any Positive Value |
*
***Notes:**Font size (expressed as an integer representing a number of pixels)
***Notes:**Font size (expressed as an integer representing a number of pixels)
***Default value: 12 **
*/
fontSize: 12
fontSize: 12,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See Notes | Boolean | Required | true, false |
*
***Notes:**
*When this flag is set to true, the diagram width is locked to 100% and
*scaled based on available space. If set to false, the diagram reserves its
*absolute width.
***Default value: true**.
*/
useMaxWidth: true
}
};
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;

11
src/diagrams/er/erRenderer.js
View File

@ -339,9 +339,14 @@ export const draw = function(text, id) {
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;`);
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